From f555ced61fdd5db82b41c501dae3651b8ff04ee6 Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 8 Dec 2021 15:26:02 -0800 Subject: [PATCH 01/15] feat: Extract tokens to json files --- .vscode/settings.json | 5 +- tokens/_color.json | 260 +++++++++++++++++++++++++++++++++++++ tokens/_legacy-tokens.json | 26 ++++ tokens/_motion.json | 18 +++ tokens/_shape.json | 9 ++ tokens/_spacing.json | 19 +++ tokens/_typography.json | 6 + tokens/_z-index.json | 14 ++ 8 files changed, 356 insertions(+), 1 deletion(-) create mode 100644 tokens/_color.json create mode 100644 tokens/_legacy-tokens.json create mode 100644 tokens/_motion.json create mode 100644 tokens/_shape.json create mode 100644 tokens/_spacing.json create mode 100644 tokens/_typography.json create mode 100644 tokens/_z-index.json diff --git a/.vscode/settings.json b/.vscode/settings.json index a567f5e5b46..3e4cdcd130f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -23,5 +23,8 @@ "{build,build-internal}/": true, "examples/*/build": true }, - "typescript.tsdk": "./node_modules/typescript/lib" + "typescript.tsdk": "./node_modules/typescript/lib", + "cSpell.words": [ + "semibold" + ] } diff --git a/tokens/_color.json b/tokens/_color.json new file mode 100644 index 00000000000..94f274040f0 --- /dev/null +++ b/tokens/_color.json @@ -0,0 +1,260 @@ +{ + "light": { + "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)" + }, + "dark": { + "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)" + } +} diff --git a/tokens/_legacy-tokens.json b/tokens/_legacy-tokens.json new file mode 100644 index 00000000000..14489af1f64 --- /dev/null +++ b/tokens/_legacy-tokens.json @@ -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" +} diff --git a/tokens/_motion.json b/tokens/_motion.json new file mode 100644 index 00000000000..81ff7b66766 --- /dev/null +++ b/tokens/_motion.json @@ -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)" +} diff --git a/tokens/_shape.json b/tokens/_shape.json new file mode 100644 index 00000000000..a0b34dc1140 --- /dev/null +++ b/tokens/_shape.json @@ -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%" +} diff --git a/tokens/_spacing.json b/tokens/_spacing.json new file mode 100644 index 00000000000..e3f9434f8c9 --- /dev/null +++ b/tokens/_spacing.json @@ -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" +} diff --git a/tokens/_typography.json b/tokens/_typography.json new file mode 100644 index 00000000000..3aa584f2bf3 --- /dev/null +++ b/tokens/_typography.json @@ -0,0 +1,6 @@ +{ + "font-weight-regular": "400", + "font-weight-medium": "500", + "font-weight-semibold": "600", + "font-weight-bold": "700" +} diff --git a/tokens/_z-index.json b/tokens/_z-index.json new file mode 100644 index 00000000000..d63e8f1ad99 --- /dev/null +++ b/tokens/_z-index.json @@ -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" +} From bc6a2a92d39ffdc98f2d589a28bdda57beb9c318 Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 8 Dec 2021 15:26:40 -0800 Subject: [PATCH 02/15] feat: Validate tokens with json schema and the ajv package --- .github/workflows/ci.yml | 1 + package.json | 4 ++- tokens/schema.color.json | 11 +++++++ tokens/schema.token-group.json | 8 +++++ yarn.lock | 57 ++++++++++++++++++++++++++++++++++ 5 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 tokens/schema.color.json create mode 100644 tokens/schema.token-group.json diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c503b5c31c0..303378e44b5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -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 diff --git a/package.json b/package.json index 715391f6945..381950b865e 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,8 @@ "readme-update-version": "node ./scripts/readme-update-version", "version": "yarn run readme-update-version", "storybook": "start-storybook -p 6006 --quiet", - "storybook:build": "yarn run copy-polaris-tokens && build-storybook -o build-internal/storybook/static" + "storybook:build": "yarn run copy-polaris-tokens && build-storybook -o build-internal/storybook/static", + "validate-tokens": "ajv validate -s tokens/schema.token-group.json -d 'tokens/_!(color)*.json' && ajv validate -s tokens/schema.color.json -d 'tokens/_color.json'" }, "dependencies": { "@shopify/polaris-icons": "^4.10.0", @@ -113,6 +114,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", diff --git a/tokens/schema.color.json b/tokens/schema.color.json new file mode 100644 index 00000000000..4747e602b87 --- /dev/null +++ b/tokens/schema.color.json @@ -0,0 +1,11 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "Color schema", + "type": "object", + "additionalProperties": { + "type": "object", + "additionalProperties": { + "type": "string" + } + } +} diff --git a/tokens/schema.token-group.json b/tokens/schema.token-group.json new file mode 100644 index 00000000000..53183583da5 --- /dev/null +++ b/tokens/schema.token-group.json @@ -0,0 +1,8 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "Token group schema", + "type": "object", + "additionalProperties": { + "type": "string" + } +} diff --git a/yarn.lock b/yarn.lock index c20a6bc266a..05ddf3890e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3728,6 +3728,19 @@ airbnb-js-shims@^2.2.1: string.prototype.padstart "^3.0.0" symbol.prototype.description "^1.0.0" +ajv-cli@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/ajv-cli/-/ajv-cli-5.0.0.tgz#78956ed2934e6dde4c9e696b587be1c2998862e8" + integrity sha512-LY4m6dUv44HTyhV+u2z5uX4EhPYTM38Iv1jdgDJJJCyOOuqB8KtZEGjPZ2T+sh5ZIJrXUfgErYx/j3gLd3+PlQ== + dependencies: + ajv "^8.0.0" + fast-json-patch "^2.0.0" + glob "^7.1.0" + js-yaml "^3.14.0" + json-schema-migrate "^2.0.0" + json5 "^2.1.3" + minimist "^1.2.0" + ajv-errors@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59" @@ -3748,6 +3761,16 @@ ajv@6.12.6, ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@ json-schema-traverse "^0.4.1" uri-js "^4.2.2" +ajv@^8.0.0: + version "8.8.2" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.8.2.tgz#01b4fef2007a28bf75f0b7fc009f62679de4abbb" + integrity sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw== + dependencies: + fast-deep-equal "^3.1.1" + json-schema-traverse "^1.0.0" + require-from-string "^2.0.2" + uri-js "^4.2.2" + ajv@^8.0.1: version "8.6.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.6.2.tgz#2fb45e0e5fcbc0813326c1c3da535d1881bb0571" @@ -7079,6 +7102,13 @@ fast-json-parse@^1.0.3: resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d" integrity sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw== +fast-json-patch@^2.0.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/fast-json-patch/-/fast-json-patch-2.2.1.tgz#18150d36c9ab65c7209e7d4eb113f4f8eaabe6d9" + integrity sha512-4j5uBaTnsYAV5ebkidvxiLUYOwjQ+JSFljeqfTxCrH9bDmlCQaOJFS84oDJ2rAXZq2yskmk3ORfoP9DCwqFNig== + dependencies: + fast-deep-equal "^2.0.1" + fast-json-stable-stringify@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2" @@ -7668,6 +7698,18 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, gl once "^1.3.0" path-is-absolute "^1.0.0" +glob@^7.1.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023" + integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + global-modules@2.0.0, global-modules@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780" @@ -9429,6 +9471,14 @@ js-yaml@^3.11.0, js-yaml@^3.13.1: argparse "^1.0.7" esprima "^4.0.0" +js-yaml@^3.14.0: + version "3.14.1" + resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537" + integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g== + dependencies: + argparse "^1.0.7" + esprima "^4.0.0" + js-yaml@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602" @@ -9489,6 +9539,13 @@ json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2: resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9" integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw== +json-schema-migrate@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/json-schema-migrate/-/json-schema-migrate-2.0.0.tgz#335ef5218cd32fcc96c1ddce66c71ba586224496" + integrity sha512-r38SVTtojDRp4eD6WsCqiE0eNDt4v1WalBXb9cyZYw9ai5cGtBwzRNWjHzJl38w6TxFkXAIA7h+fyX3tnrAFhQ== + dependencies: + ajv "^8.0.0" + json-schema-traverse@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660" From cb2e2cc38a2e6be659d1bce8caa75f0d93019291 Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 8 Dec 2021 15:38:57 -0800 Subject: [PATCH 03/15] fix: Update formatting --- .vscode/settings.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 3e4cdcd130f..15d2a76add1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -24,7 +24,5 @@ "examples/*/build": true }, "typescript.tsdk": "./node_modules/typescript/lib", - "cSpell.words": [ - "semibold" - ] + "cSpell.words": ["semibold"] } From 32b3ad65e766fcd16523f3f76950c49ba20ebef0 Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 8 Dec 2021 15:50:00 -0800 Subject: [PATCH 04/15] fix: Simplify validation script --- package.json | 2 +- tokens/_color.json | 260 ------------------ tokens/color.dark.json | 129 +++++++++ tokens/color.light.json | 129 +++++++++ ..._legacy-tokens.json => legacy-tokens.json} | 0 tokens/{_motion.json => motion.json} | 0 tokens/schema.color.json | 11 - .../token-group.json} | 0 tokens/{_shape.json => shape.json} | 0 tokens/{_spacing.json => spacing.json} | 0 tokens/{_typography.json => typography.json} | 0 tokens/{_z-index.json => z-index.json} | 0 12 files changed, 259 insertions(+), 272 deletions(-) delete mode 100644 tokens/_color.json create mode 100644 tokens/color.dark.json create mode 100644 tokens/color.light.json rename tokens/{_legacy-tokens.json => legacy-tokens.json} (100%) rename tokens/{_motion.json => motion.json} (100%) delete mode 100644 tokens/schema.color.json rename tokens/{schema.token-group.json => schemas/token-group.json} (100%) rename tokens/{_shape.json => shape.json} (100%) rename tokens/{_spacing.json => spacing.json} (100%) rename tokens/{_typography.json => typography.json} (100%) rename tokens/{_z-index.json => z-index.json} (100%) diff --git a/package.json b/package.json index 381950b865e..e883560338c 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "version": "yarn run readme-update-version", "storybook": "start-storybook -p 6006 --quiet", "storybook:build": "yarn run copy-polaris-tokens && build-storybook -o build-internal/storybook/static", - "validate-tokens": "ajv validate -s tokens/schema.token-group.json -d 'tokens/_!(color)*.json' && ajv validate -s tokens/schema.color.json -d 'tokens/_color.json'" + "validate-tokens": "ajv validate -s tokens/schemas/token-group.json -d 'tokens/*.json'" }, "dependencies": { "@shopify/polaris-icons": "^4.10.0", diff --git a/tokens/_color.json b/tokens/_color.json deleted file mode 100644 index 94f274040f0..00000000000 --- a/tokens/_color.json +++ /dev/null @@ -1,260 +0,0 @@ -{ - "light": { - "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)" - }, - "dark": { - "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)" - } -} diff --git a/tokens/color.dark.json b/tokens/color.dark.json new file mode 100644 index 00000000000..252c6c0cfb3 --- /dev/null +++ b/tokens/color.dark.json @@ -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)" +} diff --git a/tokens/color.light.json b/tokens/color.light.json new file mode 100644 index 00000000000..95e1e303d0b --- /dev/null +++ b/tokens/color.light.json @@ -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)" +} diff --git a/tokens/_legacy-tokens.json b/tokens/legacy-tokens.json similarity index 100% rename from tokens/_legacy-tokens.json rename to tokens/legacy-tokens.json diff --git a/tokens/_motion.json b/tokens/motion.json similarity index 100% rename from tokens/_motion.json rename to tokens/motion.json diff --git a/tokens/schema.color.json b/tokens/schema.color.json deleted file mode 100644 index 4747e602b87..00000000000 --- a/tokens/schema.color.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "$schema": "http://json-schema.org/draft-07/schema#", - "title": "Color schema", - "type": "object", - "additionalProperties": { - "type": "object", - "additionalProperties": { - "type": "string" - } - } -} diff --git a/tokens/schema.token-group.json b/tokens/schemas/token-group.json similarity index 100% rename from tokens/schema.token-group.json rename to tokens/schemas/token-group.json diff --git a/tokens/_shape.json b/tokens/shape.json similarity index 100% rename from tokens/_shape.json rename to tokens/shape.json diff --git a/tokens/_spacing.json b/tokens/spacing.json similarity index 100% rename from tokens/_spacing.json rename to tokens/spacing.json diff --git a/tokens/_typography.json b/tokens/typography.json similarity index 100% rename from tokens/_typography.json rename to tokens/typography.json diff --git a/tokens/_z-index.json b/tokens/z-index.json similarity index 100% rename from tokens/_z-index.json rename to tokens/z-index.json From d0c9f8c4462bb4cc597e826821b19d88e2488749 Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 8 Dec 2021 17:09:13 -0800 Subject: [PATCH 05/15] feat: Update CustomProperties component to use JSON tokens --- src/{tokens => }/tokens.ts | 26 ++-- src/tokens/_color.ts | 271 ----------------------------------- src/tokens/_legacy-tokens.ts | 42 ------ src/tokens/_motion.ts | 20 --- src/tokens/_shape.ts | 11 -- src/tokens/_spacing.ts | 21 --- src/tokens/_typography.ts | 8 -- src/tokens/_z-index.ts | 16 --- src/tokens/index.ts | 1 - tokens/types.d.ts | 15 ++ 10 files changed, 26 insertions(+), 405 deletions(-) rename src/{tokens => }/tokens.ts (66%) delete mode 100644 src/tokens/_color.ts delete mode 100644 src/tokens/_legacy-tokens.ts delete mode 100644 src/tokens/_motion.ts delete mode 100644 src/tokens/_shape.ts delete mode 100644 src/tokens/_spacing.ts delete mode 100644 src/tokens/_typography.ts delete mode 100644 src/tokens/_z-index.ts delete mode 100644 src/tokens/index.ts create mode 100644 tokens/types.d.ts diff --git a/src/tokens/tokens.ts b/src/tokens.ts similarity index 66% rename from src/tokens/tokens.ts rename to src/tokens.ts index 1193e7ecdcf..503f67dae39 100644 --- a/src/tokens/tokens.ts +++ b/src/tokens.ts @@ -1,18 +1,14 @@ -import {legacyTokens} from './_legacy-tokens'; -import {shape} from './_shape'; -import {lightColorScheme, darkColorScheme} from './_color'; -import {motion} from './_motion'; -import {spacing} from './_spacing'; -import {typography} from './_typography'; -import {zIndex} from './_z-index'; - -/** - * Values to convert to CSS custom properties. - * @example {background: '#000'} // --p-background: #000; - */ -export interface TokenGroup { - [token: string]: string; -} +import legacyTokens from '../tokens/legacy-tokens.json'; +import shape from '../tokens/shape.json'; +import lightColorScheme from '../tokens/color.light.json'; +import darkColorScheme from '../tokens/color.dark.json'; +import motion from '../tokens/motion.json'; +import spacing from '../tokens/spacing.json'; +import typography from '../tokens/typography.json'; +import zIndex from '../tokens/z-index.json'; +import type {TokenGroup} from '../tokens/types'; + +export type {TokenGroup} from '../tokens/types'; export type ColorScheme = 'light' | 'dark'; diff --git a/src/tokens/_color.ts b/src/tokens/_color.ts deleted file mode 100644 index 128f0a55332..00000000000 --- a/src/tokens/_color.ts +++ /dev/null @@ -1,271 +0,0 @@ -import type {TokenGroup} from './tokens'; - -/** - * All light color-scheme tokens. - * - * Note: These values were cut/paste directly from the devtools. - */ -export const lightColorScheme: TokenGroup = { - 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)', -}; - -/** - * All dark color-scheme tokens. - * - * Note: These values were cut/paste directly from the devtools. - */ -export const darkColorScheme: TokenGroup = { - 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)', -}; diff --git a/src/tokens/_legacy-tokens.ts b/src/tokens/_legacy-tokens.ts deleted file mode 100644 index 45420f6639f..00000000000 --- a/src/tokens/_legacy-tokens.ts +++ /dev/null @@ -1,42 +0,0 @@ -import type {TokenGroup} from './tokens'; - -/** - * This file contains legacy design tokens that have not yet been categorized - * and organized into files. The goal is to eventually remove this file by - * categorizing tokens by group, moving them into separate files, and/or - * deprecating any undesired tokens. - */ -export const legacyTokens: TokenGroup = { - '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', -}; diff --git a/src/tokens/_motion.ts b/src/tokens/_motion.ts deleted file mode 100644 index 583e5060184..00000000000 --- a/src/tokens/_motion.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type {TokenGroup} from './tokens'; - -export const motion: TokenGroup = { - '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)', -}; diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts deleted file mode 100644 index 4608a35d8dd..00000000000 --- a/src/tokens/_shape.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type {TokenGroup} from './tokens'; - -export const shape: TokenGroup = { - '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%', -}; diff --git a/src/tokens/_spacing.ts b/src/tokens/_spacing.ts deleted file mode 100644 index 13426cab962..00000000000 --- a/src/tokens/_spacing.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type {TokenGroup} from './tokens'; - -export const spacing: TokenGroup = { - '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', -}; diff --git a/src/tokens/_typography.ts b/src/tokens/_typography.ts deleted file mode 100644 index 5774acd2fba..00000000000 --- a/src/tokens/_typography.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type {TokenGroup} from './tokens'; - -export const typography: TokenGroup = { - 'font-weight-regular': '400', - 'font-weight-medium': '500', - 'font-weight-semibold': '600', - 'font-weight-bold': '700', -}; diff --git a/src/tokens/_z-index.ts b/src/tokens/_z-index.ts deleted file mode 100644 index ebbe8edf367..00000000000 --- a/src/tokens/_z-index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type {TokenGroup} from './tokens'; - -export const zIndex: TokenGroup = { - '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', -}; diff --git a/src/tokens/index.ts b/src/tokens/index.ts deleted file mode 100644 index e56053c1660..00000000000 --- a/src/tokens/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './tokens'; diff --git a/tokens/types.d.ts b/tokens/types.d.ts new file mode 100644 index 00000000000..f4cc90855a6 --- /dev/null +++ b/tokens/types.d.ts @@ -0,0 +1,15 @@ +/** + * Values to convert to CSS custom properties. + * @example {background: '#000'} // --p-background: #000; + */ +export interface TokenGroup { + [token: string]: string; +} + +// Note: Casting all JSON files is safe because we validate each token group with `json-schema`. +declare module './*.json' { + const tokenGroup: TokenGroup; + + // eslint-disable-next-line import/no-default-export + export default tokenGroup; +} From 004d693132051f862b9a3d0258b88d8bb98d434e Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 8 Dec 2021 17:32:57 -0800 Subject: [PATCH 06/15] fix: Remove unneeded type changes --- src/tokens.ts | 11 ++++++++--- tokens/types.d.ts | 15 --------------- 2 files changed, 8 insertions(+), 18 deletions(-) delete mode 100644 tokens/types.d.ts diff --git a/src/tokens.ts b/src/tokens.ts index 503f67dae39..a7a352d7a92 100644 --- a/src/tokens.ts +++ b/src/tokens.ts @@ -6,12 +6,17 @@ import motion from '../tokens/motion.json'; import spacing from '../tokens/spacing.json'; import typography from '../tokens/typography.json'; import zIndex from '../tokens/z-index.json'; -import type {TokenGroup} from '../tokens/types'; - -export type {TokenGroup} from '../tokens/types'; export type ColorScheme = 'light' | 'dark'; +/** + * Values to convert to CSS custom properties. + * @example {background: '#000'} // --p-background: #000; + */ +export interface TokenGroup { + [token: string]: string; +} + /** * Mapping of Polaris color schemes to operating system color schemes. * diff --git a/tokens/types.d.ts b/tokens/types.d.ts deleted file mode 100644 index f4cc90855a6..00000000000 --- a/tokens/types.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Values to convert to CSS custom properties. - * @example {background: '#000'} // --p-background: #000; - */ -export interface TokenGroup { - [token: string]: string; -} - -// Note: Casting all JSON files is safe because we validate each token group with `json-schema`. -declare module './*.json' { - const tokenGroup: TokenGroup; - - // eslint-disable-next-line import/no-default-export - export default tokenGroup; -} From 32b091b41f7a844fadca4d77da9834cf2527a7d0 Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 8 Dec 2021 17:35:39 -0800 Subject: [PATCH 07/15] fix: Revert type order change --- src/tokens.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tokens.ts b/src/tokens.ts index a7a352d7a92..1e7400ef2f2 100644 --- a/src/tokens.ts +++ b/src/tokens.ts @@ -7,8 +7,6 @@ import spacing from '../tokens/spacing.json'; import typography from '../tokens/typography.json'; import zIndex from '../tokens/z-index.json'; -export type ColorScheme = 'light' | 'dark'; - /** * Values to convert to CSS custom properties. * @example {background: '#000'} // --p-background: #000; @@ -17,6 +15,8 @@ export interface TokenGroup { [token: string]: string; } +export type ColorScheme = 'light' | 'dark'; + /** * Mapping of Polaris color schemes to operating system color schemes. * From 985631405e3cc8f550ccb68d411b589a3bb52bb8 Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Thu, 9 Dec 2021 10:34:48 -0800 Subject: [PATCH 08/15] fix: Convert px to rems in tokens.ts --- src/tokens/index.ts | 1 + src/{ => tokens}/tokens.ts | 22 ++++++++++++---------- src/tokens/utilities.ts | 13 +++++++++++++ 3 files changed, 26 insertions(+), 10 deletions(-) create mode 100644 src/tokens/index.ts rename src/{ => tokens}/tokens.ts (68%) create mode 100644 src/tokens/utilities.ts diff --git a/src/tokens/index.ts b/src/tokens/index.ts new file mode 100644 index 00000000000..e56053c1660 --- /dev/null +++ b/src/tokens/index.ts @@ -0,0 +1 @@ +export * from './tokens'; diff --git a/src/tokens.ts b/src/tokens/tokens.ts similarity index 68% rename from src/tokens.ts rename to src/tokens/tokens.ts index 1e7400ef2f2..0cd4c9deb08 100644 --- a/src/tokens.ts +++ b/src/tokens/tokens.ts @@ -1,11 +1,13 @@ -import legacyTokens from '../tokens/legacy-tokens.json'; -import shape from '../tokens/shape.json'; -import lightColorScheme from '../tokens/color.light.json'; -import darkColorScheme from '../tokens/color.dark.json'; -import motion from '../tokens/motion.json'; -import spacing from '../tokens/spacing.json'; -import typography from '../tokens/typography.json'; -import zIndex from '../tokens/z-index.json'; +import legacyTokens from '../../tokens/legacy-tokens.json'; +import shape from '../../tokens/shape.json'; +import lightColorScheme from '../../tokens/color.light.json'; +import darkColorScheme from '../../tokens/color.dark.json'; +import motion from '../../tokens/motion.json'; +import spacing from '../../tokens/spacing.json'; +import typography from '../../tokens/typography.json'; +import zIndex from '../../tokens/z-index.json'; + +import {tokensToRems} from './utilities'; /** * Values to convert to CSS custom properties. @@ -55,11 +57,11 @@ export interface Tokens { } export const tokens: Tokens = { - shape, + shape: tokensToRems(shape), colorSchemes, legacyTokens, motion, - spacing, + spacing: tokensToRems(spacing), typography, zIndex, }; diff --git a/src/tokens/utilities.ts b/src/tokens/utilities.ts new file mode 100644 index 00000000000..e307aac439c --- /dev/null +++ b/src/tokens/utilities.ts @@ -0,0 +1,13 @@ +import type {TokenGroup} from './tokens'; + +const BASE_FONT_SIZE = 16; + +export function rem(px: string) { + return `${parseInt(px, 10) / BASE_FONT_SIZE}rem`; +} + +export function tokensToRems(tokenGroup: TokenGroup): TokenGroup { + return Object.fromEntries( + Object.entries(tokenGroup).map(([token, value]) => [token, rem(value)]), + ); +} From ba246d471235855fad449bc00aabacec407a8d8c Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Thu, 9 Dec 2021 11:10:03 -0800 Subject: [PATCH 09/15] feat: Add @rollup/plugin-json --- loom.config.ts | 4 ++++ package.json | 1 + yarn.lock | 7 +++++++ 3 files changed, 12 insertions(+) diff --git a/loom.config.ts b/loom.config.ts index 23f5e5ef76f..40b60662121 100644 --- a/loom.config.ts +++ b/loom.config.ts @@ -14,6 +14,7 @@ import {stylelint} from '@shopify/loom-plugin-stylelint'; import {prettier} from '@shopify/loom-plugin-prettier'; import replace from '@rollup/plugin-replace'; import image from '@rollup/plugin-image'; +import json from '@rollup/plugin-json'; import packageJSON from './package.json'; import {styles} from './config/rollup/plugin-styles'; @@ -156,6 +157,9 @@ function rollupAdjustPluginsPlugin() { delimiters: ['', ''], }), image(), + json({ + compact: true, + }), styles(stylesConfig), ]; }); diff --git a/package.json b/package.json index e883560338c..303d7b575f5 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "@babel/core": "^7.15.0", "@babel/node": "^7.14.9", "@rollup/plugin-image": "^2.0.5", + "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-replace": "^2.3.3", "@rollup/pluginutils": "^3.1.0", "@shopify/babel-preset": "^24.1.2", diff --git a/yarn.lock b/yarn.lock index 05ddf3890e1..cc59a563448 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1788,6 +1788,13 @@ "@rollup/pluginutils" "^3.0.4" mini-svg-data-uri "^1.1.3" +"@rollup/plugin-json@^4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3" + integrity sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw== + dependencies: + "@rollup/pluginutils" "^3.0.8" + "@rollup/plugin-node-resolve@^13.0.0": version "13.0.4" resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.4.tgz#b10222f4145a019740acb7738402130d848660c0" From 662fa997cc2e413803c09929ffa29ea7a97fac2c Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Thu, 9 Dec 2021 15:19:14 -0800 Subject: [PATCH 10/15] fix: Revert vscode settings change --- .vscode/settings.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 15d2a76add1..a567f5e5b46 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -23,6 +23,5 @@ "{build,build-internal}/": true, "examples/*/build": true }, - "typescript.tsdk": "./node_modules/typescript/lib", - "cSpell.words": ["semibold"] + "typescript.tsdk": "./node_modules/typescript/lib" } From fb111b0e3f22108f040301f1fb86e08e1f7f17c1 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Thu, 9 Dec 2021 16:37:49 -0800 Subject: [PATCH 11/15] fix: Update rem utility to only transform valid px units --- src/tokens/utilities.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/tokens/utilities.ts b/src/tokens/utilities.ts index e307aac439c..21077f4d590 100644 --- a/src/tokens/utilities.ts +++ b/src/tokens/utilities.ts @@ -2,8 +2,12 @@ import type {TokenGroup} from './tokens'; const BASE_FONT_SIZE = 16; -export function rem(px: string) { - return `${parseInt(px, 10) / BASE_FONT_SIZE}rem`; +function rem(value: string) { + return value.replace( + // https://regex101.com/r/RBL7EE/1 + /\d+(?:\.\d+|\d*)px/g, + (px: string) => `${parseInt(px, 10) / BASE_FONT_SIZE}rem`, + ); } export function tokensToRems(tokenGroup: TokenGroup): TokenGroup { From 1aef8474724df46702586625b7a96d199a686e92 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 10 Dec 2021 10:49:45 -0800 Subject: [PATCH 12/15] fix: Move token groups to 'src' directory to resolve build errors --- package.json | 2 +- {tokens => src/tokens}/schemas/token-group.json | 0 .../tokens/token-groups}/color.dark.json | 0 .../tokens/token-groups}/color.light.json | 0 .../tokens/token-groups}/legacy-tokens.json | 0 {tokens => src/tokens/token-groups}/motion.json | 0 {tokens => src/tokens/token-groups}/shape.json | 0 .../tokens/token-groups}/spacing.json | 0 .../tokens/token-groups}/typography.json | 0 .../tokens/token-groups}/z-index.json | 0 src/tokens/tokens.ts | 17 ++++++++--------- 11 files changed, 9 insertions(+), 10 deletions(-) rename {tokens => src/tokens}/schemas/token-group.json (100%) rename {tokens => src/tokens/token-groups}/color.dark.json (100%) rename {tokens => src/tokens/token-groups}/color.light.json (100%) rename {tokens => src/tokens/token-groups}/legacy-tokens.json (100%) rename {tokens => src/tokens/token-groups}/motion.json (100%) rename {tokens => src/tokens/token-groups}/shape.json (100%) rename {tokens => src/tokens/token-groups}/spacing.json (100%) rename {tokens => src/tokens/token-groups}/typography.json (100%) rename {tokens => src/tokens/token-groups}/z-index.json (100%) diff --git a/package.json b/package.json index 08f3b2fd44f..79a6034eb10 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "version": "yarn run readme-update-version", "storybook": "start-storybook -p 6006 --quiet", "storybook:build": "build-storybook -o build-internal/storybook/static", - "validate-tokens": "ajv validate -s tokens/schemas/token-group.json -d 'tokens/*.json'" + "validate-tokens": "ajv validate -s src/tokens/schemas/token-group.json -d 'src/tokens/token-groups/*.json'" }, "dependencies": { "@shopify/polaris-icons": "^4.10.0", diff --git a/tokens/schemas/token-group.json b/src/tokens/schemas/token-group.json similarity index 100% rename from tokens/schemas/token-group.json rename to src/tokens/schemas/token-group.json diff --git a/tokens/color.dark.json b/src/tokens/token-groups/color.dark.json similarity index 100% rename from tokens/color.dark.json rename to src/tokens/token-groups/color.dark.json diff --git a/tokens/color.light.json b/src/tokens/token-groups/color.light.json similarity index 100% rename from tokens/color.light.json rename to src/tokens/token-groups/color.light.json diff --git a/tokens/legacy-tokens.json b/src/tokens/token-groups/legacy-tokens.json similarity index 100% rename from tokens/legacy-tokens.json rename to src/tokens/token-groups/legacy-tokens.json diff --git a/tokens/motion.json b/src/tokens/token-groups/motion.json similarity index 100% rename from tokens/motion.json rename to src/tokens/token-groups/motion.json diff --git a/tokens/shape.json b/src/tokens/token-groups/shape.json similarity index 100% rename from tokens/shape.json rename to src/tokens/token-groups/shape.json diff --git a/tokens/spacing.json b/src/tokens/token-groups/spacing.json similarity index 100% rename from tokens/spacing.json rename to src/tokens/token-groups/spacing.json diff --git a/tokens/typography.json b/src/tokens/token-groups/typography.json similarity index 100% rename from tokens/typography.json rename to src/tokens/token-groups/typography.json diff --git a/tokens/z-index.json b/src/tokens/token-groups/z-index.json similarity index 100% rename from tokens/z-index.json rename to src/tokens/token-groups/z-index.json diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts index 0cd4c9deb08..4383e7ec628 100644 --- a/src/tokens/tokens.ts +++ b/src/tokens/tokens.ts @@ -1,12 +1,11 @@ -import legacyTokens from '../../tokens/legacy-tokens.json'; -import shape from '../../tokens/shape.json'; -import lightColorScheme from '../../tokens/color.light.json'; -import darkColorScheme from '../../tokens/color.dark.json'; -import motion from '../../tokens/motion.json'; -import spacing from '../../tokens/spacing.json'; -import typography from '../../tokens/typography.json'; -import zIndex from '../../tokens/z-index.json'; - +import legacyTokens from './token-groups/legacy-tokens.json'; +import shape from './token-groups/shape.json'; +import lightColorScheme from './token-groups/color.light.json'; +import darkColorScheme from './token-groups/color.dark.json'; +import motion from './token-groups/motion.json'; +import spacing from './token-groups/spacing.json'; +import typography from './token-groups/typography.json'; +import zIndex from './token-groups/z-index.json'; import {tokensToRems} from './utilities'; /** From 495e7e95426a27df211487e6b468117d546af3cc Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 10 Dec 2021 13:09:33 -0800 Subject: [PATCH 13/15] Remove /tokens in favor of /src/tokens --- src/tokens/token-groups/depth.json | 19 +-- src/tokens/token-groups/legacy-tokens.json | 7 -- tokens/color.dark.json | 129 --------------------- tokens/color.light.json | 129 --------------------- tokens/legacy-tokens.json | 19 --- tokens/motion.json | 18 --- tokens/schemas/token-group.json | 8 -- tokens/shape.json | 9 -- tokens/spacing.json | 19 --- tokens/typography.json | 6 - tokens/z-index.json | 14 --- 11 files changed, 6 insertions(+), 371 deletions(-) delete mode 100644 tokens/color.dark.json delete mode 100644 tokens/color.light.json delete mode 100644 tokens/legacy-tokens.json delete mode 100644 tokens/motion.json delete mode 100644 tokens/schemas/token-group.json delete mode 100644 tokens/shape.json delete mode 100644 tokens/spacing.json delete mode 100644 tokens/typography.json delete mode 100644 tokens/z-index.json diff --git a/src/tokens/token-groups/depth.json b/src/tokens/token-groups/depth.json index 9c674eff103..571c5a9ad92 100644 --- a/src/tokens/token-groups/depth.json +++ b/src/tokens/token-groups/depth.json @@ -1,21 +1,14 @@ - { "shadow-transparent": "0 0 0 0 transparent", "shadow-faint": "0 1px 0 0 rgba(22, 29, 37, 0.05)", - "shadow-base": - "0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)", - "shadow-deep": - "0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)", + "shadow-base": "0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)", + "shadow-deep": "0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)", "shadow-button": "0 1px 0 rgba(0, 0, 0, 0.05)", "shadow-top-bar": "0 2px 2px -1px rgba(0, 0, 0, 0.15)", - "shadow-card": - "0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)", - "shadow-popover": - "-1px 0 20px rgba(23, 24, 24, 0.05), 0 1px 5px rgba(0, 0, 0, 0.15)", - "shadow-layer": - "0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)", - "shadow-modal": - "0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)", + "shadow-card": "0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)", + "shadow-popover": "-1px 0 20px rgba(23, 24, 24, 0.05), 0 1px 5px rgba(0, 0, 0, 0.15)", + "shadow-layer": "0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)", + "shadow-modal": "0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)", "shadows-inset-button": "inset 0 -1px 0 rgba(0, 0, 0, 0.2)", "shadows-inset-button-pressed": "inset 0 1px 0 rgba(0, 0, 0, 0.15)" } diff --git a/src/tokens/token-groups/legacy-tokens.json b/src/tokens/token-groups/legacy-tokens.json index 14489af1f64..a9bce7ce97e 100644 --- a/src/tokens/token-groups/legacy-tokens.json +++ b/src/tokens/token-groups/legacy-tokens.json @@ -1,11 +1,4 @@ { - "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", diff --git a/tokens/color.dark.json b/tokens/color.dark.json deleted file mode 100644 index 252c6c0cfb3..00000000000 --- a/tokens/color.dark.json +++ /dev/null @@ -1,129 +0,0 @@ -{ - "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)" -} diff --git a/tokens/color.light.json b/tokens/color.light.json deleted file mode 100644 index 95e1e303d0b..00000000000 --- a/tokens/color.light.json +++ /dev/null @@ -1,129 +0,0 @@ -{ - "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)" -} diff --git a/tokens/legacy-tokens.json b/tokens/legacy-tokens.json deleted file mode 100644 index a9bce7ce97e..00000000000 --- a/tokens/legacy-tokens.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "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" -} diff --git a/tokens/motion.json b/tokens/motion.json deleted file mode 100644 index 81ff7b66766..00000000000 --- a/tokens/motion.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "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)" -} diff --git a/tokens/schemas/token-group.json b/tokens/schemas/token-group.json deleted file mode 100644 index 53183583da5..00000000000 --- a/tokens/schemas/token-group.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "$schema": "http://json-schema.org/draft-07/schema#", - "title": "Token group schema", - "type": "object", - "additionalProperties": { - "type": "string" - } -} diff --git a/tokens/shape.json b/tokens/shape.json deleted file mode 100644 index a0b34dc1140..00000000000 --- a/tokens/shape.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "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%" -} diff --git a/tokens/spacing.json b/tokens/spacing.json deleted file mode 100644 index e3f9434f8c9..00000000000 --- a/tokens/spacing.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "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" -} diff --git a/tokens/typography.json b/tokens/typography.json deleted file mode 100644 index 3aa584f2bf3..00000000000 --- a/tokens/typography.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "font-weight-regular": "400", - "font-weight-medium": "500", - "font-weight-semibold": "600", - "font-weight-bold": "700" -} diff --git a/tokens/z-index.json b/tokens/z-index.json deleted file mode 100644 index d63e8f1ad99..00000000000 --- a/tokens/z-index.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "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" -} From d9bbc820406cb0c0b8d117cbfce28c5f630a8ce2 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 10 Dec 2021 15:28:02 -0800 Subject: [PATCH 14/15] fix: Convert legacy token rems to pxs --- src/tokens/token-groups/legacy-tokens.json | 30 +++++++++++----------- src/tokens/tokens.ts | 2 +- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/tokens/token-groups/legacy-tokens.json b/src/tokens/token-groups/legacy-tokens.json index a9bce7ce97e..dd46534326e 100644 --- a/src/tokens/token-groups/legacy-tokens.json +++ b/src/tokens/token-groups/legacy-tokens.json @@ -1,19 +1,19 @@ { "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", + "choice-size": "20px", + "icon-size": "10px", + "choice-margin": "1px", + "control-border-width": "2px", + "banner-border-default": "inset 0 1px 0 0 var(--p-border-neutral-subdued), inset 0 0 0 1px var(--p-border-neutral-subdued)", + "banner-border-success": "inset 0 1px 0 0 var(--p-border-success-subdued), inset 0 0 0 1px var(--p-border-success-subdued)", + "banner-border-highlight": "inset 0 1px 0 0 var(--p-border-highlight-subdued), inset 0 0 0 1px var(--p-border-highlight-subdued)", + "banner-border-warning": "inset 0 1px 0 0 var(--p-border-warning-subdued), inset 0 0 0 1px var(--p-border-warning-subdued)", + "banner-border-critical": "inset 0 1px 0 0 var(--p-border-critical-subdued), inset 0 0 0 1px var(--p-border-critical-subdued)", + "thin-border-subdued": "1px solid var(--p-border-subdued)", + "text-field-spinner-offset": "2px", + "text-field-focus-ring-offset": "-4px", + "button-group-item-spacing": "-1px", + "range-slider-thumb-size-base": "16px", + "range-slider-thumb-size-active": "24px", "frame-offset": "0px" } diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts index 4dbfc4a5a8b..8630b72e380 100644 --- a/src/tokens/tokens.ts +++ b/src/tokens/tokens.ts @@ -60,7 +60,7 @@ export interface Tokens { export const tokens: Tokens = { colorSchemes, depth, - legacyTokens, + legacyTokens: tokensToRems(legacyTokens), motion, shape: tokensToRems(shape), spacing: tokensToRems(spacing), From 1e619dc8e1aee97ee867393bcb5e9e68df9ae283 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Fri, 10 Dec 2021 16:02:58 -0800 Subject: [PATCH 15/15] fix: Convert IndexTable rems to pxs --- src/components/IndexTable/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/IndexTable/README.md b/src/components/IndexTable/README.md index 1177a338b86..7d3ddec0545 100644 --- a/src/components/IndexTable/README.md +++ b/src/components/IndexTable/README.md @@ -156,7 +156,7 @@ function SimpleSmallScreenIndexTableExample() { selected={selectedResources.includes(id)} position={index} > -
+

{name}