diff --git a/.gitignore b/.gitignore index 48912d2..5f019f3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ build -node_modules \ No newline at end of file +node_modules +.vscode/launch.json diff --git a/demos/cssVar/index.html b/demos/cssVar/index.html new file mode 100644 index 0000000..52ddb48 --- /dev/null +++ b/demos/cssVar/index.html @@ -0,0 +1,362 @@ + + + + + + +
+

Neutral

+
+

Foreground

+
+

gray0

+
+
+

gray1000

+
+
+ +
+

Background

+
+ gray50 +
+
+ gray1200 +
+
+ +
+

Background2

+
+ gray100 +
+
+ gray1100 +
+
+ +
+

navigation

+
+ gray1000 +
+
+ gray1000 +
+
+ +
+

stroke

+ +
+ gray400 +
+
+ gray900 +
+
+
+
+

Brand

+
+

Primary

+
+ primary500 +
+
+ primary300 +
+
+
+

Primary Surface

+
+ primary50 +
+
+ gray1100 +
+
+
+

Primary Gradient

+
+ brand-primary-gradient-start + brand-primary-gradient-end +
+
+ brand-primary-gradient-start + brand-primary-gradient-end +
+
+ +
+

secondary

+
+ secondary500 +
+
+ secondary300 +
+
+
+

secondary Surface

+
+ secondary50 +
+
+ gray1100 +
+
+
+

secondary Gradient

+
+ brand-secondary-gradient-start + brand-secondary-gradient-end +
+
+ brand-secondary-gradient-start + brand-secondary-gradient-end +
+
+
+ +
+

Text

+
+

Text on Primary

+
+ text-on-primary-lm +
+
+ text-on-primary-dm +
+
+
+

Text on Secondary

+
+ text-on-secondary-lm +
+
+ text-on-secondary-dm +
+
+ +
+

Text

+
+ gray1000 +
+
+ gray0 +
+
+ +
+

Text Subdued

+
+ gray600 +
+
+ gray1100 +
+
+ +
+

Text Reverse

+
+ gray0 +
+
+ gray1000 +
+
+ +
+

Text Negative

+
+ red700 +
+
+ red300 +
+
+ +
+

Text Positive

+
+ green700 +
+
+ green300 +
+
+
+ +
+

Common

+
+

Positive

+
+ green500 +
+
+ green400 +
+
+ +
+

Positive Surface

+
+ green100 +
+
+ gray.1000 +
+
+
+

Negative

+
+ red600 +
+
+ red300 +
+
+
+

Negative Surface

+
+ red100 +
+
+ gray.1000 +
+
+ +
+

highlight

+
+ yellow500 +
+
+ yellow200 +
+
+
+

highlight Surface

+
+ yellow200 +
+
+ gray.1000 +
+
+ +
+

information

+
+ purple700 +
+
+ purple300 +
+
+
+

information Surface

+
+ purple100 +
+
+ gray.1000 +
+
+ +
+

trivial

+
+ purple700 +
+
+ purple300 +
+
+
+

trivial Surface

+
+ purple100 +
+
+ gray.1000 +
+
+
+ +
+

action

+
+

action-primary

+
+ secondary500 +
+
+ secondary200 +
+
+
+

action-primary Surface

+
+ secondary600 +
+
+ secondary300 +
+
+ +
+

action-negative

+
+ red700 +
+
+ red300 +
+
+
+

action-negative Surface

+
+ red800 +
+
+ red400 +
+
+ +
+

action-positive

+
+ green700 +
+
+ green300 +
+
+
+

action-positive Surface

+
+ green800 +
+
+ green400 +
+
+ +
+

action-disabled

+
+ gray100 +
+
+ gray800 +
+
+ +
\ No newline at end of file diff --git a/demos/cssVar/style.css b/demos/cssVar/style.css new file mode 100644 index 0000000..eb84a82 --- /dev/null +++ b/demos/cssVar/style.css @@ -0,0 +1,43 @@ +:root { + font-family: var(--xpl-font-family-default); +} +body { + background-color: var(--xpl-color-neutral-background-lm); + display: grid; + justify-content: center; + grid-template-columns: minmax(auto, 600px); + gap: 16px; + +} + +section { + background-color: var(--xpl-color-neutral-foreground-lm); + padding: var(--xpl-size-spacing-16); + border-radius: var(--xpl-size-radius-large); + display: grid; + gap: var(--xpl-size-spacing-8); +} + +.row { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: var(--xpl-size-spacing-8); + border-bottom: 1px solid var(--xpl-color-neutral-stroke-lm); + padding: 16px 0; +} + +h2 { + display: block; + width: 100%; + border-bottom: 1px solid var(--xpl-color-neutral-stroke-lm); + padding-bottom: var(--xpl-size-spacing-8); + margin: 0; +} + +.color-swatch { + border-radius: var(--xpl-size-radius-default); + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 770c370..fc15bf2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@xplortech/apollo-foundation", - "version": "0.0.1", + "version": "0.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/tokens/color/Common.json b/tokens/color/Common.json new file mode 100644 index 0000000..1846f90 --- /dev/null +++ b/tokens/color/Common.json @@ -0,0 +1,74 @@ +{ + "color": { + "positive": { + "lm": {"value": "{color.green500.value}"}, + "dm": {"value": "{color.green300.value}"}, + "surface": { + "lm": {"value": "{color.green100.value}"}, + "dm": {"value": "{color.gray1000.value}"} + } + }, + "negative": { + "lm": {"value": "{color.red600.value}"}, + "dm": {"value": "{color.red300.value}"}, + "surface": { + "lm": {"value": "{color.red100.value}"}, + "dm": {"value": "{color.gray1000.value}"} + } + }, + "highlight": { + "lm": {"value": "{color.yellow500.value}"}, + "dm": {"value": "{color.yellow200.value}"}, + "surface": { + "lm": {"value": "{color.yellow200.value}"}, + "dm": {"value": "{color.gray1000.value}"} + } + }, + "information": { + "lm": {"value": "{color.purple700.value}"}, + "dm": {"value": "{color.purple300.value}"}, + "surface": { + "lm": {"value": "{color.purple100.value}"}, + "dm": {"value": "{color.gray1000.value}"} + } + }, + "trivial": { + "lm": {"value": "{color.gray600.value}"}, + "dm": {"value": "{color.gray500.value}"}, + "surface": { + "lm": {"value": "{color.gray400.value}"}, + "dm": {"value": "{color.gray1000.value}"} + } + }, + "action": { + "primary": { + "lm": {"value": "{color.secondary500.value}"}, + "dm": {"value": "{color.secondary200.value}"}, + "focus": { + "lm": {"value": "{color.secondary600.value}"}, + "dm": {"value": "{color.secondary300.value}"} + } + }, + "negative": { + "lm": {"value": "{color.red700.value}"}, + "dm": {"value": "{color.red300.value}"}, + "focus": { + "lm": {"value": "{color.red800.value}"}, + "dm": {"value": "{color.red400.value}"} + } + }, + "positive": { + "lm": {"value": "{color.green700.value}"}, + "dm": {"value": "{color.green200.value}"}, + "focus": { + "lm": {"value": "{color.green800.value}"}, + "dm": {"value": "{color.green400.value}"} + } + }, + "disabled": { + "lm": {"value": "{color.gray100.value}"}, + "dm": {"value": "{color.gray800.value}"} + } + } + } +} diff --git a/tokens/color/Neutral.json b/tokens/color/Neutral.json new file mode 100644 index 0000000..5de79d0 --- /dev/null +++ b/tokens/color/Neutral.json @@ -0,0 +1,27 @@ +{ + "color": { + "Neutral": { + "foreground": { + "lm": {"value": "{color.gray0.value}"}, + "dm": {"value": "{color.gray1000.value}"} + }, + "background": { + "lm": {"value": "{color.gray50.value}"}, + "dm": {"value": "{color.gray1200.value}"} + }, + "background2": { + "lm": {"value": "{color.gray100.value}"}, + "dm": {"value": "{color.gray1100.value}"} + }, + "navigation": { + "lm": {"value": "{color.gray1000.value}"}, + "dm": {"value": "{color.gray1000.value}"} + }, + "stroke": { + "lm": {"value": "{color.gray400.value}"}, + "dm": {"value": "{color.gray600.value}"} + } + } + } +} + diff --git a/tokens/color/SemanticPalette.json b/tokens/color/SemanticPalette.json deleted file mode 100644 index 015564a..0000000 --- a/tokens/color/SemanticPalette.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "color": { - "positive": { - "lm": {"value": "{color.green.500.value}"}, - "dm": {"value": "{color.green.300.value}"} - }, - "positive-bg": { - "lm": {"value": "{color.green.100.value}"}, - "dm": {"value": "{color.transparent.value}"} - }, - "negative": { - "lm": {"value": "{color.red.600.value}"}, - "dm": {"value": "{color.red.300.value}"} - }, - "negative-bg": { - "lm": {"value": "{color.red.100.value}"}, - "dm": {"value": "{color.transparent.value}"} - }, - "highlight": { - "lm": {"value": "{color.yellow.500.value}"}, - "dm": {"value": "{color.yellow.200.value}"} - }, - "highlight-bg": { - "lm": {"value": "{color.yellow.200.value}"}, - "dm": {"value": "{color.transparent.value}"} - }, - "information": { - "lm": {"value": "{color.secondary.lm.value}","comment": "uses themable token"}, - "dm": {"value": "{color.secondary.dm.value}","comment": "uses themable token"} - }, - "information-bg": { - "lm": {"value": "{color.secondary-bg.lm.value}","comment": "uses themable token"}, - "dm": {"value": "{color.transparent.value}"} - }, - "trivial": { - "lm": {"value": "{color.gray.600.value}"}, - "dm": {"value": "{color.gray.500.value}"} - }, - "trivial-bg": { - "lm": {"value": "{color.gray.400.value}"}, - "dm": {"value": "{color.transparent.value}"} - }, - "action": { - "primary": { - "lm": {"value": "{color.purple.700.value}"}, - "dm": {"value": "{color.purple.300.value}"} - }, - "primary.hover": { - "lm": {"value": "{color.purple.800.value}"}, - "dm": {"value": "{color.purple.400.value}"} - }, - "disabled": { - "lm": {"value": "{color.gray.100.value}"}, - "dm": {"value": "{color.gray.800.value}"} - }, - "warning": { - "lm": {"value": "{color.red.700.value}"}, - "dm": {"value": "{color.red.300.value}"} - }, - "warning.hover": { - "lm": {"value": "{color.red.800.value}"}, - "dm": {"value": "{color.red.400.value}"} - } - } - } -} diff --git a/tokens/color/accent.json b/tokens/color/accent.json new file mode 100644 index 0000000..e131eef --- /dev/null +++ b/tokens/color/accent.json @@ -0,0 +1,28 @@ +{ + "color": { + "accent": { + "green": { + "lm": {"value": "{color.green200.value}"}, + "dm": {"value": "{color.green200.value}"} + }, + "yellow": { + "lm": {"value": "{color.yellow200.value}"}, + "dm": {"value": "{color.yellow200.value}"} + }, + "pink": { + "lm": {"value": "{color.pink300.value}"}, + "dm": {"value": "color.pink300.value}"} + }, + "purple": { + "lm": {"value": "{color.purple300.value}"}, + "dm": {"value": "{color.purple300.value}"} + }, + "blue": { + "lm": {"value": "{color.blue200.value}"}, + "dm": {"value": "{color.blue200.value}"} + } + } + } +} + + diff --git a/tokens/color/accentPalette.json b/tokens/color/accentPalette.json deleted file mode 100644 index 56c2083..0000000 --- a/tokens/color/accentPalette.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "color": { - "accent": { - "green": {"value": "{color.green.200.value}"}, - "yellow": {"value": "{color.yellow.200.value}"}, - "pink": {"value": "{color.pink.300.value}"}, - "purple": {"value": "{color.purple.300.value}"} - } - } -} - - diff --git a/tokens/color/base.json b/tokens/color/base.json index c4cc267..e3e1d13 100644 --- a/tokens/color/base.json +++ b/tokens/color/base.json @@ -1,93 +1,115 @@ { "color": { - "gray": { - "0": {"value": "#ffffffff"}, - "50": {"value": "#f8f9faff"}, - "100": {"value": "#f3f4f6ff"}, - "200": {"value": "#eeeff3ff"}, - "300": {"value": "#eaebefff"}, - "400": {"value": "#E1E2E8ff"}, - "500": {"value": "#999BA8ff"}, - "600": {"value": "#6A6D7Dff"}, - "700": {"value": "#3C3847ff"}, - "800": {"value": "#363240ff"}, - "900": {"value": "#302D3Bff"}, - "1000": {"value": "#292632ff"}, - "1100": {"value": "#201E29ff"}, - "1200": {"value": "#18161Fff"} - }, - "purple": { - "50": {"value": "#f4f2ffff"}, - "100": {"value": "#ebe5ffff"}, - "200": {"value": "#ddd1ffff"}, - "300": {"value": "#c3adffff"}, - "400": {"value": "#a480ffff"}, - "500": {"value": "#8857faff"}, - "600": {"value": "#793ef7ff"}, - "700": {"value": "#6923f4ff"}, - "800": {"value": "#4d1ab2ff"}, - "900": {"value": "#330d80ff"} - }, - "orange": { - "50": {"value": "#fef6f4ff"}, - "100": {"value": "#feede4ff"}, - "200": {"value": "#ffdcccff"}, - "300": {"value": "#ffbda8ff"}, - "400": {"value": "#f99170ff"}, - "500": {"value": "#f76d43ff"}, - "600": {"value": "#f44e27ff"}, - "700": {"value": "#cc4121ff"}, - "800": {"value": "#a6361aff"}, - "900": {"value": "#7a2714ff"} - }, - "green": { - "50": {"value": "#ebfff8ff"}, - "100": {"value": "#c4ffedff"}, - "200": {"value": "#74fbd0ff"}, - "300": {"value": "#52ebbaff"}, - "400": {"value": "#4ad4a8ff"}, - "500": {"value": "#37b88fff"}, - "600": {"value": "#2e9977ff"}, - "700": {"value": "#24785dff"}, - "800": {"value": "#1d614bff"}, - "900": {"value": "#154737ff"} - }, - "yellow": { - "50": {"value": "#fbffe5ff"}, - "100": {"value": "#f3febbff"}, - "200": {"value": "#ecfd91ff"}, - "300": {"value": "#dce967ff"}, - "400": {"value": "#c6cc4eff"}, - "500": {"value": "#adab20ff"}, - "600": {"value": "#9e9828ff"}, - "700": {"value": "#8a8220ff"}, - "800": {"value": "#726916ff"}, - "900": {"value": "#5c5002ff"} - }, - "pink": { - "50": {"value": "#fff0feff"}, - "100": {"value": "#ffd9fbff"}, - "200": {"value": "#ffb8f9ff"}, - "300": {"value": "#ff8df4ff"}, - "400": {"value": "#f26ddcff"}, - "500": {"value": "#e550c8ff"}, - "600": {"value": "#cc3399ff"}, - "700": {"value": "#bf1d7bff"}, - "800": {"value": "#990f54ff"}, - "900": {"value": "#730b3fff"} - }, - "red": { - "50": {"value": "#fef7f3ff"}, - "100": {"value": "#fed9d5ff"}, - "200": {"value": "#fec5beff"}, - "300": {"value": "#ff9387ff"}, - "400": {"value": "#f87263ff"}, - "500": {"value": "#f24f3dff"}, - "600": {"value": "#db321fff"}, - "700": {"value": "#c2210fff"}, - "800": {"value": "#961305ff"}, - "900": {"value": "#731409ff"} - }, - "transparent": {"value": "#ffffff00"} - } + "primary50": {"value": "#FBEEEAFF"}, + "primary100": {"value": "#F4CBC0FF"}, + "primary200": {"value": "#F1BBACFF"}, + "primary300": {"value": "#EA9982FF"}, + "primary400": {"value": "#E5785BFF"}, + "primary500": {"value": "#E25A38FF"}, + "primary600": {"value": "#C64023FF"}, + "primary700": {"value": "#953019FF"}, + "primary800": {"value": "#63200FFF"}, + "primary900": {"value": "#4A180AFF"}, + "primary1000": {"value": "#180702FF"}, + "primaryGradStart": {"value": "#563D3D"}, + "primaryGradEnd": {"value": "#191720"}, + "secondary50": {"value": "#EFE9FCFF"}, + "secondary100": {"value": "#CDBFF7FF"}, + "secondary200": {"value": "#BDAAF5FF"}, + "secondary300": {"value": "#9E80F0FF"}, + "secondary400": {"value": "#7E58EDFF"}, + "secondary500": {"value": "#5F36EBFF"}, + "secondary600": {"value": "#4B2ABBFF"}, + "secondary700": {"value": "#391F8CFF"}, + "secondary800": {"value": "#25145EFF"}, + "secondary900": {"value": "#1B0E46FF"}, + "secondary1000": {"value": "#090317FF"}, + "secondaryGradStart": {"value": "#40365E"}, + "secondaryGradEnd": {"value": "#191720"}, + "gray0": {"value": "#ffffffff"}, + "gray50": {"value": "#f8f9faff"}, + "gray100": {"value": "#f3f4f6ff"}, + "gray200": {"value": "#eeeff3ff"}, + "gray300": {"value": "#eaebefff"}, + "gray400": {"value": "#E1E2E8ff"}, + "gray500": {"value": "#999BA8ff"}, + "gray600": {"value": "#6A6D7Dff"}, + "gray700": {"value": "#3C3847ff"}, + "gray800": {"value": "#363240ff"}, + "gray900": {"value": "#302D3Bff"}, + "gray1000": {"value": "#292632ff"}, + "gray1100": {"value": "#201E29ff"}, + "gray1200": {"value": "#18161Fff"}, + "purple50": {"value": "#f4f2ffff"}, + "purple100": {"value": "#ebe5ffff"}, + "purple200": {"value": "#ddd1ffff"}, + "purple300": {"value": "#c3adffff"}, + "purple400": {"value": "#a480ffff"}, + "purple500": {"value": "#8857faff"}, + "purple600": {"value": "#793ef7ff"}, + "purple700": {"value": "#6923f4ff"}, + "purple800": {"value": "#4d1ab2ff"}, + "purple900": {"value": "#330d80ff"}, + "orange50": {"value": "#fef6f4ff"}, + "orange100": {"value": "#feede4ff"}, + "orange200": {"value": "#ffdcccff"}, + "orange300": {"value": "#ffbda8ff"}, + "orange400": {"value": "#f99170ff"}, + "orange500": {"value": "#f76d43ff"}, + "orange600": {"value": "#f44e27ff"}, + "orange700": {"value": "#cc4121ff"}, + "orange800": {"value": "#a6361aff"}, + "orange900": {"value": "#7a2714ff"}, + "green50": {"value": "#ebfff8ff"}, + "green100": {"value": "#c4ffedff"}, + "green200": {"value": "#74fbd0ff"}, + "green300": {"value": "#52ebbaff"}, + "green400": {"value": "#4ad4a8ff"}, + "green500": {"value": "#37b88fff"}, + "green600": {"value": "#2e9977ff"}, + "green700": {"value": "#24785dff"}, + "green800": {"value": "#1d614bff"}, + "green900": {"value": "#154737ff"}, + "yellow50": {"value": "#fbffe5ff"}, + "yellow100": {"value": "#f3febbff"}, + "yellow200": {"value": "#ecfd91ff"}, + "yellow300": {"value": "#dce967ff"}, + "yellow400": {"value": "#c6cc4eff"}, + "yellow500": {"value": "#adab20ff"}, + "yellow600": {"value": "#9e9828ff"}, + "yellow700": {"value": "#8a8220ff"}, + "yellow800": {"value": "#726916ff"}, + "yellow900": {"value": "#5c5002ff"}, + "pink50": {"value": "#fff0feff"}, + "pink100": {"value": "#ffd9fbff"}, + "pink200": {"value": "#ffb8f9ff"}, + "pink300": {"value": "#ff8df4ff"}, + "pink400": {"value": "#f26ddcff"}, + "pink500": {"value": "#e550c8ff"}, + "pink600": {"value": "#cc3399ff"}, + "pink700": {"value": "#bf1d7bff"}, + "pink800": {"value": "#990f54ff"}, + "pink900": {"value": "#730b3fff"}, + "red50": {"value": "#fef7f3ff"}, + "red100": {"value": "#fed9d5ff"}, + "red200": {"value": "#fec5beff"}, + "red300": {"value": "#ff9387ff"}, + "red400": {"value": "#f87263ff"}, + "red500": {"value": "#f24f3dff"}, + "red600": {"value": "#db321fff"}, + "red700": {"value": "#c2210fff"}, + "red800": {"value": "#961305ff"}, + "red900": {"value": "#731409ff"}, + "blue50": {"value": "#E8FCFF"}, + "blue100": {"value": "#D1F9FF"}, + "blue200": {"value": "#BAF6FF"}, + "blue300": {"value": "#9FDAF5"}, + "blue400": {"value": "#85BFEB"}, + "blue500": {"value": "#6AA3E0"}, + "blue600": {"value": "#5088D6"}, + "blue700": {"value": "#356CCC"}, + "blue800": {"value": "#2253B3"}, + "blue900": {"value": "#0F3999"}, + "transparent": {"value": "#ffffff00"} + } } diff --git a/tokens/color/brand.json b/tokens/color/brand.json new file mode 100644 index 0000000..c15c36b --- /dev/null +++ b/tokens/color/brand.json @@ -0,0 +1,22 @@ +{ + "color": { + "brand": { + "primary": { + "lm": {"value": "{color.primary500.value}"}, + "dm": {"value": "{color.primary200.value}"}, + "surface": { + "lm": {"value": "{color.primary50.value}"}, + "dm": {"value": "{color.gray1100.value}"} + } + } + }, + "secondary": { + "lm": {"value": "{color.secondary500.value}"}, + "dm": {"value": "{color.secondary200.value}"}, + "surface": { + "lm": {"value": "{color.secondary50.value}"}, + "dm": {"value": "{color.gray1100.value}"} + } + } + } +} diff --git a/tokens/color/component.json b/tokens/color/component.json new file mode 100644 index 0000000..835263f --- /dev/null +++ b/tokens/color/component.json @@ -0,0 +1,102 @@ +{ + "color":{ + "header":{ + "primary":{ + "gradient":{ + "start":{ + "lm":{ + "value":"{color.primary400.value}" + }, + "dm":{ + "value":"{color.primaryGradStart.value}" + } + }, + "end":{ + "lm":{ + "value":"{color.primary500.value}" + }, + "dm":{ + "value":"{color.primaryGradEnd.value}" + } + } + }, + "textOn":{ + "lm":{ + "value":"{color.text.onPrimary.lm.value}" + }, + "dm":{ + "value":"{color.text.dm.value}" + } + }, + "surface":{ + "gradient":{ + "start":{ + "lm":{ + "value":"{color.primary50.value}" + }, + "dm":{ + "value":"{color.primaryGradStart.value}" + } + }, + "end":{ + "lm":{ + "value":"{color.primary50.value}" + }, + "dm":{ + "value":"{color.primaryGradEnd.value}" + } + } + } + } + }, + "secondary":{ + "gradient":{ + "start":{ + "lm":{ + "value":"{color.secondary400.value}" + }, + "dm":{ + "value":"{color.secondaryGradStart.value}" + } + }, + "end":{ + "lm":{ + "value":"{color.secondary500.value}" + }, + "dm":{ + "value":"{color.secondaryGradEnd.value}" + } + } + }, + "textOn":{ + "lm":{ + "value":"{color.text.onSecondary.lm.value}" + }, + "dm":{ + "value":"{color.text.dm.value}" + } + }, + "surface":{ + "gradient":{ + "start":{ + "lm":{ + "value":"{color.secondary50.value}" + }, + "dm":{ + "value":"{color.secondaryGradStart.value}" + } + }, + "end":{ + "lm":{ + "value":"{color.secondary50.value}" + }, + "dm":{ + "value":"{color.secondaryGradEnd.value}" + } + } + } + } + } + } + } + } \ No newline at end of file diff --git a/tokens/color/primaryPalette.json b/tokens/color/primaryPalette.json deleted file mode 100644 index 9e29cdd..0000000 --- a/tokens/color/primaryPalette.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "color": { - "foreground": { - "lm": {"value": "{color.gray.0.value}"}, - "dm": {"value": "{color.gray.1000.value}"} - }, - "background": { - "lm": {"value": "{color.gray.50.value}"}, - "dm": {"value": "{color.gray.1200.value}"} - }, - "background-2": { - "lm": {"value": "{color.gray.100.value}"}, - "dm": {"value": "{color.gray.1100.value}"} - }, - "navigation": { - "lm": {"value": "{color.gray.1000.value}"}, - "dm": {"value": "{color.gray.1000.value}"} - }, - "stroke": { - "lm": {"value": "{color.gray.400.value}"}, - "dm": {"value": "{color.gray.600.value}"} - }, - "primary": { - "lm": {"value": "{color.orange.600.value}", "themable": true, "comment": "themable"}, - "dm": {"value": "{color.orange.400.value}", "themable": true, "comment": "themable"} - }, - "primary-bg": { - "lm": {"value": "{color.orange.50.value}", "themable": true, "comment": "themable"}, - "dm": {"value": "{color.gray.900.value}", "themable": true, "comment": "themable"} - }, - "secondary": { - "lm": {"value": "{color.purple.700.value}", "themable": true, "comment": "themable"}, - "dm": {"value": "{color.purple.300.value}", "themable": true, "comment": "themable"} - }, - "secondary-hover": { - "lm": {"value": "{color.purple.800.value}", "themable": true, "comment": "themable"}, - "dm": {"value": "{color.purple.400.value}", "themable": true, "comment": "themable"} - }, - "secondary-bg": { - "lm": {"value": "{color.purple.50.value}", "themable": true, "comment": "themable"}, - "dm": {"value": "{color.gray.900.value}", "themable": true, "comment": "themable"} - } - } - } - diff --git a/tokens/color/text.json b/tokens/color/text.json index 103601e..79ca7ec 100644 --- a/tokens/color/text.json +++ b/tokens/color/text.json @@ -1,29 +1,31 @@ { "color": { "text": { - "primary": { - "lm": {"value": "{color.gray.900.value}"}, - "dm": {"value": "{color.gray.0.value}"} + "lm": {"value": "{color.gray1000.value}"}, + "dm": {"value": "{color.gray0.value}"}, + "onPrimary": { + "lm": {"value": "{color.gray1000.value}"}, + "dm": {"value": "{color.gray1000.value}"} + }, + "onSecondary": { + "lm": {"value": "{color.gray0.value}"}, + "dm": {"value": "{color.gray1000.value}"} }, - "secondary": { - "lm": {"value": "{color.gray.600.value}"}, - "dm": {"value": "{color.gray.500.value}"} + "subdued": { + "lm": {"value": "{color.gray600.value}"}, + "dm": {"value": "{color.gray500.value}"} }, "reverse": { - "lm": {"value": "{color.gray.0.value}"}, - "dm": {"value": "{color.gray.1000.value}"} + "lm": {"value": "{color.gray0.value}"}, + "dm": {"value": "{color.gray1000.value}"} }, - "warning": { - "lm": {"value": "{color.red.700.value}"}, - "dm": {"value": "{color.red.300.value}"} + "negative": { + "lm": {"value": "{color.red700.value}"}, + "dm": {"value": "{color.red300.value}"} }, - "action": { - "lm": {"value": "{color.primary.lm.value}","comment": "uses themable token"}, - "dm": {"value": "{color.primary.dm.value}","comment": "uses themable token"} - }, - "reverse": { - "lm": {"value": "{color.gray.0.value}"}, - "dm": {"value": "{color.gray.1000.value}"} + "positive": { + "lm": {"value": "{color.green700.value}"}, + "dm": {"value": "{color.green300.value}"} } } } diff --git a/utilities/generateBrandColors.js b/utilities/generateBrandColors.js new file mode 100644 index 0000000..62cb463 --- /dev/null +++ b/utilities/generateBrandColors.js @@ -0,0 +1,92 @@ +const createColorList = (primaryColor, secondaryColor) => { + + const primary50 = chroma.mix(primaryColor, 'white', 0.9, 'hsl').hex(); + const primary100 = chroma.mix(primaryColor, 'white', 0.7, 'hsl').hex(); + const primary200 = chroma.mix(primaryColor, 'white', 0.6, 'hsl').hex(); + const primary300 = chroma.mix(primaryColor, 'white', 0.4, 'hsl').hex(); + const primary400 = chroma.mix(primaryColor, 'white', 0.2, 'hsl').hex(); + const primary500 = chroma(primaryColor).hex(); + const primary600 = chroma.mix(primaryColor, 'black', 0.2, 'hsl').hex(); + const primary700 = chroma.mix(primaryColor, 'black', 0.4, 'hsl').hex(); + const primary800 = chroma.mix(primaryColor, 'black', 0.6, 'hsl').hex(); + const primary900 = chroma.mix(primaryColor, 'black', 0.7, 'hsl').hex(); + const primary1000 = chroma.mix(primaryColor, 'black', 0.9, 'hsl').hex(); + const primaryDMGradStart = chroma.mix(primaryColor, 'white', 0.2, 'hsl').alpha(.2).hex(); + const primaryDMGradEnd = chroma.mix(primaryColor, 'white', 0.2, 'hsl').alpha(.0).hex(); + + const secondary50 = chroma.mix(secondaryColor, 'white', 0.9, 'hsl').hex(); + const secondary100 = chroma.mix(secondaryColor, 'white', 0.7, 'hsl').hex(); + const secondary200 = chroma.mix(secondaryColor, 'white', 0.6, 'hsl').hex(); + const secondary300 = chroma.mix(secondaryColor, 'white', 0.4, 'hsl').hex(); + const secondary400 = chroma.mix(secondaryColor, 'white', 0.2, 'hsl').hex(); + const secondary500 = chroma(secondaryColor).hex(); + const secondary600 = chroma.mix(secondaryColor, 'black', 0.2, 'hsl').hex(); + const secondary700 = chroma.mix(secondaryColor, 'black', 0.4, 'hsl').hex(); + const secondary800 = chroma.mix(secondaryColor, 'black', 0.6, 'hsl').hex(); + const secondary900 = chroma.mix(secondaryColor, 'black', 0.7, 'hsl').hex(); + const secondary1000 = chroma.mix(secondaryColor, 'black', 0.9, 'hsl').hex(); + const secondaryDMGradStart = chroma.mix(secondaryColor, 'white', 0.2, 'hsl').alpha(.2).hex(); + const secondaryDMGradEnd = chroma.mix(secondaryColor, 'white', 0.2, 'hsl').alpha(.0).hex(); + + const contrastTarget = 4.5 + const textColor = "#292632" + const textReverse = "#FFFFFF" + var textOnPrimary = "" + var textOnSecondary = "" + + function checkContrast() { + const primaryContrast = chroma.contrast(textColor, primaryColor); + const secondaryContrast = chroma.contrast(textColor, secondaryColor); + + if (primaryContrast > contrastTarget) { + textOnPrimary = textColor + } else { + textOnPrimary = textReverse + } + + if (secondaryContrast > contrastTarget) { + textOnSecondary = textColor + } else { + textOnSecondary = textReverse + } + }; + + checkContrast(); + + function updateCSS() { + root.style.setProperty(`--xpl-color-primary50`, primary50); + root.style.setProperty(`--xpl-color-primary100`, primary100); + root.style.setProperty(`--xpl-color-primary100`, primary100); + root.style.setProperty(`--xpl-color-primary200`, primary200); + root.style.setProperty(`--xpl-color-primary300`, primary300); + root.style.setProperty(`--xpl-color-primary400`, primary400); + root.style.setProperty(`--xpl-color-primary500`, primary500); + root.style.setProperty(`--xpl-color-primary600`, primary600); + root.style.setProperty(`--xpl-color-primary700`, primary700); + root.style.setProperty(`--xpl-color-primary800`, primary800); + root.style.setProperty(`--xpl-color-primary900`, primary900); + root.style.setProperty(`--xpl-color-primary1000`, primary1000); + root.style.setProperty(`--xpl-color-brand-primary-gradient-start-dm`, primaryDMGradStart); + root.style.setProperty(`--xpl-color-brand-primary-gradient-end-dm`, primaryDMGradEnd); + root.style.setProperty(`--xpl-color-text-on-primary-lm`, textOnPrimary); + + root.style.setProperty(`--xpl-color-secondary50`, secondary50); + root.style.setProperty(`--xpl-color-secondary100`, secondary100); + root.style.setProperty(`--xpl-color-secondary100`, secondary100); + root.style.setProperty(`--xpl-color-secondary200`, secondary200); + root.style.setProperty(`--xpl-color-secondary300`, secondary300); + root.style.setProperty(`--xpl-color-secondary400`, secondary400); + root.style.setProperty(`--xpl-color-secondary500`, secondary500); + root.style.setProperty(`--xpl-color-secondary600`, secondary600); + root.style.setProperty(`--xpl-color-secondary700`, secondary700); + root.style.setProperty(`--xpl-color-secondary800`, secondary800); + root.style.setProperty(`--xpl-color-secondary900`, secondary900); + root.style.setProperty(`--xpl-color-secondary1000`, secondary1000); + root.style.setProperty(`--xpl-color-brand-secondary-gradient-start-dm`, secondaryDMGradStart); + root.style.setProperty(`--xpl-color-brand-secondary-gradient-end-dm`, secondaryDMGradEnd); + root.style.setProperty(`--xpl-color-text-on-secondary-lm`, textOnSecondary); + } + + updateCSS(); + +}; \ No newline at end of file