From f555ced61fdd5db82b41c501dae3651b8ff04ee6 Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 8 Dec 2021 15:26:02 -0800 Subject: [PATCH 1/5] 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 2/5] 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 3/5] 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 4/5] 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 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 5/5] 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" }