Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ jobs:
cache: yarn

- run: yarn --frozen-lockfile
- run: yarn run validate-tokens
- run: yarn run type-check && yarn run build
- run: yarn run lint
- run: yarn run test
Expand Down
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@
"readme-update-version": "node ./scripts/readme-update-version",
"version": "yarn run readme-update-version",
"storybook": "start-storybook -p 6006 --quiet",
"storybook:build": "build-storybook -o build-internal/storybook/static"
"storybook:build": "build-storybook -o build-internal/storybook/static",
"validate-tokens": "ajv validate -s tokens/schemas/token-group.json -d 'tokens/*.json'"
},
"dependencies": {
"@shopify/polaris-icons": "^4.10.0",
Expand Down Expand Up @@ -111,6 +112,7 @@
"@storybook/react": "^6.3.7",
"@types/lodash": "^4.14.138",
"@types/node": "^16.11.11",
"ajv-cli": "^5.0.0",
"babel-core": "7.0.0-bridge.0",
"babel-loader": "^8.1.0",
"chalk": "^2.4.2",
Expand Down
129 changes: 129 additions & 0 deletions tokens/color.dark.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
{
"background": "rgba(11, 12, 13, 1)",
"background-hovered": "rgba(11, 12, 13, 1)",
"background-pressed": "rgba(11, 12, 13, 1)",
"background-selected": "rgba(11, 12, 13, 1)",
"surface": "rgba(32, 33, 35, 1)",
"surface-neutral": "rgba(49, 51, 53, 1)",
"surface-neutral-hovered": "rgba(49, 51, 53, 1)",
"surface-neutral-pressed": "rgba(49, 51, 53, 1)",
"surface-neutral-disabled": "rgba(49, 51, 53, 1)",
"surface-neutral-subdued": "rgba(68, 71, 74, 1)",
"surface-subdued": "rgba(26, 28, 29, 1)",
"surface-disabled": "rgba(26, 28, 29, 1)",
"surface-hovered": "rgba(47, 49, 51, 1)",
"surface-pressed": "rgba(62, 64, 67, 1)",
"surface-depressed": "rgba(80, 83, 86, 1)",
"surface-search-field": "rgba(47, 49, 51, 1)",
"backdrop": "rgba(0, 0, 0, 0.5)",
"overlay": "rgba(33, 33, 33, 0.5)",
"shadow-from-dim-light": "rgba(255, 255, 255, 0.2)",
"shadow-from-ambient-light": "rgba(23, 24, 24, 0.05)",
"shadow-from-direct-light": "rgba(255, 255, 255, 0.15)",
"hint-from-direct-light": "rgba(185, 185, 185, 0.2)",
"border": "rgba(80, 83, 86, 1)",
"border-neutral-subdued": "rgba(130, 135, 139, 1)",
"border-hovered": "rgba(80, 83, 86, 1)",
"border-disabled": "rgba(103, 107, 111, 1)",
"border-subdued": "rgba(130, 135, 139, 1)",
"border-depressed": "rgba(142, 145, 145, 1)",
"border-shadow": "rgba(91, 95, 98, 1)",
"border-shadow-subdued": "rgba(130, 135, 139, 1)",
"divider": "rgba(69, 71, 73, 1)",
"icon": "rgba(166, 172, 178, 1)",
"icon-hovered": "rgba(225, 227, 229, 1)",
"icon-pressed": "rgba(166, 172, 178, 1)",
"icon-disabled": "rgba(84, 87, 90, 1)",
"icon-subdued": "rgba(120, 125, 129, 1)",
"text": "rgba(227, 229, 231, 1)",
"text-disabled": "rgba(111, 115, 119, 1)",
"text-subdued": "rgba(153, 159, 164, 1)",
"interactive": "rgba(54, 163, 255, 1)",
"interactive-disabled": "rgba(38, 98, 182, 1)",
"interactive-hovered": "rgba(103, 175, 255, 1)",
"interactive-pressed": "rgba(136, 188, 255, 1)",
"focused": "rgba(38, 98, 182, 1)",
"surface-selected": "rgba(2, 14, 35, 1)",
"surface-selected-hovered": "rgba(7, 29, 61, 1)",
"surface-selected-pressed": "rgba(13, 43, 86, 1)",
"icon-on-interactive": "rgba(255, 255, 255, 1)",
"text-on-interactive": "rgba(255, 255, 255, 1)",
"action-secondary": "rgba(77, 80, 83, 1)",
"action-secondary-disabled": "rgba(32, 34, 35, 1)",
"action-secondary-hovered": "rgba(84, 87, 91, 1)",
"action-secondary-pressed": "rgba(96, 100, 103, 1)",
"action-secondary-depressed": "rgba(123, 127, 132, 1)",
"action-primary": "rgba(0, 128, 96, 1)",
"action-primary-disabled": "rgba(0, 86, 64, 1)",
"action-primary-hovered": "rgba(0, 150, 113, 1)",
"action-primary-pressed": "rgba(0, 164, 124, 1)",
"action-primary-depressed": "rgba(0, 179, 136, 1)",
"icon-on-primary": "rgba(230, 255, 244, 1)",
"text-on-primary": "rgba(255, 255, 255, 1)",
"text-primary": "rgba(0, 141, 106, 1)",
"text-primary-hovered": "rgba(0, 158, 120, 1)",
"text-primary-pressed": "rgba(0, 176, 133, 1)",
"surface-primary-selected": "rgba(12, 18, 16, 1)",
"surface-primary-selected-hovered": "rgba(40, 48, 44, 1)",
"surface-primary-selected-pressed": "rgba(54, 64, 59, 1)",
"border-critical": "rgba(227, 47, 14, 1)",
"border-critical-subdued": "rgba(227, 47, 14, 1)",
"border-critical-disabled": "rgba(131, 23, 4, 1)",
"icon-critical": "rgba(218, 45, 13, 1)",
"surface-critical": "rgba(69, 7, 1, 1)",
"surface-critical-subdued": "rgba(69, 7, 1, 1)",
"surface-critical-subdued-hovered": "rgba(68, 23, 20, 1)",
"surface-critical-subdued-pressed": "rgba(107, 16, 3, 1)",
"surface-critical-subdued-depressed": "rgba(135, 24, 5, 1)",
"text-critical": "rgba(233, 128, 122, 1)",
"action-critical": "rgba(205, 41, 12, 1)",
"action-critical-disabled": "rgba(187, 37, 10, 1)",
"action-critical-hovered": "rgba(227, 47, 14, 1)",
"action-critical-pressed": "rgba(250, 53, 17, 1)",
"action-critical-depressed": "rgba(253, 87, 73, 1)",
"icon-on-critical": "rgba(255, 248, 247, 1)",
"text-on-critical": "rgba(255, 255, 255, 1)",
"interactive-critical": "rgba(253, 114, 106, 1)",
"interactive-critical-disabled": "rgba(254, 172, 168, 1)",
"interactive-critical-hovered": "rgba(253, 138, 132, 1)",
"interactive-critical-pressed": "rgba(253, 159, 155, 1)",
"border-warning": "rgba(153, 112, 0, 1)",
"border-warning-subdued": "rgba(153, 112, 0, 1)",
"icon-warning": "rgba(104, 75, 0, 1)",
"surface-warning": "rgba(153, 112, 0, 1)",
"surface-warning-subdued": "rgba(77, 59, 29, 1)",
"surface-warning-subdued-hovered": "rgba(82, 63, 32, 1)",
"surface-warning-subdued-pressed": "rgba(87, 67, 34, 1)",
"text-warning": "rgba(202, 149, 0, 1)",
"border-highlight": "rgba(68, 157, 167, 1)",
"border-highlight-subdued": "rgba(68, 157, 167, 1)",
"icon-highlight": "rgba(44, 108, 115, 1)",
"surface-highlight": "rgba(0, 105, 113, 1)",
"surface-highlight-subdued": "rgba(18, 53, 57, 1)",
"surface-highlight-subdued-hovered": "rgba(20, 58, 62, 1)",
"surface-highlight-subdued-pressed": "rgba(24, 65, 70, 1)",
"text-highlight": "rgba(162, 239, 250, 1)",
"border-success": "rgba(0, 135, 102, 1)",
"border-success-subdued": "rgba(0, 135, 102, 1)",
"icon-success": "rgba(0, 94, 70, 1)",
"surface-success": "rgba(0, 94, 70, 1)",
"surface-success-subdued": "rgba(28, 53, 44, 1)",
"surface-success-subdued-hovered": "rgba(31, 58, 48, 1)",
"surface-success-subdued-pressed": "rgba(35, 65, 54, 1)",
"text-success": "rgba(88, 173, 142, 1)",
"decorative-one-icon": "rgba(255, 186, 67, 1)",
"decorative-one-surface": "rgba(142, 102, 9, 1)",
"decorative-one-text": "rgba(255, 255, 255, 1)",
"decorative-two-icon": "rgba(245, 182, 192, 1)",
"decorative-two-surface": "rgba(206, 88, 20, 1)",
"decorative-two-text": "rgba(255, 255, 255, 1)",
"decorative-three-icon": "rgba(0, 227, 141, 1)",
"decorative-three-surface": "rgba(0, 124, 90, 1)",
"decorative-three-text": "rgba(255, 255, 255, 1)",
"decorative-four-icon": "rgba(0, 221, 218, 1)",
"decorative-four-surface": "rgba(22, 124, 121, 1)",
"decorative-four-text": "rgba(255, 255, 255, 1)",
"decorative-five-icon": "rgba(244, 183, 191, 1)",
"decorative-five-surface": "rgba(194, 51, 86, 1)",
"decorative-five-text": "rgba(255, 255, 255, 1)"
}
129 changes: 129 additions & 0 deletions tokens/color.light.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
{
"background": "rgba(246, 246, 247, 1)",
"background-hovered": "rgba(241, 242, 243, 1)",
"background-pressed": "rgba(237, 238, 239, 1)",
"background-selected": "rgba(237, 238, 239, 1)",
"surface": "rgba(255, 255, 255, 1)",
"surface-neutral": "rgba(228, 229, 231, 1)",
"surface-neutral-hovered": "rgba(219, 221, 223, 1)",
"surface-neutral-pressed": "rgba(201, 204, 208, 1)",
"surface-neutral-disabled": "rgba(241, 242, 243, 1)",
"surface-neutral-subdued": "rgba(246, 246, 247, 1)",
"surface-subdued": "rgba(250, 251, 251, 1)",
"surface-disabled": "rgba(250, 251, 251, 1)",
"surface-hovered": "rgba(246, 246, 247, 1)",
"surface-pressed": "rgba(241, 242, 243, 1)",
"surface-depressed": "rgba(237, 238, 239, 1)",
"surface-search-field": "rgba(241, 242, 243, 1)",
"backdrop": "rgba(0, 0, 0, 0.5)",
"overlay": "rgba(255, 255, 255, 0.5)",
"shadow-from-dim-light": "rgba(0, 0, 0, 0.2)",
"shadow-from-ambient-light": "rgba(23, 24, 24, 0.05)",
"shadow-from-direct-light": "rgba(0, 0, 0, 0.15)",
"hint-from-direct-light": "rgba(0, 0, 0, 0.15)",
"border": "rgba(140, 145, 150, 1)",
"border-neutral-subdued": "rgba(186, 191, 195, 1)",
"border-hovered": "rgba(153, 158, 164, 1)",
"border-disabled": "rgba(210, 213, 216, 1)",
"border-subdued": "rgba(201, 204, 207, 1)",
"border-depressed": "rgba(87, 89, 89, 1)",
"border-shadow": "rgba(174, 180, 185, 1)",
"border-shadow-subdued": "rgba(186, 191, 196, 1)",
"divider": "rgba(225, 227, 229, 1)",
"icon": "rgba(92, 95, 98, 1)",
"icon-hovered": "rgba(26, 28, 29, 1)",
"icon-pressed": "rgba(68, 71, 74, 1)",
"icon-disabled": "rgba(186, 190, 195, 1)",
"icon-subdued": "rgba(140, 145, 150, 1)",
"text": "rgba(32, 34, 35, 1)",
"text-disabled": "rgba(140, 145, 150, 1)",
"text-subdued": "rgba(109, 113, 117, 1)",
"interactive": "rgba(44, 110, 203, 1)",
"interactive-disabled": "rgba(189, 193, 204, 1)",
"interactive-hovered": "rgba(31, 81, 153, 1)",
"interactive-pressed": "rgba(16, 50, 98, 1)",
"focused": "rgba(69, 143, 255, 1)",
"surface-selected": "rgba(242, 247, 254, 1)",
"surface-selected-hovered": "rgba(237, 244, 254, 1)",
"surface-selected-pressed": "rgba(229, 239, 253, 1)",
"icon-on-interactive": "rgba(255, 255, 255, 1)",
"text-on-interactive": "rgba(255, 255, 255, 1)",
"action-secondary": "rgba(255, 255, 255, 1)",
"action-secondary-disabled": "rgba(255, 255, 255, 1)",
"action-secondary-hovered": "rgba(246, 246, 247, 1)",
"action-secondary-pressed": "rgba(241, 242, 243, 1)",
"action-secondary-depressed": "rgba(109, 113, 117, 1)",
"action-primary": "rgba(0, 128, 96, 1)",
"action-primary-disabled": "rgba(241, 241, 241, 1)",
"action-primary-hovered": "rgba(0, 110, 82, 1)",
"action-primary-pressed": "rgba(0, 94, 70, 1)",
"action-primary-depressed": "rgba(0, 61, 44, 1)",
"icon-on-primary": "rgba(255, 255, 255, 1)",
"text-on-primary": "rgba(255, 255, 255, 1)",
"text-primary": "rgba(0, 123, 92, 1)",
"text-primary-hovered": "rgba(0, 108, 80, 1)",
"text-primary-pressed": "rgba(0, 92, 68, 1)",
"surface-primary-selected": "rgba(241, 248, 245, 1)",
"surface-primary-selected-hovered": "rgba(179, 208, 195, 1)",
"surface-primary-selected-pressed": "rgba(162, 188, 176, 1)",
"border-critical": "rgba(253, 87, 73, 1)",
"border-critical-subdued": "rgba(224, 179, 178, 1)",
"border-critical-disabled": "rgba(255, 167, 163, 1)",
"icon-critical": "rgba(215, 44, 13, 1)",
"surface-critical": "rgba(254, 211, 209, 1)",
"surface-critical-subdued": "rgba(255, 244, 244, 1)",
"surface-critical-subdued-hovered": "rgba(255, 240, 240, 1)",
"surface-critical-subdued-pressed": "rgba(255, 233, 232, 1)",
"surface-critical-subdued-depressed": "rgba(254, 188, 185, 1)",
"text-critical": "rgba(215, 44, 13, 1)",
"action-critical": "rgba(216, 44, 13, 1)",
"action-critical-disabled": "rgba(241, 241, 241, 1)",
"action-critical-hovered": "rgba(188, 34, 0, 1)",
"action-critical-pressed": "rgba(162, 27, 0, 1)",
"action-critical-depressed": "rgba(108, 15, 0, 1)",
"icon-on-critical": "rgba(255, 255, 255, 1)",
"text-on-critical": "rgba(255, 255, 255, 1)",
"interactive-critical": "rgba(216, 44, 13, 1)",
"interactive-critical-disabled": "rgba(253, 147, 141, 1)",
"interactive-critical-hovered": "rgba(205, 41, 12, 1)",
"interactive-critical-pressed": "rgba(103, 15, 3, 1)",
"border-warning": "rgba(185, 137, 0, 1)",
"border-warning-subdued": "rgba(225, 184, 120, 1)",
"icon-warning": "rgba(185, 137, 0, 1)",
"surface-warning": "rgba(255, 215, 157, 1)",
"surface-warning-subdued": "rgba(255, 245, 234, 1)",
"surface-warning-subdued-hovered": "rgba(255, 242, 226, 1)",
"surface-warning-subdued-pressed": "rgba(255, 235, 211, 1)",
"text-warning": "rgba(145, 106, 0, 1)",
"border-highlight": "rgba(68, 157, 167, 1)",
"border-highlight-subdued": "rgba(152, 198, 205, 1)",
"icon-highlight": "rgba(0, 160, 172, 1)",
"surface-highlight": "rgba(164, 232, 242, 1)",
"surface-highlight-subdued": "rgba(235, 249, 252, 1)",
"surface-highlight-subdued-hovered": "rgba(228, 247, 250, 1)",
"surface-highlight-subdued-pressed": "rgba(213, 243, 248, 1)",
"text-highlight": "rgba(52, 124, 132, 1)",
"border-success": "rgba(0, 164, 124, 1)",
"border-success-subdued": "rgba(149, 201, 180, 1)",
"icon-success": "rgba(0, 127, 95, 1)",
"surface-success": "rgba(174, 233, 209, 1)",
"surface-success-subdued": "rgba(241, 248, 245, 1)",
"surface-success-subdued-hovered": "rgba(236, 246, 241, 1)",
"surface-success-subdued-pressed": "rgba(226, 241, 234, 1)",
"text-success": "rgba(0, 128, 96, 1)",
"decorative-one-icon": "rgba(126, 87, 0, 1)",
"decorative-one-surface": "rgba(255, 201, 107, 1)",
"decorative-one-text": "rgba(61, 40, 0, 1)",
"decorative-two-icon": "rgba(175, 41, 78, 1)",
"decorative-two-surface": "rgba(255, 196, 176, 1)",
"decorative-two-text": "rgba(73, 11, 28, 1)",
"decorative-three-icon": "rgba(0, 109, 65, 1)",
"decorative-three-surface": "rgba(146, 230, 181, 1)",
"decorative-three-text": "rgba(0, 47, 25, 1)",
"decorative-four-icon": "rgba(0, 106, 104, 1)",
"decorative-four-surface": "rgba(145, 224, 214, 1)",
"decorative-four-text": "rgba(0, 45, 45, 1)",
"decorative-five-icon": "rgba(174, 43, 76, 1)",
"decorative-five-surface": "rgba(253, 201, 208, 1)",
"decorative-five-text": "rgba(79, 14, 31, 1)"
}
26 changes: 26 additions & 0 deletions tokens/legacy-tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"card-shadow": "0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)",
"popover-shadow": "-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)",
"modal-shadow": "0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)",
"top-bar-shadow": "0 2px 2px -1px var(--p-shadow-from-direct-light)",
"button-drop-shadow": "0 1px 0 rgba(0, 0, 0, 0.05)",
"button-inner-shadow": "inset 0 -1px 0 rgba(0, 0, 0, 0.2)",
"button-pressed-inner-shadow": "inset 0 1px 0 rgba(0, 0, 0, 0.15)",
"override-loading-z-index": "514",
"choice-size": "2rem",
"icon-size": "1rem",
"choice-margin": "0.1rem",
"control-border-width": "0.2rem",
"banner-border-default": "inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued)",
"banner-border-success": "inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)",
"banner-border-highlight": "inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)",
"banner-border-warning": "inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)",
"banner-border-critical": "inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)",
"thin-border-subdued": "0.1rem solid var(--p-border-subdued)",
"text-field-spinner-offset": "0.2rem",
"text-field-focus-ring-offset": "-0.4rem",
"button-group-item-spacing": "-0.1rem",
"range-slider-thumb-size-base": "1.6rem",
"range-slider-thumb-size-active": "2.4rem",
"frame-offset": "0px"
}
18 changes: 18 additions & 0 deletions tokens/motion.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"duration-0": "0ms",
"duration-50": "50ms",
"duration-100": "100ms",
"duration-150": "150ms",
"duration-200": "200ms",
"duration-250": "250ms",
"duration-300": "300ms",
"duration-350": "350ms",
"duration-400": "400ms",
"duration-450": "450ms",
"duration-500": "500ms",
"ease": "cubic-bezier(0.25, 0.1, 0.25, 1)",
"ease-in": "cubic-bezier(0.42, 0, 1, 1)",
"ease-out": "cubic-bezier(0, 0, 0.58, 1)",
"ease-in-out": "cubic-bezier(0.42, 0, 0.58, 1)",
"linear": "cubic-bezier(0, 0, 1, 1)"
}
8 changes: 8 additions & 0 deletions tokens/schemas/token-group.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "Token group schema",
"type": "object",
"additionalProperties": {
"type": "string"
}
}
9 changes: 9 additions & 0 deletions tokens/shape.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"border-radius-05": "2px",
"border-radius-1": "4px",
"border-radius-2": "8px",
"border-radius-3": "12px",
"border-radius-4": "16px",
"border-radius-5": "20px",
"border-radius-6": "50%"
}
19 changes: 19 additions & 0 deletions tokens/spacing.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"space-0": "0",
"space-025": "1px",
"space-05": "2px",
"space-1": "4px",
"space-2": "8px",
"space-3": "12px",
"space-4": "16px",
"space-5": "20px",
"space-6": "24px",
"space-8": "32px",
"space-10": "40px",
"space-12": "48px",
"space-16": "64px",
"space-20": "80px",
"space-24": "96px",
"space-28": "112px",
"space-32": "128px"
}
6 changes: 6 additions & 0 deletions tokens/typography.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"font-weight-regular": "400",
"font-weight-medium": "500",
"font-weight-semibold": "600",
"font-weight-bold": "700"
}
14 changes: 14 additions & 0 deletions tokens/z-index.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"z-1": "100",
"z-2": "400",
"z-3": "510",
"z-4": "512",
"z-5": "513",
"z-6": "514",
"z-7": "515",
"z-8": "516",
"z-9": "517",
"z-10": "518",
"z-11": "519",
"z-12": "520"
}
Loading