├── .gitignore ├── .nvmrc ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── OTKit ├── otkit-borders │ ├── LICENSE │ ├── package.json │ └── token.yml ├── otkit-breakpoints │ ├── LICENSE │ ├── package.json │ └── token.yml ├── otkit-colors │ ├── LICENSE │ ├── package.json │ └── token.yml ├── otkit-grids │ ├── LICENSE │ ├── package.json │ └── token.yml ├── otkit-icons │ ├── ic_access.svg │ ├── ic_accessibility.svg │ ├── ic_add_photo.svg │ ├── ic_advance.svg │ ├── ic_amenities.svg │ ├── ic_appetizer_fill.svg │ ├── ic_arrived_fill.svg │ ├── ic_arrow_up.svg │ ├── ic_award.svg │ ├── ic_back.svg │ ├── ic_badge.svg │ ├── ic_bell.svg │ ├── ic_birthday.svg │ ├── ic_birthday_fill.svg │ ├── ic_block_reservation.svg │ ├── ic_blocked_waitlist.svg │ ├── ic_booking.svg │ ├── ic_bookmark.svg │ ├── ic_bookmark_selected.svg │ ├── ic_bussing_needed_fill.svg │ ├── ic_calendar.svg │ ├── ic_camera.svg │ ├── ic_cancel@.svg │ ├── ic_cancelled_fill.svg │ ├── ic_catering.svg │ ├── ic_champagne_glasses.svg │ ├── ic_champagne_glasses_fill.svg │ ├── ic_change.svg │ ├── ic_check_dropped_fill.svg │ ├── ic_checkbox.svg │ ├── ic_checkbox_indeterminate.svg │ ├── ic_checkbox_selected.svg │ ├── ic_checkmark.svg │ ├── ic_chef.svg │ ├── ic_cleared_fill.svg │ ├── ic_clock.svg │ ├── ic_clock_fill.svg │ ├── ic_close.svg │ ├── ic_contact.svg │ ├── ic_cross_street.svg │ ├── ic_cuisine.svg │ ├── ic_delete.svg │ ├── ic_description.svg │ ├── ic_description_fill.svg │ ├── ic_dessert_fill.svg │ ├── ic_dietary.svg │ ├── ic_dining_style.svg │ ├── ic_distribute_horizontal.svg │ ├── ic_distribute_vertical.svg │ ├── ic_dollar.svg │ ├── ic_down.svg │ ├── ic_download.svg │ ├── ic_dress_code.svg │ ├── ic_edit.svg │ ├── ic_email.svg │ ├── ic_entertainment.svg │ ├── ic_entree_fill.svg │ ├── ic_expand.svg │ ├── ic_experiences.svg │ ├── ic_export.svg │ ├── ic_facebook.svg │ ├── ic_facebook_circle.svg │ ├── ic_favorite.svg │ ├── ic_favorite_filled.svg │ ├── ic_filter.svg │ ├── ic_fit_screen.svg │ ├── ic_food_drink_fill.svg │ ├── ic_gift_card.svg │ ├── ic_glass_fill.svg │ ├── ic_google.svg │ ├── ic_grab.svg │ ├── ic_groups.svg │ ├── ic_guest_requests_fill.svg │ ├── ic_hamburger.svg │ ├── ic_hide.svg │ ├── ic_information.svg │ ├── ic_instagram.svg │ ├── ic_integrations.svg │ ├── ic_invited_guest_accepted.svg │ ├── ic_invited_guest_declined.svg │ ├── ic_keyboard.svg │ ├── ic_language.svg │ ├── ic_left.svg │ ├── ic_left_message_fill.svg │ ├── ic_lifetime_guest_spend.svg │ ├── ic_lightbulb.svg │ ├── ic_link.svg │ ├── ic_list.svg │ ├── ic_location.svg │ ├── ic_location_dark.svg │ ├── ic_map.svg │ ├── ic_megaphone.svg │ ├── ic_menu.svg │ ├── ic_menu_fill.svg │ ├── ic_menu_partial.svg │ ├── ic_merge.svg │ ├── ic_message_fill.svg │ ├── ic_message_sent.svg │ ├── ic_messaging.svg │ ├── ic_messaging_fill.svg │ ├── ic_metric_change_down.svg │ ├── ic_metric_change_up.svg │ ├── ic_minus.svg │ ├── ic_navigation_arrow_fill.svg │ ├── ic_negative.svg │ ├── ic_neighborhood.svg │ ├── ic_new_window.svg │ ├── ic_no-show_fill.svg │ ├── ic_no_payment.svg │ ├── ic_noise_level.svg │ ├── ic_notes_fill.svg │ ├── ic_offline.svg │ ├── ic_online.svg │ ├── ic_ot_reservation_fill.svg │ ├── ic_outdoors.svg │ ├── ic_overflow.svg │ ├── ic_owneroperator.svg │ ├── ic_paid_fill.svg │ ├── ic_pan.svg │ ├── ic_parking_details.svg │ ├── ic_partially_arrived_fill.svg │ ├── ic_partially_seated_fill.svg │ ├── ic_party_count.svg │ ├── ic_party_count_fill.svg │ ├── ic_payment.svg │ ├── ic_person.svg │ ├── ic_phone.svg │ ├── ic_phone_fill.svg │ ├── ic_photos.svg │ ├── ic_pickup.svg │ ├── ic_plus.svg │ ├── ic_points.svg │ ├── ic_premium_access.svg │ ├── ic_price_range.svg │ ├── ic_print.svg │ ├── ic_privacy.svg │ ├── ic_private_dining.svg │ ├── ic_promoted_inventory_fill.svg │ ├── ic_public_transit.svg │ ├── ic_question.svg │ ├── ic_radio.svg │ ├── ic_radio_selected.svg │ ├── ic_redo.svg │ ├── ic_referral.svg │ ├── ic_report.svg │ ├── ic_reservation.svg │ ├── ic_reservation_waitlist.svg │ ├── ic_reservation_waitlist_notification.svg │ ├── ic_reveal.svg │ ├── ic_review.svg │ ├── ic_right.svg │ ├── ic_rotate_ccw.svg │ ├── ic_rotate_cw.svg │ ├── ic_scarcity.svg │ ├── ic_search.svg │ ├── ic_seat.svg │ ├── ic_seated_fill.svg │ ├── ic_select.svg │ ├── ic_service_bell_fill.svg │ ├── ic_settings.svg │ ├── ic_share.svg │ ├── ic_shield_line.svg │ ├── ic_shift_notes.svg │ ├── ic_shift_notes_notification.svg │ ├── ic_social_proof.svg │ ├── ic_sort.svg │ ├── ic_special_events.svg │ ├── ic_specials.svg │ ├── ic_specials_fill.svg │ ├── ic_star.svg │ ├── ic_step1_fill.svg │ ├── ic_step2_fill.svg │ ├── ic_success.svg │ ├── ic_table_categories.svg │ ├── ic_tablecombo.svg │ ├── ic_tag.svg │ ├── ic_thumbs_up.svg │ ├── ic_ticket.svg │ ├── ic_ticketing_fill.svg │ ├── ic_toilet.svg │ ├── ic_toolbox.svg │ ├── ic_turn_time.svg │ ├── ic_twitter.svg │ ├── ic_unavailable.svg │ ├── ic_undo.svg │ ├── ic_up.svg │ ├── ic_upvote.svg │ ├── ic_upvote_selected.svg │ ├── ic_verified_fill.svg │ ├── ic_vip_fill.svg │ ├── ic_vitruvian.svg │ ├── ic_vitruvian_fill.svg │ ├── ic_waitlist.svg │ ├── ic_walking_fill.svg │ ├── ic_warning.svg │ ├── ic_warning_round.svg │ ├── ic_warning_timeline.svg │ ├── ic_zoom_in.svg │ ├── ic_zoom_out.svg │ └── package.json ├── otkit-shadows │ ├── LICENSE │ ├── package.json │ └── token.yml ├── otkit-spacing │ ├── LICENSE │ ├── package.json │ └── token.yml └── otkit-typography-desktop │ ├── LICENSE │ ├── package.json │ └── token.yml ├── OTTheme ├── ottheme-colors │ ├── LICENSE │ ├── package.json │ └── token.yml └── ottheme-spacing │ ├── LICENSE │ ├── package.json │ └── token.yml ├── README.md ├── dependencies.yml ├── lerna.json ├── package.json ├── style-guide ├── README.md ├── gatsby-config.js ├── package.json ├── postcss.config.js ├── src │ ├── assets │ │ ├── amazeDesigners.png │ │ ├── documentation.png │ │ ├── handoverBanner.png │ │ ├── logo.svg │ │ ├── phase1.png │ │ ├── phase2.png │ │ ├── phase3.png │ │ ├── phase4.png │ │ ├── phase5.png │ │ ├── storyMapping.png │ │ └── storyMapping2.png │ ├── components │ │ ├── design-nav │ │ │ └── design-nav.js │ │ ├── design-system-partials │ │ │ ├── otkit-borders.js │ │ │ ├── otkit-breakpoints.js │ │ │ ├── otkit-colors.js │ │ │ ├── otkit-grids.js │ │ │ ├── otkit-icons-theme.js │ │ │ ├── otkit-icons.js │ │ │ ├── otkit-shadows.js │ │ │ ├── otkit-spacing.js │ │ │ └── otkit-typography.js │ │ ├── handover-process │ │ │ ├── Bullseye.js │ │ │ ├── PhaseBox.js │ │ │ ├── PhaseFive.js │ │ │ ├── PhaseFour.js │ │ │ ├── PhaseHeader.js │ │ │ ├── PhaseOne.js │ │ │ ├── PhaseThree.js │ │ │ ├── PhaseTwo.js │ │ │ ├── Quote.js │ │ │ └── ResourceBox.js │ │ ├── layout │ │ │ └── layout.js │ │ └── section-header │ │ │ ├── index.js │ │ │ └── styles.module.scss │ ├── hocs │ │ └── withLayout.js │ ├── html.js │ ├── pages │ │ ├── 404.js │ │ ├── handover-process.js │ │ ├── index.js │ │ └── otkit │ │ │ ├── borders.js │ │ │ ├── breakpoints.js │ │ │ ├── colors.js │ │ │ ├── grids.js │ │ │ ├── icons-theme.js │ │ │ ├── icons.js │ │ │ ├── shadows.js │ │ │ ├── spacing.js │ │ │ └── typography.js │ └── styles │ │ ├── fonts.module.scss │ │ ├── handover.module.scss │ │ ├── index.module.scss │ │ ├── otkit-colors.module.scss │ │ ├── otkit-icons.module.scss │ │ ├── otkit-typography-desktop.module.scss │ │ ├── typography.module.scss │ │ └── variables.module.scss └── static │ ├── constants.js │ ├── favicon-32.png │ └── handover-process.js └── utils ├── automatic-release ├── index.js ├── lib │ ├── defineVersion │ │ ├── diffToSemver.js │ │ ├── index.js │ │ └── packagePathResolver.js │ ├── getTokenList.js │ ├── installPackages.js │ ├── process.js │ ├── publishPackage.js │ ├── pushChanges.js │ ├── runCmd.js │ └── versionAddCommitTagPackage.js └── test │ ├── __snapshots__ │ └── process.test.js.snap │ ├── diffToSemver.test.js │ ├── packagePathResolver.test.js │ └── process.test.js ├── build-icons ├── index.js ├── lib │ ├── config.js │ ├── generateThemeableTokenFile.js │ ├── generateTokenFile.js │ ├── getIconData.js │ ├── getIconFileList.js │ ├── processIcon.js │ ├── processIconHelpers.js │ └── writeToken.js └── test │ ├── generateThemeableTokenFile.test.js │ ├── generateTokenFile.test.js │ ├── getIconData.test.js │ ├── getIconFileList.test.js │ ├── processIcon.test.js │ └── writeToken.test.js ├── build-typography └── index.js └── deploy-styleguide └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | OTKit/**/*.css 5 | OTKit/**/*.scss 6 | OTKit/**/*.cssmodules.css 7 | OTKit/**/*.common.js 8 | OTTheme/**/*.scss 9 | OTTheme/**/*.cssmodules.css 10 | OTTheme/**/*.common.js 11 | .cache 12 | public 13 | OTKit/otkit-icons/token.yml 14 | OTKit/otkit-icons/token.theme.yml 15 | package-lock.json 16 | yarn.lock 17 | utils/automatic-release/tempNpm/package.json 18 | .idea 19 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 12 -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | matrix: 4 | include: 5 | - node_js: "12" 6 | 7 | script: 8 | npm run automatic-release-test; 9 | 10 | after_success: 11 | - if [ $TRAVIS_PULL_REQUEST == false ] && [ $TRAVIS_BRANCH == "master" ]; then 12 | npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN -q; 13 | git config --global user.name ${GH_USERNAME}; 14 | git config --global user.email ${GH_EMAIL}; 15 | git checkout master; 16 | git remote set-url origin https://${GH_TOKEN}@github.com/opentable/design-tokens.git; 17 | npm run automatic-release; 18 | fi 19 | 20 | notifications: 21 | email: false -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 OpenTable, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /OTKit/otkit-borders/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 OpenTable, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /OTKit/otkit-borders/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "otkit-borders", 3 | "version": "1.0.3", 4 | "description": "OpenTable borders design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "license": "MIT", 16 | "publishConfig": { 17 | "registry": "https://registry.npmjs.org" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /OTKit/otkit-borders/token.yml: -------------------------------------------------------------------------------- 1 | props: 2 | # Used in containers, cards and modals 3 | # ============================================= 4 | border-radius-small: 5 | value: "4px" 6 | 7 | global: 8 | platform: "core" 9 | type: "border" 10 | category: "border" 11 | -------------------------------------------------------------------------------- /OTKit/otkit-breakpoints/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 OpenTable, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /OTKit/otkit-breakpoints/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "otkit-breakpoints", 3 | "version": "4.0.2", 4 | "description": "OpenTable breakpoints design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "license": "MIT", 16 | "publishConfig": { 17 | "registry": "https://registry.npmjs.org" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /OTKit/otkit-breakpoints/token.yml: -------------------------------------------------------------------------------- 1 | props: 2 | breakpoint-desktop-min: 3 | value: "1056px" 4 | breakpoint-tablet-max: 5 | value: "1055px" 6 | breakpoint-tablet-min: 7 | value: "768px" 8 | breakpoint-mobile-max: 9 | value: "767px" 10 | 11 | global: 12 | platform: "core" 13 | type: "breakpoint" 14 | category: "breakpoint" 15 | -------------------------------------------------------------------------------- /OTKit/otkit-colors/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 OpenTable, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /OTKit/otkit-colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "otkit-colors", 3 | "version": "4.0.0", 4 | "description": "OpenTable colors design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "license": "MIT", 16 | "publishConfig": { 17 | "registry": "https://registry.npmjs.org" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /OTKit/otkit-grids/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 OpenTable, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /OTKit/otkit-grids/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "otkit-grids", 3 | "version": "1.0.0", 4 | "description": "OpenTable grids design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "license": "MIT", 16 | "publishConfig": { 17 | "registry": "https://registry.npmjs.org" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /OTKit/otkit-grids/token.yml: -------------------------------------------------------------------------------- 1 | props: 2 | # These grid values are for viewports between 768px and 1023px. 3 | # These grid values are for viewports wider than 1024px. 4 | # ============================================= 5 | margin-large: 6 | value: "32px" 7 | gutter-large: 8 | value: "16px" 9 | 10 | # These grid values are for viewports between 320px and 767px. 11 | # ============================================= 12 | margin-small: 13 | value: "24px" 14 | gutter-small: 15 | value: "12px" 16 | 17 | global: 18 | platform: "core" 19 | type: "grid" 20 | category: "grid" 21 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_access.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_advance.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_advance 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_appetizer_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_appetizer_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_arrived_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_arrived_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_arrow_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_award.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_award 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_back 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_bookmark 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_bookmark_selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_bookmark_selected 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_calendar 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_camera.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_camera 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_cancel@.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_cancel@1x 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_catering.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_catering 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_check_dropped_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_check_dropped_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_checkbox 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_checkbox_indeterminate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_checkbox_indeterminate 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_checkbox_selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_checkbox_selected 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/line/ic_checkmark/Light UI - Default 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_chef.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_clock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_clock 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_clock_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_clock_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_close 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_cuisine.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_cuisine 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_delete 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_description.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_description 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_description_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_distribute_horizontal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_distribute_vertical.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_down 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_download 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_edit 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_email 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_entertainment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_entertainment 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_entree_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_entree_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_expand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_expand 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_facebook_circle.svg: -------------------------------------------------------------------------------- 1 | 2 | Social/Facebook Circle 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_favorite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_favorite 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_favorite_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_favorite_filled 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_fit_screen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_gift_card.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_gift_card 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_glass_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_grab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_guest_requests_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_hamburger 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_information.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_information 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_instagram 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_integrations.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_invited_guest_accepted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_keyboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_left 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_lifetime_guest_spend.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_link 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_list 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_location 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_location_dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_megaphone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_menu 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_menu_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_menu_partial.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_message_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_message_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_message_sent.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Line/ic_message_sent 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_messaging.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_messaging_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_metric_change_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_metric_change_down 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_metric_change_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_metric_change_up 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_minus 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_navigation_arrow_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_negative.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_negative 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_new_window.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_new_window 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_no-show_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_no-show_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_no_payment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_noise_level.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_noise_level 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_online.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_outdoors.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_overflow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_overflow 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_owneroperator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_paid_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_paid_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_pan.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_parking_details.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_parking_details 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_partially_arrived_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_partially_arrived_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_partially_seated_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_partially_seated_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_payment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_payment 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_phone_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/line/ic_phone_fill/Light UI/Default 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_pickup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_plus 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_points.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_points 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_premium_access.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_price_range.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_price_range 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_print.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_print 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_privacy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_privacy 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_private_dining.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_public_transit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_public_transit 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_question.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_question 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_radio 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_radio_selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_radio_selected 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_referral.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_report.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_report 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_reservation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_reservation_waitlist.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_reservation_waitlist_notification.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_review.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_review 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_right 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_rotate_ccw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_rotate_cw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_search 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_seat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Line/ic_seat 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_seated_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Fill/ic_seated_fill 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_select.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_service_bell_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/fill/ic_service_bell_fill/Light UI - Default@1x 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_shield_line.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_social_proof.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_social_proof 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_special_events.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_special_events 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_step1_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/navigation/ic_step1_fill/Light UI - Default 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_step2_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/navigation/ic_step2_fill/Light UI - Default 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_success.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_success 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_table_categories.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_table_categories 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_thumbs_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_thumbs_up 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_toilet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_toilet 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_toolbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_toolbox 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_unavailable.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Line/ic_unavailable 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_up 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_upvote.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_upvote 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_upvote_selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/ic_upvote_selected 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_verified_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_walking_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_warning_round.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_warning_timeline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_zoom_in.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/ic_zoom_out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /OTKit/otkit-icons/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "otkit-icons", 3 | "version": "9.24.0", 4 | "description": "OpenTable icons design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "license": "MIT", 16 | "publishConfig": { 17 | "registry": "https://registry.npmjs.org" 18 | }, 19 | "files": [ 20 | "package.json", 21 | "token.yml", 22 | "token.scss", 23 | "token.cssmodules.css", 24 | "token.common.js", 25 | "token.theme.yml", 26 | "token.theme.scss", 27 | "token.theme.cssmodules.css", 28 | "token.theme.common.js" 29 | ], 30 | "main": "token.common.js" 31 | } 32 | -------------------------------------------------------------------------------- /OTKit/otkit-shadows/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 OpenTable, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /OTKit/otkit-shadows/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "otkit-shadows", 3 | "version": "1.0.4", 4 | "description": "OpenTable box & text shadows design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "license": "MIT", 16 | "publishConfig": { 17 | "registry": "https://registry.npmjs.org" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /OTKit/otkit-shadows/token.yml: -------------------------------------------------------------------------------- 1 | props: 2 | # Used in restaurant profile; generic containers 3 | # ============================================= 4 | box-shadow-container: 5 | value: "0px 2px 4px rgba(45, 51, 63, .2)" 6 | 7 | global: 8 | platform: "core" 9 | type: "shadow" 10 | category: "shadow" 11 | -------------------------------------------------------------------------------- /OTKit/otkit-spacing/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 OpenTable, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /OTKit/otkit-spacing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "otkit-spacing", 3 | "version": "2.1.0", 4 | "description": "OpenTable spacing design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "license": "MIT", 16 | "publishConfig": { 17 | "registry": "https://registry.npmjs.org" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /OTKit/otkit-spacing/token.yml: -------------------------------------------------------------------------------- 1 | props: 2 | spacing-xsmall: 3 | value: "4px" 4 | spacing-small: 5 | value: "8px" 6 | spacing-medium: 7 | value: "16px" 8 | spacing-large: 9 | value: "32px" 10 | spacing-xlarge: 11 | value: "48px" 12 | spacing-xxlarge: 13 | value: "64px" 14 | 15 | global: 16 | platform: "core" 17 | type: "spacing" 18 | category: "spacing" 19 | -------------------------------------------------------------------------------- /OTKit/otkit-typography-desktop/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 OpenTable, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /OTKit/otkit-typography-desktop/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "otkit-typography-desktop", 3 | "version": "3.5.0", 4 | "description": "OpenTable desktop web typography design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "license": "MIT", 16 | "publishConfig": { 17 | "registry": "https://registry.npmjs.org" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /OTTheme/ottheme-colors/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 OpenTable, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /OTTheme/ottheme-colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ottheme-colors", 3 | "version": "1.2.3", 4 | "description": "OpenTable colors design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "homepage": "https://github.com/opentable/design-tokens/tree/master/OTTheme/ottheme-colors#readme", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "registry": "https://registry.npmjs.org" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /OTTheme/ottheme-spacing/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 OpenTable, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /OTTheme/ottheme-spacing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ottheme-spacing", 3 | "version": "1.0.7", 4 | "description": "OpenTable spacing design token", 5 | "author": { 6 | "email": "design-tokens@opentable.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/opentable/design-tokens.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/opentable/design-tokens/issues" 14 | }, 15 | "homepage": "https://github.com/opentable/design-tokens/tree/master/OTTheme/ottheme-spacing#readme", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "registry": "https://registry.npmjs.org" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /OTTheme/ottheme-spacing/token.yml: -------------------------------------------------------------------------------- 1 | props: 2 | spacing: 3 | value: "1rem" 4 | spacing-xxsmall: 5 | value: "0.25rem" 6 | spacing-small: 7 | value: "0.5rem" 8 | spacing-smaller: 9 | value: "0.75rem" 10 | spacing-medium: 11 | value: "1.5rem" 12 | spacing-xmedium: 13 | value: "1.75rem" 14 | spacing-large: 15 | value: "2rem" 16 | spacing-xlarge: 17 | value: "2.2rem" 18 | spacing-xxlarge: 19 | value: "3rem" 20 | spacing-xxxlarge: 21 | value: "4rem" 22 | 23 | spacing-list: 24 | value: "0.8rem" 25 | 26 | column-spacing: 27 | value: "1rem" 28 | column-gutter: 29 | value: "2rem" 30 | column-padding-tablet: 31 | value: "1.25rem" 32 | container-max-width: 33 | value: "100rem" 34 | row-max-width: 35 | value: "80rem" 36 | base-line-height: 37 | value: "150%" 38 | 39 | global: 40 | type: "spacing" 41 | category: "spacing" -------------------------------------------------------------------------------- /dependencies.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | dependencies: 3 | 4 | - type: js 5 | path: / 6 | manifest_updates: 7 | filters: 8 | - name: ".*" 9 | versions: "Y.Y.Y" 10 | 11 | - type: js 12 | path: style-guide 13 | 14 | settings: 15 | constraint_prefix: '^' 16 | manifest_updates: 17 | filters: 18 | - name: ".*" 19 | versions: "Y.Y.Y" 20 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0", 3 | "packages": [ 4 | "OTTheme/*", 5 | "OTKit/*", 6 | "style-guide" 7 | ], 8 | "version": "independent", 9 | "npmClientArgs": ["--no-package-lock"] 10 | } 11 | -------------------------------------------------------------------------------- /style-guide/README.md: -------------------------------------------------------------------------------- 1 | # OTKit Style Guide 2 | 3 | This is where our visual style guide will live. 4 | 5 | ## Getting started 6 | 7 | To run the style guide, run the following commands at root level of this repo. Make sure you meet the Node and npm version requirements. 8 | ```bash 9 | # Install the dependencies 10 | npm install 11 | # Build the OTTheme & OTKit tokens 12 | npm run build 13 | # Build the tokens for the style guide 14 | npm run build-styleguide 15 | ``` 16 | 17 | To view the style guide locally, run the following commands inside this folder: 18 | ```bash 19 | npm run develop 20 | ``` 21 | 22 | To view the style guide locally for production preview, run the following commands inside this folder: 23 | ```bash 24 | # Perform an optimized production build by generating static HTML and per-route JavaScript code bundles 25 | npm run build 26 | # Starts a local HTML server for testing 27 | npm run serve 28 | ``` 29 | -------------------------------------------------------------------------------- /style-guide/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/design-tokens', // as in https://opentable.github.io/design-tokens 3 | plugins: [ 4 | 'gatsby-plugin-sass', 5 | 'gatsby-plugin-postcss' 6 | ], 7 | siteMetadata: { 8 | title: 'OTKit Style Guide', 9 | siteUrl: 'https://opentable.github.io/design-tokens', 10 | description: 'See OTKit design tokens and how to use them' 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /style-guide/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-guide", 3 | "private": true, 4 | "version": "0.0.9", 5 | "description": "Static Style Guide for OpenTable's Design-Tokens", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/opentable/design-tokens" 10 | }, 11 | "homepage": "https://opentable.github.io/design-tokens/", 12 | "scripts": { 13 | "develop": "gatsby develop", 14 | "build": "gatsby build --prefix-paths", 15 | "serve": "gatsby serve" 16 | }, 17 | "dependencies": { 18 | "chroma-js": "^2.1.0", 19 | "gatsby": "^2.24.37", 20 | "lodash": "^4.17.5", 21 | "otkit-borders": "^1.0.3", 22 | "otkit-breakpoints": "^4.0.2", 23 | "otkit-colors": "^4.0.0", 24 | "otkit-grids": "^1.0.0", 25 | "otkit-icons": "^9.0.1", 26 | "otkit-shadows": "^1.0.3", 27 | "otkit-spacing": "^2.1.0", 28 | "otkit-typography-desktop": "^3.3.0", 29 | "react": "^16.13.1", 30 | "react-dom": "^16.13.1" 31 | }, 32 | "devDependencies": { 33 | "gatsby-plugin-postcss": "^2.3.11", 34 | "gatsby-plugin-sass": "^2.3.12", 35 | "node-sass": "^4.14.1", 36 | "postcss-browser-reporter": "^0.6.0", 37 | "postcss-import": "^12.0.1", 38 | "postcss-preset-env": "^6.7.0", 39 | "postcss-reporter": "^6.0.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /style-guide/postcss.config.js: -------------------------------------------------------------------------------- 1 | const postcssPresetEnv = require(`postcss-preset-env`); 2 | const postcssImport = require(`postcss-import`); 3 | const postcssBrowserReporter = require(`postcss-browser-reporter`); 4 | const postcssReporter = require(`postcss-reporter`); 5 | 6 | module.exports = () => ({ 7 | plugins: [ 8 | postcssImport(), 9 | postcssPresetEnv(), 10 | postcssBrowserReporter(), 11 | postcssReporter(), 12 | ], 13 | }) 14 | 15 | -------------------------------------------------------------------------------- /style-guide/src/assets/amazeDesigners.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/amazeDesigners.png -------------------------------------------------------------------------------- /style-guide/src/assets/documentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/documentation.png -------------------------------------------------------------------------------- /style-guide/src/assets/handoverBanner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/handoverBanner.png -------------------------------------------------------------------------------- /style-guide/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /style-guide/src/assets/phase1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/phase1.png -------------------------------------------------------------------------------- /style-guide/src/assets/phase2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/phase2.png -------------------------------------------------------------------------------- /style-guide/src/assets/phase3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/phase3.png -------------------------------------------------------------------------------- /style-guide/src/assets/phase4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/phase4.png -------------------------------------------------------------------------------- /style-guide/src/assets/phase5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/phase5.png -------------------------------------------------------------------------------- /style-guide/src/assets/storyMapping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/storyMapping.png -------------------------------------------------------------------------------- /style-guide/src/assets/storyMapping2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/src/assets/storyMapping2.png -------------------------------------------------------------------------------- /style-guide/src/components/design-nav/design-nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'gatsby'; 3 | import styles from '../../styles/index.module.scss'; 4 | 5 | const isPartiallyActive = ({ isCurrent }) => { 6 | return isCurrent ? { className: styles.linkActive } : null; 7 | }; 8 | const NavLink = props => ( 9 |
10 | 11 | {props.children} 12 | 13 |
14 | ); 15 | 16 | export default () => ( 17 |
18 |

DESIGN TOKENS

19 | All Design Tokens 20 | Colors 21 | Typography 22 | Grids 23 | Spacing 24 | Borders 25 | Breakpoints 26 | Shadows 27 | Icons 28 | Icons (theme) 29 |
30 | ); 31 | -------------------------------------------------------------------------------- /style-guide/src/components/design-system-partials/otkit-borders.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import token from 'otkit-borders/token.common'; 4 | 5 | import SectionHeader from '../section-header'; 6 | import styles from '../../styles/index.module.scss'; 7 | 8 | const Borders = () => { 9 | var tokens = _.toPairsIn(token); 10 | 11 | tokens = tokens.map((token, index) => { 12 | return ( 13 |
14 | {_.kebabCase(token[0])}: {token[1]} 15 |
16 | ); 17 | }); 18 | return ( 19 |
20 | 21 | {tokens} 22 |
23 | ); 24 | }; 25 | 26 | export default Borders; 27 | -------------------------------------------------------------------------------- /style-guide/src/components/design-system-partials/otkit-breakpoints.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import token from 'otkit-breakpoints/token.common'; 4 | 5 | import SectionHeader from '../section-header'; 6 | import styles from '../../styles/index.module.scss'; 7 | 8 | const Breakpoints = () => { 9 | var tokens = _.toPairsIn(token); 10 | 11 | tokens = tokens.map((token, index) => { 12 | return ( 13 |
14 | {_.kebabCase(token[0])}: {token[1]} 15 |
16 | ); 17 | }); 18 | return ( 19 |
20 | 21 | {tokens} 22 |
23 | ); 24 | }; 25 | 26 | export default Breakpoints; 27 | -------------------------------------------------------------------------------- /style-guide/src/components/design-system-partials/otkit-grids.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import token from 'otkit-grids/token.common'; 4 | 5 | import SectionHeader from '../section-header'; 6 | import styles from '../../styles/index.module.scss'; 7 | 8 | const Grids = () => { 9 | var tokens = _.toPairsIn(token); 10 | 11 | tokens = tokens.map((token, index) => { 12 | return ( 13 |
14 | {_.kebabCase(token[0])}: {token[1]} 15 |
16 | ); 17 | }); 18 | return ( 19 |
20 | 21 | {tokens} 22 |
23 | ); 24 | }; 25 | 26 | export default Grids; 27 | -------------------------------------------------------------------------------- /style-guide/src/components/design-system-partials/otkit-shadows.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import token from 'otkit-shadows/token.common'; 4 | 5 | import SectionHeader from '../section-header'; 6 | import styles from '../../styles/index.module.scss'; 7 | 8 | const Shadows = () => { 9 | var tokens = _.toPairsIn(token); 10 | 11 | tokens = tokens.map((token, index) => { 12 | return ( 13 |
14 | {_.kebabCase(token[0])}: {token[1]} 15 |
16 | ); 17 | }); 18 | return ( 19 |
20 | 21 | {tokens} 22 |
23 | ); 24 | }; 25 | 26 | export default Shadows; 27 | -------------------------------------------------------------------------------- /style-guide/src/components/design-system-partials/otkit-spacing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import token from 'otkit-spacing/token.common'; 4 | 5 | import SectionHeader from '../section-header'; 6 | import styles from '../../styles/index.module.scss'; 7 | 8 | const Spacing = () => { 9 | var tokens = _.toPairsIn(token); 10 | 11 | tokens = tokens.map((token, index) => { 12 | return ( 13 |
14 | {_.kebabCase(token[0])}: {token[1]} 15 |
16 | ); 17 | }); 18 | 19 | return ( 20 |
21 | 22 | {tokens} 23 |
24 | ); 25 | }; 26 | 27 | export default Spacing; 28 | -------------------------------------------------------------------------------- /style-guide/src/components/handover-process/PhaseBox.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../../styles/handover.module.scss'; 3 | 4 | export default ({illustration, description, title, addHashRoute}) => ( 5 |
6 | Phase illustration 7 |
{title}
8 |
{description}
9 |
10 | ) 11 | -------------------------------------------------------------------------------- /style-guide/src/components/handover-process/PhaseFive.js: -------------------------------------------------------------------------------- 1 | import styles from "../../styles/handover.module.scss"; 2 | import copy from "../../../static/handover-process"; 3 | import React from "react"; 4 | import PhaseHeader from "./PhaseHeader"; 5 | 6 | export default ({addHashRoute}) => ( 7 |
8 | addHashRoute('phase5')} 10 | phase='phase5' 11 | /> 12 | 13 |
{copy['phase5.subheader1']}
14 |

{copy['phase5.description1']}

15 |
16 | ); 17 | -------------------------------------------------------------------------------- /style-guide/src/components/handover-process/PhaseFour.js: -------------------------------------------------------------------------------- 1 | import styles from "../../styles/handover.module.scss"; 2 | import copy from "../../../static/handover-process"; 3 | import React from "react"; 4 | import PhaseHeader from "./PhaseHeader"; 5 | import ResourceBox from "./ResourceBox"; 6 | 7 | export default ({addHashRoute}) => ( 8 |
9 | addHashRoute('phase4')} 11 | phase='phase4' 12 | /> 13 | 14 |
{copy['phase4.subheader1']}
15 |

16 | Ensure the code is close to design, closely reviewing interactions and visual design. Design should document 17 | visual or interaction bugs in Jira or create a design QA document (example). Engineering and design should 18 | each prioritize tasks to determine tasks to do before or after GA. 19 |

20 | 21 | 22 |
23 | ); 24 | -------------------------------------------------------------------------------- /style-guide/src/components/handover-process/PhaseHeader.js: -------------------------------------------------------------------------------- 1 | import styles from "../../styles/handover.module.scss"; 2 | import copy from "../../../static/handover-process"; 3 | import React from "react"; 4 | import { images } from "../../../static/constants"; 5 | 6 | export default ({addHashRoute, phase}) => ( 7 |
8 |
9 |
{ 13 | addHashRoute('phase1'); 14 | }} 15 | > 16 | {copy[phase]} 17 |
18 |
{copy[`${phase}.header`]}
19 |
20 |
21 | 22 |
23 |
24 | ) 25 | -------------------------------------------------------------------------------- /style-guide/src/components/handover-process/PhaseOne.js: -------------------------------------------------------------------------------- 1 | import styles from '../../styles/handover.module.scss'; 2 | import copy from '../../../static/handover-process'; 3 | import React from 'react'; 4 | import PhaseHeader from "./PhaseHeader"; 5 | import ResourceBox from "./ResourceBox"; 6 | import Quote from "./Quote"; 7 | import storyMapping from '../../assets/storyMapping.png'; 8 | 9 | export default ({addHashRoute}) => { 10 | return ( 11 | <> 12 |
13 | addHashRoute('phase1')} 15 | phase='phase1' 16 | /> 17 |
{copy['phase1.subheader1']}
18 |

19 | {copy['phase1.description1']} 20 |

21 | 22 | 23 | 24 |
{copy['phase1.subheader2']}
25 |

26 | {copy['phase1.description2.1']} 27 |

28 |

{copy['phase1.description2.2']}

29 |

{copy['phase1.description2.3']}

30 | 31 | 32 | 33 | 34 |
35 | storyMapping 36 | 37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /style-guide/src/components/handover-process/Quote.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import copy from '../../../static/handover-process'; 3 | import styles from '../../styles/handover.module.scss'; 4 | 5 | export default ({title}) => ( 6 |
7 |
8 | “ 9 |
10 |
{copy[title]}
11 |
- {copy[`${title}.user`]}
12 |
13 | ) 14 | -------------------------------------------------------------------------------- /style-guide/src/components/handover-process/ResourceBox.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BullseyeIcon } from "./Bullseye"; 3 | import copy from '../../../static/handover-process'; 4 | import styles from '../../styles/handover.module.scss'; 5 | 6 | export default ({ resource }) => ( 7 | 15 | ) 16 | -------------------------------------------------------------------------------- /style-guide/src/components/section-header/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './styles.module.scss'; 3 | 4 | export default function SectionHeader({ text, type, content, className = '' }) { 5 | const headerClassName = type === 'SectionHeader__small' 6 | ? styles.sectionHeaderSmall 7 | : styles.sectionHeader; 8 | return ( 9 |
10 |

11 | {text} 12 |

13 | {content &&
{content}
} 14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /style-guide/src/components/section-header/styles.module.scss: -------------------------------------------------------------------------------- 1 | @import 'otkit-spacing/token.scss'; 2 | @import 'otkit-typography-desktop/token.scss'; 3 | @import 'otkit-colors/token.scss'; 4 | 5 | %header { 6 | font-size: $xlarge-bold-font-size; 7 | font-weight: $xlarge-bold-font-weight; 8 | line-height: $xlarge-bold-line-height; 9 | color: $ash-dark; 10 | margin: 0; 11 | flex: 1; 12 | } 13 | 14 | .section-header { 15 | @extend %header; 16 | } 17 | 18 | .section-header-small { 19 | @extend %header; 20 | font-size: $large-bold-font-size; 21 | } 22 | 23 | .section-container { 24 | border-bottom: 1px solid $ash-lighter; 25 | padding-bottom: $spacing-medium; 26 | display: flex; 27 | align-items: center; 28 | width: 100%; 29 | margin-bottom: $spacing-medium; 30 | } 31 | 32 | .section-content { 33 | flex: 1; 34 | display: flex; 35 | justify-content: flex-end; 36 | } -------------------------------------------------------------------------------- /style-guide/src/hocs/withLayout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../components/layout/layout'; 3 | import DesignSystemNav from '../components/design-nav/design-nav'; 4 | 5 | export default (Component, NavType) => (props) => { 6 | let Nav = null; 7 | 8 | if (NavType === 'design-system-nav') { 9 | Nav = DesignSystemNav; 10 | } 11 | 12 | return ( 13 | : null}> 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /style-guide/src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../styles/index.module.scss'; 3 | import SectionHeader from '../components/section-header'; 4 | import withLayout from '../hocs/withLayout'; 5 | 6 | export default withLayout(() => { 7 | return ( 8 |
9 | 10 |

404

11 |
12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /style-guide/src/pages/otkit/borders.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import withLayout from '../../hocs/withLayout'; 3 | import Borders from '../../components/design-system-partials/otkit-borders.js'; 4 | 5 | export default withLayout(() => , 'design-system-nav'); 6 | -------------------------------------------------------------------------------- /style-guide/src/pages/otkit/breakpoints.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import withLayout from '../../hocs/withLayout'; 3 | import Breakpoints from '../../components/design-system-partials/otkit-breakpoints.js'; 4 | 5 | export default withLayout(() => , 'design-system-nav'); 6 | -------------------------------------------------------------------------------- /style-guide/src/pages/otkit/colors.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import withLayout from '../../hocs/withLayout'; 3 | import Colors from '../../components/design-system-partials/otkit-colors.js'; 4 | 5 | export default withLayout(() => , 'design-system-nav'); 6 | -------------------------------------------------------------------------------- /style-guide/src/pages/otkit/grids.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import withLayout from '../../hocs/withLayout'; 3 | import Grids from '../../components/design-system-partials/otkit-grids.js'; 4 | 5 | export default withLayout(() => , 'design-system-nav'); 6 | -------------------------------------------------------------------------------- /style-guide/src/pages/otkit/icons-theme.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import withLayout from '../../hocs/withLayout'; 3 | import Icons from '../../components/design-system-partials/otkit-icons-theme.js'; 4 | 5 | export default withLayout(() => , 'design-system-nav'); 6 | -------------------------------------------------------------------------------- /style-guide/src/pages/otkit/icons.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import withLayout from '../../hocs/withLayout'; 3 | import Icons from '../../components/design-system-partials/otkit-icons.js'; 4 | 5 | export default withLayout(() => , 'design-system-nav'); 6 | -------------------------------------------------------------------------------- /style-guide/src/pages/otkit/shadows.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import withLayout from '../../hocs/withLayout'; 3 | import Shadows from '../../components/design-system-partials/otkit-shadows.js'; 4 | 5 | export default withLayout(() => , 'design-system-nav'); 6 | -------------------------------------------------------------------------------- /style-guide/src/pages/otkit/spacing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import withLayout from '../../hocs/withLayout'; 3 | import Spacing from '../../components/design-system-partials/otkit-spacing.js'; 4 | 5 | export default withLayout(() => , 'design-system-nav'); 6 | -------------------------------------------------------------------------------- /style-guide/src/pages/otkit/typography.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import withLayout from '../../hocs/withLayout'; 3 | import Typography from '../../components/design-system-partials/otkit-typography.js'; 4 | 5 | export default withLayout(() => , 'design-system-nav'); 6 | -------------------------------------------------------------------------------- /style-guide/src/styles/fonts.module.scss: -------------------------------------------------------------------------------- 1 | @import 'otkit-typography-desktop/token.scss'; 2 | 3 | @font-face { 4 | font-family: $font-family-brand; 5 | src: url('https://cdn.otstatic.com/common/font/Brandon/Brandon_txt_reg-webfont.woff2') format('woff2'), url('https://cdn.otstatic.com/common/font/Brandon/Brandon_txt_reg-webfont.woff') format('woff'); 6 | font-weight: $font-weight-normal; 7 | } 8 | 9 | @font-face { 10 | font-family: $font-family-brand; 11 | src: url('https://cdn.otstatic.com/common/font/Brandon/Brandon_txt_med-webfont.woff2') format('woff2'), url('https://cdn.otstatic.com/common/font/Brandon/Brandon_txt_med-webfont.woff') format('woff'); 12 | font-weight: $font-weight-medium; 13 | } 14 | 15 | @font-face { 16 | font-family: $font-family-brand; 17 | src: url('https://cdn.otstatic.com/common/font/Brandon/Brandon_txt_bld-webfont.woff2') format('woff2'), url('https://cdn.otstatic.com/common/font/Brandon/Brandon_txt_bld-webfont.woff') format('woff'); 18 | font-weight: $font-weight-bold; 19 | } 20 | -------------------------------------------------------------------------------- /style-guide/src/styles/otkit-icons.module.scss: -------------------------------------------------------------------------------- 1 | @import 'otkit-colors/token.scss'; 2 | @import 'otkit-spacing/token.scss'; 3 | @import 'otkit-borders/token.scss'; 4 | @import 'otkit-typography-desktop/token.scss'; 5 | 6 | $icon-size: 24px; 7 | $width-main: 768px; 8 | 9 | .section-icon { 10 | display: flex; 11 | flex-wrap: wrap; 12 | justify-content: space-between; 13 | &:after { 14 | content: ""; 15 | width: 23%; 16 | } 17 | } 18 | 19 | .main-container { 20 | width: $width-main; 21 | padding-top: $spacing-large; 22 | margin: 0 auto; 23 | } 24 | 25 | .card { 26 | text-align: center; 27 | width: 23%; 28 | margin-bottom: $spacing-medium; 29 | } 30 | 31 | .icon-block { 32 | border-radius: $border-radius-small; 33 | padding: $spacing-medium 0; 34 | display: flex; 35 | align-items: center; 36 | justify-content: center; 37 | } 38 | 39 | .icon { 40 | width: $icon-size; 41 | height: $icon-size; 42 | } 43 | 44 | .icon-name { 45 | border: 1px solid $ash-lighter; 46 | font-size: $xsmall-regular-font-size; 47 | font-weight: $xsmall-regular-font-weight; 48 | line-height: $xsmall-regular-line-height; 49 | padding: $spacing-xsmall; 50 | margin: $spacing-small 0; 51 | } 52 | 53 | .form { 54 | border: 1px solid $ash-lighter; 55 | padding: $spacing-small; 56 | margin: 0 $spacing-xsmall; 57 | &:last-of-type { 58 | margin-right: 0; 59 | } 60 | } -------------------------------------------------------------------------------- /style-guide/src/styles/otkit-typography-desktop.module.scss: -------------------------------------------------------------------------------- 1 | @import 'otkit-spacing/token.scss'; 2 | 3 | $width-main: 768px; 4 | 5 | .font-item { 6 | margin-bottom: $spacing-medium; 7 | } 8 | 9 | .main-container { 10 | width: $width-main; 11 | padding-top: $spacing-large; 12 | margin: 0 auto; 13 | } -------------------------------------------------------------------------------- /style-guide/src/styles/variables.module.scss: -------------------------------------------------------------------------------- 1 | @import 'otkit-spacing/token.scss'; 2 | 3 | $width-nav: 300px; 4 | $width-main: 768px; 5 | $header-height: 68px; 6 | $font-weight-normal: normal; 7 | $font-weight-medium: 500; 8 | $font-weight-bold: bold; 9 | 10 | 11 | %container { 12 | width: $width-main; 13 | padding-top: $spacing-large; 14 | margin: 0 auto; 15 | } 16 | -------------------------------------------------------------------------------- /style-guide/static/constants.js: -------------------------------------------------------------------------------- 1 | export const images = { 2 | phase1: require('../src/assets/phase1.png'), 3 | phase2: require('../src/assets/phase2.png'), 4 | phase3: require('../src/assets/phase3.png'), 5 | phase4: require('../src/assets/phase4.png'), 6 | phase5: require('../src/assets/phase5.png') 7 | }; 8 | -------------------------------------------------------------------------------- /style-guide/static/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opentable/design-tokens/4b58cfd613494cac1edaacf31991657ac67589ab/style-guide/static/favicon-32.png -------------------------------------------------------------------------------- /utils/automatic-release/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const run = require('./lib/process'); 4 | 5 | const argv = require('minimist')(process.argv.slice(2)); 6 | const doPublish = argv['test'] ? false : true; 7 | 8 | run(doPublish) 9 | .then(msg => { 10 | console.log(msg); 11 | process.exit(0); 12 | }) 13 | .catch(err => { 14 | console.log(err); 15 | process.exit(1); 16 | }); 17 | -------------------------------------------------------------------------------- /utils/automatic-release/lib/defineVersion/diffToSemver.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const _ = require('lodash'); 4 | 5 | const diffToVersion = (latest, toPublish) => { 6 | const latestKeys = Object.keys(latest); 7 | const toPublishKeys = Object.keys(toPublish); 8 | 9 | const differentKeys = _.difference(toPublishKeys, latestKeys).length; 10 | let version; 11 | 12 | if ( 13 | toPublishKeys.length < latestKeys.length || 14 | differentKeys > toPublishKeys.length - latestKeys.length 15 | ) { 16 | return 'major'; 17 | } else if ( 18 | differentKeys > 0 && 19 | differentKeys === toPublishKeys.length - latestKeys.length 20 | ) { 21 | version = 'minor'; 22 | } 23 | 24 | for (let i = 0; i < toPublishKeys.length; i++) { 25 | if ( 26 | latest[toPublishKeys[i]] && 27 | !_.isEqual(latest[toPublishKeys[i]], toPublish[toPublishKeys[i]]) && 28 | version === undefined 29 | ) { 30 | version = 'patch'; 31 | } 32 | } 33 | 34 | return version; 35 | }; 36 | 37 | module.exports = diffToVersion; 38 | -------------------------------------------------------------------------------- /utils/automatic-release/lib/defineVersion/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const yaml = require('js-yaml'); 4 | const path = require('path'); 5 | const packagePathResolver = require('./packagePathResolver'); 6 | const fs = require('fs-extra'); 7 | const differ = require('jest-diff'); 8 | const diffToSemver = require('./diffToSemver'); 9 | 10 | const defineVersion = (pkg, root, latestTemp) => { 11 | let version, diff; 12 | 13 | const updatedContent = yaml.safeLoad( 14 | fs.readFileSync(path.join(root, `${packagePathResolver(pkg)}/token.yml`), { 15 | encoding: 'utf-8' 16 | }) 17 | ); 18 | const latestPath = path.join(latestTemp, 'node_modules', pkg, 'token.yml'); 19 | 20 | if (fs.pathExistsSync(latestPath)) { 21 | const latestContent = yaml.safeLoad(fs.readFileSync(latestPath), { 22 | encoding: 'utf-8' 23 | }); 24 | diff = differ(latestContent.props, updatedContent.props); 25 | version = diffToSemver(latestContent.props, updatedContent.props); 26 | } 27 | 28 | return { 29 | version, 30 | diff 31 | }; 32 | }; 33 | 34 | module.exports = defineVersion; 35 | -------------------------------------------------------------------------------- /utils/automatic-release/lib/defineVersion/packagePathResolver.js: -------------------------------------------------------------------------------- 1 | module.exports = pkgName => 2 | pkgName.match(/^ottheme/) ? `OTTheme/${pkgName}` : `OTKit/${pkgName}`; 3 | -------------------------------------------------------------------------------- /utils/automatic-release/lib/getTokenList.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const runCmd = require('./runCmd'); 4 | 5 | // run lernaUpdate and return a list of the packages that need to be updated 6 | const getTokenList = root => 7 | runCmd( 8 | 'node', 9 | ['node_modules/.bin/lerna', 'ls', '--json', '--loglevel=silent'], 10 | { 11 | cwd: root 12 | } 13 | ).then(result => 14 | Promise.resolve( 15 | JSON.parse(result || '[]') 16 | .filter(pkg => !pkg.private) 17 | .map(pkg => pkg.name) 18 | ) 19 | ); 20 | 21 | module.exports = getTokenList; 22 | -------------------------------------------------------------------------------- /utils/automatic-release/lib/installPackages.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs-extra'); 4 | const Promise = require('bluebird'); 5 | const runCmd = require('./runCmd'); 6 | 7 | // locally install latest version of packages 8 | const installPackagesFromNPM = (packages, latestTemp) => { 9 | fs.ensureDirSync(latestTemp); 10 | fs.writeJsonSync(`${latestTemp}/package.json`, { name: 'release' }); 11 | 12 | return Promise.mapSeries(packages, pkg => 13 | runCmd('npm', ['install', pkg], { 14 | cwd: latestTemp 15 | }) 16 | .then(() => Promise.resolve({ pkg, success: true })) 17 | .catch(() => Promise.resolve({ pkg, success: false })) 18 | ); 19 | }; 20 | 21 | module.exports = installPackagesFromNPM; 22 | -------------------------------------------------------------------------------- /utils/automatic-release/lib/publishPackage.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | const packagePathResolver = require('./defineVersion/packagePathResolver'); 6 | const runCmd = require('./runCmd'); 7 | 8 | const publishPackage = ({ pkg, version, root }) => 9 | runCmd('npm', ['publish', '.'], { 10 | cwd: path.join(root, packagePathResolver(pkg)) 11 | }) 12 | .then(() => { 13 | console.log(`Published ${pkg} as ${version}`); 14 | return Promise.resolve(pkg); 15 | }) 16 | .catch(err => { 17 | console.log(`Error publishing ${pkg} as ${version}`); 18 | return Promise.reject(err); 19 | }); 20 | 21 | module.exports = publishPackage; 22 | -------------------------------------------------------------------------------- /utils/automatic-release/lib/pushChanges.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | const packagePathResolver = require('./defineVersion/packagePathResolver'); 6 | const runCmd = require('./runCmd'); 7 | 8 | const pushChanges = root => 9 | runCmd('git', ['push', 'origin', 'master', '--follow-tags'], { 10 | cwd: root 11 | }) 12 | .then(() => { 13 | console.log(`Pushed changes to master`); 14 | return Promise.resolve(); 15 | }) 16 | .catch(err => { 17 | console.log(`Error pushing changes to master`); 18 | return Promise.reject(err); 19 | }); 20 | 21 | module.exports = pushChanges; 22 | -------------------------------------------------------------------------------- /utils/automatic-release/lib/runCmd.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const spawn = require('cross-spawn'); 4 | 5 | const runCmd = (script, commands = [], options) => { 6 | console.log('Executing: ', script, commands.join(' ')); 7 | 8 | const cmd = spawn(script, commands, { 9 | ...options 10 | }); 11 | 12 | let result = ''; 13 | let error = ''; 14 | 15 | cmd.stdout.on('data', data => (result += data.toString())); 16 | cmd.stderr.on('data', data => (error += data.toString())); 17 | 18 | return new Promise((resolve, reject) => { 19 | cmd.on('error', err => reject(err)); 20 | cmd.on('close', code => { 21 | if (code === 0) { 22 | console.log(result); 23 | return resolve(result); 24 | } 25 | console.log(error); 26 | return reject(error); 27 | }); 28 | }); 29 | }; 30 | 31 | module.exports = runCmd; 32 | -------------------------------------------------------------------------------- /utils/automatic-release/test/diffToSemver.test.js: -------------------------------------------------------------------------------- 1 | const diffToSemver = require('../lib/defineVersion/diffToSemver'); 2 | 3 | test('return undefined when no change', () => { 4 | expect( 5 | diffToSemver( 6 | { color: '#000000', bg: '#000000' }, 7 | { bg: '#000000', color: '#000000' } 8 | ) 9 | ).toBeUndefined(); 10 | }); 11 | 12 | test("return 'major' when there is a breaking change on current keys", () => { 13 | expect( 14 | diffToSemver( 15 | { color: '#000000', bg: '#000000' }, 16 | { supercolor: '#000000', bg: '#000000' } 17 | ) 18 | ).toBe('major'); 19 | 20 | expect( 21 | diffToSemver({ color: '#000000', bg: '#000000' }, { bg: '#000000' }) 22 | ).toBe('major'); 23 | }); 24 | 25 | test("return 'minor' new keys are added", () => { 26 | expect( 27 | diffToSemver( 28 | { color: '#000000' }, 29 | { color: '#000000', supercolor: '#000000' } 30 | ) 31 | ).toBe('minor'); 32 | }); 33 | 34 | test("return 'patch' new values are changed", () => { 35 | expect( 36 | diffToSemver( 37 | { color: '#000000', bg: '#000000' }, 38 | { bg: '#000000', color: '#000001' } 39 | ) 40 | ).toBe('patch'); 41 | }); 42 | -------------------------------------------------------------------------------- /utils/automatic-release/test/packagePathResolver.test.js: -------------------------------------------------------------------------------- 1 | const packagePathResolver = require('../lib/defineVersion/packagePathResolver'); 2 | 3 | test('return correct package path', () => { 4 | expect(packagePathResolver('ottheme-colors')).toBe('OTTheme/ottheme-colors'); 5 | expect(packagePathResolver('otkit-borders')).toBe('OTKit/otkit-borders'); 6 | }); 7 | -------------------------------------------------------------------------------- /utils/build-icons/index.js: -------------------------------------------------------------------------------- 1 | const Promise = require('bluebird'); 2 | 3 | const generateTokenFile = require('./lib/generateTokenFile'); 4 | const generateThemeableTokenFile = require('./lib/generateThemeableTokenFile'); 5 | 6 | Promise.all([generateTokenFile(), generateThemeableTokenFile()]) 7 | .then(msg => { 8 | console.log(msg); 9 | process.exit(0); 10 | }) 11 | .catch(err => { 12 | console.log(err); 13 | process.exit(1); 14 | }); 15 | -------------------------------------------------------------------------------- /utils/build-icons/lib/generateThemeableTokenFile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const Promise = require('bluebird'); 4 | 5 | const getIconData = require('./getIconData'); 6 | const getIconFileList = require('./getIconFileList'); 7 | const processIcon = require('./processIcon'); 8 | const writeToken = require('./writeToken'); 9 | 10 | const generateThemeableTokenFile = () => { 11 | return new Promise((resolve, reject) => { 12 | const icons = getIconFileList() 13 | .mapSeries(icons => getIconData(icons, true)) 14 | .mapSeries(processIcon); 15 | 16 | Promise.all(icons) 17 | .then(icons => writeToken(icons, true)) 18 | .then(() => resolve('Themeable icons generated successfully')) 19 | .catch(err => reject(`error generating themable icons:\n ${err}`)); 20 | }); 21 | }; 22 | 23 | module.exports = generateThemeableTokenFile; 24 | -------------------------------------------------------------------------------- /utils/build-icons/lib/generateTokenFile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const Promise = require('bluebird'); 4 | 5 | const getIconData = require('./getIconData'); 6 | const getIconFileList = require('./getIconFileList'); 7 | const processIcon = require('./processIcon'); 8 | const writeToken = require('./writeToken'); 9 | 10 | const generateTokenFile = () => { 11 | return new Promise((resolve, reject) => { 12 | const icons = getIconFileList() 13 | .mapSeries(icons => getIconData(icons, false)) 14 | .mapSeries(processIcon); 15 | 16 | Promise.all(icons) 17 | .then(icons => writeToken(icons, false)) 18 | .then(() => resolve('Standard icons generated successfully')) 19 | .catch(err => reject(`error generating standard icons:\n ${err}`)); 20 | }); 21 | }; 22 | 23 | module.exports = generateTokenFile; 24 | -------------------------------------------------------------------------------- /utils/build-icons/lib/getIconFileList.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs-extra'); 4 | const path = require('path'); 5 | const Promise = require('bluebird'); 6 | 7 | const getIconFileList = () => 8 | Promise.resolve( 9 | fs.readdir(process.cwd()).then(files => 10 | files 11 | .filter(fileName => path.extname(fileName) === '.svg') 12 | .map(fileName => 13 | Promise.resolve({ 14 | id: path.basename(fileName, '.svg'), 15 | fileName 16 | }) 17 | ) 18 | ) 19 | ); 20 | 21 | module.exports = getIconFileList; 22 | -------------------------------------------------------------------------------- /utils/build-icons/lib/processIcon.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const { messages, builder, buildSVG } = require('./processIconHelpers'); 4 | const { iconSize } = require('./config'); 5 | 6 | /* Parse the XML. 7 | * We can add various warning and analysis checks here, but for now, 8 | * we are primarily concerned about sizing of the viewbox. 9 | */ 10 | const processIcon = ({ icon, fileName, id, svgIds }) => { 11 | const innerContent = icon.svg; 12 | const result = { id, fileName, svgIds }; 13 | 14 | if (!innerContent['$'].viewBox) { 15 | return { ...result, error: messages.missingViewBox(fileName) }; 16 | } else if (innerContent['$'].viewBox != `0 0 ${iconSize} ${iconSize}`) { 17 | return { ...result, error: messages.viewBoxSize(fileName, iconSize) }; 18 | } 19 | 20 | const svg = builder.buildObject(icon); 21 | return { ...result, svg }; 22 | }; 23 | 24 | module.exports = processIcon; 25 | -------------------------------------------------------------------------------- /utils/build-icons/lib/processIconHelpers.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const xml2js = require('xml2js'); 4 | 5 | const messages = { 6 | missingViewBox: fileName => `\t${fileName} doesn't define a viewbox`, 7 | viewBoxSize: (fileName, iconSize) => 8 | `\t${fileName} has a viewbox that isn't ${iconSize}`, 9 | duplicateIds: ids => `\n\tthere are duplicate ids:\n\t\t${ids.join('\n\t\t')}` 10 | }; 11 | 12 | const builder = new xml2js.Builder({ 13 | renderOpts: { 14 | pretty: false 15 | }, 16 | headless: true 17 | }); 18 | 19 | module.exports = { 20 | messages, 21 | builder 22 | }; 23 | -------------------------------------------------------------------------------- /utils/build-icons/test/getIconFileList.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let originCWD; 4 | const mockCWD = jest.fn(() => 'somePath'); 5 | beforeAll(() => { 6 | originCWD = global.process.cwd; 7 | global.process.cwd = mockCWD; 8 | }); 9 | 10 | afterAll(() => { 11 | global.process.cwd = originCWD; 12 | }); 13 | 14 | const mockReadDir = jest.fn(() => 15 | Promise.resolve([ 16 | 'icon1.svg', 17 | 'icon2.svg', 18 | 'icon3.svg', 19 | 'readme.md', 20 | 'remember.coffee' 21 | ]) 22 | ); 23 | 24 | jest.mock('fs-extra', () => { 25 | return { 26 | readdir: mockReadDir 27 | }; 28 | }); 29 | 30 | jest.mock('path', () => { 31 | return { 32 | extname: jest.fn(fileName => fileName.substring(fileName.indexOf('.'))), 33 | basename: jest.fn((fileName, ext) => fileName.replace(ext, '')) 34 | }; 35 | }); 36 | 37 | const getIconFileList = require('../lib/getIconFileList'); 38 | 39 | test('Get list of icon files', async () => { 40 | const iconFileList = await getIconFileList(); 41 | expect(iconFileList.length).toBe(3); 42 | const resolvedList = await Promise.all(iconFileList); 43 | expect(resolvedList).toEqual([ 44 | { fileName: 'icon1.svg', id: 'icon1' }, 45 | { fileName: 'icon2.svg', id: 'icon2' }, 46 | { fileName: 'icon3.svg', id: 'icon3' } 47 | ]); 48 | }); 49 | -------------------------------------------------------------------------------- /utils/build-typography/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const yaml = require('js-yaml'); 4 | const fs = require('fs-extra'); 5 | 6 | /* CONFIG */ 7 | const FONT_SIZE = 'font-size'; 8 | const FONT_WEIGHT = 'font-weight'; 9 | const LINE_HEIGHT = 'line-height'; 10 | const FONT_GROUP_IDENTIFIER = FONT_SIZE; 11 | 12 | /* UTILS */ 13 | const parseFontGroupName = str => str.replace(`-${FONT_GROUP_IDENTIFIER}`, ''); 14 | 15 | const content = yaml.load( 16 | fs.readFileSync(`${process.cwd()}/token.yml`, 'utf8') 17 | ); 18 | const styles = content.props; 19 | 20 | let fontGroups = Object.keys(styles) 21 | .filter(key => key.includes(FONT_GROUP_IDENTIFIER)) 22 | .map(key => parseFontGroupName(key)); 23 | 24 | const reducer = (accumulatedOutput, FONT_NAME) => 25 | accumulatedOutput + 26 | ` 27 | .${FONT_NAME} { 28 | font-size: ${styles[`${FONT_NAME}-${FONT_SIZE}`].value}; 29 | font-weight: ${styles[`${FONT_NAME}-${FONT_WEIGHT}`].value}; 30 | line-height: ${styles[`${FONT_NAME}-${LINE_HEIGHT}`].value}; 31 | } 32 | `; 33 | 34 | fs.writeFileSync(`${process.cwd()}/index.css`, fontGroups.reduce(reducer, '')); 35 | -------------------------------------------------------------------------------- /utils/deploy-styleguide/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const ghpages = require('gh-pages'); 4 | const path = require('path'); 5 | 6 | const publicDir = path.join(__dirname, '../../style-guide/public'); 7 | 8 | ghpages.publish( 9 | publicDir, 10 | { 11 | repo: `https://${ 12 | process.env.GH_TOKEN 13 | }@github.com/opentable/design-tokens.git`, 14 | silent: true, 15 | branch: 'gh-pages' 16 | }, 17 | err => { 18 | if (err) { 19 | console.log(err); 20 | process.exit(1); 21 | } else { 22 | console.log('Styleguide deployed succesfully'); 23 | process.exit(0); 24 | } 25 | } 26 | ); 27 | --------------------------------------------------------------------------------