From fafc516538c7778d464bf139c45cbfca78029369 Mon Sep 17 00:00:00 2001 From: = <=> Date: Wed, 18 Oct 2023 12:17:20 +0530 Subject: [PATCH 1/8] update to new figma variables --- .../components/dashboard-layout.tsx | 2 +- .../components/dashboard-sidebar.tsx | 6 +- .../[locale]/components/district-selector.tsx | 1 - examples/district/components/main-nav.tsx | 2 +- examples/district/config/figma.tokens.json | 1409 -------- .../lib/style-dictionary/css-formattor.js | 4 +- .../district/styles/tokens/_variables.css | 522 +-- .../styles/tokens/_variables_dark.css | 48 - .../district/styles/tokens/tailwind/color.js | 522 +-- examples/district/styles/tokens/tokens.json | 685 ++-- packages/opub-ui/styles/_variables.css | 522 +-- .../LeafletChoropleth/LeafletChoropleth.tsx | 4 +- .../opub-viz/styles/tokens/_variables.css | 522 +-- .../styles/tokens/_variables_dark.css | 48 - .../opub-viz/styles/tokens/tailwind/color.js | 522 +-- packages/opub-viz/styles/tokens/tokens.json | 3009 ----------------- 16 files changed, 1711 insertions(+), 6117 deletions(-) delete mode 100644 examples/district/config/figma.tokens.json delete mode 100644 examples/district/styles/tokens/_variables_dark.css delete mode 100644 packages/opub-viz/styles/tokens/_variables_dark.css delete mode 100644 packages/opub-viz/styles/tokens/tokens.json diff --git a/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx b/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx index f69f4f32..06b223ad 100644 --- a/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx +++ b/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx @@ -25,7 +25,7 @@ export function DashboardLayout({ >
{ {category.name} - {/*
*/}
diff --git a/examples/district/components/main-nav.tsx b/examples/district/components/main-nav.tsx index 4660cc8c..d7d89e00 100644 --- a/examples/district/components/main-nav.tsx +++ b/examples/district/components/main-nav.tsx @@ -11,7 +11,7 @@ export function MainNav({ data }: { data: MainConfig }) { const { district } = useParams(); return ( -
+
diff --git a/examples/district/config/figma.tokens.json b/examples/district/config/figma.tokens.json deleted file mode 100644 index de25304f..00000000 --- a/examples/district/config/figma.tokens.json +++ /dev/null @@ -1,1409 +0,0 @@ -{ - "Default": { - "Transparent": { - "$type": "color", - "$value": "#00000000" - }, - "Background": { - "Default": { - "$type": "color", - "$value": "#f6f6f7ff" - }, - "Hovered": { - "$type": "color", - "$value": "#f1f2f3ff" - }, - "Pressed": { - "$type": "color", - "$value": "#edeeefff" - }, - "Selected": { - "$type": "color", - "$value": "#edeeefff" - }, - "Invert": { - "$type": "color", - "$value": "#202123ff" - } - }, - "Surface": { - "Default": { - "$type": "color", - "$value": "#ffffffff" - }, - "Subdued": { - "$type": "color", - "$value": "#fafbfbff" - }, - "Hovered": { - "$type": "color", - "$value": "#f6f6f7ff" - }, - "Pressed": { - "$type": "color", - "$value": "#f1f2f3ff" - }, - "Depressed": { - "$type": "color", - "$value": "#edeeefff" - }, - "Disabled": { - "$type": "color", - "$value": "#fafbfbff" - }, - "SearchField": { - "$type": "color", - "$value": "#f1f2f3ff" - } - }, - "Surface Selected": { - "Default": { - "$type": "color", - "$value": "#f2f7feff" - }, - "Hovered": { - "$type": "color", - "$value": "#edf4feff" - }, - "Pressed": { - "$type": "color", - "$value": "#e5effdff" - } - }, - "Surface Warning": { - "Default": { - "$type": "color", - "$value": "#ffd79dff", - "$description": "Use for badges" - }, - "Subdued": { - "$type": "color", - "$value": "#fff5eaff", - "$description": "Used for banners" - }, - "Subdued Hovered": { - "$type": "color", - "$value": "#fff2e2ff" - }, - "Subdued Pressed": { - "$type": "color", - "$value": "#ffebd3ff" - } - }, - "Surface Critical": { - "Default": { - "$type": "color", - "$value": "#fed3d1ff" - }, - "Subdued": { - "$type": "color", - "$value": "#fff4f4ff" - }, - "Subdued Hovered": { - "$type": "color", - "$value": "#fff0f0ff", - "$description": "Used on action lists" - }, - "Subdued Pressed": { - "$type": "color", - "$value": "#ffe9e8ff" - }, - "Subdued Depressed": { - "$type": "color", - "$value": "#febcb9ff" - } - }, - "Surface Success": { - "Default": { - "$type": "color", - "$value": "#aee9d1ff", - "$description": "S: 40, L: 89.9" - }, - "Subdued": { - "$type": "color", - "$value": "#f1f8f5ff" - }, - "Subdued Hovered": { - "$type": "color", - "$value": "#ecf6f1ff" - }, - "Subdued Pressed": { - "$type": "color", - "$value": "#e2f1eaff" - } - }, - "Surface Highlight": { - "Default": { - "$type": "color", - "$value": "#a4e8f2ff" - }, - "Subdued": { - "$type": "color", - "$value": "#ebf9fcff" - }, - "Subdued Hovered": { - "$type": "color", - "$value": "#e4f7faff" - }, - "Subdued Pressed": { - "$type": "color", - "$value": "#d5f3f8ff" - } - }, - "Surface Neutral": { - "Default": { - "$type": "color", - "$value": "#e4e5e7ff" - }, - "Subdued": { - "$type": "color", - "$value": "#f6f6f7ff" - }, - "Hovered": { - "$type": "color", - "$value": "#dbdddfff" - }, - "Pressed": { - "$type": "color", - "$value": "#c9ccd0ff" - }, - "Disabled": { - "$type": "color", - "$value": "#f1f2f3ff" - } - }, - "Surface Primary": { - "Selected": { - "$type": "color", - "$value": "#f1f8f5ff" - }, - "Selected Hovered": { - "$type": "color", - "$value": "#b3d0c3ff" - }, - "Selected Pressed": { - "$type": "color", - "$value": "#a2bcb0ff" - } - }, - "Surface Attention": { - "Default": { - "$type": "color", - "$value": "#ffea8aff" - } - }, - "Interactive": { - "Default": { - "$type": "color", - "$value": "#2c6ecbff" - }, - "Hovered": { - "$type": "color", - "$value": "#1f5199ff" - }, - "Pressed": { - "$type": "color", - "$value": "#103262ff" - }, - "Disabled": { - "$type": "color", - "$value": "#bdc1ccff" - }, - "Critical": { - "$type": "color", - "$value": "#d82c0dff" - }, - "Critical Hovered": { - "$type": "color", - "$value": "#cd290cff" - }, - "Critical Disabled": { - "$type": "color", - "$value": "#fd938dff" - }, - "Critical Pressed": { - "$type": "color", - "$value": "#670f03ff" - } - }, - "Text": { - "Default": { - "$type": "color", - "$value": "#202223ff" - }, - "Subdued": { - "$type": "color", - "$value": "#6d7175ff" - }, - "Disabled": { - "$type": "color", - "$value": "#8c9196ff" - }, - "Critical": { - "$type": "color", - "$value": "#d72c0dff" - }, - "Warning": { - "$type": "color", - "$value": "#916a00ff" - }, - "Success": { - "$type": "color", - "$value": "#008060ff" - }, - "Highlight": { - "$type": "color", - "$value": "#347c84ff" - } - }, - "Text On": { - "Interactive": { - "$type": "color", - "$value": "#ffffffff" - }, - "Primary": { - "$type": "color", - "$value": "#ffffffff" - }, - "Critical": { - "$type": "color", - "$value": "#ffffffff" - } - }, - "Text Primary": { - "Default": { - "$type": "color", - "$value": "#007b5cff" - }, - "hover": { - "$type": "color", - "$value": "#006c50ff" - }, - "Pressed": { - "$type": "color", - "$value": "#005c44ff" - } - }, - "Icon": { - "Default": { - "$type": "color", - "$value": "#5c5f62ff" - }, - "Subdued": { - "$type": "color", - "$value": "#8c9196ff" - }, - "Hovered": { - "$type": "color", - "$value": "#1a1c1dff" - }, - "Pressed": { - "$type": "color", - "$value": "#44474aff" - }, - "Disabled": { - "$type": "color", - "$value": "#babec3ff" - }, - "Critical": { - "$type": "color", - "$value": "#d72c0dff" - }, - "Warning": { - "$type": "color", - "$value": "#b98900ff" - }, - "Success": { - "$type": "color", - "$value": "#007f5fff" - }, - "Highlight": { - "$type": "color", - "$value": "#00a0acff" - }, - "Interactive": { - "$type": "color", - "$value": "#2c6ecbff" - } - }, - "Icon On": { - "Interactive": { - "$type": "color", - "$value": "#ffffffff" - }, - "Primary": { - "$type": "color", - "$value": "#ffffffff" - }, - "Critical": { - "$type": "color", - "$value": "#ffffffff" - } - }, - "Border": { - "Default": { - "$type": "color", - "$value": "#8c9196ff", - "$description": "3:1 AA Contrast required" - }, - "Subdued": { - "$type": "color", - "$value": "#c9cccfff" - }, - "Hovered": { - "$type": "color", - "$value": "#999ea4ff" - }, - "Depressed": { - "$type": "color", - "$value": "#575959ff" - }, - "Disabled": { - "$type": "color", - "$value": "#d2d5d8ff" - } - }, - "Border Critical": { - "Default": { - "$type": "color", - "$value": "#fd5749ff" - }, - "Subdued": { - "$type": "color", - "$value": "#e0b3b2ff" - }, - "Disabled": { - "$type": "color", - "$value": "#ffa7a3ff" - } - }, - "Border Warning": { - "Default": { - "$type": "color", - "$value": "#b98900ff" - }, - "Subdued": { - "$type": "color", - "$value": "#e1b878ff" - } - }, - "Border Success": { - "Default": { - "$type": "color", - "$value": "#00a47cff" - }, - "Subdued": { - "$type": "color", - "$value": "#95c9b4ff" - } - }, - "Border Highlight": { - "Default": { - "$type": "color", - "$value": "#449da7ff" - }, - "Subdued": { - "$type": "color", - "$value": "#98c6cdff" - } - }, - "Border Neutral": { - "Subdued": { - "$type": "color", - "$value": "#babfc3ff" - } - }, - "Border Shadow": { - "Default": { - "$type": "color", - "$value": "#aeb4b9ff" - }, - "Subdued": { - "$type": "color", - "$value": "#aeb4b9ff" - } - }, - "Action Primary": { - "Default": { - "$type": "color", - "$value": "#008060ff" - }, - "Hovered": { - "$type": "color", - "$value": "#006e52ff" - }, - "Pressed": { - "$type": "color", - "$value": "#005e46ff" - }, - "Depressed": { - "$type": "color", - "$value": "#003d2cff" - }, - "Disabled": { - "$type": "color", - "$value": "#f1f1f1ff" - } - }, - "Action Secondary": { - "Default": { - "$type": "color", - "$value": "#ffffffff" - }, - "Hovered": { - "$type": "color", - "$value": "#f6f6f7ff" - }, - "Pressed": { - "$type": "color", - "$value": "#f1f2f3ff" - }, - "Depressed": { - "$type": "color", - "$value": "#6d7175ff" - }, - "Disabled": { - "$type": "color", - "$value": "#ffffffff" - } - }, - "Action Critical": { - "Default": { - "$type": "color", - "$value": "#d82c0dff" - }, - "Hovered": { - "$type": "color", - "$value": "#bc2200ff" - }, - "Pressed": { - "$type": "color", - "$value": "#a21b00ff" - }, - "Depressed": { - "$type": "color", - "$value": "#6c0f00ff" - }, - "Disabled": { - "$type": "color", - "$value": "#f1f1f1ff" - } - }, - "Decorative": { - "Surface": { - "one": { - "$type": "color", - "$value": "#ffc96bff" - }, - "two": { - "$type": "color", - "$value": "#ffc4b0ff" - }, - "three": { - "$type": "color", - "$value": "#92e6b5ff" - }, - "four": { - "$type": "color", - "$value": "#91e0d6ff" - }, - "five": { - "$type": "color", - "$value": "#fdc9d0ff" - } - }, - "Text": { - "one": { - "$type": "color", - "$value": "#3d2800ff" - }, - "two": { - "$type": "color", - "$value": "#490b1cff" - }, - "three": { - "$type": "color", - "$value": "#002f19ff" - }, - "four": { - "$type": "color", - "$value": "#002d2dff" - }, - "five": { - "$type": "color", - "$value": "#4f0e1fff" - } - }, - "Icon": { - "one": { - "$type": "color", - "$value": "#7e5700ff" - }, - "two": { - "$type": "color", - "$value": "#af294eff" - }, - "three": { - "$type": "color", - "$value": "#006d41ff" - }, - "four": { - "$type": "color", - "$value": "#006a68ff" - }, - "icon-five": { - "$type": "color", - "$value": "#ae2b4cff" - } - } - }, - "Backdrop": { - "Default": { - "$type": "color", - "$value": "#00000080" - } - }, - "Focused": { - "Default": { - "$type": "color", - "$value": "#458fffff" - } - }, - "Overlay": { - "Default": { - "$type": "color", - "$value": "#ffffff80" - } - }, - "Divider": { - "Default": { - "$type": "color", - "$value": "#e1e3e5ff" - } - }, - "shadow-inset": { - "$type": "shadow", - "$value": { - "color": "#e4e5e7ff", - "offsetX": "-1px", - "offsetY": "0px", - "blur": "0px", - "spread": "0px", - "inset": true - } - }, - "shadow-inset-button-pressed": { - "$type": "shadow", - "$value": { - "color": "#00000026", - "offsetX": "0px", - "offsetY": "1px", - "blur": "0px", - "spread": "0px", - "inset": true - } - }, - "shadow-inset-button": { - "$type": "shadow", - "$value": { - "color": "#00000033", - "offsetX": "0px", - "offsetY": "-1px", - "blur": "0px", - "spread": "0px", - "inset": true - } - }, - "shadow-button": { - "$type": "shadow", - "$value": { - "color": "#0000000d", - "offsetX": "0px", - "offsetY": "1px", - "blur": "0px", - "spread": "0px" - } - }, - "shadow-modal": { - "$type": "shadow", - "$value": { - "color": "#00000033", - "offsetX": "0px", - "offsetY": "0px", - "blur": "1px", - "spread": "0px" - }, - "$description": "Used for modals" - }, - "shadow-layer": { - "$type": "shadow", - "$value": { - "color": "#202a3614", - "offsetX": "0px", - "offsetY": "2px", - "blur": "16px", - "spread": "0px" - } - }, - "shadow-popover": { - "$type": "shadow", - "$value": { - "color": "#17181814", - "offsetX": "0px", - "offsetY": "3px", - "blur": "6px", - "spread": "-3px" - }, - "$description": "User for Popover and the fixed navigation bar" - }, - "shadow-card": { - "$type": "shadow", - "$value": { - "color": "#1718180d", - "offsetX": "0px", - "offsetY": "0px", - "blur": "5px", - "spread": "0px" - }, - "$description": "Used for Card" - }, - "shadow-top-bar": { - "$type": "shadow", - "$value": { - "color": "#00000026", - "offsetX": "0px", - "offsetY": "2px", - "blur": "2px", - "spread": "-1px" - } - }, - "shadow-deep": { - "$type": "shadow", - "$value": { - "color": "#062c521a", - "offsetX": "0px", - "offsetY": "0px", - "blur": "0px", - "spread": "1px" - } - }, - "shadow-base": { - "$type": "shadow", - "$value": { - "color": "#3f3f4426", - "offsetX": "0px", - "offsetY": "1px", - "blur": "3px", - "spread": "0px" - } - }, - "shadow-faint": { - "$type": "shadow", - "$value": { - "color": "#161d250d", - "offsetX": "0px", - "offsetY": "1px", - "blur": "0px", - "spread": "0px" - } - }, - "shadow-transparent": { - "$type": "shadow", - "$value": { - "color": "#00000000", - "offsetX": "0px", - "offsetY": "0px", - "blur": "0px", - "spread": "0px" - } - }, - "shadow-xs": { - "$type": "shadow", - "$value": { - "color": "#1f21243d", - "offsetX": "0px", - "offsetY": "0px", - "blur": "2px", - "spread": "0px" - } - }, - "shadow-sm": { - "$type": "shadow", - "$value": { - "color": "#1f21241a", - "offsetX": "0px", - "offsetY": "1px", - "blur": "1px", - "spread": "0px" - } - }, - "shadow-md": { - "$type": "shadow", - "$value": { - "color": "#1f21241a", - "offsetX": "0px", - "offsetY": "2px", - "blur": "4px", - "spread": "0px" - } - }, - "shadow-lg": { - "$type": "shadow", - "$value": { - "color": "#1f212433", - "offsetX": "0px", - "offsetY": "4px", - "blur": "12px", - "spread": "0px" - } - }, - "shadow-xl": { - "$type": "shadow", - "$value": { - "color": "#1f212414", - "offsetX": "0px", - "offsetY": "4px", - "blur": "18px", - "spread": "-2px" - } - }, - "shadow-2xl": { - "$type": "shadow", - "$value": { - "color": "#1f212426", - "offsetX": "0px", - "offsetY": "32px", - "blur": "32px", - "spread": "0px" - } - }, - "heading4xl": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "BOLD", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "40px", - "lineHeight": "48px", - "letterSpacing": "0px" - }, - "$description": "Use for key moments and more learning focused content." - }, - "heading3xl": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "BOLD", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "32px", - "lineHeight": "40px", - "letterSpacing": "0px" - }, - "$description": "Use for key moments and more learning focused content." - }, - "heading2xl": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "SEMI BOLD", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "28px", - "lineHeight": "32px", - "letterSpacing": "0px" - }, - "$description": "Use for numerals and key information." - }, - "headingXl": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "SEMI BOLD", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "24px", - "lineHeight": "28px", - "letterSpacing": "0px" - } - }, - "headingLg": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "SEMI BOLD", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "20px", - "lineHeight": "24px", - "letterSpacing": "0px" - }, - "$description": "Use for page, modal titles, numerals and key information." - }, - "headingMd": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "SEMI BOLD", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "16px", - "lineHeight": "24px", - "letterSpacing": "0px" - }, - "$description": "Use for card and section headings. Use to create various levels of hierarchy on the page." - }, - "headingSm": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "MEDIUM", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "14px", - "lineHeight": "20px", - "letterSpacing": "0px" - }, - "$description": "Use for card and section headings. Use to create various levels of hierarchy on the page." - }, - "headingXs": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "MEDIUM", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "12px", - "lineHeight": "16px", - "letterSpacing": "0px" - }, - "$description": "Use for subheadings." - }, - "bodyLg": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "REGULAR", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "16px", - "lineHeight": "20px", - "letterSpacing": "0px", - "paragraphSpacing": "16px" - }, - "$description": "Use for larger body text within components and short blocks of text." - }, - "bodyLg-medium": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "MEDIUM", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "16px", - "lineHeight": "20px", - "letterSpacing": "0px", - "paragraphSpacing": "16px" - }, - "$description": "Use to add emphasis to large body text. Typically used for buttons." - }, - "bodyLg-underline": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "REGULAR", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "UNDERLINE", - "fontSize": "16px", - "lineHeight": "20px", - "letterSpacing": "0px", - "paragraphSpacing": "16px" - }, - "$description": "Use for large link text." - }, - "bodyMd": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "REGULAR", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "14px", - "lineHeight": "20px", - "letterSpacing": "0px", - "paragraphSpacing": "16px" - }, - "$description": "Default body text. Use within components and blocks of text." - }, - "bodyMd-medium": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "MEDIUM", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "14px", - "lineHeight": "20px", - "letterSpacing": "0px", - "paragraphSpacing": "16px" - }, - "$description": "Use to add emphasis to text. Typically used for buttons." - }, - "bodyMd-semibold": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "SEMI BOLD", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "14px", - "lineHeight": "20px", - "letterSpacing": "0px", - "paragraphSpacing": "16px" - }, - "$description": "Use to add strong emphasis to body text." - }, - "bodyMd-underline": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "REGULAR", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "UNDERLINE", - "fontSize": "14px", - "lineHeight": "20px", - "letterSpacing": "0px", - "paragraphSpacing": "16px" - }, - "$description": "Use for link text." - }, - "bodyMd-mono": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "REGULAR", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "14px", - "lineHeight": "16px", - "letterSpacing": "0px", - "paragraphSpacing": "16px" - }, - "$description": "Use to display an inline code block." - }, - "bodySm": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "REGULAR", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "12px", - "lineHeight": "16px", - "letterSpacing": "0px", - "paragraphSpacing": "8px" - }, - "$description": "Use for supporting body text like captions." - }, - "bodySm-medium": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "MEDIUM", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "12px", - "lineHeight": "16px", - "letterSpacing": "0px", - "paragraphSpacing": "8px" - }, - "$description": "Use to add emphasis to small body text." - }, - "bodySm-semibold": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontWeight": "SEMI BOLD", - "fontStyle": "NORMAL", - "textCase": "ORIGINAL", - "textDecoration": "NONE", - "fontSize": "12px", - "lineHeight": "16px", - "letterSpacing": "0em" - } - }, - "Font Family": { - "primary": { - "$type": "fontFamily", - "$value": "Inter" - }, - "mono": { - "$type": "fontFamily", - "$value": "Space Mono" - } - }, - "Font Weight": { - "Regular": { - "$type": "fontWeight", - "$value": "400" - }, - "Medium": { - "$type": "fontWeight", - "$value": "500" - }, - "Bold": { - "$type": "fontWeight", - "$value": "600" - }, - "Extra Bold": { - "$type": "fontWeight", - "$value": "700" - } - }, - "space-0": { - "$type": "dimension", - "$value": "0px" - }, - "space-025": { - "$type": "dimension", - "$value": "1px" - }, - "space-05": { - "$type": "dimension", - "$value": "2px" - }, - "space-1": { - "$type": "dimension", - "$value": "4px" - }, - "space-2": { - "$type": "dimension", - "$value": "8px" - }, - "space-3": { - "$type": "dimension", - "$value": "12px" - }, - "space-4": { - "$type": "dimension", - "$value": "16px" - }, - "space-5": { - "$type": "dimension", - "$value": "20px" - }, - "space-6": { - "$type": "dimension", - "$value": "24px" - }, - "space-8": { - "$type": "dimension", - "$value": "32px" - }, - "space-10": { - "$type": "dimension", - "$value": "40px" - }, - "space-12": { - "$type": "dimension", - "$value": "48px" - }, - "space-16": { - "$type": "dimension", - "$value": "64px" - }, - "space-20": { - "$type": "dimension", - "$value": "80px" - }, - "space-24": { - "$type": "dimension", - "$value": "96px" - }, - "space-32": { - "$type": "dimension", - "$value": "128px" - }, - "border-width-1": { - "$type": "dimension", - "$value": "1px" - }, - "border-width-2": { - "$type": "dimension", - "$value": "2px" - }, - "border-width-3": { - "$type": "dimension", - "$value": "3px" - }, - "border-width-4": { - "$type": "dimension", - "$value": "4px" - }, - "border-width-5": { - "$type": "dimension", - "$value": "5px" - }, - "border-radius-05": { - "$type": "dimension", - "$value": "2px" - }, - "border-radius-1": { - "$type": "dimension", - "$value": "4px" - }, - "border-radius-2": { - "$type": "dimension", - "$value": "8px" - }, - "border-radius-3": { - "$type": "dimension", - "$value": "12px" - }, - "border-radius-4": { - "$type": "dimension", - "$value": "16px" - }, - "border-radius-5": { - "$type": "dimension", - "$value": "20px" - }, - "border-radius-full": { - "$type": "dimension", - "$value": "9999px" - }, - "border-radius-half": { - "$type": "dimension", - "$value": "50%" - }, - "border-radius-base": { - "$type": "dimension", - "$value": "3px" - }, - "border-radius-large": { - "$type": "dimension", - "$value": "6px" - }, - "border-base": { - "$type": "border", - "$value": { - "color": "#c9cccfff", - "width": "1px", - "style": "solid" - } - }, - "border-dark": { - "$type": "border", - "$value": { - "color": "#8c9196ff", - "width": "1px", - "style": "solid" - } - }, - "border-divider": { - "$type": "border", - "$value": { - "color": "#e1e3e5ff", - "width": "1px", - "style": "solid" - } - }, - "border-transparent": { - "$type": "border", - "$value": { - "color": "#00000000", - "width": "1px", - "style": "solid" - } - }, - "z": { - "1": { - "$type": "number", - "$value": 100 - }, - "2": { - "$type": "number", - "$value": 400 - }, - "3": { - "$type": "number", - "$value": 513 - }, - "4": { - "$type": "number", - "$value": 514 - }, - "5": { - "$type": "number", - "$value": 515 - }, - "6": { - "$type": "number", - "$value": 516 - }, - "7": { - "$type": "number", - "$value": 517 - }, - "8": { - "$type": "number", - "$value": 518 - }, - "9": { - "$type": "number", - "$value": 519 - }, - "10": { - "$type": "number", - "$value": 520 - }, - "max": { - "$type": "number", - "$value": 99999 - } - }, - "duration-0": { - "$type": "duration", - "$value": 0 - }, - "duration-100": { - "$type": "duration", - "$value": 100 - }, - "duration-150": { - "$type": "duration", - "$value": 150 - }, - "duration-200": { - "$type": "duration", - "$value": 200 - }, - "duration-250": { - "$type": "duration", - "$value": 250 - }, - "duration-300": { - "$type": "duration", - "$value": 300 - }, - "duration-350": { - "$type": "duration", - "$value": 350 - }, - "duration-400": { - "$type": "duration", - "$value": 400 - }, - "duration-450": { - "$type": "duration", - "$value": 450 - }, - "duration-500": { - "$type": "duration", - "$value": 500 - }, - "duration-5000": { - "$type": "duration", - "$value": 5000 - }, - "ease": { - "$type": "cubicBezier", - "$value": "cubic-bezier(0.25, 0.1, 0.25, 1)" - }, - "linear": { - "$type": "cubicBezier", - "$value": "cubic-bezier(0, 0, 1, 1)" - }, - "ease-in": { - "$type": "cubicBezier", - "$value": "cubic-bezier(0.42, 0, 1, 1)" - }, - "ease-out": { - "$type": "cubicBezier", - "$value": "cubic-bezier(0, 0, 0.58, 1)" - }, - "ease-in-out": { - "$type": "cubicBezier", - "$value": "cubic-bezier(0.42, 0, 0.58, 1)" - }, - "font-size-75": { - "$type": "dimension", - "$value": "12px" - }, - "font-size-100": { - "$type": "dimension", - "$value": "14px" - }, - "font-size-200": { - "$type": "dimension", - "$value": "16px" - }, - "font-size-300": { - "$type": "dimension", - "$value": "20px" - }, - "font-size-400": { - "$type": "dimension", - "$value": "24px" - }, - "font-size-500": { - "$type": "dimension", - "$value": "28px" - }, - "font-size-600": { - "$type": "dimension", - "$value": "32px" - }, - "font-size-700": { - "$type": "dimension", - "$value": "40px" - }, - "font-line-height-1": { - "$type": "dimension", - "$value": "16px" - }, - "font-line-height-2": { - "$type": "dimension", - "$value": "20px" - }, - "font-line-height-3": { - "$type": "dimension", - "$value": "24px" - }, - "font-line-height-4": { - "$type": "dimension", - "$value": "28px" - }, - "font-line-height-5": { - "$type": "dimension", - "$value": "32px" - }, - "font-line-height-6": { - "$type": "dimension", - "$value": "40px" - }, - "font-line-height-7": { - "$type": "dimension", - "$value": "48px" - } - } -} diff --git a/examples/district/lib/style-dictionary/css-formattor.js b/examples/district/lib/style-dictionary/css-formattor.js index 7fa09f9b..578b02a0 100644 --- a/examples/district/lib/style-dictionary/css-formattor.js +++ b/examples/district/lib/style-dictionary/css-formattor.js @@ -73,9 +73,9 @@ module.exports = function ({ dictionary }) { // if it's a fixed value const val = variable.value; if (variable.type === 'number') { - value = `${variable.value}px`; + value = `${val}px`; } else { - value = variable.value; + value = val; } } } diff --git a/examples/district/styles/tokens/_variables.css b/examples/district/styles/tokens/_variables.css index 81530bb6..c2b664b8 100644 --- a/examples/district/styles/tokens/_variables.css +++ b/examples/district/styles/tokens/_variables.css @@ -1,267 +1,275 @@ :root { - --lightmode-indigo-solid-1: #FDFDFE; - --lightmode-indigo-solid-2: #F8FAFF; - --lightmode-indigo-solid-3: #F0F4FF; - --lightmode-indigo-solid-4: #E6EDFE; - --lightmode-indigo-solid-5: #D9E2FC; - --lightmode-indigo-solid-6: #C6D4F9; - --lightmode-indigo-solid-7: #AEC0F5; - --lightmode-indigo-solid-8: #8DA4EF; - --lightmode-indigo-solid-9: #3E63DD; - --lightmode-indigo-solid-10: #3A5CCC; - --lightmode-indigo-solid-11: #3451B2; - --lightmode-indigo-solid-12: #101D46; - --lightmode-blue-solid-1: #FBFDFF; - --lightmode-blue-solid-2: #F5FAFF; - --lightmode-blue-solid-3: #EDF6FF; - --lightmode-blue-solid-4: #E1F0FF; - --lightmode-blue-solid-5: #CEE7FE; - --lightmode-blue-solid-6: #B7D9F8; - --lightmode-blue-solid-7: #96C7F2; - --lightmode-blue-solid-8: #5EB0EF; - --lightmode-blue-solid-9: #0091FF; - --lightmode-blue-solid-10: #0081F1; - --lightmode-blue-solid-11: #006ADC; - --lightmode-blue-solid-12: #00254D; - --lightmode-violet-solid-1: #FDFCFE; - --lightmode-violet-solid-2: #FBFAFF; - --lightmode-violet-solid-3: #F5F2FF; - --lightmode-violet-solid-4: #EDE9FE; - --lightmode-violet-solid-5: #E4DEFC; - --lightmode-violet-solid-6: #D7CFF9; - --lightmode-violet-solid-7: #C4B8F3; - --lightmode-violet-solid-8: #AA99EC; - --lightmode-violet-solid-9: #6E56CF; - --lightmode-violet-solid-10: #644FC1; - --lightmode-violet-solid-11: #5746AF; - --lightmode-violet-solid-12: #20134B; - --lightmode-gray-slate-solid-1: #FBFCFD; - --lightmode-gray-slate-solid-2: #F8F9FA; - --lightmode-gray-slate-solid-3: #F1F3F5; - --lightmode-gray-slate-solid-4: #ECEEF0; - --lightmode-gray-slate-solid-5: #E6E8EB; - --lightmode-gray-slate-solid-6: #DFE3E6; - --lightmode-gray-slate-solid-7: #D7DBDF; - --lightmode-gray-slate-solid-8: #C1C8CD; - --lightmode-gray-slate-solid-9: #889096; - --lightmode-gray-slate-solid-10: #7E868C; - --lightmode-gray-slate-solid-11: #687076; - --lightmode-gray-slate-solid-12: #11181C; - --lightmode-red-solid-1: #FFFCFC; - --lightmode-red-solid-2: #FFF8F8; - --lightmode-red-solid-3: #FFEFEF; - --lightmode-red-solid-4: #FFE5E5; - --lightmode-red-solid-5: #FDD8D8; - --lightmode-red-solid-6: #F9C6C6; - --lightmode-red-solid-7: #F3AEAF; - --lightmode-red-solid-8: #EB9091; - --lightmode-red-solid-9: #E5484D; - --lightmode-red-solid-10: #DC3D43; - --lightmode-red-solid-11: #CD2B31; - --lightmode-red-solid-12: #381316; - --lightmode-green-solid-1: #FBFEFC; - --lightmode-green-solid-2: #F2FCF5; - --lightmode-green-solid-3: #E9F9EE; - --lightmode-green-solid-4: #DDF3E4; - --lightmode-green-solid-5: #CCEBD7; - --lightmode-green-solid-6: #B4DFC4; - --lightmode-green-solid-7: #92CEAC; - --lightmode-green-solid-8: #5BB98C; - --lightmode-green-solid-9: #30A46C; - --lightmode-green-solid-10: #299764; - --lightmode-green-solid-11: #18794E; - --lightmode-green-solid-12: #153226; - --lightmode-amber-solid-1: #FEFDFB; - --lightmode-amber-solid-2: #FFF9ED; - --lightmode-amber-solid-3: #FFF4D5; - --lightmode-amber-solid-4: #FFECBC; - --lightmode-amber-solid-5: #FFE3A2; - --lightmode-amber-solid-6: #FFD386; - --lightmode-amber-solid-7: #F3BA63; - --lightmode-amber-solid-8: #EE9D2B; - --lightmode-amber-solid-9: #FFB224; - --lightmode-amber-solid-10: #FFA01C; - --lightmode-amber-solid-11: #AD5700; - --lightmode-amber-solid-12: #4E2009; - --lightmode-pure-white: #FFFFFF; - --lightmode-pure-black: #000000; - --text-default: var(--lightmode-gray-slate-solid-12); + --base-indigo-solid-1: #FDFDFE; + --base-indigo-solid-2: #F8FAFF; + --base-indigo-solid-3: #F0F4FF; + --base-indigo-solid-4: #E6EDFE; + --base-indigo-solid-5: #D9E2FC; + --base-indigo-solid-6: #C6D4F9; + --base-indigo-solid-7: #AEC0F5; + --base-indigo-solid-8: #8DA4EF; + --base-indigo-solid-9: #3E63DD; + --base-indigo-solid-10: #3A5CCC; + --base-indigo-solid-11: #3451B2; + --base-indigo-solid-12: #101D46; + --base-blue-solid-1: #FBFDFF; + --base-blue-solid-2: #F5FAFF; + --base-blue-solid-3: #EDF6FF; + --base-blue-solid-4: #E1F0FF; + --base-blue-solid-5: #CEE7FE; + --base-blue-solid-6: #B7D9F8; + --base-blue-solid-7: #96C7F2; + --base-blue-solid-8: #5EB0EF; + --base-blue-solid-9: #0091FF; + --base-blue-solid-10: #0081F1; + --base-blue-solid-11: #006ADC; + --base-blue-solid-12: #00254D; + --base-violet-solid-1: #FDFCFE; + --base-violet-solid-2: #FBFAFF; + --base-violet-solid-3: #F5F2FF; + --base-violet-solid-4: #EDE9FE; + --base-violet-solid-5: #E4DEFC; + --base-violet-solid-6: #D7CFF9; + --base-violet-solid-7: #C4B8F3; + --base-violet-solid-8: #AA99EC; + --base-violet-solid-9: #6E56CF; + --base-violet-solid-10: #644FC1; + --base-violet-solid-11: #5746AF; + --base-violet-solid-12: #20134B; + --base-gray-slate-solid-1: #FBFCFD; + --base-gray-slate-solid-2: #F8F9FA; + --base-gray-slate-solid-3: #F1F3F5; + --base-gray-slate-solid-4: #ECEEF0; + --base-gray-slate-solid-5: #E6E8EB; + --base-gray-slate-solid-6: #DFE3E6; + --base-gray-slate-solid-7: #D7DBDF; + --base-gray-slate-solid-8: #C1C8CD; + --base-gray-slate-solid-9: #889096; + --base-gray-slate-solid-10: #7E868C; + --base-gray-slate-solid-11: #687076; + --base-gray-slate-solid-12: #11181C; + --base-red-solid-1: #FFFCFC; + --base-red-solid-2: #FFF8F8; + --base-red-solid-3: #FFEFEF; + --base-red-solid-4: #FFE5E5; + --base-red-solid-5: #FDD8D8; + --base-red-solid-6: #F9C6C6; + --base-red-solid-7: #F3AEAF; + --base-red-solid-8: #EB9091; + --base-red-solid-9: #E5484D; + --base-red-solid-10: #DC3D43; + --base-red-solid-11: #CD2B31; + --base-red-solid-12: #381316; + --base-green-solid-1: #FBFEFC; + --base-green-solid-2: #F2FCF5; + --base-green-solid-3: #E9F9EE; + --base-green-solid-4: #DDF3E4; + --base-green-solid-5: #CCEBD7; + --base-green-solid-6: #B4DFC4; + --base-green-solid-7: #92CEAC; + --base-green-solid-8: #5BB98C; + --base-green-solid-9: #30A46C; + --base-green-solid-10: #299764; + --base-green-solid-11: #18794E; + --base-green-solid-12: #153226; + --base-amber-solid-1: #FEFDFB; + --base-amber-solid-2: #FFF9ED; + --base-amber-solid-3: #FFF4D5; + --base-amber-solid-4: #FFECBC; + --base-amber-solid-5: #FFE3A2; + --base-amber-solid-6: #FFD386; + --base-amber-solid-7: #F3BA63; + --base-amber-solid-8: #EE9D2B; + --base-amber-solid-9: #FFB224; + --base-amber-solid-10: #FFA01C; + --base-amber-solid-11: #AD5700; + --base-amber-solid-12: #4E2009; + --base-pure-white: #FFFFFF; + --base-pure-black: #000000; + --text-default: var(--base-gray-slate-solid-12); --text-subdued: #3E4346; - --text-disabled: var(--lightmode-gray-slate-solid-9); - --text-critical: var(--lightmode-red-solid-11); - --text-warning: var(--lightmode-amber-solid-11); - --text-success: var(--lightmode-green-solid-11); - --text-highlight: var(--lightmode-violet-solid-11); - --text-interactive: var(--lightmode-blue-solid-11); - --text-onbg-disabled: var(--lightmode-gray-slate-solid-6); - --text-onbg-default: var(--lightmode-pure-white); - --border-default: var(--lightmode-gray-slate-solid-8); - --border-subdued: var(--lightmode-gray-slate-solid-7); - --border-disabled: var(--lightmode-gray-slate-solid-6); - --border-critical-default: var(--lightmode-red-solid-8); - --border-critical-disabled: var(--lightmode-red-solid-7); - --border-critical-subdued: var(--lightmode-red-solid-6); - --border-success-default: var(--lightmode-green-solid-8); - --border-success-subdued: var(--lightmode-green-solid-7); - --border-warning-default: var(--lightmode-amber-solid-8); - --border-warning-subdued: var(--lightmode-amber-solid-7); - --border-highlight-default: var(--lightmode-violet-solid-8); - --border-highlight-subdued: var(--lightmode-violet-solid-7); - --border-interactive-default: var(--lightmode-blue-solid-8); - --border-interactive-focused: var(--lightmode-blue-solid-7); - --icon-default: var(--lightmode-gray-slate-solid-11); - --icon-subdued: var(--lightmode-gray-slate-solid-10); - --icon-disabled: var(--lightmode-gray-slate-solid-9); - --icon-critical: var(--lightmode-red-solid-10); - --action-primary-basic-default: var(--lightmode-violet-solid-9); - --icon-warning: var(--lightmode-amber-solid-10); - --action-primary-basic-hovered: var(--lightmode-violet-solid-10); - --icon-success: var(--lightmode-green-solid-10); - --action-primary-basic-pressed: var(--lightmode-violet-solid-11); - --icon-highlight: var(--lightmode-violet-solid-10); - --icon-interactive: var(--lightmode-indigo-solid-11); - --action-primary-basic-depressed: var(--lightmode-violet-solid-12); - --action-primary-disabled: var(--lightmode-gray-slate-solid-9); - --action-primary-critical-default: var(--lightmode-red-solid-9); - --action-primary-success-default: var(--lightmode-green-solid-9); - --action-primary-critical-hovered: var(--lightmode-red-solid-10); - --action-secondary-critical-pressed: var(--lightmode-red-solid-5); - --action-secondary-critical-hovered: var(--lightmode-red-solid-4); - --action-secondary-critical-depressed: var(--lightmode-red-solid-6); - --action-secondary-critical-default: var(--lightmode-red-solid-3); - --action-primary-interactive-default: var(--lightmode-blue-solid-9); - --action-primary-interactive-hovered: var(--lightmode-blue-solid-10); - --action-primary-interactive-pressed: var(--lightmode-blue-solid-11); - --action-primary-interactive-depressed: var(--lightmode-blue-solid-12); - --action-primary-success-hovered: var(--lightmode-green-solid-10); - --action-secondary-basic-default: var(--lightmode-violet-solid-3); - --action-primary-critical-pressed: var(--lightmode-red-solid-11); - --action-primary-critical-depressed: var(--lightmode-red-solid-12); - --action-secondary-disabled: var(--lightmode-gray-slate-solid-3); - --action-primary-success-pressed: var(--lightmode-green-solid-11); - --action-secondary-interactive-depressed: var(--lightmode-blue-solid-6); - --action-secondary-success-depressed: var(--lightmode-green-solid-6); - --action-secondary-success-pressed: var(--lightmode-green-solid-5); - --action-primary-success-depressed: var(--lightmode-green-solid-12); - --action-secondary-interactive-hovered: var(--lightmode-blue-solid-4); - --action-secondary-neutral-default: var(--lightmode-gray-slate-solid-1); - --action-secondary-interactive-pressed: var(--lightmode-blue-solid-5); - --action-secondary-success-hovered: var(--lightmode-green-solid-4); - --action-secondary-success-default: var(--lightmode-green-solid-3); - --action-secondary-interactive-default: var(--lightmode-blue-solid-3); - --action-secondary-neutral-hovered: var(--lightmode-gray-slate-solid-2); - --action-secondary-neutral-pressed: var(--lightmode-gray-slate-solid-5); - --action-secondary-basic-depressed: var(--lightmode-violet-solid-6); - --action-secondary-basic-hovered: var(--lightmode-violet-solid-4); - --action-secondary-basic-pressed: var(--lightmode-violet-solid-5); - --action-secondary-neutral-depressed: var(--lightmode-gray-slate-solid-6); - --action-tertiary-basic-hover: var(--lightmode-violet-alpha-2); - --lightmode-indigo-alpha-1: #05058203; - --action-tertiary-interactive-hover: var(--lightmode-blue-alpha-2); - --lightmode-indigo-alpha-2: #054CFF08; - --action-tertiary-success-hover: var(--lightmode-green-alpha-2); - --action-tertiary-critical-hover: var(--lightmode-red-alpha-2); - --lightmode-indigo-alpha-3: #0144FF0F; - --lightmode-indigo-alpha-4: #0247F51A; - --lightmode-indigo-alpha-5: #023CEB26; - --lightmode-indigo-alpha-6: #013DE438; - --lightmode-indigo-alpha-7: #0038E052; - --lightmode-indigo-alpha-8: #0134DB73; - --lightmode-indigo-alpha-9: #0031D2C2; - --background-subdued: var(--lightmode-indigo-solid-2); - --background-dark: var(--lightmode-indigo-solid-12); - --background-default: var(--lightmode-indigo-solid-3); - --surface-default: var(--lightmode-pure-white); - --lightmode-indigo-alpha-10: #002CBDC4; - --surface-subdued: var(--lightmode-gray-slate-solid-2); - --lightmode-indigo-alpha-11: #00259ECC; - --surface-selected: var(--lightmode-blue-solid-2); - --lightmode-indigo-alpha-12: #000E3AF0; - --surface-warning: var(--lightmode-amber-solid-2); - --surface-critical: var(--lightmode-red-solid-2); - --lightmode-blue-alpha-1: #0582FF05; - --lightmode-blue-alpha-2: #0582FF0A; - --surface-success: var(--lightmode-green-solid-2); - --surface-highlight-subdued: var(--lightmode-violet-solid-2); - --lightmode-blue-alpha-3: #0280FF12; - --lightmode-blue-alpha-4: #0180FF1F; - --surface-interactive: var(--lightmode-blue-solid-2); - --surface-highlight-default: var(--lightmode-violet-solid-4); - --lightmode-blue-alpha-5: #0180EF30; - --surface-highlight-hovered: var(--lightmode-violet-solid-6); - --lightmode-blue-alpha-6: #0177E647; - --lightmode-blue-alpha-7: #0077DF69; - --lightmode-blue-alpha-8: #0082E6A1; - --lightmode-blue-alpha-9: #0091FFFA; - --lightmode-blue-alpha-10: #0080F1FA; - --lightmode-blue-alpha-11: #0066DBFA; - --lightmode-blue-alpha-12: #002149FA; - --lightmode-violet-alpha-1: #5805AB03; - --lightmode-violet-alpha-2: #3705FF05; - --lightmode-violet-alpha-3: #3C00FF0D; - --lightmode-violet-alpha-4: #2E02F417; - --lightmode-violet-alpha-5: #2F01E821; - --lightmode-violet-alpha-6: #2A01DF30; - --lightmode-violet-alpha-7: #2B01D447; - --lightmode-violet-alpha-8: #2A00D066; - --lightmode-violet-alpha-9: #2500B6A8; - --lightmode-violet-alpha-10: #1F00A5B0; - --lightmode-violet-alpha-11: #180091BA; - --lightmode-violet-alpha-12: #0E003DED; - --lightmode-gray-slate-alpha-1: #05448205; - --lightmode-gray-slate-alpha-2: #05294D08; - --lightmode-gray-slate-alpha-3: #0025490D; - --lightmode-gray-slate-alpha-4: #021C3714; - --lightmode-gray-slate-alpha-5: #0217351A; - --lightmode-gray-slate-alpha-6: #01213921; - --lightmode-gray-slate-alpha-7: #001A3329; - --lightmode-gray-slate-alpha-8: #011E323D; - --lightmode-gray-slate-alpha-9: #00111E78; - --lightmode-gray-slate-alpha-10: #00101B82; - --lightmode-gray-slate-alpha-11: #000E1896; - --lightmode-gray-slate-alpha-12: #00080CED; - --lightmode-green-alpha-1: #05C04305; - --lightmode-green-alpha-2: #00C43B0D; - --lightmode-green-alpha-3: #02BA3C17; - --lightmode-green-alpha-4: #01A63521; - --lightmode-green-alpha-5: #009B3633; - --lightmode-green-alpha-6: #0193364A; - --lightmode-green-alpha-7: #008C3D6E; - --lightmode-green-alpha-8: #00934CA3; - --lightmode-green-alpha-9: #008F4ACF; - --lightmode-green-alpha-10: #008346D6; - --lightmode-green-alpha-11: #006B3BE8; - --lightmode-green-alpha-12: #002012EB; - --lightmode-amber-alpha-1: #C0820505; - --lightmode-amber-alpha-2: #FFAB0212; - --lightmode-amber-alpha-3: #FFBB012B; - --lightmode-amber-alpha-4: #FFB70042; - --lightmode-amber-alpha-5: #FFB3005E; - --lightmode-amber-alpha-6: #FFA20178; - --lightmode-amber-alpha-7: #EC8D009C; - --lightmode-amber-alpha-8: #EA8900D4; - --lightmode-amber-alpha-9: #FFA600DB; - --lightmode-amber-alpha-10: #FF9500E3; - --lightmode-amber-alpha-11: #AB5300FA; - --lightmode-amber-alpha-12: #481800F5; - --lightmode-red-alpha-1: #FF050503; - --lightmode-red-alpha-2: #FF050508; - --lightmode-red-alpha-3: #FF01010F; - --lightmode-red-alpha-4: #FF00001A; - --lightmode-red-alpha-5: #F2000026; - --lightmode-red-alpha-6: #E4010138; - --lightmode-red-alpha-7: #D9000452; - --lightmode-red-alpha-8: #D1000470; - --lightmode-red-alpha-9: #DB0007B8; - --lightmode-red-alpha-10: #D10007C2; - --lightmode-red-alpha-11: #C30007D4; - --lightmode-red-alpha-12: #280003ED; + --text-disabled: var(--base-gray-slate-solid-9); + --text-critical: var(--base-red-solid-11); + --text-warning: var(--base-amber-solid-11); + --text-success: var(--base-green-solid-11); + --text-highlight: var(--base-violet-solid-11); + --text-interactive: var(--base-blue-solid-11); + --text-onbg-disabled: var(--base-gray-slate-solid-9); + --text-onbg-default: var(--base-gray-slate-solid-1); + --border-default: var(--base-gray-slate-solid-8); + --border-subdued: var(--base-gray-slate-solid-7); + --border-disabled: var(--base-gray-slate-solid-6); + --border-critical-default: var(--base-red-solid-8); + --border-critical-disabled: var(--base-red-solid-7); + --border-critical-subdued: var(--base-red-solid-6); + --border-success-default: var(--base-green-solid-8); + --border-success-subdued: var(--base-green-solid-7); + --border-warning-default: var(--base-amber-solid-8); + --border-warning-subdued: var(--base-amber-solid-7); + --border-highlight-default: var(--base-violet-solid-8); + --border-highlight-subdued: var(--base-violet-solid-7); + --border-highlight-onbg-default: var(--base-violet-solid-7); + --border-highlight-onbg-subdued: var(--base-violet-solid-9); + --border-interactive-default: var(--base-blue-solid-8); + --border-interactive-focused: var(--base-blue-solid-7); + --icon-default: var(--base-gray-slate-solid-11); + --icon-subdued: var(--base-gray-slate-solid-10); + --icon-disabled: var(--base-gray-slate-solid-9); + --icon-critical: var(--base-red-solid-10); + --icon-warning: var(--base-amber-solid-10); + --action-primary-basic-default: var(--base-violet-solid-9); + --action-primary-basic-hovered: var(--base-violet-solid-10); + --icon-success: var(--base-green-solid-10); + --action-primary-basic-pressed: var(--base-violet-solid-11); + --icon-highlight: var(--base-violet-solid-10); + --icon-interactive: var(--base-indigo-solid-11); + --action-primary-basic-depressed: var(--base-violet-solid-12); + --icon-onbg-default: var(--base-gray-slate-solid-1); + --icon-onbg-subdued: var(--base-gray-slate-solid-4); + --action-primary-disabled: var(--base-gray-slate-solid-9); + --action-primary-critical-default: var(--base-red-solid-9); + --icon-onbg-disabled: var(--base-gray-slate-solid-9); + --action-primary-critical-hovered: var(--base-red-solid-10); + --action-primary-success-default: var(--base-green-solid-9); + --action-secondary-critical-pressed: var(--base-red-solid-5); + --action-secondary-critical-hovered: var(--base-red-solid-4); + --action-secondary-critical-depressed: var(--base-red-solid-6); + --action-primary-interactive-default: var(--base-blue-solid-9); + --action-secondary-critical-default: var(--base-red-solid-3); + --action-primary-interactive-hovered: var(--base-blue-solid-10); + --action-primary-interactive-pressed: var(--base-blue-solid-11); + --action-primary-interactive-depressed: var(--base-blue-solid-12); + --action-primary-success-hovered: var(--base-green-solid-10); + --action-secondary-basic-default: var(--base-violet-solid-3); + --action-primary-critical-pressed: var(--base-red-solid-11); + --action-primary-critical-depressed: var(--base-red-solid-12); + --action-primary-success-pressed: var(--base-green-solid-11); + --action-secondary-disabled: var(--base-gray-slate-solid-3); + --action-secondary-interactive-pressed: var(--base-blue-solid-5); + --action-primary-success-depressed: var(--base-green-solid-12); + --action-secondary-neutral-default: var(--base-gray-slate-solid-1); + --action-secondary-interactive-depressed: var(--base-blue-solid-6); + --action-secondary-interactive-hovered: var(--base-blue-solid-4); + --action-secondary-success-pressed: var(--base-green-solid-5); + --action-secondary-success-depressed: var(--base-green-solid-6); + --action-secondary-success-hovered: var(--base-green-solid-4); + --action-secondary-success-default: var(--base-green-solid-3); + --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2); + --action-secondary-interactive-default: var(--base-blue-solid-3); + --action-secondary-basic-hovered: var(--base-violet-solid-4); + --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5); + --action-secondary-basic-depressed: var(--base-violet-solid-6); + --action-secondary-basic-pressed: var(--base-violet-solid-5); + --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6); + --action-tertiary-basic-hover: var(--base-violet-alpha-2); + --base-indigo-alpha-1: #05058203; + --action-tertiary-interactive-hover: var(--base-blue-alpha-2); + --action-tertiary-success-hover: var(--base-green-alpha-2); + --base-indigo-alpha-2: #054CFF08; + --action-tertiary-critical-hover: var(--base-red-alpha-2); + --base-indigo-alpha-3: #0144FF0F; + --base-indigo-alpha-4: #0247F51A; + --base-indigo-alpha-5: #023CEB26; + --background-alpha-dark: var(--base-indigo-alpha-12); + --base-indigo-alpha-6: #013DE438; + --base-indigo-alpha-7: #0038E052; + --base-indigo-alpha-8: #0134DB73; + --base-indigo-alpha-9: #0031D2C2; + --background-solid-subdued: var(--base-indigo-solid-2); + --background-solid-dark: var(--base-indigo-solid-12); + --background-solid-default: var(--base-indigo-solid-3); + --surface-default: var(--base-pure-white); + --surface-subdued: var(--base-gray-slate-solid-2); + --base-indigo-alpha-10: #002CBDC4; + --surface-selected: var(--base-blue-solid-2); + --base-indigo-alpha-11: #00259ECC; + --surface-warning: var(--base-amber-solid-2); + --base-indigo-alpha-12: #000E3AF0; + --base-blue-alpha-1: #0582FF05; + --surface-critical: var(--base-red-solid-2); + --surface-success: var(--base-green-solid-2); + --base-blue-alpha-2: #0582FF0A; + --surface-highlight-subdued: var(--base-violet-solid-2); + --base-blue-alpha-3: #0280FF12; + --surface-interactive: var(--base-blue-solid-2); + --base-blue-alpha-4: #0180FF1F; + --surface-highlight-default: var(--base-violet-solid-4); + --base-blue-alpha-5: #0180EF30; + --base-blue-alpha-6: #0177E647; + --surface-highlight-hovered: var(--base-violet-solid-6); + --base-blue-alpha-7: #0077DF69; + --base-blue-alpha-8: #0082E6A1; + --base-blue-alpha-9: #0091FFFA; + --base-blue-alpha-10: #0080F1FA; + --base-blue-alpha-11: #0066DBFA; + --base-blue-alpha-12: #002149FA; + --base-violet-alpha-1: #5805AB03; + --base-violet-alpha-2: #3705FF05; + --base-violet-alpha-3: #3C00FF0D; + --base-violet-alpha-4: #2E02F417; + --base-violet-alpha-5: #2F01E821; + --base-violet-alpha-6: #2A01DF30; + --base-violet-alpha-7: #2B01D447; + --base-violet-alpha-8: #2A00D066; + --base-violet-alpha-9: #2500B6A8; + --base-violet-alpha-10: #1F00A5B0; + --base-violet-alpha-11: #180091BA; + --base-violet-alpha-12: #0E003DED; + --base-gray-slate-alpha-1: #05448205; + --base-gray-slate-alpha-2: #05294D08; + --base-gray-slate-alpha-3: #0025490D; + --base-gray-slate-alpha-4: #021C3714; + --base-gray-slate-alpha-5: #0217351A; + --base-gray-slate-alpha-6: #01213921; + --base-gray-slate-alpha-7: #001A3329; + --base-gray-slate-alpha-8: #011E323D; + --base-gray-slate-alpha-9: #00111E78; + --base-gray-slate-alpha-10: #00101B82; + --base-gray-slate-alpha-11: #000E1896; + --base-gray-slate-alpha-12: #00080CED; + --base-green-alpha-1: #05C04305; + --base-green-alpha-2: #00C43B0D; + --base-green-alpha-3: #02BA3C17; + --base-green-alpha-4: #01A63521; + --base-green-alpha-5: #009B3633; + --base-green-alpha-6: #0193364A; + --base-green-alpha-7: #008C3D6E; + --base-green-alpha-8: #00934CA3; + --base-green-alpha-9: #008F4ACF; + --base-green-alpha-10: #008346D6; + --base-green-alpha-11: #006B3BE8; + --base-green-alpha-12: #002012EB; + --base-amber-alpha-1: #C0820505; + --base-amber-alpha-2: #FFAB0212; + --base-amber-alpha-3: #FFBB012B; + --base-amber-alpha-4: #FFB70042; + --base-amber-alpha-5: #FFB3005E; + --base-amber-alpha-6: #FFA20178; + --base-amber-alpha-7: #EC8D009C; + --base-amber-alpha-8: #EA8900D4; + --base-amber-alpha-9: #FFA600DB; + --base-amber-alpha-10: #FF9500E3; + --base-amber-alpha-11: #AB5300FA; + --base-amber-alpha-12: #481800F5; + --base-red-alpha-1: #FF050503; + --base-red-alpha-2: #FF050508; + --base-red-alpha-3: #FF01010F; + --base-red-alpha-4: #FF00001A; + --base-red-alpha-5: #F2000026; + --base-red-alpha-6: #E4010138; + --base-red-alpha-7: #D9000452; + --base-red-alpha-8: #D1000470; + --base-red-alpha-9: #DB0007B8; + --base-red-alpha-10: #D10007C2; + --base-red-alpha-11: #C30007D4; + --base-red-alpha-12: #280003ED; --mapareadistrict-default: var(--surface-highlight-default); --mapareadistrict-hover: var(--action-secondary-success-hovered); --mapareadistrict-selected: var(--action-primary-basic-default); --mapareadistrict-disabled: var(--action-primary-disabled); - --mapareadistrict-border: var(--lightmode-gray-slate-solid-9); + --mapareadistrict-border: var(--base-gray-slate-solid-9); --border-focus: #FFFFFF03; + --transparent: #FFFFFF00; + --border-onbg-subdued: var(--base-gray-slate-solid-11); --space-0: 0px; --space-025: 1px; diff --git a/examples/district/styles/tokens/_variables_dark.css b/examples/district/styles/tokens/_variables_dark.css deleted file mode 100644 index 54da2e9f..00000000 --- a/examples/district/styles/tokens/_variables_dark.css +++ /dev/null @@ -1,48 +0,0 @@ -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } - - :root { - --background: #202123ff; - --background-hovered: #474849; - --background-pressed: #555a5e; - --background-selected: #2d2d33; - --background-invert: #f6f6f7ff; - - --text: #b0b0bc; - --text-strong: #e7e7f1; - --text-subdued: #85858e; - /* --interactive: #8bb2ff; */ - --interactive-hovered: #2c6ecbff; - - --surface: #161619; - --surface-hovered: #2d2d33; - --surface-pressed: #474849; - --surface-selected: #474849; - - --surface-attention: #454500; - --surface-information: #02382d; - --surface-warning: #4c250f; - --surface-subdued: #1e1e23; - - --surface-selected: #202124; - --surface-critical-subdued: #201e1e; - - --surface-neutral: #202123; - --surface-neutral-hovered: #474849; - --surface-neutral-pressed: #555a5e; - --surface-neutral-disabled: #555a5e; - - --card-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.12); - --card-shadow-hover: 0 4px 7px hsla(0, 0%, 100%, 0.1), - inset 0 0 0 1px hsla(0, 0%, 100%, 0.12); - - --backdrop: rgba(0, 0, 0, 0.5); - - --icon: #eeeeee; - --icon-subdued: #dddddd; - --icon-hovered: #ffffff; - --icon-pressed: #dddddd; - } -} diff --git a/examples/district/styles/tokens/tailwind/color.js b/examples/district/styles/tokens/tailwind/color.js index 1825a19d..26c3de63 100644 --- a/examples/district/styles/tokens/tailwind/color.js +++ b/examples/district/styles/tokens/tailwind/color.js @@ -1,265 +1,273 @@ module.exports = { - "lightmodeIndigoSolid1": "#FDFDFE", - "lightmodeIndigoSolid2": "#F8FAFF", - "lightmodeIndigoSolid3": "#F0F4FF", - "lightmodeIndigoSolid4": "#E6EDFE", - "lightmodeIndigoSolid5": "#D9E2FC", - "lightmodeIndigoSolid6": "#C6D4F9", - "lightmodeIndigoSolid7": "#AEC0F5", - "lightmodeIndigoSolid8": "#8DA4EF", - "lightmodeIndigoSolid9": "#3E63DD", - "lightmodeIndigoSolid10": "#3A5CCC", - "lightmodeIndigoSolid11": "#3451B2", - "lightmodeIndigoSolid12": "#101D46", - "lightmodeBlueSolid1": "#FBFDFF", - "lightmodeBlueSolid2": "#F5FAFF", - "lightmodeBlueSolid3": "#EDF6FF", - "lightmodeBlueSolid4": "#E1F0FF", - "lightmodeBlueSolid5": "#CEE7FE", - "lightmodeBlueSolid6": "#B7D9F8", - "lightmodeBlueSolid7": "#96C7F2", - "lightmodeBlueSolid8": "#5EB0EF", - "lightmodeBlueSolid9": "#0091FF", - "lightmodeBlueSolid10": "#0081F1", - "lightmodeBlueSolid11": "#006ADC", - "lightmodeBlueSolid12": "#00254D", - "lightmodeVioletSolid1": "#FDFCFE", - "lightmodeVioletSolid2": "#FBFAFF", - "lightmodeVioletSolid3": "#F5F2FF", - "lightmodeVioletSolid4": "#EDE9FE", - "lightmodeVioletSolid5": "#E4DEFC", - "lightmodeVioletSolid6": "#D7CFF9", - "lightmodeVioletSolid7": "#C4B8F3", - "lightmodeVioletSolid8": "#AA99EC", - "lightmodeVioletSolid9": "#6E56CF", - "lightmodeVioletSolid10": "#644FC1", - "lightmodeVioletSolid11": "#5746AF", - "lightmodeVioletSolid12": "#20134B", - "lightmodeGraySlateSolid1": "#FBFCFD", - "lightmodeGraySlateSolid2": "#F8F9FA", - "lightmodeGraySlateSolid3": "#F1F3F5", - "lightmodeGraySlateSolid4": "#ECEEF0", - "lightmodeGraySlateSolid5": "#E6E8EB", - "lightmodeGraySlateSolid6": "#DFE3E6", - "lightmodeGraySlateSolid7": "#D7DBDF", - "lightmodeGraySlateSolid8": "#C1C8CD", - "lightmodeGraySlateSolid9": "#889096", - "lightmodeGraySlateSolid10": "#7E868C", - "lightmodeGraySlateSolid11": "#687076", - "lightmodeGraySlateSolid12": "#11181C", - "lightmodeRedSolid1": "#FFFCFC", - "lightmodeRedSolid2": "#FFF8F8", - "lightmodeRedSolid3": "#FFEFEF", - "lightmodeRedSolid4": "#FFE5E5", - "lightmodeRedSolid5": "#FDD8D8", - "lightmodeRedSolid6": "#F9C6C6", - "lightmodeRedSolid7": "#F3AEAF", - "lightmodeRedSolid8": "#EB9091", - "lightmodeRedSolid9": "#E5484D", - "lightmodeRedSolid10": "#DC3D43", - "lightmodeRedSolid11": "#CD2B31", - "lightmodeRedSolid12": "#381316", - "lightmodeGreenSolid1": "#FBFEFC", - "lightmodeGreenSolid2": "#F2FCF5", - "lightmodeGreenSolid3": "#E9F9EE", - "lightmodeGreenSolid4": "#DDF3E4", - "lightmodeGreenSolid5": "#CCEBD7", - "lightmodeGreenSolid6": "#B4DFC4", - "lightmodeGreenSolid7": "#92CEAC", - "lightmodeGreenSolid8": "#5BB98C", - "lightmodeGreenSolid9": "#30A46C", - "lightmodeGreenSolid10": "#299764", - "lightmodeGreenSolid11": "#18794E", - "lightmodeGreenSolid12": "#153226", - "lightmodeAmberSolid1": "#FEFDFB", - "lightmodeAmberSolid2": "#FFF9ED", - "lightmodeAmberSolid3": "#FFF4D5", - "lightmodeAmberSolid4": "#FFECBC", - "lightmodeAmberSolid5": "#FFE3A2", - "lightmodeAmberSolid6": "#FFD386", - "lightmodeAmberSolid7": "#F3BA63", - "lightmodeAmberSolid8": "#EE9D2B", - "lightmodeAmberSolid9": "#FFB224", - "lightmodeAmberSolid10": "#FFA01C", - "lightmodeAmberSolid11": "#AD5700", - "lightmodeAmberSolid12": "#4E2009", - "lightmodePureWhite": "#FFFFFF", - "lightmodePureBlack": "#000000", - "textDefault": "var(--lightmode-gray-slate-solid-12)", + "baseIndigoSolid1": "#FDFDFE", + "baseIndigoSolid2": "#F8FAFF", + "baseIndigoSolid3": "#F0F4FF", + "baseIndigoSolid4": "#E6EDFE", + "baseIndigoSolid5": "#D9E2FC", + "baseIndigoSolid6": "#C6D4F9", + "baseIndigoSolid7": "#AEC0F5", + "baseIndigoSolid8": "#8DA4EF", + "baseIndigoSolid9": "#3E63DD", + "baseIndigoSolid10": "#3A5CCC", + "baseIndigoSolid11": "#3451B2", + "baseIndigoSolid12": "#101D46", + "baseBlueSolid1": "#FBFDFF", + "baseBlueSolid2": "#F5FAFF", + "baseBlueSolid3": "#EDF6FF", + "baseBlueSolid4": "#E1F0FF", + "baseBlueSolid5": "#CEE7FE", + "baseBlueSolid6": "#B7D9F8", + "baseBlueSolid7": "#96C7F2", + "baseBlueSolid8": "#5EB0EF", + "baseBlueSolid9": "#0091FF", + "baseBlueSolid10": "#0081F1", + "baseBlueSolid11": "#006ADC", + "baseBlueSolid12": "#00254D", + "baseVioletSolid1": "#FDFCFE", + "baseVioletSolid2": "#FBFAFF", + "baseVioletSolid3": "#F5F2FF", + "baseVioletSolid4": "#EDE9FE", + "baseVioletSolid5": "#E4DEFC", + "baseVioletSolid6": "#D7CFF9", + "baseVioletSolid7": "#C4B8F3", + "baseVioletSolid8": "#AA99EC", + "baseVioletSolid9": "#6E56CF", + "baseVioletSolid10": "#644FC1", + "baseVioletSolid11": "#5746AF", + "baseVioletSolid12": "#20134B", + "baseGraySlateSolid1": "#FBFCFD", + "baseGraySlateSolid2": "#F8F9FA", + "baseGraySlateSolid3": "#F1F3F5", + "baseGraySlateSolid4": "#ECEEF0", + "baseGraySlateSolid5": "#E6E8EB", + "baseGraySlateSolid6": "#DFE3E6", + "baseGraySlateSolid7": "#D7DBDF", + "baseGraySlateSolid8": "#C1C8CD", + "baseGraySlateSolid9": "#889096", + "baseGraySlateSolid10": "#7E868C", + "baseGraySlateSolid11": "#687076", + "baseGraySlateSolid12": "#11181C", + "baseRedSolid1": "#FFFCFC", + "baseRedSolid2": "#FFF8F8", + "baseRedSolid3": "#FFEFEF", + "baseRedSolid4": "#FFE5E5", + "baseRedSolid5": "#FDD8D8", + "baseRedSolid6": "#F9C6C6", + "baseRedSolid7": "#F3AEAF", + "baseRedSolid8": "#EB9091", + "baseRedSolid9": "#E5484D", + "baseRedSolid10": "#DC3D43", + "baseRedSolid11": "#CD2B31", + "baseRedSolid12": "#381316", + "baseGreenSolid1": "#FBFEFC", + "baseGreenSolid2": "#F2FCF5", + "baseGreenSolid3": "#E9F9EE", + "baseGreenSolid4": "#DDF3E4", + "baseGreenSolid5": "#CCEBD7", + "baseGreenSolid6": "#B4DFC4", + "baseGreenSolid7": "#92CEAC", + "baseGreenSolid8": "#5BB98C", + "baseGreenSolid9": "#30A46C", + "baseGreenSolid10": "#299764", + "baseGreenSolid11": "#18794E", + "baseGreenSolid12": "#153226", + "baseAmberSolid1": "#FEFDFB", + "baseAmberSolid2": "#FFF9ED", + "baseAmberSolid3": "#FFF4D5", + "baseAmberSolid4": "#FFECBC", + "baseAmberSolid5": "#FFE3A2", + "baseAmberSolid6": "#FFD386", + "baseAmberSolid7": "#F3BA63", + "baseAmberSolid8": "#EE9D2B", + "baseAmberSolid9": "#FFB224", + "baseAmberSolid10": "#FFA01C", + "baseAmberSolid11": "#AD5700", + "baseAmberSolid12": "#4E2009", + "basePureWhite": "#FFFFFF", + "basePureBlack": "#000000", + "textDefault": "var(--base-gray-slate-solid-12)", "textSubdued": "#3E4346", - "textDisabled": "var(--lightmode-gray-slate-solid-9)", - "textCritical": "var(--lightmode-red-solid-11)", - "textWarning": "var(--lightmode-amber-solid-11)", - "textSuccess": "var(--lightmode-green-solid-11)", - "textHighlight": "var(--lightmode-violet-solid-11)", - "textInteractive": "var(--lightmode-blue-solid-11)", - "textOnBGDisabled": "var(--lightmode-gray-slate-solid-6)", - "textOnBGDefault": "var(--lightmode-pure-white)", - "borderDefault": "var(--lightmode-gray-slate-solid-8)", - "borderSubdued": "var(--lightmode-gray-slate-solid-7)", - "borderDisabled": "var(--lightmode-gray-slate-solid-6)", - "borderCriticalDefault": "var(--lightmode-red-solid-8)", - "borderCriticalDisabled": "var(--lightmode-red-solid-7)", - "borderCriticalSubdued": "var(--lightmode-red-solid-6)", - "borderSuccessDefault": "var(--lightmode-green-solid-8)", - "borderSuccessSubdued": "var(--lightmode-green-solid-7)", - "borderWarningDefault": "var(--lightmode-amber-solid-8)", - "borderWarningSubdued": "var(--lightmode-amber-solid-7)", - "borderHighlightDefault": "var(--lightmode-violet-solid-8)", - "borderHighlightSubdued": "var(--lightmode-violet-solid-7)", - "borderInteractiveDefault": "var(--lightmode-blue-solid-8)", - "borderInteractiveFocused": "var(--lightmode-blue-solid-7)", - "iconDefault": "var(--lightmode-gray-slate-solid-11)", - "iconSubdued": "var(--lightmode-gray-slate-solid-10)", - "iconDisabled": "var(--lightmode-gray-slate-solid-9)", - "iconCritical": "var(--lightmode-red-solid-10)", - "actionPrimaryBasicDefault": "var(--lightmode-violet-solid-9)", - "iconWarning": "var(--lightmode-amber-solid-10)", - "actionPrimaryBasicHovered": "var(--lightmode-violet-solid-10)", - "iconSuccess": "var(--lightmode-green-solid-10)", - "actionPrimaryBasicPressed": "var(--lightmode-violet-solid-11)", - "iconHighlight": "var(--lightmode-violet-solid-10)", - "iconInteractive": "var(--lightmode-indigo-solid-11)", - "actionPrimaryBasicDepressed": "var(--lightmode-violet-solid-12)", - "actionPrimaryDisabled": "var(--lightmode-gray-slate-solid-9)", - "actionPrimaryCriticalDefault": "var(--lightmode-red-solid-9)", - "actionPrimarySuccessDefault": "var(--lightmode-green-solid-9)", - "actionPrimaryCriticalHovered": "var(--lightmode-red-solid-10)", - "actionSecondaryCriticalPressed": "var(--lightmode-red-solid-5)", - "actionSecondaryCriticalHovered": "var(--lightmode-red-solid-4)", - "actionSecondaryCriticalDepressed": "var(--lightmode-red-solid-6)", - "actionSecondaryCriticalDefault": "var(--lightmode-red-solid-3)", - "actionPrimaryInteractiveDefault": "var(--lightmode-blue-solid-9)", - "actionPrimaryInteractiveHovered": "var(--lightmode-blue-solid-10)", - "actionPrimaryInteractivePressed": "var(--lightmode-blue-solid-11)", - "actionPrimaryInteractiveDepressed": "var(--lightmode-blue-solid-12)", - "actionPrimarySuccessHovered": "var(--lightmode-green-solid-10)", - "actionSecondaryBasicDefault": "var(--lightmode-violet-solid-3)", - "actionPrimaryCriticalPressed": "var(--lightmode-red-solid-11)", - "actionPrimaryCriticalDepressed": "var(--lightmode-red-solid-12)", - "actionSecondaryDisabled": "var(--lightmode-gray-slate-solid-3)", - "actionPrimarySuccessPressed": "var(--lightmode-green-solid-11)", - "actionSecondaryInteractiveDepressed": "var(--lightmode-blue-solid-6)", - "actionSecondarySuccessDepressed": "var(--lightmode-green-solid-6)", - "actionSecondarySuccessPressed": "var(--lightmode-green-solid-5)", - "actionPrimarySuccessDepressed": "var(--lightmode-green-solid-12)", - "actionSecondaryInteractiveHovered": "var(--lightmode-blue-solid-4)", - "actionSecondaryNeutralDefault": "var(--lightmode-gray-slate-solid-1)", - "actionSecondaryInteractivePressed": "var(--lightmode-blue-solid-5)", - "actionSecondarySuccessHovered": "var(--lightmode-green-solid-4)", - "actionSecondarySuccessDefault": "var(--lightmode-green-solid-3)", - "actionSecondaryInteractiveDefault": "var(--lightmode-blue-solid-3)", - "actionSecondaryNeutralHovered": "var(--lightmode-gray-slate-solid-2)", - "actionSecondaryNeutralPressed": "var(--lightmode-gray-slate-solid-5)", - "actionSecondaryBasicDepressed": "var(--lightmode-violet-solid-6)", - "actionSecondaryBasicHovered": "var(--lightmode-violet-solid-4)", - "actionSecondaryBasicPressed": "var(--lightmode-violet-solid-5)", - "actionSecondaryNeutralDepressed": "var(--lightmode-gray-slate-solid-6)", - "actionTertiaryBasicHover": "var(--lightmode-violet-alpha-2)", - "lightmodeIndigoAlpha1": "#05058203", - "actionTertiaryInteractiveHover": "var(--lightmode-blue-alpha-2)", - "lightmodeIndigoAlpha2": "#054CFF08", - "actionTertiarySuccessHover": "var(--lightmode-green-alpha-2)", - "actionTertiaryCriticalHover": "var(--lightmode-red-alpha-2)", - "lightmodeIndigoAlpha3": "#0144FF0F", - "lightmodeIndigoAlpha4": "#0247F51A", - "lightmodeIndigoAlpha5": "#023CEB26", - "lightmodeIndigoAlpha6": "#013DE438", - "lightmodeIndigoAlpha7": "#0038E052", - "lightmodeIndigoAlpha8": "#0134DB73", - "lightmodeIndigoAlpha9": "#0031D2C2", - "backgroundSubdued": "var(--lightmode-indigo-solid-2)", - "backgroundDark": "var(--lightmode-indigo-solid-12)", - "backgroundDefault": "var(--lightmode-indigo-solid-3)", - "surfaceDefault": "var(--lightmode-pure-white)", - "lightmodeIndigoAlpha10": "#002CBDC4", - "surfaceSubdued": "var(--lightmode-gray-slate-solid-2)", - "lightmodeIndigoAlpha11": "#00259ECC", - "surfaceSelected": "var(--lightmode-blue-solid-2)", - "lightmodeIndigoAlpha12": "#000E3AF0", - "surfaceWarning": "var(--lightmode-amber-solid-2)", - "surfaceCritical": "var(--lightmode-red-solid-2)", - "lightmodeBlueAlpha1": "#0582FF05", - "lightmodeBlueAlpha2": "#0582FF0A", - "surfaceSuccess": "var(--lightmode-green-solid-2)", - "surfaceHighlightSubdued": "var(--lightmode-violet-solid-2)", - "lightmodeBlueAlpha3": "#0280FF12", - "lightmodeBlueAlpha4": "#0180FF1F", - "surfaceInteractive": "var(--lightmode-blue-solid-2)", - "surfaceHighlightDefault": "var(--lightmode-violet-solid-4)", - "lightmodeBlueAlpha5": "#0180EF30", - "surfaceHighlightHovered": "var(--lightmode-violet-solid-6)", - "lightmodeBlueAlpha6": "#0177E647", - "lightmodeBlueAlpha7": "#0077DF69", - "lightmodeBlueAlpha8": "#0082E6A1", - "lightmodeBlueAlpha9": "#0091FFFA", - "lightmodeBlueAlpha10": "#0080F1FA", - "lightmodeBlueAlpha11": "#0066DBFA", - "lightmodeBlueAlpha12": "#002149FA", - "lightmodeVioletAlpha1": "#5805AB03", - "lightmodeVioletAlpha2": "#3705FF05", - "lightmodeVioletAlpha3": "#3C00FF0D", - "lightmodeVioletAlpha4": "#2E02F417", - "lightmodeVioletAlpha5": "#2F01E821", - "lightmodeVioletAlpha6": "#2A01DF30", - "lightmodeVioletAlpha7": "#2B01D447", - "lightmodeVioletAlpha8": "#2A00D066", - "lightmodeVioletAlpha9": "#2500B6A8", - "lightmodeVioletAlpha10": "#1F00A5B0", - "lightmodeVioletAlpha11": "#180091BA", - "lightmodeVioletAlpha12": "#0E003DED", - "lightmodeGraySlateAlpha1": "#05448205", - "lightmodeGraySlateAlpha2": "#05294D08", - "lightmodeGraySlateAlpha3": "#0025490D", - "lightmodeGraySlateAlpha4": "#021C3714", - "lightmodeGraySlateAlpha5": "#0217351A", - "lightmodeGraySlateAlpha6": "#01213921", - "lightmodeGraySlateAlpha7": "#001A3329", - "lightmodeGraySlateAlpha8": "#011E323D", - "lightmodeGraySlateAlpha9": "#00111E78", - "lightmodeGraySlateAlpha10": "#00101B82", - "lightmodeGraySlateAlpha11": "#000E1896", - "lightmodeGraySlateAlpha12": "#00080CED", - "lightmodeGreenAlpha1": "#05C04305", - "lightmodeGreenAlpha2": "#00C43B0D", - "lightmodeGreenAlpha3": "#02BA3C17", - "lightmodeGreenAlpha4": "#01A63521", - "lightmodeGreenAlpha5": "#009B3633", - "lightmodeGreenAlpha6": "#0193364A", - "lightmodeGreenAlpha7": "#008C3D6E", - "lightmodeGreenAlpha8": "#00934CA3", - "lightmodeGreenAlpha9": "#008F4ACF", - "lightmodeGreenAlpha10": "#008346D6", - "lightmodeGreenAlpha11": "#006B3BE8", - "lightmodeGreenAlpha12": "#002012EB", - "lightmodeAmberAlpha1": "#C0820505", - "lightmodeAmberAlpha2": "#FFAB0212", - "lightmodeAmberAlpha3": "#FFBB012B", - "lightmodeAmberAlpha4": "#FFB70042", - "lightmodeAmberAlpha5": "#FFB3005E", - "lightmodeAmberAlpha6": "#FFA20178", - "lightmodeAmberAlpha7": "#EC8D009C", - "lightmodeAmberAlpha8": "#EA8900D4", - "lightmodeAmberAlpha9": "#FFA600DB", - "lightmodeAmberAlpha10": "#FF9500E3", - "lightmodeAmberAlpha11": "#AB5300FA", - "lightmodeAmberAlpha12": "#481800F5", - "lightmodeRedAlpha1": "#FF050503", - "lightmodeRedAlpha2": "#FF050508", - "lightmodeRedAlpha3": "#FF01010F", - "lightmodeRedAlpha4": "#FF00001A", - "lightmodeRedAlpha5": "#F2000026", - "lightmodeRedAlpha6": "#E4010138", - "lightmodeRedAlpha7": "#D9000452", - "lightmodeRedAlpha8": "#D1000470", - "lightmodeRedAlpha9": "#DB0007B8", - "lightmodeRedAlpha10": "#D10007C2", - "lightmodeRedAlpha11": "#C30007D4", - "lightmodeRedAlpha12": "#280003ED", + "textDisabled": "var(--base-gray-slate-solid-9)", + "textCritical": "var(--base-red-solid-11)", + "textWarning": "var(--base-amber-solid-11)", + "textSuccess": "var(--base-green-solid-11)", + "textHighlight": "var(--base-violet-solid-11)", + "textInteractive": "var(--base-blue-solid-11)", + "textOnBGDisabled": "var(--base-gray-slate-solid-9)", + "textOnBGDefault": "var(--base-gray-slate-solid-1)", + "borderDefault": "var(--base-gray-slate-solid-8)", + "borderSubdued": "var(--base-gray-slate-solid-7)", + "borderDisabled": "var(--base-gray-slate-solid-6)", + "borderCriticalDefault": "var(--base-red-solid-8)", + "borderCriticalDisabled": "var(--base-red-solid-7)", + "borderCriticalSubdued": "var(--base-red-solid-6)", + "borderSuccessDefault": "var(--base-green-solid-8)", + "borderSuccessSubdued": "var(--base-green-solid-7)", + "borderWarningDefault": "var(--base-amber-solid-8)", + "borderWarningSubdued": "var(--base-amber-solid-7)", + "borderHighlightDefault": "var(--base-violet-solid-8)", + "borderHighlightSubdued": "var(--base-violet-solid-7)", + "borderHighlightOnBGDefault": "var(--base-violet-solid-7)", + "borderHighlightOnBGSubdued": "var(--base-violet-solid-9)", + "borderInteractiveDefault": "var(--base-blue-solid-8)", + "borderInteractiveFocused": "var(--base-blue-solid-7)", + "iconDefault": "var(--base-gray-slate-solid-11)", + "iconSubdued": "var(--base-gray-slate-solid-10)", + "iconDisabled": "var(--base-gray-slate-solid-9)", + "iconCritical": "var(--base-red-solid-10)", + "iconWarning": "var(--base-amber-solid-10)", + "actionPrimaryBasicDefault": "var(--base-violet-solid-9)", + "actionPrimaryBasicHovered": "var(--base-violet-solid-10)", + "iconSuccess": "var(--base-green-solid-10)", + "actionPrimaryBasicPressed": "var(--base-violet-solid-11)", + "iconHighlight": "var(--base-violet-solid-10)", + "iconInteractive": "var(--base-indigo-solid-11)", + "actionPrimaryBasicDepressed": "var(--base-violet-solid-12)", + "iconOnBGDefault": "var(--base-gray-slate-solid-1)", + "iconOnBGSubdued": "var(--base-gray-slate-solid-4)", + "actionPrimaryDisabled": "var(--base-gray-slate-solid-9)", + "actionPrimaryCriticalDefault": "var(--base-red-solid-9)", + "iconOnBGDisabled": "var(--base-gray-slate-solid-9)", + "actionPrimaryCriticalHovered": "var(--base-red-solid-10)", + "actionPrimarySuccessDefault": "var(--base-green-solid-9)", + "actionSecondaryCriticalPressed": "var(--base-red-solid-5)", + "actionSecondaryCriticalHovered": "var(--base-red-solid-4)", + "actionSecondaryCriticalDepressed": "var(--base-red-solid-6)", + "actionPrimaryInteractiveDefault": "var(--base-blue-solid-9)", + "actionSecondaryCriticalDefault": "var(--base-red-solid-3)", + "actionPrimaryInteractiveHovered": "var(--base-blue-solid-10)", + "actionPrimaryInteractivePressed": "var(--base-blue-solid-11)", + "actionPrimaryInteractiveDepressed": "var(--base-blue-solid-12)", + "actionPrimarySuccessHovered": "var(--base-green-solid-10)", + "actionSecondaryBasicDefault": "var(--base-violet-solid-3)", + "actionPrimaryCriticalPressed": "var(--base-red-solid-11)", + "actionPrimaryCriticalDepressed": "var(--base-red-solid-12)", + "actionPrimarySuccessPressed": "var(--base-green-solid-11)", + "actionSecondaryDisabled": "var(--base-gray-slate-solid-3)", + "actionSecondaryInteractivePressed": "var(--base-blue-solid-5)", + "actionPrimarySuccessDepressed": "var(--base-green-solid-12)", + "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)", + "actionSecondaryInteractiveDepressed": "var(--base-blue-solid-6)", + "actionSecondaryInteractiveHovered": "var(--base-blue-solid-4)", + "actionSecondarySuccessPressed": "var(--base-green-solid-5)", + "actionSecondarySuccessDepressed": "var(--base-green-solid-6)", + "actionSecondarySuccessHovered": "var(--base-green-solid-4)", + "actionSecondarySuccessDefault": "var(--base-green-solid-3)", + "actionSecondaryNeutralHovered": "var(--base-gray-slate-solid-2)", + "actionSecondaryInteractiveDefault": "var(--base-blue-solid-3)", + "actionSecondaryBasicHovered": "var(--base-violet-solid-4)", + "actionSecondaryNeutralPressed": "var(--base-gray-slate-solid-5)", + "actionSecondaryBasicDepressed": "var(--base-violet-solid-6)", + "actionSecondaryBasicPressed": "var(--base-violet-solid-5)", + "actionSecondaryNeutralDepressed": "var(--base-gray-slate-solid-6)", + "actionTertiaryBasicHover": "var(--base-violet-alpha-2)", + "baseIndigoAlpha1": "#05058203", + "actionTertiaryInteractiveHover": "var(--base-blue-alpha-2)", + "actionTertiarySuccessHover": "var(--base-green-alpha-2)", + "baseIndigoAlpha2": "#054CFF08", + "actionTertiaryCriticalHover": "var(--base-red-alpha-2)", + "baseIndigoAlpha3": "#0144FF0F", + "baseIndigoAlpha4": "#0247F51A", + "baseIndigoAlpha5": "#023CEB26", + "backgroundAlphaDark": "var(--base-indigo-alpha-12)", + "baseIndigoAlpha6": "#013DE438", + "baseIndigoAlpha7": "#0038E052", + "baseIndigoAlpha8": "#0134DB73", + "baseIndigoAlpha9": "#0031D2C2", + "backgroundSolidSubdued": "var(--base-indigo-solid-2)", + "backgroundSolidDark": "var(--base-indigo-solid-12)", + "backgroundSolidDefault": "var(--base-indigo-solid-3)", + "surfaceDefault": "var(--base-pure-white)", + "surfaceSubdued": "var(--base-gray-slate-solid-2)", + "baseIndigoAlpha10": "#002CBDC4", + "surfaceSelected": "var(--base-blue-solid-2)", + "baseIndigoAlpha11": "#00259ECC", + "surfaceWarning": "var(--base-amber-solid-2)", + "baseIndigoAlpha12": "#000E3AF0", + "baseBlueAlpha1": "#0582FF05", + "surfaceCritical": "var(--base-red-solid-2)", + "surfaceSuccess": "var(--base-green-solid-2)", + "baseBlueAlpha2": "#0582FF0A", + "surfaceHighlightSubdued": "var(--base-violet-solid-2)", + "baseBlueAlpha3": "#0280FF12", + "surfaceInteractive": "var(--base-blue-solid-2)", + "baseBlueAlpha4": "#0180FF1F", + "surfaceHighlightDefault": "var(--base-violet-solid-4)", + "baseBlueAlpha5": "#0180EF30", + "baseBlueAlpha6": "#0177E647", + "surfaceHighlightHovered": "var(--base-violet-solid-6)", + "baseBlueAlpha7": "#0077DF69", + "baseBlueAlpha8": "#0082E6A1", + "baseBlueAlpha9": "#0091FFFA", + "baseBlueAlpha10": "#0080F1FA", + "baseBlueAlpha11": "#0066DBFA", + "baseBlueAlpha12": "#002149FA", + "baseVioletAlpha1": "#5805AB03", + "baseVioletAlpha2": "#3705FF05", + "baseVioletAlpha3": "#3C00FF0D", + "baseVioletAlpha4": "#2E02F417", + "baseVioletAlpha5": "#2F01E821", + "baseVioletAlpha6": "#2A01DF30", + "baseVioletAlpha7": "#2B01D447", + "baseVioletAlpha8": "#2A00D066", + "baseVioletAlpha9": "#2500B6A8", + "baseVioletAlpha10": "#1F00A5B0", + "baseVioletAlpha11": "#180091BA", + "baseVioletAlpha12": "#0E003DED", + "baseGraySlateAlpha1": "#05448205", + "baseGraySlateAlpha2": "#05294D08", + "baseGraySlateAlpha3": "#0025490D", + "baseGraySlateAlpha4": "#021C3714", + "baseGraySlateAlpha5": "#0217351A", + "baseGraySlateAlpha6": "#01213921", + "baseGraySlateAlpha7": "#001A3329", + "baseGraySlateAlpha8": "#011E323D", + "baseGraySlateAlpha9": "#00111E78", + "baseGraySlateAlpha10": "#00101B82", + "baseGraySlateAlpha11": "#000E1896", + "baseGraySlateAlpha12": "#00080CED", + "baseGreenAlpha1": "#05C04305", + "baseGreenAlpha2": "#00C43B0D", + "baseGreenAlpha3": "#02BA3C17", + "baseGreenAlpha4": "#01A63521", + "baseGreenAlpha5": "#009B3633", + "baseGreenAlpha6": "#0193364A", + "baseGreenAlpha7": "#008C3D6E", + "baseGreenAlpha8": "#00934CA3", + "baseGreenAlpha9": "#008F4ACF", + "baseGreenAlpha10": "#008346D6", + "baseGreenAlpha11": "#006B3BE8", + "baseGreenAlpha12": "#002012EB", + "baseAmberAlpha1": "#C0820505", + "baseAmberAlpha2": "#FFAB0212", + "baseAmberAlpha3": "#FFBB012B", + "baseAmberAlpha4": "#FFB70042", + "baseAmberAlpha5": "#FFB3005E", + "baseAmberAlpha6": "#FFA20178", + "baseAmberAlpha7": "#EC8D009C", + "baseAmberAlpha8": "#EA8900D4", + "baseAmberAlpha9": "#FFA600DB", + "baseAmberAlpha10": "#FF9500E3", + "baseAmberAlpha11": "#AB5300FA", + "baseAmberAlpha12": "#481800F5", + "baseRedAlpha1": "#FF050503", + "baseRedAlpha2": "#FF050508", + "baseRedAlpha3": "#FF01010F", + "baseRedAlpha4": "#FF00001A", + "baseRedAlpha5": "#F2000026", + "baseRedAlpha6": "#E4010138", + "baseRedAlpha7": "#D9000452", + "baseRedAlpha8": "#D1000470", + "baseRedAlpha9": "#DB0007B8", + "baseRedAlpha10": "#D10007C2", + "baseRedAlpha11": "#C30007D4", + "baseRedAlpha12": "#280003ED", "mapareadistrictDefault": "var(--surface-highlight-default)", "mapareadistrictHover": "var(--action-secondary-success-hovered)", "mapareadistrictSelected": "var(--action-primary-basic-default)", "mapareadistrictDisabled": "var(--action-primary-disabled)", - "mapareadistrictBorder": "var(--lightmode-gray-slate-solid-9)", + "mapareadistrictBorder": "var(--base-gray-slate-solid-9)", "borderFocus": "#FFFFFF03", + "transparent": "#FFFFFF00", + "borderOnBGSubdued": "var(--base-gray-slate-solid-11)", } diff --git a/examples/district/styles/tokens/tokens.json b/examples/district/styles/tokens/tokens.json index b4d4dcf6..e94159a7 100644 --- a/examples/district/styles/tokens/tokens.json +++ b/examples/district/styles/tokens/tokens.json @@ -4,520 +4,520 @@ "name": "Colors", "modes": [ { - "name": "Mode 1", + "name": "Light", "variables": [ { - "name": "lightmode/indigo/solid/1", + "name": "base/indigo/solid/1", "type": "color", "isAlias": false, "value": "#FDFDFE" }, { - "name": "lightmode/indigo/solid/2", + "name": "base/indigo/solid/2", "type": "color", "isAlias": false, "value": "#F8FAFF" }, { - "name": "lightmode/indigo/solid/3", + "name": "base/indigo/solid/3", "type": "color", "isAlias": false, "value": "#F0F4FF" }, { - "name": "lightmode/indigo/solid/4", + "name": "base/indigo/solid/4", "type": "color", "isAlias": false, "value": "#E6EDFE" }, { - "name": "lightmode/indigo/solid/5", + "name": "base/indigo/solid/5", "type": "color", "isAlias": false, "value": "#D9E2FC" }, { - "name": "lightmode/indigo/solid/6", + "name": "base/indigo/solid/6", "type": "color", "isAlias": false, "value": "#C6D4F9" }, { - "name": "lightmode/indigo/solid/7", + "name": "base/indigo/solid/7", "type": "color", "isAlias": false, "value": "#AEC0F5" }, { - "name": "lightmode/indigo/solid/8", + "name": "base/indigo/solid/8", "type": "color", "isAlias": false, "value": "#8DA4EF" }, { - "name": "lightmode/indigo/solid/9", + "name": "base/indigo/solid/9", "type": "color", "isAlias": false, "value": "#3E63DD" }, { - "name": "lightmode/indigo/solid/10", + "name": "base/indigo/solid/10", "type": "color", "isAlias": false, "value": "#3A5CCC" }, { - "name": "lightmode/indigo/solid/11", + "name": "base/indigo/solid/11", "type": "color", "isAlias": false, "value": "#3451B2" }, { - "name": "lightmode/indigo/solid/12", + "name": "base/indigo/solid/12", "type": "color", "isAlias": false, "value": "#101D46" }, { - "name": "lightmode/blue/solid/1", + "name": "base/blue/solid/1", "type": "color", "isAlias": false, "value": "#FBFDFF" }, { - "name": "lightmode/blue/solid/2", + "name": "base/blue/solid/2", "type": "color", "isAlias": false, "value": "#F5FAFF" }, { - "name": "lightmode/blue/solid/3", + "name": "base/blue/solid/3", "type": "color", "isAlias": false, "value": "#EDF6FF" }, { - "name": "lightmode/blue/solid/4", + "name": "base/blue/solid/4", "type": "color", "isAlias": false, "value": "#E1F0FF" }, { - "name": "lightmode/blue/solid/5", + "name": "base/blue/solid/5", "type": "color", "isAlias": false, "value": "#CEE7FE" }, { - "name": "lightmode/blue/solid/6", + "name": "base/blue/solid/6", "type": "color", "isAlias": false, "value": "#B7D9F8" }, { - "name": "lightmode/blue/solid/7", + "name": "base/blue/solid/7", "type": "color", "isAlias": false, "value": "#96C7F2" }, { - "name": "lightmode/blue/solid/8", + "name": "base/blue/solid/8", "type": "color", "isAlias": false, "value": "#5EB0EF" }, { - "name": "lightmode/blue/solid/9", + "name": "base/blue/solid/9", "type": "color", "isAlias": false, "value": "#0091FF" }, { - "name": "lightmode/blue/solid/10", + "name": "base/blue/solid/10", "type": "color", "isAlias": false, "value": "#0081F1" }, { - "name": "lightmode/blue/solid/11", + "name": "base/blue/solid/11", "type": "color", "isAlias": false, "value": "#006ADC" }, { - "name": "lightmode/blue/solid/12", + "name": "base/blue/solid/12", "type": "color", "isAlias": false, "value": "#00254D" }, { - "name": "lightmode/violet/solid/1", + "name": "base/violet/solid/1", "type": "color", "isAlias": false, "value": "#FDFCFE" }, { - "name": "lightmode/violet/solid/2", + "name": "base/violet/solid/2", "type": "color", "isAlias": false, "value": "#FBFAFF" }, { - "name": "lightmode/violet/solid/3", + "name": "base/violet/solid/3", "type": "color", "isAlias": false, "value": "#F5F2FF" }, { - "name": "lightmode/violet/solid/4", + "name": "base/violet/solid/4", "type": "color", "isAlias": false, "value": "#EDE9FE" }, { - "name": "lightmode/violet/solid/5", + "name": "base/violet/solid/5", "type": "color", "isAlias": false, "value": "#E4DEFC" }, { - "name": "lightmode/violet/solid/6", + "name": "base/violet/solid/6", "type": "color", "isAlias": false, "value": "#D7CFF9" }, { - "name": "lightmode/violet/solid/7", + "name": "base/violet/solid/7", "type": "color", "isAlias": false, "value": "#C4B8F3" }, { - "name": "lightmode/violet/solid/8", + "name": "base/violet/solid/8", "type": "color", "isAlias": false, "value": "#AA99EC" }, { - "name": "lightmode/violet/solid/9", + "name": "base/violet/solid/9", "type": "color", "isAlias": false, "value": "#6E56CF" }, { - "name": "lightmode/violet/solid/10", + "name": "base/violet/solid/10", "type": "color", "isAlias": false, "value": "#644FC1" }, { - "name": "lightmode/violet/solid/11", + "name": "base/violet/solid/11", "type": "color", "isAlias": false, "value": "#5746AF" }, { - "name": "lightmode/violet/solid/12", + "name": "base/violet/solid/12", "type": "color", "isAlias": false, "value": "#20134B" }, { - "name": "lightmode/gray/slate/solid/1", + "name": "base/gray/slate/solid/1", "type": "color", "isAlias": false, "value": "#FBFCFD" }, { - "name": "lightmode/gray/slate/solid/2", + "name": "base/gray/slate/solid/2", "type": "color", "isAlias": false, "value": "#F8F9FA" }, { - "name": "lightmode/gray/slate/solid/3", + "name": "base/gray/slate/solid/3", "type": "color", "isAlias": false, "value": "#F1F3F5" }, { - "name": "lightmode/gray/slate/solid/4", + "name": "base/gray/slate/solid/4", "type": "color", "isAlias": false, "value": "#ECEEF0" }, { - "name": "lightmode/gray/slate/solid/5", + "name": "base/gray/slate/solid/5", "type": "color", "isAlias": false, "value": "#E6E8EB" }, { - "name": "lightmode/gray/slate/solid/6", + "name": "base/gray/slate/solid/6", "type": "color", "isAlias": false, "value": "#DFE3E6" }, { - "name": "lightmode/gray/slate/solid/7", + "name": "base/gray/slate/solid/7", "type": "color", "isAlias": false, "value": "#D7DBDF" }, { - "name": "lightmode/gray/slate/solid/8", + "name": "base/gray/slate/solid/8", "type": "color", "isAlias": false, "value": "#C1C8CD" }, { - "name": "lightmode/gray/slate/solid/9", + "name": "base/gray/slate/solid/9", "type": "color", "isAlias": false, "value": "#889096" }, { - "name": "lightmode/gray/slate/solid/10", + "name": "base/gray/slate/solid/10", "type": "color", "isAlias": false, "value": "#7E868C" }, { - "name": "lightmode/gray/slate/solid/11", + "name": "base/gray/slate/solid/11", "type": "color", "isAlias": false, "value": "#687076" }, { - "name": "lightmode/gray/slate/solid/12", + "name": "base/gray/slate/solid/12", "type": "color", "isAlias": false, "value": "#11181C" }, { - "name": "lightmode/red/solid/1", + "name": "base/red/solid/1", "type": "color", "isAlias": false, "value": "#FFFCFC" }, { - "name": "lightmode/red/solid/2", + "name": "base/red/solid/2", "type": "color", "isAlias": false, "value": "#FFF8F8" }, { - "name": "lightmode/red/solid/3", + "name": "base/red/solid/3", "type": "color", "isAlias": false, "value": "#FFEFEF" }, { - "name": "lightmode/red/solid/4", + "name": "base/red/solid/4", "type": "color", "isAlias": false, "value": "#FFE5E5" }, { - "name": "lightmode/red/solid/5", + "name": "base/red/solid/5", "type": "color", "isAlias": false, "value": "#FDD8D8" }, { - "name": "lightmode/red/solid/6", + "name": "base/red/solid/6", "type": "color", "isAlias": false, "value": "#F9C6C6" }, { - "name": "lightmode/red/solid/7", + "name": "base/red/solid/7", "type": "color", "isAlias": false, "value": "#F3AEAF" }, { - "name": "lightmode/red/solid/8", + "name": "base/red/solid/8", "type": "color", "isAlias": false, "value": "#EB9091" }, { - "name": "lightmode/red/solid/9", + "name": "base/red/solid/9", "type": "color", "isAlias": false, "value": "#E5484D" }, { - "name": "lightmode/red/solid/10", + "name": "base/red/solid/10", "type": "color", "isAlias": false, "value": "#DC3D43" }, { - "name": "lightmode/red/solid/11", + "name": "base/red/solid/11", "type": "color", "isAlias": false, "value": "#CD2B31" }, { - "name": "lightmode/red/solid/12", + "name": "base/red/solid/12", "type": "color", "isAlias": false, "value": "#381316" }, { - "name": "lightmode/green/solid/1", + "name": "base/green/solid/1", "type": "color", "isAlias": false, "value": "#FBFEFC" }, { - "name": "lightmode/green/solid/2", + "name": "base/green/solid/2", "type": "color", "isAlias": false, "value": "#F2FCF5" }, { - "name": "lightmode/green/solid/3", + "name": "base/green/solid/3", "type": "color", "isAlias": false, "value": "#E9F9EE" }, { - "name": "lightmode/green/solid/4", + "name": "base/green/solid/4", "type": "color", "isAlias": false, "value": "#DDF3E4" }, { - "name": "lightmode/green/solid/5", + "name": "base/green/solid/5", "type": "color", "isAlias": false, "value": "#CCEBD7" }, { - "name": "lightmode/green/solid/6", + "name": "base/green/solid/6", "type": "color", "isAlias": false, "value": "#B4DFC4" }, { - "name": "lightmode/green/solid/7", + "name": "base/green/solid/7", "type": "color", "isAlias": false, "value": "#92CEAC" }, { - "name": "lightmode/green/solid/8", + "name": "base/green/solid/8", "type": "color", "isAlias": false, "value": "#5BB98C" }, { - "name": "lightmode/green/solid/9", + "name": "base/green/solid/9", "type": "color", "isAlias": false, "value": "#30A46C" }, { - "name": "lightmode/green/solid/10", + "name": "base/green/solid/10", "type": "color", "isAlias": false, "value": "#299764" }, { - "name": "lightmode/green/solid/11", + "name": "base/green/solid/11", "type": "color", "isAlias": false, "value": "#18794E" }, { - "name": "lightmode/green/solid/12", + "name": "base/green/solid/12", "type": "color", "isAlias": false, "value": "#153226" }, { - "name": "lightmode/amber/solid/1", + "name": "base/amber/solid/1", "type": "color", "isAlias": false, "value": "#FEFDFB" }, { - "name": "lightmode/amber/solid/2", + "name": "base/amber/solid/2", "type": "color", "isAlias": false, "value": "#FFF9ED" }, { - "name": "lightmode/amber/solid/3", + "name": "base/amber/solid/3", "type": "color", "isAlias": false, "value": "#FFF4D5" }, { - "name": "lightmode/amber/solid/4", + "name": "base/amber/solid/4", "type": "color", "isAlias": false, "value": "#FFECBC" }, { - "name": "lightmode/amber/solid/5", + "name": "base/amber/solid/5", "type": "color", "isAlias": false, "value": "#FFE3A2" }, { - "name": "lightmode/amber/solid/6", + "name": "base/amber/solid/6", "type": "color", "isAlias": false, "value": "#FFD386" }, { - "name": "lightmode/amber/solid/7", + "name": "base/amber/solid/7", "type": "color", "isAlias": false, "value": "#F3BA63" }, { - "name": "lightmode/amber/solid/8", + "name": "base/amber/solid/8", "type": "color", "isAlias": false, "value": "#EE9D2B" }, { - "name": "lightmode/amber/solid/9", + "name": "base/amber/solid/9", "type": "color", "isAlias": false, "value": "#FFB224" }, { - "name": "lightmode/amber/solid/10", + "name": "base/amber/solid/10", "type": "color", "isAlias": false, "value": "#FFA01C" }, { - "name": "lightmode/amber/solid/11", + "name": "base/amber/solid/11", "type": "color", "isAlias": false, "value": "#AD5700" }, { - "name": "lightmode/amber/solid/12", + "name": "base/amber/solid/12", "type": "color", "isAlias": false, "value": "#4E2009" }, { - "name": "lightmode/Pure/White", + "name": "base/Pure/White", "type": "color", "isAlias": false, "value": "#FFFFFF" }, { - "name": "lightmode/Pure/Black", + "name": "base/Pure/Black", "type": "color", "isAlias": false, "value": "#000000" @@ -528,7 +528,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/12" + "name": "base/gray/slate/solid/12" } }, { @@ -543,7 +543,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/9" + "name": "base/gray/slate/solid/9" } }, { @@ -552,7 +552,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/11" + "name": "base/red/solid/11" } }, { @@ -561,7 +561,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/amber/solid/11" + "name": "base/amber/solid/11" } }, { @@ -570,7 +570,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/11" + "name": "base/green/solid/11" } }, { @@ -579,7 +579,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/11" + "name": "base/violet/solid/11" } }, { @@ -588,7 +588,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/11" + "name": "base/blue/solid/11" } }, { @@ -597,7 +597,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/6" + "name": "base/gray/slate/solid/9" } }, { @@ -606,7 +606,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/Pure/White" + "name": "base/gray/slate/solid/1" } }, { @@ -615,7 +615,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/8" + "name": "base/gray/slate/solid/8" } }, { @@ -624,7 +624,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/7" + "name": "base/gray/slate/solid/7" } }, { @@ -633,7 +633,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/6" + "name": "base/gray/slate/solid/6" } }, { @@ -642,7 +642,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/8" + "name": "base/red/solid/8" } }, { @@ -651,7 +651,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/7" + "name": "base/red/solid/7" } }, { @@ -660,7 +660,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/6" + "name": "base/red/solid/6" } }, { @@ -669,7 +669,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/8" + "name": "base/green/solid/8" } }, { @@ -678,7 +678,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/7" + "name": "base/green/solid/7" } }, { @@ -687,7 +687,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/amber/solid/8" + "name": "base/amber/solid/8" } }, { @@ -696,7 +696,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/amber/solid/7" + "name": "base/amber/solid/7" } }, { @@ -705,7 +705,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/8" + "name": "base/violet/solid/8" } }, { @@ -714,7 +714,25 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/7" + "name": "base/violet/solid/7" + } + }, + { + "name": "Border/Highlight/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/7" + } + }, + { + "name": "Border/Highlight/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/9" } }, { @@ -723,7 +741,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/8" + "name": "base/blue/solid/8" } }, { @@ -732,7 +750,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/7" + "name": "base/blue/solid/7" } }, { @@ -741,7 +759,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/11" + "name": "base/gray/slate/solid/11" } }, { @@ -750,7 +768,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/10" + "name": "base/gray/slate/solid/10" } }, { @@ -759,7 +777,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/9" + "name": "base/gray/slate/solid/9" } }, { @@ -768,25 +786,25 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/10" + "name": "base/red/solid/10" } }, { - "name": "Action/Primary/Basic/Default", + "name": "Icon/Warning", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/9" + "name": "base/amber/solid/10" } }, { - "name": "Icon/Warning", + "name": "Action/Primary/Basic/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/amber/solid/10" + "name": "base/violet/solid/9" } }, { @@ -795,7 +813,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/10" + "name": "base/violet/solid/10" } }, { @@ -804,7 +822,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/10" + "name": "base/green/solid/10" } }, { @@ -813,7 +831,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/11" + "name": "base/violet/solid/11" } }, { @@ -822,7 +840,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/10" + "name": "base/violet/solid/10" } }, { @@ -831,7 +849,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/indigo/solid/11" + "name": "base/indigo/solid/11" } }, { @@ -840,7 +858,25 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/12" + "name": "base/violet/solid/12" + } + }, + { + "name": "Icon/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Icon/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/4" } }, { @@ -849,7 +885,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/9" + "name": "base/gray/slate/solid/9" } }, { @@ -858,16 +894,16 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/9" + "name": "base/red/solid/9" } }, { - "name": "Action/Primary/Success/Default", + "name": "Icon/OnBG/Disabled", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/9" + "name": "base/gray/slate/solid/9" } }, { @@ -876,7 +912,16 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/10" + "name": "base/red/solid/10" + } + }, + { + "name": "Action/Primary/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/9" } }, { @@ -885,7 +930,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/5" + "name": "base/red/solid/5" } }, { @@ -894,7 +939,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/4" + "name": "base/red/solid/4" } }, { @@ -903,25 +948,25 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/6" + "name": "base/red/solid/6" } }, { - "name": "Action/Secondary/Critical/Default", + "name": "Action/Primary/Interactive/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/3" + "name": "base/blue/solid/9" } }, { - "name": "Action/Primary/Interactive/Default", + "name": "Action/Secondary/Critical/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/9" + "name": "base/red/solid/3" } }, { @@ -930,7 +975,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/10" + "name": "base/blue/solid/10" } }, { @@ -939,7 +984,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/11" + "name": "base/blue/solid/11" } }, { @@ -948,7 +993,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/12" + "name": "base/blue/solid/12" } }, { @@ -957,7 +1002,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/10" + "name": "base/green/solid/10" } }, { @@ -966,7 +1011,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/3" + "name": "base/violet/solid/3" } }, { @@ -975,7 +1020,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/11" + "name": "base/red/solid/11" } }, { @@ -984,61 +1029,61 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/solid/12" + "name": "base/red/solid/12" } }, { - "name": "Action/Secondary/Disabled", + "name": "Action/Primary/Success/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/3" + "name": "base/green/solid/11" } }, { - "name": "Action/Primary/Success/Pressed", + "name": "Action/Secondary/Disabled", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/11" + "name": "base/gray/slate/solid/3" } }, { - "name": "Action/Secondary/Interactive/Depressed", + "name": "Action/Secondary/Interactive/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/6" + "name": "base/blue/solid/5" } }, { - "name": "Action/Secondary/Success/Depressed", + "name": "Action/Primary/Success/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/6" + "name": "base/green/solid/12" } }, { - "name": "Action/Secondary/Success/Pressed", + "name": "Action/Secondary/Neutral/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/5" + "name": "base/gray/slate/solid/1" } }, { - "name": "Action/Primary/Success/Depressed", + "name": "Action/Secondary/Interactive/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/12" + "name": "base/blue/solid/6" } }, { @@ -1047,25 +1092,25 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/4" + "name": "base/blue/solid/4" } }, { - "name": "Action/Secondary/Neutral/Default", + "name": "Action/Secondary/Success/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/1" + "name": "base/green/solid/5" } }, { - "name": "Action/Secondary/Interactive/Pressed", + "name": "Action/Secondary/Success/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/5" + "name": "base/green/solid/6" } }, { @@ -1074,7 +1119,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/4" + "name": "base/green/solid/4" } }, { @@ -1083,52 +1128,52 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/3" + "name": "base/green/solid/3" } }, { - "name": "Action/Secondary/Interactive/Default", + "name": "Action/Secondary/Neutral/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/3" + "name": "base/gray/slate/solid/2" } }, { - "name": "Action/Secondary/Neutral/Hovered", + "name": "Action/Secondary/Interactive/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/2" + "name": "base/blue/solid/3" } }, { - "name": "Action/Secondary/Neutral/Pressed", + "name": "Action/Secondary/Basic/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/5" + "name": "base/violet/solid/4" } }, { - "name": "Action/Secondary/Basic/Depressed", + "name": "Action/Secondary/Neutral/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/6" + "name": "base/gray/slate/solid/5" } }, { - "name": "Action/Secondary/Basic/Hovered", + "name": "Action/Secondary/Basic/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/4" + "name": "base/violet/solid/6" } }, { @@ -1137,7 +1182,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/5" + "name": "base/violet/solid/5" } }, { @@ -1146,7 +1191,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/6" + "name": "base/gray/slate/solid/6" } }, { @@ -1155,11 +1200,11 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/alpha/2" + "name": "base/violet/alpha/2" } }, { - "name": "lightmode/indigo/alpha/1", + "name": "base/indigo/alpha/1", "type": "color", "isAlias": false, "value": "#05058203" @@ -1170,100 +1215,109 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/alpha/2" + "name": "base/blue/alpha/2" } }, - { - "name": "lightmode/indigo/alpha/2", - "type": "color", - "isAlias": false, - "value": "#054CFF08" - }, { "name": "Action/Tertiary/Success/Hover", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/alpha/2" + "name": "base/green/alpha/2" } }, + { + "name": "base/indigo/alpha/2", + "type": "color", + "isAlias": false, + "value": "#054CFF08" + }, { "name": "Action/Tertiary/Critical/Hover", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/red/alpha/2" + "name": "base/red/alpha/2" } }, { - "name": "lightmode/indigo/alpha/3", + "name": "base/indigo/alpha/3", "type": "color", "isAlias": false, "value": "#0144FF0F" }, { - "name": "lightmode/indigo/alpha/4", + "name": "base/indigo/alpha/4", "type": "color", "isAlias": false, "value": "#0247F51A" }, { - "name": "lightmode/indigo/alpha/5", + "name": "base/indigo/alpha/5", "type": "color", "isAlias": false, "value": "#023CEB26" }, { - "name": "lightmode/indigo/alpha/6", + "name": "Background/Alpha/Dark", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/alpha/12" + } + }, + { + "name": "base/indigo/alpha/6", "type": "color", "isAlias": false, "value": "#013DE438" }, { - "name": "lightmode/indigo/alpha/7", + "name": "base/indigo/alpha/7", "type": "color", "isAlias": false, "value": "#0038E052" }, { - "name": "lightmode/indigo/alpha/8", + "name": "base/indigo/alpha/8", "type": "color", "isAlias": false, "value": "#0134DB73" }, { - "name": "lightmode/indigo/alpha/9", + "name": "base/indigo/alpha/9", "type": "color", "isAlias": false, "value": "#0031D2C2" }, { - "name": "Background/Subdued", + "name": "Background/Solid/Subdued", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/indigo/solid/2" + "name": "base/indigo/solid/2" } }, { - "name": "Background/Dark", + "name": "Background/Solid/Dark", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/indigo/solid/12" + "name": "base/indigo/solid/12" } }, { - "name": "Background/Default", + "name": "Background/Solid/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/indigo/solid/3" + "name": "base/indigo/solid/3" } }, { @@ -1272,29 +1326,23 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/Pure/White" + "name": "base/Pure/White" } }, - { - "name": "lightmode/indigo/alpha/10", - "type": "color", - "isAlias": false, - "value": "#002CBDC4" - }, { "name": "Surface/Subdued", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/2" + "name": "base/gray/slate/solid/2" } }, { - "name": "lightmode/indigo/alpha/11", + "name": "base/indigo/alpha/10", "type": "color", "isAlias": false, - "value": "#00259ECC" + "value": "#002CBDC4" }, { "name": "Surface/Selected", @@ -1302,14 +1350,14 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/2" + "name": "base/blue/solid/2" } }, { - "name": "lightmode/indigo/alpha/12", + "name": "base/indigo/alpha/11", "type": "color", "isAlias": false, - "value": "#000E3AF0" + "value": "#00259ECC" }, { "name": "Surface/Warning", @@ -1317,29 +1365,29 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/amber/solid/2" + "name": "base/amber/solid/2" } }, { - "name": "Surface/Critical", + "name": "base/indigo/alpha/12", "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/2" - } + "isAlias": false, + "value": "#000E3AF0" }, { - "name": "lightmode/blue/alpha/1", + "name": "base/blue/alpha/1", "type": "color", "isAlias": false, "value": "#0582FF05" }, { - "name": "lightmode/blue/alpha/2", + "name": "Surface/Critical", "type": "color", - "isAlias": false, - "value": "#0582FF0A" + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/2" + } }, { "name": "Surface/Success", @@ -1347,461 +1395,467 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/green/solid/2" + "name": "base/green/solid/2" } }, + { + "name": "base/blue/alpha/2", + "type": "color", + "isAlias": false, + "value": "#0582FF0A" + }, { "name": "Surface/Highlight/Subdued", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/2" + "name": "base/violet/solid/2" } }, { - "name": "lightmode/blue/alpha/3", + "name": "base/blue/alpha/3", "type": "color", "isAlias": false, "value": "#0280FF12" }, - { - "name": "lightmode/blue/alpha/4", - "type": "color", - "isAlias": false, - "value": "#0180FF1F" - }, { "name": "Surface/Interactive", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/blue/solid/2" + "name": "base/blue/solid/2" } }, + { + "name": "base/blue/alpha/4", + "type": "color", + "isAlias": false, + "value": "#0180FF1F" + }, { "name": "Surface/Highlight/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/4" + "name": "base/violet/solid/4" } }, { - "name": "lightmode/blue/alpha/5", + "name": "base/blue/alpha/5", "type": "color", "isAlias": false, "value": "#0180EF30" }, + { + "name": "base/blue/alpha/6", + "type": "color", + "isAlias": false, + "value": "#0177E647" + }, { "name": "Surface/Highlight/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/violet/solid/6" + "name": "base/violet/solid/6" } }, { - "name": "lightmode/blue/alpha/6", - "type": "color", - "isAlias": false, - "value": "#0177E647" - }, - { - "name": "lightmode/blue/alpha/7", + "name": "base/blue/alpha/7", "type": "color", "isAlias": false, "value": "#0077DF69" }, { - "name": "lightmode/blue/alpha/8", + "name": "base/blue/alpha/8", "type": "color", "isAlias": false, "value": "#0082E6A1" }, { - "name": "lightmode/blue/alpha/9", + "name": "base/blue/alpha/9", "type": "color", "isAlias": false, "value": "#0091FFFA" }, { - "name": "lightmode/blue/alpha/10", + "name": "base/blue/alpha/10", "type": "color", "isAlias": false, "value": "#0080F1FA" }, { - "name": "lightmode/blue/alpha/11", + "name": "base/blue/alpha/11", "type": "color", "isAlias": false, "value": "#0066DBFA" }, { - "name": "lightmode/blue/alpha/12", + "name": "base/blue/alpha/12", "type": "color", "isAlias": false, "value": "#002149FA" }, { - "name": "lightmode/violet/alpha/1", + "name": "base/violet/alpha/1", "type": "color", "isAlias": false, "value": "#5805AB03" }, { - "name": "lightmode/violet/alpha/2", + "name": "base/violet/alpha/2", "type": "color", "isAlias": false, "value": "#3705FF05" }, { - "name": "lightmode/violet/alpha/3", + "name": "base/violet/alpha/3", "type": "color", "isAlias": false, "value": "#3C00FF0D" }, { - "name": "lightmode/violet/alpha/4", + "name": "base/violet/alpha/4", "type": "color", "isAlias": false, "value": "#2E02F417" }, { - "name": "lightmode/violet/alpha/5", + "name": "base/violet/alpha/5", "type": "color", "isAlias": false, "value": "#2F01E821" }, { - "name": "lightmode/violet/alpha/6", + "name": "base/violet/alpha/6", "type": "color", "isAlias": false, "value": "#2A01DF30" }, { - "name": "lightmode/violet/alpha/7", + "name": "base/violet/alpha/7", "type": "color", "isAlias": false, "value": "#2B01D447" }, { - "name": "lightmode/violet/alpha/8", + "name": "base/violet/alpha/8", "type": "color", "isAlias": false, "value": "#2A00D066" }, { - "name": "lightmode/violet/alpha/9", + "name": "base/violet/alpha/9", "type": "color", "isAlias": false, "value": "#2500B6A8" }, { - "name": "lightmode/violet/alpha/10", + "name": "base/violet/alpha/10", "type": "color", "isAlias": false, "value": "#1F00A5B0" }, { - "name": "lightmode/violet/alpha/11", + "name": "base/violet/alpha/11", "type": "color", "isAlias": false, "value": "#180091BA" }, { - "name": "lightmode/violet/alpha/12", + "name": "base/violet/alpha/12", "type": "color", "isAlias": false, "value": "#0E003DED" }, { - "name": "lightmode/gray/slate/alpha/1", + "name": "base/gray/slate/alpha/1", "type": "color", "isAlias": false, "value": "#05448205" }, { - "name": "lightmode/gray/slate/alpha/2", + "name": "base/gray/slate/alpha/2", "type": "color", "isAlias": false, "value": "#05294D08" }, { - "name": "lightmode/gray/slate/alpha/3", + "name": "base/gray/slate/alpha/3", "type": "color", "isAlias": false, "value": "#0025490D" }, { - "name": "lightmode/gray/slate/alpha/4", + "name": "base/gray/slate/alpha/4", "type": "color", "isAlias": false, "value": "#021C3714" }, { - "name": "lightmode/gray/slate/alpha/5", + "name": "base/gray/slate/alpha/5", "type": "color", "isAlias": false, "value": "#0217351A" }, { - "name": "lightmode/gray/slate/alpha/6", + "name": "base/gray/slate/alpha/6", "type": "color", "isAlias": false, "value": "#01213921" }, { - "name": "lightmode/gray/slate/alpha/7", + "name": "base/gray/slate/alpha/7", "type": "color", "isAlias": false, "value": "#001A3329" }, { - "name": "lightmode/gray/slate/alpha/8", + "name": "base/gray/slate/alpha/8", "type": "color", "isAlias": false, "value": "#011E323D" }, { - "name": "lightmode/gray/slate/alpha/9", + "name": "base/gray/slate/alpha/9", "type": "color", "isAlias": false, "value": "#00111E78" }, { - "name": "lightmode/gray/slate/alpha/10", + "name": "base/gray/slate/alpha/10", "type": "color", "isAlias": false, "value": "#00101B82" }, { - "name": "lightmode/gray/slate/alpha/11", + "name": "base/gray/slate/alpha/11", "type": "color", "isAlias": false, "value": "#000E1896" }, { - "name": "lightmode/gray/slate/alpha/12", + "name": "base/gray/slate/alpha/12", "type": "color", "isAlias": false, "value": "#00080CED" }, { - "name": "lightmode/green/alpha/1", + "name": "base/green/alpha/1", "type": "color", "isAlias": false, "value": "#05C04305" }, { - "name": "lightmode/green/alpha/2", + "name": "base/green/alpha/2", "type": "color", "isAlias": false, "value": "#00C43B0D" }, { - "name": "lightmode/green/alpha/3", + "name": "base/green/alpha/3", "type": "color", "isAlias": false, "value": "#02BA3C17" }, { - "name": "lightmode/green/alpha/4", + "name": "base/green/alpha/4", "type": "color", "isAlias": false, "value": "#01A63521" }, { - "name": "lightmode/green/alpha/5", + "name": "base/green/alpha/5", "type": "color", "isAlias": false, "value": "#009B3633" }, { - "name": "lightmode/green/alpha/6", + "name": "base/green/alpha/6", "type": "color", "isAlias": false, "value": "#0193364A" }, { - "name": "lightmode/green/alpha/7", + "name": "base/green/alpha/7", "type": "color", "isAlias": false, "value": "#008C3D6E" }, { - "name": "lightmode/green/alpha/8", + "name": "base/green/alpha/8", "type": "color", "isAlias": false, "value": "#00934CA3" }, { - "name": "lightmode/green/alpha/9", + "name": "base/green/alpha/9", "type": "color", "isAlias": false, "value": "#008F4ACF" }, { - "name": "lightmode/green/alpha/10", + "name": "base/green/alpha/10", "type": "color", "isAlias": false, "value": "#008346D6" }, { - "name": "lightmode/green/alpha/11", + "name": "base/green/alpha/11", "type": "color", "isAlias": false, "value": "#006B3BE8" }, { - "name": "lightmode/green/alpha/12", + "name": "base/green/alpha/12", "type": "color", "isAlias": false, "value": "#002012EB" }, { - "name": "lightmode/amber/alpha/1", + "name": "base/amber/alpha/1", "type": "color", "isAlias": false, "value": "#C0820505" }, { - "name": "lightmode/amber/alpha/2", + "name": "base/amber/alpha/2", "type": "color", "isAlias": false, "value": "#FFAB0212" }, { - "name": "lightmode/amber/alpha/3", + "name": "base/amber/alpha/3", "type": "color", "isAlias": false, "value": "#FFBB012B" }, { - "name": "lightmode/amber/alpha/4", + "name": "base/amber/alpha/4", "type": "color", "isAlias": false, "value": "#FFB70042" }, { - "name": "lightmode/amber/alpha/5", + "name": "base/amber/alpha/5", "type": "color", "isAlias": false, "value": "#FFB3005E" }, { - "name": "lightmode/amber/alpha/6", + "name": "base/amber/alpha/6", "type": "color", "isAlias": false, "value": "#FFA20178" }, { - "name": "lightmode/amber/alpha/7", + "name": "base/amber/alpha/7", "type": "color", "isAlias": false, "value": "#EC8D009C" }, { - "name": "lightmode/amber/alpha/8", + "name": "base/amber/alpha/8", "type": "color", "isAlias": false, "value": "#EA8900D4" }, { - "name": "lightmode/amber/alpha/9", + "name": "base/amber/alpha/9", "type": "color", "isAlias": false, "value": "#FFA600DB" }, { - "name": "lightmode/amber/alpha/10", + "name": "base/amber/alpha/10", "type": "color", "isAlias": false, "value": "#FF9500E3" }, { - "name": "lightmode/amber/alpha/11", + "name": "base/amber/alpha/11", "type": "color", "isAlias": false, "value": "#AB5300FA" }, { - "name": "lightmode/amber/alpha/12", + "name": "base/amber/alpha/12", "type": "color", "isAlias": false, "value": "#481800F5" }, { - "name": "lightmode/red/alpha/1", + "name": "base/red/alpha/1", "type": "color", "isAlias": false, "value": "#FF050503" }, { - "name": "lightmode/red/alpha/2", + "name": "base/red/alpha/2", "type": "color", "isAlias": false, "value": "#FF050508" }, { - "name": "lightmode/red/alpha/3", + "name": "base/red/alpha/3", "type": "color", "isAlias": false, "value": "#FF01010F" }, { - "name": "lightmode/red/alpha/4", + "name": "base/red/alpha/4", "type": "color", "isAlias": false, "value": "#FF00001A" }, { - "name": "lightmode/red/alpha/5", + "name": "base/red/alpha/5", "type": "color", "isAlias": false, "value": "#F2000026" }, { - "name": "lightmode/red/alpha/6", + "name": "base/red/alpha/6", "type": "color", "isAlias": false, "value": "#E4010138" }, { - "name": "lightmode/red/alpha/7", + "name": "base/red/alpha/7", "type": "color", "isAlias": false, "value": "#D9000452" }, { - "name": "lightmode/red/alpha/8", + "name": "base/red/alpha/8", "type": "color", "isAlias": false, "value": "#D1000470" }, { - "name": "lightmode/red/alpha/9", + "name": "base/red/alpha/9", "type": "color", "isAlias": false, "value": "#DB0007B8" }, { - "name": "lightmode/red/alpha/10", + "name": "base/red/alpha/10", "type": "color", "isAlias": false, "value": "#D10007C2" }, { - "name": "lightmode/red/alpha/11", + "name": "base/red/alpha/11", "type": "color", "isAlias": false, "value": "#C30007D4" }, { - "name": "lightmode/red/alpha/12", + "name": "base/red/alpha/12", "type": "color", "isAlias": false, "value": "#280003ED" @@ -1848,7 +1902,7 @@ "isAlias": true, "value": { "collection": "Colors", - "name": "lightmode/gray/slate/solid/9" + "name": "base/gray/slate/solid/9" } }, { @@ -1856,6 +1910,21 @@ "type": "color", "isAlias": false, "value": "#FFFFFF03" + }, + { + "name": "Transparent", + "type": "color", + "isAlias": false, + "value": "#FFFFFF00" + }, + { + "name": "Border/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } } ] } diff --git a/packages/opub-ui/styles/_variables.css b/packages/opub-ui/styles/_variables.css index e5ea60c1..6f66b68a 100644 --- a/packages/opub-ui/styles/_variables.css +++ b/packages/opub-ui/styles/_variables.css @@ -1,267 +1,275 @@ :root { - --lightmode-indigo-solid-1: #fdfdfe; - --lightmode-indigo-solid-2: #f8faff; - --lightmode-indigo-solid-3: #f0f4ff; - --lightmode-indigo-solid-4: #e6edfe; - --lightmode-indigo-solid-5: #d9e2fc; - --lightmode-indigo-solid-6: #c6d4f9; - --lightmode-indigo-solid-7: #aec0f5; - --lightmode-indigo-solid-8: #8da4ef; - --lightmode-indigo-solid-9: #3e63dd; - --lightmode-indigo-solid-10: #3a5ccc; - --lightmode-indigo-solid-11: #3451b2; - --lightmode-indigo-solid-12: #101d46; - --lightmode-blue-solid-1: #fbfdff; - --lightmode-blue-solid-2: #f5faff; - --lightmode-blue-solid-3: #edf6ff; - --lightmode-blue-solid-4: #e1f0ff; - --lightmode-blue-solid-5: #cee7fe; - --lightmode-blue-solid-6: #b7d9f8; - --lightmode-blue-solid-7: #96c7f2; - --lightmode-blue-solid-8: #5eb0ef; - --lightmode-blue-solid-9: #0091ff; - --lightmode-blue-solid-10: #0081f1; - --lightmode-blue-solid-11: #006adc; - --lightmode-blue-solid-12: #00254d; - --lightmode-violet-solid-1: #fdfcfe; - --lightmode-violet-solid-2: #fbfaff; - --lightmode-violet-solid-3: #f5f2ff; - --lightmode-violet-solid-4: #ede9fe; - --lightmode-violet-solid-5: #e4defc; - --lightmode-violet-solid-6: #d7cff9; - --lightmode-violet-solid-7: #c4b8f3; - --lightmode-violet-solid-8: #aa99ec; - --lightmode-violet-solid-9: #6e56cf; - --lightmode-violet-solid-10: #644fc1; - --lightmode-violet-solid-11: #5746af; - --lightmode-violet-solid-12: #20134b; - --lightmode-gray-slate-solid-1: #fbfcfd; - --lightmode-gray-slate-solid-2: #f8f9fa; - --lightmode-gray-slate-solid-3: #f1f3f5; - --lightmode-gray-slate-solid-4: #eceef0; - --lightmode-gray-slate-solid-5: #e6e8eb; - --lightmode-gray-slate-solid-6: #dfe3e6; - --lightmode-gray-slate-solid-7: #d7dbdf; - --lightmode-gray-slate-solid-8: #c1c8cd; - --lightmode-gray-slate-solid-9: #889096; - --lightmode-gray-slate-solid-10: #7e868c; - --lightmode-gray-slate-solid-11: #687076; - --lightmode-gray-slate-solid-12: #11181c; - --lightmode-red-solid-1: #fffcfc; - --lightmode-red-solid-2: #fff8f8; - --lightmode-red-solid-3: #ffefef; - --lightmode-red-solid-4: #ffe5e5; - --lightmode-red-solid-5: #fdd8d8; - --lightmode-red-solid-6: #f9c6c6; - --lightmode-red-solid-7: #f3aeaf; - --lightmode-red-solid-8: #eb9091; - --lightmode-red-solid-9: #e5484d; - --lightmode-red-solid-10: #dc3d43; - --lightmode-red-solid-11: #cd2b31; - --lightmode-red-solid-12: #381316; - --lightmode-green-solid-1: #fbfefc; - --lightmode-green-solid-2: #f2fcf5; - --lightmode-green-solid-3: #e9f9ee; - --lightmode-green-solid-4: #ddf3e4; - --lightmode-green-solid-5: #ccebd7; - --lightmode-green-solid-6: #b4dfc4; - --lightmode-green-solid-7: #92ceac; - --lightmode-green-solid-8: #5bb98c; - --lightmode-green-solid-9: #30a46c; - --lightmode-green-solid-10: #299764; - --lightmode-green-solid-11: #18794e; - --lightmode-green-solid-12: #153226; - --lightmode-amber-solid-1: #fefdfb; - --lightmode-amber-solid-2: #fff9ed; - --lightmode-amber-solid-3: #fff4d5; - --lightmode-amber-solid-4: #ffecbc; - --lightmode-amber-solid-5: #ffe3a2; - --lightmode-amber-solid-6: #ffd386; - --lightmode-amber-solid-7: #f3ba63; - --lightmode-amber-solid-8: #ee9d2b; - --lightmode-amber-solid-9: #ffb224; - --lightmode-amber-solid-10: #ffa01c; - --lightmode-amber-solid-11: #ad5700; - --lightmode-amber-solid-12: #4e2009; - --lightmode-pure-white: #ffffff; - --lightmode-pure-black: #000000; - --text-default: var(--lightmode-gray-slate-solid-12); + --base-indigo-solid-1: #fdfdfe; + --base-indigo-solid-2: #f8faff; + --base-indigo-solid-3: #f0f4ff; + --base-indigo-solid-4: #e6edfe; + --base-indigo-solid-5: #d9e2fc; + --base-indigo-solid-6: #c6d4f9; + --base-indigo-solid-7: #aec0f5; + --base-indigo-solid-8: #8da4ef; + --base-indigo-solid-9: #3e63dd; + --base-indigo-solid-10: #3a5ccc; + --base-indigo-solid-11: #3451b2; + --base-indigo-solid-12: #101d46; + --base-blue-solid-1: #fbfdff; + --base-blue-solid-2: #f5faff; + --base-blue-solid-3: #edf6ff; + --base-blue-solid-4: #e1f0ff; + --base-blue-solid-5: #cee7fe; + --base-blue-solid-6: #b7d9f8; + --base-blue-solid-7: #96c7f2; + --base-blue-solid-8: #5eb0ef; + --base-blue-solid-9: #0091ff; + --base-blue-solid-10: #0081f1; + --base-blue-solid-11: #006adc; + --base-blue-solid-12: #00254d; + --base-violet-solid-1: #fdfcfe; + --base-violet-solid-2: #fbfaff; + --base-violet-solid-3: #f5f2ff; + --base-violet-solid-4: #ede9fe; + --base-violet-solid-5: #e4defc; + --base-violet-solid-6: #d7cff9; + --base-violet-solid-7: #c4b8f3; + --base-violet-solid-8: #aa99ec; + --base-violet-solid-9: #6e56cf; + --base-violet-solid-10: #644fc1; + --base-violet-solid-11: #5746af; + --base-violet-solid-12: #20134b; + --base-gray-slate-solid-1: #fbfcfd; + --base-gray-slate-solid-2: #f8f9fa; + --base-gray-slate-solid-3: #f1f3f5; + --base-gray-slate-solid-4: #eceef0; + --base-gray-slate-solid-5: #e6e8eb; + --base-gray-slate-solid-6: #dfe3e6; + --base-gray-slate-solid-7: #d7dbdf; + --base-gray-slate-solid-8: #c1c8cd; + --base-gray-slate-solid-9: #889096; + --base-gray-slate-solid-10: #7e868c; + --base-gray-slate-solid-11: #687076; + --base-gray-slate-solid-12: #11181c; + --base-red-solid-1: #fffcfc; + --base-red-solid-2: #fff8f8; + --base-red-solid-3: #ffefef; + --base-red-solid-4: #ffe5e5; + --base-red-solid-5: #fdd8d8; + --base-red-solid-6: #f9c6c6; + --base-red-solid-7: #f3aeaf; + --base-red-solid-8: #eb9091; + --base-red-solid-9: #e5484d; + --base-red-solid-10: #dc3d43; + --base-red-solid-11: #cd2b31; + --base-red-solid-12: #381316; + --base-green-solid-1: #fbfefc; + --base-green-solid-2: #f2fcf5; + --base-green-solid-3: #e9f9ee; + --base-green-solid-4: #ddf3e4; + --base-green-solid-5: #ccebd7; + --base-green-solid-6: #b4dfc4; + --base-green-solid-7: #92ceac; + --base-green-solid-8: #5bb98c; + --base-green-solid-9: #30a46c; + --base-green-solid-10: #299764; + --base-green-solid-11: #18794e; + --base-green-solid-12: #153226; + --base-amber-solid-1: #fefdfb; + --base-amber-solid-2: #fff9ed; + --base-amber-solid-3: #fff4d5; + --base-amber-solid-4: #ffecbc; + --base-amber-solid-5: #ffe3a2; + --base-amber-solid-6: #ffd386; + --base-amber-solid-7: #f3ba63; + --base-amber-solid-8: #ee9d2b; + --base-amber-solid-9: #ffb224; + --base-amber-solid-10: #ffa01c; + --base-amber-solid-11: #ad5700; + --base-amber-solid-12: #4e2009; + --base-pure-white: #ffffff; + --base-pure-black: #000000; + --text-default: var(--base-gray-slate-solid-12); --text-subdued: #3e4346; - --text-disabled: var(--lightmode-gray-slate-solid-9); - --text-critical: var(--lightmode-red-solid-11); - --text-warning: var(--lightmode-amber-solid-11); - --text-success: var(--lightmode-green-solid-11); - --text-highlight: var(--lightmode-violet-solid-11); - --text-interactive: var(--lightmode-blue-solid-11); - --text-onbg-disabled: var(--lightmode-gray-slate-solid-6); - --text-onbg-default: var(--lightmode-pure-white); - --border-default: var(--lightmode-gray-slate-solid-8); - --border-subdued: var(--lightmode-gray-slate-solid-7); - --border-disabled: var(--lightmode-gray-slate-solid-6); - --border-critical-default: var(--lightmode-red-solid-8); - --border-critical-disabled: var(--lightmode-red-solid-7); - --border-critical-subdued: var(--lightmode-red-solid-6); - --border-success-default: var(--lightmode-green-solid-8); - --border-success-subdued: var(--lightmode-green-solid-7); - --border-warning-default: var(--lightmode-amber-solid-8); - --border-warning-subdued: var(--lightmode-amber-solid-7); - --border-highlight-default: var(--lightmode-violet-solid-8); - --border-highlight-subdued: var(--lightmode-violet-solid-7); - --border-interactive-default: var(--lightmode-blue-solid-8); - --border-interactive-focused: var(--lightmode-blue-solid-7); - --icon-default: var(--lightmode-gray-slate-solid-11); - --icon-subdued: var(--lightmode-gray-slate-solid-10); - --icon-disabled: var(--lightmode-gray-slate-solid-9); - --icon-critical: var(--lightmode-red-solid-10); - --action-primary-basic-default: var(--lightmode-violet-solid-9); - --icon-warning: var(--lightmode-amber-solid-10); - --action-primary-basic-hovered: var(--lightmode-violet-solid-10); - --icon-success: var(--lightmode-green-solid-10); - --action-primary-basic-pressed: var(--lightmode-violet-solid-11); - --icon-highlight: var(--lightmode-violet-solid-10); - --icon-interactive: var(--lightmode-indigo-solid-11); - --action-primary-basic-depressed: var(--lightmode-violet-solid-12); - --action-primary-disabled: var(--lightmode-gray-slate-solid-9); - --action-primary-critical-default: var(--lightmode-red-solid-9); - --action-primary-success-default: var(--lightmode-green-solid-9); - --action-primary-critical-hovered: var(--lightmode-red-solid-10); - --action-secondary-critical-pressed: var(--lightmode-red-solid-5); - --action-secondary-critical-hovered: var(--lightmode-red-solid-4); - --action-secondary-critical-depressed: var(--lightmode-red-solid-6); - --action-secondary-critical-default: var(--lightmode-red-solid-3); - --action-primary-interactive-default: var(--lightmode-blue-solid-9); - --action-primary-interactive-hovered: var(--lightmode-blue-solid-10); - --action-primary-interactive-pressed: var(--lightmode-blue-solid-11); - --action-primary-interactive-depressed: var(--lightmode-blue-solid-12); - --action-primary-success-hovered: var(--lightmode-green-solid-10); - --action-secondary-basic-default: var(--lightmode-violet-solid-3); - --action-primary-critical-pressed: var(--lightmode-red-solid-11); - --action-primary-critical-depressed: var(--lightmode-red-solid-12); - --action-secondary-disabled: var(--lightmode-gray-slate-solid-3); - --action-primary-success-pressed: var(--lightmode-green-solid-11); - --action-secondary-interactive-depressed: var(--lightmode-blue-solid-6); - --action-secondary-success-depressed: var(--lightmode-green-solid-6); - --action-secondary-success-pressed: var(--lightmode-green-solid-5); - --action-primary-success-depressed: var(--lightmode-green-solid-12); - --action-secondary-interactive-hovered: var(--lightmode-blue-solid-4); - --action-secondary-neutral-default: var(--lightmode-gray-slate-solid-1); - --action-secondary-interactive-pressed: var(--lightmode-blue-solid-5); - --action-secondary-success-hovered: var(--lightmode-green-solid-4); - --action-secondary-success-default: var(--lightmode-green-solid-3); - --action-secondary-interactive-default: var(--lightmode-blue-solid-3); - --action-secondary-neutral-hovered: var(--lightmode-gray-slate-solid-2); - --action-secondary-neutral-pressed: var(--lightmode-gray-slate-solid-5); - --action-secondary-basic-depressed: var(--lightmode-violet-solid-6); - --action-secondary-basic-hovered: var(--lightmode-violet-solid-4); - --action-secondary-basic-pressed: var(--lightmode-violet-solid-5); - --action-secondary-neutral-depressed: var(--lightmode-gray-slate-solid-6); - --action-tertiary-basic-hover: var(--lightmode-violet-alpha-2); - --lightmode-indigo-alpha-1: #05058203; - --action-tertiary-interactive-hover: var(--lightmode-blue-alpha-2); - --lightmode-indigo-alpha-2: #054cff08; - --action-tertiary-success-hover: var(--lightmode-green-alpha-2); - --action-tertiary-critical-hover: var(--lightmode-red-alpha-2); - --lightmode-indigo-alpha-3: #0144ff0f; - --lightmode-indigo-alpha-4: #0247f51a; - --lightmode-indigo-alpha-5: #023ceb26; - --lightmode-indigo-alpha-6: #013de438; - --lightmode-indigo-alpha-7: #0038e052; - --lightmode-indigo-alpha-8: #0134db73; - --lightmode-indigo-alpha-9: #0031d2c2; - --background-subdued: var(--lightmode-indigo-solid-2); - --background-dark: var(--lightmode-indigo-solid-12); - --background-default: var(--lightmode-indigo-solid-3); - --surface-default: var(--lightmode-pure-white); - --lightmode-indigo-alpha-10: #002cbdc4; - --surface-subdued: var(--lightmode-gray-slate-solid-2); - --lightmode-indigo-alpha-11: #00259ecc; - --surface-selected: var(--lightmode-blue-solid-2); - --lightmode-indigo-alpha-12: #000e3af0; - --surface-warning: var(--lightmode-amber-solid-2); - --surface-critical: var(--lightmode-red-solid-2); - --lightmode-blue-alpha-1: #0582ff05; - --lightmode-blue-alpha-2: #0582ff0a; - --surface-success: var(--lightmode-green-solid-2); - --surface-highlight-subdued: var(--lightmode-violet-solid-2); - --lightmode-blue-alpha-3: #0280ff12; - --lightmode-blue-alpha-4: #0180ff1f; - --surface-interactive: var(--lightmode-blue-solid-2); - --surface-highlight-default: var(--lightmode-violet-solid-4); - --lightmode-blue-alpha-5: #0180ef30; - --surface-highlight-hovered: var(--lightmode-violet-solid-6); - --lightmode-blue-alpha-6: #0177e647; - --lightmode-blue-alpha-7: #0077df69; - --lightmode-blue-alpha-8: #0082e6a1; - --lightmode-blue-alpha-9: #0091fffa; - --lightmode-blue-alpha-10: #0080f1fa; - --lightmode-blue-alpha-11: #0066dbfa; - --lightmode-blue-alpha-12: #002149fa; - --lightmode-violet-alpha-1: #5805ab03; - --lightmode-violet-alpha-2: #3705ff05; - --lightmode-violet-alpha-3: #3c00ff0d; - --lightmode-violet-alpha-4: #2e02f417; - --lightmode-violet-alpha-5: #2f01e821; - --lightmode-violet-alpha-6: #2a01df30; - --lightmode-violet-alpha-7: #2b01d447; - --lightmode-violet-alpha-8: #2a00d066; - --lightmode-violet-alpha-9: #2500b6a8; - --lightmode-violet-alpha-10: #1f00a5b0; - --lightmode-violet-alpha-11: #180091ba; - --lightmode-violet-alpha-12: #0e003ded; - --lightmode-gray-slate-alpha-1: #05448205; - --lightmode-gray-slate-alpha-2: #05294d08; - --lightmode-gray-slate-alpha-3: #0025490d; - --lightmode-gray-slate-alpha-4: #021c3714; - --lightmode-gray-slate-alpha-5: #0217351a; - --lightmode-gray-slate-alpha-6: #01213921; - --lightmode-gray-slate-alpha-7: #001a3329; - --lightmode-gray-slate-alpha-8: #011e323d; - --lightmode-gray-slate-alpha-9: #00111e78; - --lightmode-gray-slate-alpha-10: #00101b82; - --lightmode-gray-slate-alpha-11: #000e1896; - --lightmode-gray-slate-alpha-12: #00080ced; - --lightmode-green-alpha-1: #05c04305; - --lightmode-green-alpha-2: #00c43b0d; - --lightmode-green-alpha-3: #02ba3c17; - --lightmode-green-alpha-4: #01a63521; - --lightmode-green-alpha-5: #009b3633; - --lightmode-green-alpha-6: #0193364a; - --lightmode-green-alpha-7: #008c3d6e; - --lightmode-green-alpha-8: #00934ca3; - --lightmode-green-alpha-9: #008f4acf; - --lightmode-green-alpha-10: #008346d6; - --lightmode-green-alpha-11: #006b3be8; - --lightmode-green-alpha-12: #002012eb; - --lightmode-amber-alpha-1: #c0820505; - --lightmode-amber-alpha-2: #ffab0212; - --lightmode-amber-alpha-3: #ffbb012b; - --lightmode-amber-alpha-4: #ffb70042; - --lightmode-amber-alpha-5: #ffb3005e; - --lightmode-amber-alpha-6: #ffa20178; - --lightmode-amber-alpha-7: #ec8d009c; - --lightmode-amber-alpha-8: #ea8900d4; - --lightmode-amber-alpha-9: #ffa600db; - --lightmode-amber-alpha-10: #ff9500e3; - --lightmode-amber-alpha-11: #ab5300fa; - --lightmode-amber-alpha-12: #481800f5; - --lightmode-red-alpha-1: #ff050503; - --lightmode-red-alpha-2: #ff050508; - --lightmode-red-alpha-3: #ff01010f; - --lightmode-red-alpha-4: #ff00001a; - --lightmode-red-alpha-5: #f2000026; - --lightmode-red-alpha-6: #e4010138; - --lightmode-red-alpha-7: #d9000452; - --lightmode-red-alpha-8: #d1000470; - --lightmode-red-alpha-9: #db0007b8; - --lightmode-red-alpha-10: #d10007c2; - --lightmode-red-alpha-11: #c30007d4; - --lightmode-red-alpha-12: #280003ed; + --text-disabled: var(--base-gray-slate-solid-9); + --text-critical: var(--base-red-solid-11); + --text-warning: var(--base-amber-solid-11); + --text-success: var(--base-green-solid-11); + --text-highlight: var(--base-violet-solid-11); + --text-interactive: var(--base-blue-solid-11); + --text-onbg-disabled: var(--base-gray-slate-solid-9); + --text-onbg-default: var(--base-gray-slate-solid-1); + --border-default: var(--base-gray-slate-solid-8); + --border-subdued: var(--base-gray-slate-solid-7); + --border-disabled: var(--base-gray-slate-solid-6); + --border-critical-default: var(--base-red-solid-8); + --border-critical-disabled: var(--base-red-solid-7); + --border-critical-subdued: var(--base-red-solid-6); + --border-success-default: var(--base-green-solid-8); + --border-success-subdued: var(--base-green-solid-7); + --border-warning-default: var(--base-amber-solid-8); + --border-warning-subdued: var(--base-amber-solid-7); + --border-highlight-default: var(--base-violet-solid-8); + --border-highlight-subdued: var(--base-violet-solid-7); + --border-highlight-onbg-default: var(--base-violet-solid-7); + --border-highlight-onbg-subdued: var(--base-violet-solid-9); + --border-interactive-default: var(--base-blue-solid-8); + --border-interactive-focused: var(--base-blue-solid-7); + --icon-default: var(--base-gray-slate-solid-11); + --icon-subdued: var(--base-gray-slate-solid-10); + --icon-disabled: var(--base-gray-slate-solid-9); + --icon-critical: var(--base-red-solid-10); + --icon-warning: var(--base-amber-solid-10); + --action-primary-basic-default: var(--base-violet-solid-9); + --action-primary-basic-hovered: var(--base-violet-solid-10); + --icon-success: var(--base-green-solid-10); + --action-primary-basic-pressed: var(--base-violet-solid-11); + --icon-highlight: var(--base-violet-solid-10); + --icon-interactive: var(--base-indigo-solid-11); + --action-primary-basic-depressed: var(--base-violet-solid-12); + --icon-onbg-default: var(--base-gray-slate-solid-1); + --icon-onbg-subdued: var(--base-gray-slate-solid-4); + --action-primary-disabled: var(--base-gray-slate-solid-9); + --action-primary-critical-default: var(--base-red-solid-9); + --icon-onbg-disabled: var(--base-gray-slate-solid-9); + --action-primary-critical-hovered: var(--base-red-solid-10); + --action-primary-success-default: var(--base-green-solid-9); + --action-secondary-critical-pressed: var(--base-red-solid-5); + --action-secondary-critical-hovered: var(--base-red-solid-4); + --action-secondary-critical-depressed: var(--base-red-solid-6); + --action-primary-interactive-default: var(--base-blue-solid-9); + --action-secondary-critical-default: var(--base-red-solid-3); + --action-primary-interactive-hovered: var(--base-blue-solid-10); + --action-primary-interactive-pressed: var(--base-blue-solid-11); + --action-primary-interactive-depressed: var(--base-blue-solid-12); + --action-primary-success-hovered: var(--base-green-solid-10); + --action-secondary-basic-default: var(--base-violet-solid-3); + --action-primary-critical-pressed: var(--base-red-solid-11); + --action-primary-critical-depressed: var(--base-red-solid-12); + --action-primary-success-pressed: var(--base-green-solid-11); + --action-secondary-disabled: var(--base-gray-slate-solid-3); + --action-secondary-interactive-pressed: var(--base-blue-solid-5); + --action-primary-success-depressed: var(--base-green-solid-12); + --action-secondary-neutral-default: var(--base-gray-slate-solid-1); + --action-secondary-interactive-depressed: var(--base-blue-solid-6); + --action-secondary-interactive-hovered: var(--base-blue-solid-4); + --action-secondary-success-pressed: var(--base-green-solid-5); + --action-secondary-success-depressed: var(--base-green-solid-6); + --action-secondary-success-hovered: var(--base-green-solid-4); + --action-secondary-success-default: var(--base-green-solid-3); + --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2); + --action-secondary-interactive-default: var(--base-blue-solid-3); + --action-secondary-basic-hovered: var(--base-violet-solid-4); + --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5); + --action-secondary-basic-depressed: var(--base-violet-solid-6); + --action-secondary-basic-pressed: var(--base-violet-solid-5); + --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6); + --action-tertiary-basic-hover: var(--base-violet-alpha-2); + --base-indigo-alpha-1: #05058203; + --action-tertiary-interactive-hover: var(--base-blue-alpha-2); + --action-tertiary-success-hover: var(--base-green-alpha-2); + --base-indigo-alpha-2: #054cff08; + --action-tertiary-critical-hover: var(--base-red-alpha-2); + --base-indigo-alpha-3: #0144ff0f; + --base-indigo-alpha-4: #0247f51a; + --base-indigo-alpha-5: #023ceb26; + --background-alpha-dark: var(--base-indigo-alpha-12); + --base-indigo-alpha-6: #013de438; + --base-indigo-alpha-7: #0038e052; + --base-indigo-alpha-8: #0134db73; + --base-indigo-alpha-9: #0031d2c2; + --background-solid-subdued: var(--base-indigo-solid-2); + --background-solid-dark: var(--base-indigo-solid-12); + --background-solid-default: var(--base-indigo-solid-3); + --surface-default: var(--base-pure-white); + --surface-subdued: var(--base-gray-slate-solid-2); + --base-indigo-alpha-10: #002cbdc4; + --surface-selected: var(--base-blue-solid-2); + --base-indigo-alpha-11: #00259ecc; + --surface-warning: var(--base-amber-solid-2); + --base-indigo-alpha-12: #000e3af0; + --base-blue-alpha-1: #0582ff05; + --surface-critical: var(--base-red-solid-2); + --surface-success: var(--base-green-solid-2); + --base-blue-alpha-2: #0582ff0a; + --surface-highlight-subdued: var(--base-violet-solid-2); + --base-blue-alpha-3: #0280ff12; + --surface-interactive: var(--base-blue-solid-2); + --base-blue-alpha-4: #0180ff1f; + --surface-highlight-default: var(--base-violet-solid-4); + --base-blue-alpha-5: #0180ef30; + --base-blue-alpha-6: #0177e647; + --surface-highlight-hovered: var(--base-violet-solid-6); + --base-blue-alpha-7: #0077df69; + --base-blue-alpha-8: #0082e6a1; + --base-blue-alpha-9: #0091fffa; + --base-blue-alpha-10: #0080f1fa; + --base-blue-alpha-11: #0066dbfa; + --base-blue-alpha-12: #002149fa; + --base-violet-alpha-1: #5805ab03; + --base-violet-alpha-2: #3705ff05; + --base-violet-alpha-3: #3c00ff0d; + --base-violet-alpha-4: #2e02f417; + --base-violet-alpha-5: #2f01e821; + --base-violet-alpha-6: #2a01df30; + --base-violet-alpha-7: #2b01d447; + --base-violet-alpha-8: #2a00d066; + --base-violet-alpha-9: #2500b6a8; + --base-violet-alpha-10: #1f00a5b0; + --base-violet-alpha-11: #180091ba; + --base-violet-alpha-12: #0e003ded; + --base-gray-slate-alpha-1: #05448205; + --base-gray-slate-alpha-2: #05294d08; + --base-gray-slate-alpha-3: #0025490d; + --base-gray-slate-alpha-4: #021c3714; + --base-gray-slate-alpha-5: #0217351a; + --base-gray-slate-alpha-6: #01213921; + --base-gray-slate-alpha-7: #001a3329; + --base-gray-slate-alpha-8: #011e323d; + --base-gray-slate-alpha-9: #00111e78; + --base-gray-slate-alpha-10: #00101b82; + --base-gray-slate-alpha-11: #000e1896; + --base-gray-slate-alpha-12: #00080ced; + --base-green-alpha-1: #05c04305; + --base-green-alpha-2: #00c43b0d; + --base-green-alpha-3: #02ba3c17; + --base-green-alpha-4: #01a63521; + --base-green-alpha-5: #009b3633; + --base-green-alpha-6: #0193364a; + --base-green-alpha-7: #008c3d6e; + --base-green-alpha-8: #00934ca3; + --base-green-alpha-9: #008f4acf; + --base-green-alpha-10: #008346d6; + --base-green-alpha-11: #006b3be8; + --base-green-alpha-12: #002012eb; + --base-amber-alpha-1: #c0820505; + --base-amber-alpha-2: #ffab0212; + --base-amber-alpha-3: #ffbb012b; + --base-amber-alpha-4: #ffb70042; + --base-amber-alpha-5: #ffb3005e; + --base-amber-alpha-6: #ffa20178; + --base-amber-alpha-7: #ec8d009c; + --base-amber-alpha-8: #ea8900d4; + --base-amber-alpha-9: #ffa600db; + --base-amber-alpha-10: #ff9500e3; + --base-amber-alpha-11: #ab5300fa; + --base-amber-alpha-12: #481800f5; + --base-red-alpha-1: #ff050503; + --base-red-alpha-2: #ff050508; + --base-red-alpha-3: #ff01010f; + --base-red-alpha-4: #ff00001a; + --base-red-alpha-5: #f2000026; + --base-red-alpha-6: #e4010138; + --base-red-alpha-7: #d9000452; + --base-red-alpha-8: #d1000470; + --base-red-alpha-9: #db0007b8; + --base-red-alpha-10: #d10007c2; + --base-red-alpha-11: #c30007d4; + --base-red-alpha-12: #280003ed; --mapareadistrict-default: var(--surface-highlight-default); --mapareadistrict-hover: var(--action-secondary-success-hovered); --mapareadistrict-selected: var(--action-primary-basic-default); --mapareadistrict-disabled: var(--action-primary-disabled); - --mapareadistrict-border: var(--lightmode-gray-slate-solid-9); + --mapareadistrict-border: var(--base-gray-slate-solid-9); --border-focus: #ffffff03; + --transparent: #ffffff00; + --border-onbg-subdued: var(--base-gray-slate-solid-11); --space-0: 0px; --space-025: 1px; diff --git a/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx b/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx index 11965354..6459a583 100644 --- a/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx +++ b/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx @@ -248,11 +248,11 @@ const LayerSelector = ({ Change Layer - + diff --git a/packages/opub-viz/styles/tokens/_variables.css b/packages/opub-viz/styles/tokens/_variables.css index e5ea60c1..6f66b68a 100644 --- a/packages/opub-viz/styles/tokens/_variables.css +++ b/packages/opub-viz/styles/tokens/_variables.css @@ -1,267 +1,275 @@ :root { - --lightmode-indigo-solid-1: #fdfdfe; - --lightmode-indigo-solid-2: #f8faff; - --lightmode-indigo-solid-3: #f0f4ff; - --lightmode-indigo-solid-4: #e6edfe; - --lightmode-indigo-solid-5: #d9e2fc; - --lightmode-indigo-solid-6: #c6d4f9; - --lightmode-indigo-solid-7: #aec0f5; - --lightmode-indigo-solid-8: #8da4ef; - --lightmode-indigo-solid-9: #3e63dd; - --lightmode-indigo-solid-10: #3a5ccc; - --lightmode-indigo-solid-11: #3451b2; - --lightmode-indigo-solid-12: #101d46; - --lightmode-blue-solid-1: #fbfdff; - --lightmode-blue-solid-2: #f5faff; - --lightmode-blue-solid-3: #edf6ff; - --lightmode-blue-solid-4: #e1f0ff; - --lightmode-blue-solid-5: #cee7fe; - --lightmode-blue-solid-6: #b7d9f8; - --lightmode-blue-solid-7: #96c7f2; - --lightmode-blue-solid-8: #5eb0ef; - --lightmode-blue-solid-9: #0091ff; - --lightmode-blue-solid-10: #0081f1; - --lightmode-blue-solid-11: #006adc; - --lightmode-blue-solid-12: #00254d; - --lightmode-violet-solid-1: #fdfcfe; - --lightmode-violet-solid-2: #fbfaff; - --lightmode-violet-solid-3: #f5f2ff; - --lightmode-violet-solid-4: #ede9fe; - --lightmode-violet-solid-5: #e4defc; - --lightmode-violet-solid-6: #d7cff9; - --lightmode-violet-solid-7: #c4b8f3; - --lightmode-violet-solid-8: #aa99ec; - --lightmode-violet-solid-9: #6e56cf; - --lightmode-violet-solid-10: #644fc1; - --lightmode-violet-solid-11: #5746af; - --lightmode-violet-solid-12: #20134b; - --lightmode-gray-slate-solid-1: #fbfcfd; - --lightmode-gray-slate-solid-2: #f8f9fa; - --lightmode-gray-slate-solid-3: #f1f3f5; - --lightmode-gray-slate-solid-4: #eceef0; - --lightmode-gray-slate-solid-5: #e6e8eb; - --lightmode-gray-slate-solid-6: #dfe3e6; - --lightmode-gray-slate-solid-7: #d7dbdf; - --lightmode-gray-slate-solid-8: #c1c8cd; - --lightmode-gray-slate-solid-9: #889096; - --lightmode-gray-slate-solid-10: #7e868c; - --lightmode-gray-slate-solid-11: #687076; - --lightmode-gray-slate-solid-12: #11181c; - --lightmode-red-solid-1: #fffcfc; - --lightmode-red-solid-2: #fff8f8; - --lightmode-red-solid-3: #ffefef; - --lightmode-red-solid-4: #ffe5e5; - --lightmode-red-solid-5: #fdd8d8; - --lightmode-red-solid-6: #f9c6c6; - --lightmode-red-solid-7: #f3aeaf; - --lightmode-red-solid-8: #eb9091; - --lightmode-red-solid-9: #e5484d; - --lightmode-red-solid-10: #dc3d43; - --lightmode-red-solid-11: #cd2b31; - --lightmode-red-solid-12: #381316; - --lightmode-green-solid-1: #fbfefc; - --lightmode-green-solid-2: #f2fcf5; - --lightmode-green-solid-3: #e9f9ee; - --lightmode-green-solid-4: #ddf3e4; - --lightmode-green-solid-5: #ccebd7; - --lightmode-green-solid-6: #b4dfc4; - --lightmode-green-solid-7: #92ceac; - --lightmode-green-solid-8: #5bb98c; - --lightmode-green-solid-9: #30a46c; - --lightmode-green-solid-10: #299764; - --lightmode-green-solid-11: #18794e; - --lightmode-green-solid-12: #153226; - --lightmode-amber-solid-1: #fefdfb; - --lightmode-amber-solid-2: #fff9ed; - --lightmode-amber-solid-3: #fff4d5; - --lightmode-amber-solid-4: #ffecbc; - --lightmode-amber-solid-5: #ffe3a2; - --lightmode-amber-solid-6: #ffd386; - --lightmode-amber-solid-7: #f3ba63; - --lightmode-amber-solid-8: #ee9d2b; - --lightmode-amber-solid-9: #ffb224; - --lightmode-amber-solid-10: #ffa01c; - --lightmode-amber-solid-11: #ad5700; - --lightmode-amber-solid-12: #4e2009; - --lightmode-pure-white: #ffffff; - --lightmode-pure-black: #000000; - --text-default: var(--lightmode-gray-slate-solid-12); + --base-indigo-solid-1: #fdfdfe; + --base-indigo-solid-2: #f8faff; + --base-indigo-solid-3: #f0f4ff; + --base-indigo-solid-4: #e6edfe; + --base-indigo-solid-5: #d9e2fc; + --base-indigo-solid-6: #c6d4f9; + --base-indigo-solid-7: #aec0f5; + --base-indigo-solid-8: #8da4ef; + --base-indigo-solid-9: #3e63dd; + --base-indigo-solid-10: #3a5ccc; + --base-indigo-solid-11: #3451b2; + --base-indigo-solid-12: #101d46; + --base-blue-solid-1: #fbfdff; + --base-blue-solid-2: #f5faff; + --base-blue-solid-3: #edf6ff; + --base-blue-solid-4: #e1f0ff; + --base-blue-solid-5: #cee7fe; + --base-blue-solid-6: #b7d9f8; + --base-blue-solid-7: #96c7f2; + --base-blue-solid-8: #5eb0ef; + --base-blue-solid-9: #0091ff; + --base-blue-solid-10: #0081f1; + --base-blue-solid-11: #006adc; + --base-blue-solid-12: #00254d; + --base-violet-solid-1: #fdfcfe; + --base-violet-solid-2: #fbfaff; + --base-violet-solid-3: #f5f2ff; + --base-violet-solid-4: #ede9fe; + --base-violet-solid-5: #e4defc; + --base-violet-solid-6: #d7cff9; + --base-violet-solid-7: #c4b8f3; + --base-violet-solid-8: #aa99ec; + --base-violet-solid-9: #6e56cf; + --base-violet-solid-10: #644fc1; + --base-violet-solid-11: #5746af; + --base-violet-solid-12: #20134b; + --base-gray-slate-solid-1: #fbfcfd; + --base-gray-slate-solid-2: #f8f9fa; + --base-gray-slate-solid-3: #f1f3f5; + --base-gray-slate-solid-4: #eceef0; + --base-gray-slate-solid-5: #e6e8eb; + --base-gray-slate-solid-6: #dfe3e6; + --base-gray-slate-solid-7: #d7dbdf; + --base-gray-slate-solid-8: #c1c8cd; + --base-gray-slate-solid-9: #889096; + --base-gray-slate-solid-10: #7e868c; + --base-gray-slate-solid-11: #687076; + --base-gray-slate-solid-12: #11181c; + --base-red-solid-1: #fffcfc; + --base-red-solid-2: #fff8f8; + --base-red-solid-3: #ffefef; + --base-red-solid-4: #ffe5e5; + --base-red-solid-5: #fdd8d8; + --base-red-solid-6: #f9c6c6; + --base-red-solid-7: #f3aeaf; + --base-red-solid-8: #eb9091; + --base-red-solid-9: #e5484d; + --base-red-solid-10: #dc3d43; + --base-red-solid-11: #cd2b31; + --base-red-solid-12: #381316; + --base-green-solid-1: #fbfefc; + --base-green-solid-2: #f2fcf5; + --base-green-solid-3: #e9f9ee; + --base-green-solid-4: #ddf3e4; + --base-green-solid-5: #ccebd7; + --base-green-solid-6: #b4dfc4; + --base-green-solid-7: #92ceac; + --base-green-solid-8: #5bb98c; + --base-green-solid-9: #30a46c; + --base-green-solid-10: #299764; + --base-green-solid-11: #18794e; + --base-green-solid-12: #153226; + --base-amber-solid-1: #fefdfb; + --base-amber-solid-2: #fff9ed; + --base-amber-solid-3: #fff4d5; + --base-amber-solid-4: #ffecbc; + --base-amber-solid-5: #ffe3a2; + --base-amber-solid-6: #ffd386; + --base-amber-solid-7: #f3ba63; + --base-amber-solid-8: #ee9d2b; + --base-amber-solid-9: #ffb224; + --base-amber-solid-10: #ffa01c; + --base-amber-solid-11: #ad5700; + --base-amber-solid-12: #4e2009; + --base-pure-white: #ffffff; + --base-pure-black: #000000; + --text-default: var(--base-gray-slate-solid-12); --text-subdued: #3e4346; - --text-disabled: var(--lightmode-gray-slate-solid-9); - --text-critical: var(--lightmode-red-solid-11); - --text-warning: var(--lightmode-amber-solid-11); - --text-success: var(--lightmode-green-solid-11); - --text-highlight: var(--lightmode-violet-solid-11); - --text-interactive: var(--lightmode-blue-solid-11); - --text-onbg-disabled: var(--lightmode-gray-slate-solid-6); - --text-onbg-default: var(--lightmode-pure-white); - --border-default: var(--lightmode-gray-slate-solid-8); - --border-subdued: var(--lightmode-gray-slate-solid-7); - --border-disabled: var(--lightmode-gray-slate-solid-6); - --border-critical-default: var(--lightmode-red-solid-8); - --border-critical-disabled: var(--lightmode-red-solid-7); - --border-critical-subdued: var(--lightmode-red-solid-6); - --border-success-default: var(--lightmode-green-solid-8); - --border-success-subdued: var(--lightmode-green-solid-7); - --border-warning-default: var(--lightmode-amber-solid-8); - --border-warning-subdued: var(--lightmode-amber-solid-7); - --border-highlight-default: var(--lightmode-violet-solid-8); - --border-highlight-subdued: var(--lightmode-violet-solid-7); - --border-interactive-default: var(--lightmode-blue-solid-8); - --border-interactive-focused: var(--lightmode-blue-solid-7); - --icon-default: var(--lightmode-gray-slate-solid-11); - --icon-subdued: var(--lightmode-gray-slate-solid-10); - --icon-disabled: var(--lightmode-gray-slate-solid-9); - --icon-critical: var(--lightmode-red-solid-10); - --action-primary-basic-default: var(--lightmode-violet-solid-9); - --icon-warning: var(--lightmode-amber-solid-10); - --action-primary-basic-hovered: var(--lightmode-violet-solid-10); - --icon-success: var(--lightmode-green-solid-10); - --action-primary-basic-pressed: var(--lightmode-violet-solid-11); - --icon-highlight: var(--lightmode-violet-solid-10); - --icon-interactive: var(--lightmode-indigo-solid-11); - --action-primary-basic-depressed: var(--lightmode-violet-solid-12); - --action-primary-disabled: var(--lightmode-gray-slate-solid-9); - --action-primary-critical-default: var(--lightmode-red-solid-9); - --action-primary-success-default: var(--lightmode-green-solid-9); - --action-primary-critical-hovered: var(--lightmode-red-solid-10); - --action-secondary-critical-pressed: var(--lightmode-red-solid-5); - --action-secondary-critical-hovered: var(--lightmode-red-solid-4); - --action-secondary-critical-depressed: var(--lightmode-red-solid-6); - --action-secondary-critical-default: var(--lightmode-red-solid-3); - --action-primary-interactive-default: var(--lightmode-blue-solid-9); - --action-primary-interactive-hovered: var(--lightmode-blue-solid-10); - --action-primary-interactive-pressed: var(--lightmode-blue-solid-11); - --action-primary-interactive-depressed: var(--lightmode-blue-solid-12); - --action-primary-success-hovered: var(--lightmode-green-solid-10); - --action-secondary-basic-default: var(--lightmode-violet-solid-3); - --action-primary-critical-pressed: var(--lightmode-red-solid-11); - --action-primary-critical-depressed: var(--lightmode-red-solid-12); - --action-secondary-disabled: var(--lightmode-gray-slate-solid-3); - --action-primary-success-pressed: var(--lightmode-green-solid-11); - --action-secondary-interactive-depressed: var(--lightmode-blue-solid-6); - --action-secondary-success-depressed: var(--lightmode-green-solid-6); - --action-secondary-success-pressed: var(--lightmode-green-solid-5); - --action-primary-success-depressed: var(--lightmode-green-solid-12); - --action-secondary-interactive-hovered: var(--lightmode-blue-solid-4); - --action-secondary-neutral-default: var(--lightmode-gray-slate-solid-1); - --action-secondary-interactive-pressed: var(--lightmode-blue-solid-5); - --action-secondary-success-hovered: var(--lightmode-green-solid-4); - --action-secondary-success-default: var(--lightmode-green-solid-3); - --action-secondary-interactive-default: var(--lightmode-blue-solid-3); - --action-secondary-neutral-hovered: var(--lightmode-gray-slate-solid-2); - --action-secondary-neutral-pressed: var(--lightmode-gray-slate-solid-5); - --action-secondary-basic-depressed: var(--lightmode-violet-solid-6); - --action-secondary-basic-hovered: var(--lightmode-violet-solid-4); - --action-secondary-basic-pressed: var(--lightmode-violet-solid-5); - --action-secondary-neutral-depressed: var(--lightmode-gray-slate-solid-6); - --action-tertiary-basic-hover: var(--lightmode-violet-alpha-2); - --lightmode-indigo-alpha-1: #05058203; - --action-tertiary-interactive-hover: var(--lightmode-blue-alpha-2); - --lightmode-indigo-alpha-2: #054cff08; - --action-tertiary-success-hover: var(--lightmode-green-alpha-2); - --action-tertiary-critical-hover: var(--lightmode-red-alpha-2); - --lightmode-indigo-alpha-3: #0144ff0f; - --lightmode-indigo-alpha-4: #0247f51a; - --lightmode-indigo-alpha-5: #023ceb26; - --lightmode-indigo-alpha-6: #013de438; - --lightmode-indigo-alpha-7: #0038e052; - --lightmode-indigo-alpha-8: #0134db73; - --lightmode-indigo-alpha-9: #0031d2c2; - --background-subdued: var(--lightmode-indigo-solid-2); - --background-dark: var(--lightmode-indigo-solid-12); - --background-default: var(--lightmode-indigo-solid-3); - --surface-default: var(--lightmode-pure-white); - --lightmode-indigo-alpha-10: #002cbdc4; - --surface-subdued: var(--lightmode-gray-slate-solid-2); - --lightmode-indigo-alpha-11: #00259ecc; - --surface-selected: var(--lightmode-blue-solid-2); - --lightmode-indigo-alpha-12: #000e3af0; - --surface-warning: var(--lightmode-amber-solid-2); - --surface-critical: var(--lightmode-red-solid-2); - --lightmode-blue-alpha-1: #0582ff05; - --lightmode-blue-alpha-2: #0582ff0a; - --surface-success: var(--lightmode-green-solid-2); - --surface-highlight-subdued: var(--lightmode-violet-solid-2); - --lightmode-blue-alpha-3: #0280ff12; - --lightmode-blue-alpha-4: #0180ff1f; - --surface-interactive: var(--lightmode-blue-solid-2); - --surface-highlight-default: var(--lightmode-violet-solid-4); - --lightmode-blue-alpha-5: #0180ef30; - --surface-highlight-hovered: var(--lightmode-violet-solid-6); - --lightmode-blue-alpha-6: #0177e647; - --lightmode-blue-alpha-7: #0077df69; - --lightmode-blue-alpha-8: #0082e6a1; - --lightmode-blue-alpha-9: #0091fffa; - --lightmode-blue-alpha-10: #0080f1fa; - --lightmode-blue-alpha-11: #0066dbfa; - --lightmode-blue-alpha-12: #002149fa; - --lightmode-violet-alpha-1: #5805ab03; - --lightmode-violet-alpha-2: #3705ff05; - --lightmode-violet-alpha-3: #3c00ff0d; - --lightmode-violet-alpha-4: #2e02f417; - --lightmode-violet-alpha-5: #2f01e821; - --lightmode-violet-alpha-6: #2a01df30; - --lightmode-violet-alpha-7: #2b01d447; - --lightmode-violet-alpha-8: #2a00d066; - --lightmode-violet-alpha-9: #2500b6a8; - --lightmode-violet-alpha-10: #1f00a5b0; - --lightmode-violet-alpha-11: #180091ba; - --lightmode-violet-alpha-12: #0e003ded; - --lightmode-gray-slate-alpha-1: #05448205; - --lightmode-gray-slate-alpha-2: #05294d08; - --lightmode-gray-slate-alpha-3: #0025490d; - --lightmode-gray-slate-alpha-4: #021c3714; - --lightmode-gray-slate-alpha-5: #0217351a; - --lightmode-gray-slate-alpha-6: #01213921; - --lightmode-gray-slate-alpha-7: #001a3329; - --lightmode-gray-slate-alpha-8: #011e323d; - --lightmode-gray-slate-alpha-9: #00111e78; - --lightmode-gray-slate-alpha-10: #00101b82; - --lightmode-gray-slate-alpha-11: #000e1896; - --lightmode-gray-slate-alpha-12: #00080ced; - --lightmode-green-alpha-1: #05c04305; - --lightmode-green-alpha-2: #00c43b0d; - --lightmode-green-alpha-3: #02ba3c17; - --lightmode-green-alpha-4: #01a63521; - --lightmode-green-alpha-5: #009b3633; - --lightmode-green-alpha-6: #0193364a; - --lightmode-green-alpha-7: #008c3d6e; - --lightmode-green-alpha-8: #00934ca3; - --lightmode-green-alpha-9: #008f4acf; - --lightmode-green-alpha-10: #008346d6; - --lightmode-green-alpha-11: #006b3be8; - --lightmode-green-alpha-12: #002012eb; - --lightmode-amber-alpha-1: #c0820505; - --lightmode-amber-alpha-2: #ffab0212; - --lightmode-amber-alpha-3: #ffbb012b; - --lightmode-amber-alpha-4: #ffb70042; - --lightmode-amber-alpha-5: #ffb3005e; - --lightmode-amber-alpha-6: #ffa20178; - --lightmode-amber-alpha-7: #ec8d009c; - --lightmode-amber-alpha-8: #ea8900d4; - --lightmode-amber-alpha-9: #ffa600db; - --lightmode-amber-alpha-10: #ff9500e3; - --lightmode-amber-alpha-11: #ab5300fa; - --lightmode-amber-alpha-12: #481800f5; - --lightmode-red-alpha-1: #ff050503; - --lightmode-red-alpha-2: #ff050508; - --lightmode-red-alpha-3: #ff01010f; - --lightmode-red-alpha-4: #ff00001a; - --lightmode-red-alpha-5: #f2000026; - --lightmode-red-alpha-6: #e4010138; - --lightmode-red-alpha-7: #d9000452; - --lightmode-red-alpha-8: #d1000470; - --lightmode-red-alpha-9: #db0007b8; - --lightmode-red-alpha-10: #d10007c2; - --lightmode-red-alpha-11: #c30007d4; - --lightmode-red-alpha-12: #280003ed; + --text-disabled: var(--base-gray-slate-solid-9); + --text-critical: var(--base-red-solid-11); + --text-warning: var(--base-amber-solid-11); + --text-success: var(--base-green-solid-11); + --text-highlight: var(--base-violet-solid-11); + --text-interactive: var(--base-blue-solid-11); + --text-onbg-disabled: var(--base-gray-slate-solid-9); + --text-onbg-default: var(--base-gray-slate-solid-1); + --border-default: var(--base-gray-slate-solid-8); + --border-subdued: var(--base-gray-slate-solid-7); + --border-disabled: var(--base-gray-slate-solid-6); + --border-critical-default: var(--base-red-solid-8); + --border-critical-disabled: var(--base-red-solid-7); + --border-critical-subdued: var(--base-red-solid-6); + --border-success-default: var(--base-green-solid-8); + --border-success-subdued: var(--base-green-solid-7); + --border-warning-default: var(--base-amber-solid-8); + --border-warning-subdued: var(--base-amber-solid-7); + --border-highlight-default: var(--base-violet-solid-8); + --border-highlight-subdued: var(--base-violet-solid-7); + --border-highlight-onbg-default: var(--base-violet-solid-7); + --border-highlight-onbg-subdued: var(--base-violet-solid-9); + --border-interactive-default: var(--base-blue-solid-8); + --border-interactive-focused: var(--base-blue-solid-7); + --icon-default: var(--base-gray-slate-solid-11); + --icon-subdued: var(--base-gray-slate-solid-10); + --icon-disabled: var(--base-gray-slate-solid-9); + --icon-critical: var(--base-red-solid-10); + --icon-warning: var(--base-amber-solid-10); + --action-primary-basic-default: var(--base-violet-solid-9); + --action-primary-basic-hovered: var(--base-violet-solid-10); + --icon-success: var(--base-green-solid-10); + --action-primary-basic-pressed: var(--base-violet-solid-11); + --icon-highlight: var(--base-violet-solid-10); + --icon-interactive: var(--base-indigo-solid-11); + --action-primary-basic-depressed: var(--base-violet-solid-12); + --icon-onbg-default: var(--base-gray-slate-solid-1); + --icon-onbg-subdued: var(--base-gray-slate-solid-4); + --action-primary-disabled: var(--base-gray-slate-solid-9); + --action-primary-critical-default: var(--base-red-solid-9); + --icon-onbg-disabled: var(--base-gray-slate-solid-9); + --action-primary-critical-hovered: var(--base-red-solid-10); + --action-primary-success-default: var(--base-green-solid-9); + --action-secondary-critical-pressed: var(--base-red-solid-5); + --action-secondary-critical-hovered: var(--base-red-solid-4); + --action-secondary-critical-depressed: var(--base-red-solid-6); + --action-primary-interactive-default: var(--base-blue-solid-9); + --action-secondary-critical-default: var(--base-red-solid-3); + --action-primary-interactive-hovered: var(--base-blue-solid-10); + --action-primary-interactive-pressed: var(--base-blue-solid-11); + --action-primary-interactive-depressed: var(--base-blue-solid-12); + --action-primary-success-hovered: var(--base-green-solid-10); + --action-secondary-basic-default: var(--base-violet-solid-3); + --action-primary-critical-pressed: var(--base-red-solid-11); + --action-primary-critical-depressed: var(--base-red-solid-12); + --action-primary-success-pressed: var(--base-green-solid-11); + --action-secondary-disabled: var(--base-gray-slate-solid-3); + --action-secondary-interactive-pressed: var(--base-blue-solid-5); + --action-primary-success-depressed: var(--base-green-solid-12); + --action-secondary-neutral-default: var(--base-gray-slate-solid-1); + --action-secondary-interactive-depressed: var(--base-blue-solid-6); + --action-secondary-interactive-hovered: var(--base-blue-solid-4); + --action-secondary-success-pressed: var(--base-green-solid-5); + --action-secondary-success-depressed: var(--base-green-solid-6); + --action-secondary-success-hovered: var(--base-green-solid-4); + --action-secondary-success-default: var(--base-green-solid-3); + --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2); + --action-secondary-interactive-default: var(--base-blue-solid-3); + --action-secondary-basic-hovered: var(--base-violet-solid-4); + --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5); + --action-secondary-basic-depressed: var(--base-violet-solid-6); + --action-secondary-basic-pressed: var(--base-violet-solid-5); + --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6); + --action-tertiary-basic-hover: var(--base-violet-alpha-2); + --base-indigo-alpha-1: #05058203; + --action-tertiary-interactive-hover: var(--base-blue-alpha-2); + --action-tertiary-success-hover: var(--base-green-alpha-2); + --base-indigo-alpha-2: #054cff08; + --action-tertiary-critical-hover: var(--base-red-alpha-2); + --base-indigo-alpha-3: #0144ff0f; + --base-indigo-alpha-4: #0247f51a; + --base-indigo-alpha-5: #023ceb26; + --background-alpha-dark: var(--base-indigo-alpha-12); + --base-indigo-alpha-6: #013de438; + --base-indigo-alpha-7: #0038e052; + --base-indigo-alpha-8: #0134db73; + --base-indigo-alpha-9: #0031d2c2; + --background-solid-subdued: var(--base-indigo-solid-2); + --background-solid-dark: var(--base-indigo-solid-12); + --background-solid-default: var(--base-indigo-solid-3); + --surface-default: var(--base-pure-white); + --surface-subdued: var(--base-gray-slate-solid-2); + --base-indigo-alpha-10: #002cbdc4; + --surface-selected: var(--base-blue-solid-2); + --base-indigo-alpha-11: #00259ecc; + --surface-warning: var(--base-amber-solid-2); + --base-indigo-alpha-12: #000e3af0; + --base-blue-alpha-1: #0582ff05; + --surface-critical: var(--base-red-solid-2); + --surface-success: var(--base-green-solid-2); + --base-blue-alpha-2: #0582ff0a; + --surface-highlight-subdued: var(--base-violet-solid-2); + --base-blue-alpha-3: #0280ff12; + --surface-interactive: var(--base-blue-solid-2); + --base-blue-alpha-4: #0180ff1f; + --surface-highlight-default: var(--base-violet-solid-4); + --base-blue-alpha-5: #0180ef30; + --base-blue-alpha-6: #0177e647; + --surface-highlight-hovered: var(--base-violet-solid-6); + --base-blue-alpha-7: #0077df69; + --base-blue-alpha-8: #0082e6a1; + --base-blue-alpha-9: #0091fffa; + --base-blue-alpha-10: #0080f1fa; + --base-blue-alpha-11: #0066dbfa; + --base-blue-alpha-12: #002149fa; + --base-violet-alpha-1: #5805ab03; + --base-violet-alpha-2: #3705ff05; + --base-violet-alpha-3: #3c00ff0d; + --base-violet-alpha-4: #2e02f417; + --base-violet-alpha-5: #2f01e821; + --base-violet-alpha-6: #2a01df30; + --base-violet-alpha-7: #2b01d447; + --base-violet-alpha-8: #2a00d066; + --base-violet-alpha-9: #2500b6a8; + --base-violet-alpha-10: #1f00a5b0; + --base-violet-alpha-11: #180091ba; + --base-violet-alpha-12: #0e003ded; + --base-gray-slate-alpha-1: #05448205; + --base-gray-slate-alpha-2: #05294d08; + --base-gray-slate-alpha-3: #0025490d; + --base-gray-slate-alpha-4: #021c3714; + --base-gray-slate-alpha-5: #0217351a; + --base-gray-slate-alpha-6: #01213921; + --base-gray-slate-alpha-7: #001a3329; + --base-gray-slate-alpha-8: #011e323d; + --base-gray-slate-alpha-9: #00111e78; + --base-gray-slate-alpha-10: #00101b82; + --base-gray-slate-alpha-11: #000e1896; + --base-gray-slate-alpha-12: #00080ced; + --base-green-alpha-1: #05c04305; + --base-green-alpha-2: #00c43b0d; + --base-green-alpha-3: #02ba3c17; + --base-green-alpha-4: #01a63521; + --base-green-alpha-5: #009b3633; + --base-green-alpha-6: #0193364a; + --base-green-alpha-7: #008c3d6e; + --base-green-alpha-8: #00934ca3; + --base-green-alpha-9: #008f4acf; + --base-green-alpha-10: #008346d6; + --base-green-alpha-11: #006b3be8; + --base-green-alpha-12: #002012eb; + --base-amber-alpha-1: #c0820505; + --base-amber-alpha-2: #ffab0212; + --base-amber-alpha-3: #ffbb012b; + --base-amber-alpha-4: #ffb70042; + --base-amber-alpha-5: #ffb3005e; + --base-amber-alpha-6: #ffa20178; + --base-amber-alpha-7: #ec8d009c; + --base-amber-alpha-8: #ea8900d4; + --base-amber-alpha-9: #ffa600db; + --base-amber-alpha-10: #ff9500e3; + --base-amber-alpha-11: #ab5300fa; + --base-amber-alpha-12: #481800f5; + --base-red-alpha-1: #ff050503; + --base-red-alpha-2: #ff050508; + --base-red-alpha-3: #ff01010f; + --base-red-alpha-4: #ff00001a; + --base-red-alpha-5: #f2000026; + --base-red-alpha-6: #e4010138; + --base-red-alpha-7: #d9000452; + --base-red-alpha-8: #d1000470; + --base-red-alpha-9: #db0007b8; + --base-red-alpha-10: #d10007c2; + --base-red-alpha-11: #c30007d4; + --base-red-alpha-12: #280003ed; --mapareadistrict-default: var(--surface-highlight-default); --mapareadistrict-hover: var(--action-secondary-success-hovered); --mapareadistrict-selected: var(--action-primary-basic-default); --mapareadistrict-disabled: var(--action-primary-disabled); - --mapareadistrict-border: var(--lightmode-gray-slate-solid-9); + --mapareadistrict-border: var(--base-gray-slate-solid-9); --border-focus: #ffffff03; + --transparent: #ffffff00; + --border-onbg-subdued: var(--base-gray-slate-solid-11); --space-0: 0px; --space-025: 1px; diff --git a/packages/opub-viz/styles/tokens/_variables_dark.css b/packages/opub-viz/styles/tokens/_variables_dark.css deleted file mode 100644 index 54da2e9f..00000000 --- a/packages/opub-viz/styles/tokens/_variables_dark.css +++ /dev/null @@ -1,48 +0,0 @@ -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } - - :root { - --background: #202123ff; - --background-hovered: #474849; - --background-pressed: #555a5e; - --background-selected: #2d2d33; - --background-invert: #f6f6f7ff; - - --text: #b0b0bc; - --text-strong: #e7e7f1; - --text-subdued: #85858e; - /* --interactive: #8bb2ff; */ - --interactive-hovered: #2c6ecbff; - - --surface: #161619; - --surface-hovered: #2d2d33; - --surface-pressed: #474849; - --surface-selected: #474849; - - --surface-attention: #454500; - --surface-information: #02382d; - --surface-warning: #4c250f; - --surface-subdued: #1e1e23; - - --surface-selected: #202124; - --surface-critical-subdued: #201e1e; - - --surface-neutral: #202123; - --surface-neutral-hovered: #474849; - --surface-neutral-pressed: #555a5e; - --surface-neutral-disabled: #555a5e; - - --card-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.12); - --card-shadow-hover: 0 4px 7px hsla(0, 0%, 100%, 0.1), - inset 0 0 0 1px hsla(0, 0%, 100%, 0.12); - - --backdrop: rgba(0, 0, 0, 0.5); - - --icon: #eeeeee; - --icon-subdued: #dddddd; - --icon-hovered: #ffffff; - --icon-pressed: #dddddd; - } -} diff --git a/packages/opub-viz/styles/tokens/tailwind/color.js b/packages/opub-viz/styles/tokens/tailwind/color.js index a716cfe7..2deaf592 100644 --- a/packages/opub-viz/styles/tokens/tailwind/color.js +++ b/packages/opub-viz/styles/tokens/tailwind/color.js @@ -1,265 +1,273 @@ module.exports = { - lightmodeIndigoSolid1: '#FDFDFE', - lightmodeIndigoSolid2: '#F8FAFF', - lightmodeIndigoSolid3: '#F0F4FF', - lightmodeIndigoSolid4: '#E6EDFE', - lightmodeIndigoSolid5: '#D9E2FC', - lightmodeIndigoSolid6: '#C6D4F9', - lightmodeIndigoSolid7: '#AEC0F5', - lightmodeIndigoSolid8: '#8DA4EF', - lightmodeIndigoSolid9: '#3E63DD', - lightmodeIndigoSolid10: '#3A5CCC', - lightmodeIndigoSolid11: '#3451B2', - lightmodeIndigoSolid12: '#101D46', - lightmodeBlueSolid1: '#FBFDFF', - lightmodeBlueSolid2: '#F5FAFF', - lightmodeBlueSolid3: '#EDF6FF', - lightmodeBlueSolid4: '#E1F0FF', - lightmodeBlueSolid5: '#CEE7FE', - lightmodeBlueSolid6: '#B7D9F8', - lightmodeBlueSolid7: '#96C7F2', - lightmodeBlueSolid8: '#5EB0EF', - lightmodeBlueSolid9: '#0091FF', - lightmodeBlueSolid10: '#0081F1', - lightmodeBlueSolid11: '#006ADC', - lightmodeBlueSolid12: '#00254D', - lightmodeVioletSolid1: '#FDFCFE', - lightmodeVioletSolid2: '#FBFAFF', - lightmodeVioletSolid3: '#F5F2FF', - lightmodeVioletSolid4: '#EDE9FE', - lightmodeVioletSolid5: '#E4DEFC', - lightmodeVioletSolid6: '#D7CFF9', - lightmodeVioletSolid7: '#C4B8F3', - lightmodeVioletSolid8: '#AA99EC', - lightmodeVioletSolid9: '#6E56CF', - lightmodeVioletSolid10: '#644FC1', - lightmodeVioletSolid11: '#5746AF', - lightmodeVioletSolid12: '#20134B', - lightmodeGraySlateSolid1: '#FBFCFD', - lightmodeGraySlateSolid2: '#F8F9FA', - lightmodeGraySlateSolid3: '#F1F3F5', - lightmodeGraySlateSolid4: '#ECEEF0', - lightmodeGraySlateSolid5: '#E6E8EB', - lightmodeGraySlateSolid6: '#DFE3E6', - lightmodeGraySlateSolid7: '#D7DBDF', - lightmodeGraySlateSolid8: '#C1C8CD', - lightmodeGraySlateSolid9: '#889096', - lightmodeGraySlateSolid10: '#7E868C', - lightmodeGraySlateSolid11: '#687076', - lightmodeGraySlateSolid12: '#11181C', - lightmodeRedSolid1: '#FFFCFC', - lightmodeRedSolid2: '#FFF8F8', - lightmodeRedSolid3: '#FFEFEF', - lightmodeRedSolid4: '#FFE5E5', - lightmodeRedSolid5: '#FDD8D8', - lightmodeRedSolid6: '#F9C6C6', - lightmodeRedSolid7: '#F3AEAF', - lightmodeRedSolid8: '#EB9091', - lightmodeRedSolid9: '#E5484D', - lightmodeRedSolid10: '#DC3D43', - lightmodeRedSolid11: '#CD2B31', - lightmodeRedSolid12: '#381316', - lightmodeGreenSolid1: '#FBFEFC', - lightmodeGreenSolid2: '#F2FCF5', - lightmodeGreenSolid3: '#E9F9EE', - lightmodeGreenSolid4: '#DDF3E4', - lightmodeGreenSolid5: '#CCEBD7', - lightmodeGreenSolid6: '#B4DFC4', - lightmodeGreenSolid7: '#92CEAC', - lightmodeGreenSolid8: '#5BB98C', - lightmodeGreenSolid9: '#30A46C', - lightmodeGreenSolid10: '#299764', - lightmodeGreenSolid11: '#18794E', - lightmodeGreenSolid12: '#153226', - lightmodeAmberSolid1: '#FEFDFB', - lightmodeAmberSolid2: '#FFF9ED', - lightmodeAmberSolid3: '#FFF4D5', - lightmodeAmberSolid4: '#FFECBC', - lightmodeAmberSolid5: '#FFE3A2', - lightmodeAmberSolid6: '#FFD386', - lightmodeAmberSolid7: '#F3BA63', - lightmodeAmberSolid8: '#EE9D2B', - lightmodeAmberSolid9: '#FFB224', - lightmodeAmberSolid10: '#FFA01C', - lightmodeAmberSolid11: '#AD5700', - lightmodeAmberSolid12: '#4E2009', - lightmodePureWhite: '#FFFFFF', - lightmodePureBlack: '#000000', - textDefault: 'var(--lightmode-gray-slate-solid-12)', + baseIndigoSolid1: '#FDFDFE', + baseIndigoSolid2: '#F8FAFF', + baseIndigoSolid3: '#F0F4FF', + baseIndigoSolid4: '#E6EDFE', + baseIndigoSolid5: '#D9E2FC', + baseIndigoSolid6: '#C6D4F9', + baseIndigoSolid7: '#AEC0F5', + baseIndigoSolid8: '#8DA4EF', + baseIndigoSolid9: '#3E63DD', + baseIndigoSolid10: '#3A5CCC', + baseIndigoSolid11: '#3451B2', + baseIndigoSolid12: '#101D46', + baseBlueSolid1: '#FBFDFF', + baseBlueSolid2: '#F5FAFF', + baseBlueSolid3: '#EDF6FF', + baseBlueSolid4: '#E1F0FF', + baseBlueSolid5: '#CEE7FE', + baseBlueSolid6: '#B7D9F8', + baseBlueSolid7: '#96C7F2', + baseBlueSolid8: '#5EB0EF', + baseBlueSolid9: '#0091FF', + baseBlueSolid10: '#0081F1', + baseBlueSolid11: '#006ADC', + baseBlueSolid12: '#00254D', + baseVioletSolid1: '#FDFCFE', + baseVioletSolid2: '#FBFAFF', + baseVioletSolid3: '#F5F2FF', + baseVioletSolid4: '#EDE9FE', + baseVioletSolid5: '#E4DEFC', + baseVioletSolid6: '#D7CFF9', + baseVioletSolid7: '#C4B8F3', + baseVioletSolid8: '#AA99EC', + baseVioletSolid9: '#6E56CF', + baseVioletSolid10: '#644FC1', + baseVioletSolid11: '#5746AF', + baseVioletSolid12: '#20134B', + baseGraySlateSolid1: '#FBFCFD', + baseGraySlateSolid2: '#F8F9FA', + baseGraySlateSolid3: '#F1F3F5', + baseGraySlateSolid4: '#ECEEF0', + baseGraySlateSolid5: '#E6E8EB', + baseGraySlateSolid6: '#DFE3E6', + baseGraySlateSolid7: '#D7DBDF', + baseGraySlateSolid8: '#C1C8CD', + baseGraySlateSolid9: '#889096', + baseGraySlateSolid10: '#7E868C', + baseGraySlateSolid11: '#687076', + baseGraySlateSolid12: '#11181C', + baseRedSolid1: '#FFFCFC', + baseRedSolid2: '#FFF8F8', + baseRedSolid3: '#FFEFEF', + baseRedSolid4: '#FFE5E5', + baseRedSolid5: '#FDD8D8', + baseRedSolid6: '#F9C6C6', + baseRedSolid7: '#F3AEAF', + baseRedSolid8: '#EB9091', + baseRedSolid9: '#E5484D', + baseRedSolid10: '#DC3D43', + baseRedSolid11: '#CD2B31', + baseRedSolid12: '#381316', + baseGreenSolid1: '#FBFEFC', + baseGreenSolid2: '#F2FCF5', + baseGreenSolid3: '#E9F9EE', + baseGreenSolid4: '#DDF3E4', + baseGreenSolid5: '#CCEBD7', + baseGreenSolid6: '#B4DFC4', + baseGreenSolid7: '#92CEAC', + baseGreenSolid8: '#5BB98C', + baseGreenSolid9: '#30A46C', + baseGreenSolid10: '#299764', + baseGreenSolid11: '#18794E', + baseGreenSolid12: '#153226', + baseAmberSolid1: '#FEFDFB', + baseAmberSolid2: '#FFF9ED', + baseAmberSolid3: '#FFF4D5', + baseAmberSolid4: '#FFECBC', + baseAmberSolid5: '#FFE3A2', + baseAmberSolid6: '#FFD386', + baseAmberSolid7: '#F3BA63', + baseAmberSolid8: '#EE9D2B', + baseAmberSolid9: '#FFB224', + baseAmberSolid10: '#FFA01C', + baseAmberSolid11: '#AD5700', + baseAmberSolid12: '#4E2009', + basePureWhite: '#FFFFFF', + basePureBlack: '#000000', + textDefault: 'var(--base-gray-slate-solid-12)', textSubdued: '#3E4346', - textDisabled: 'var(--lightmode-gray-slate-solid-9)', - textCritical: 'var(--lightmode-red-solid-11)', - textWarning: 'var(--lightmode-amber-solid-11)', - textSuccess: 'var(--lightmode-green-solid-11)', - textHighlight: 'var(--lightmode-violet-solid-11)', - textInteractive: 'var(--lightmode-blue-solid-11)', - textOnBGDisabled: 'var(--lightmode-gray-slate-solid-6)', - textOnBGDefault: 'var(--lightmode-pure-white)', - borderDefault: 'var(--lightmode-gray-slate-solid-8)', - borderSubdued: 'var(--lightmode-gray-slate-solid-7)', - borderDisabled: 'var(--lightmode-gray-slate-solid-6)', - borderCriticalDefault: 'var(--lightmode-red-solid-8)', - borderCriticalDisabled: 'var(--lightmode-red-solid-7)', - borderCriticalSubdued: 'var(--lightmode-red-solid-6)', - borderSuccessDefault: 'var(--lightmode-green-solid-8)', - borderSuccessSubdued: 'var(--lightmode-green-solid-7)', - borderWarningDefault: 'var(--lightmode-amber-solid-8)', - borderWarningSubdued: 'var(--lightmode-amber-solid-7)', - borderHighlightDefault: 'var(--lightmode-violet-solid-8)', - borderHighlightSubdued: 'var(--lightmode-violet-solid-7)', - borderInteractiveDefault: 'var(--lightmode-blue-solid-8)', - borderInteractiveFocused: 'var(--lightmode-blue-solid-7)', - iconDefault: 'var(--lightmode-gray-slate-solid-11)', - iconSubdued: 'var(--lightmode-gray-slate-solid-10)', - iconDisabled: 'var(--lightmode-gray-slate-solid-9)', - iconCritical: 'var(--lightmode-red-solid-10)', - actionPrimaryBasicDefault: 'var(--lightmode-violet-solid-9)', - iconWarning: 'var(--lightmode-amber-solid-10)', - actionPrimaryBasicHovered: 'var(--lightmode-violet-solid-10)', - iconSuccess: 'var(--lightmode-green-solid-10)', - actionPrimaryBasicPressed: 'var(--lightmode-violet-solid-11)', - iconHighlight: 'var(--lightmode-violet-solid-10)', - iconInteractive: 'var(--lightmode-indigo-solid-11)', - actionPrimaryBasicDepressed: 'var(--lightmode-violet-solid-12)', - actionPrimaryDisabled: 'var(--lightmode-gray-slate-solid-9)', - actionPrimaryCriticalDefault: 'var(--lightmode-red-solid-9)', - actionPrimarySuccessDefault: 'var(--lightmode-green-solid-9)', - actionPrimaryCriticalHovered: 'var(--lightmode-red-solid-10)', - actionSecondaryCriticalPressed: 'var(--lightmode-red-solid-5)', - actionSecondaryCriticalHovered: 'var(--lightmode-red-solid-4)', - actionSecondaryCriticalDepressed: 'var(--lightmode-red-solid-6)', - actionSecondaryCriticalDefault: 'var(--lightmode-red-solid-3)', - actionPrimaryInteractiveDefault: 'var(--lightmode-blue-solid-9)', - actionPrimaryInteractiveHovered: 'var(--lightmode-blue-solid-10)', - actionPrimaryInteractivePressed: 'var(--lightmode-blue-solid-11)', - actionPrimaryInteractiveDepressed: 'var(--lightmode-blue-solid-12)', - actionPrimarySuccessHovered: 'var(--lightmode-green-solid-10)', - actionSecondaryBasicDefault: 'var(--lightmode-violet-solid-3)', - actionPrimaryCriticalPressed: 'var(--lightmode-red-solid-11)', - actionPrimaryCriticalDepressed: 'var(--lightmode-red-solid-12)', - actionSecondaryDisabled: 'var(--lightmode-gray-slate-solid-3)', - actionPrimarySuccessPressed: 'var(--lightmode-green-solid-11)', - actionSecondaryInteractiveDepressed: 'var(--lightmode-blue-solid-6)', - actionSecondarySuccessDepressed: 'var(--lightmode-green-solid-6)', - actionSecondarySuccessPressed: 'var(--lightmode-green-solid-5)', - actionPrimarySuccessDepressed: 'var(--lightmode-green-solid-12)', - actionSecondaryInteractiveHovered: 'var(--lightmode-blue-solid-4)', - actionSecondaryNeutralDefault: 'var(--lightmode-gray-slate-solid-1)', - actionSecondaryInteractivePressed: 'var(--lightmode-blue-solid-5)', - actionSecondarySuccessHovered: 'var(--lightmode-green-solid-4)', - actionSecondarySuccessDefault: 'var(--lightmode-green-solid-3)', - actionSecondaryInteractiveDefault: 'var(--lightmode-blue-solid-3)', - actionSecondaryNeutralHovered: 'var(--lightmode-gray-slate-solid-2)', - actionSecondaryNeutralPressed: 'var(--lightmode-gray-slate-solid-5)', - actionSecondaryBasicDepressed: 'var(--lightmode-violet-solid-6)', - actionSecondaryBasicHovered: 'var(--lightmode-violet-solid-4)', - actionSecondaryBasicPressed: 'var(--lightmode-violet-solid-5)', - actionSecondaryNeutralDepressed: 'var(--lightmode-gray-slate-solid-6)', - actionTertiaryBasicHover: 'var(--lightmode-violet-alpha-2)', - lightmodeIndigoAlpha1: '#05058203', - actionTertiaryInteractiveHover: 'var(--lightmode-blue-alpha-2)', - lightmodeIndigoAlpha2: '#054CFF08', - actionTertiarySuccessHover: 'var(--lightmode-green-alpha-2)', - actionTertiaryCriticalHover: 'var(--lightmode-red-alpha-2)', - lightmodeIndigoAlpha3: '#0144FF0F', - lightmodeIndigoAlpha4: '#0247F51A', - lightmodeIndigoAlpha5: '#023CEB26', - lightmodeIndigoAlpha6: '#013DE438', - lightmodeIndigoAlpha7: '#0038E052', - lightmodeIndigoAlpha8: '#0134DB73', - lightmodeIndigoAlpha9: '#0031D2C2', - backgroundSubdued: 'var(--lightmode-indigo-solid-2)', - backgroundDark: 'var(--lightmode-indigo-solid-12)', - backgroundDefault: 'var(--lightmode-indigo-solid-3)', - surfaceDefault: 'var(--lightmode-pure-white)', - lightmodeIndigoAlpha10: '#002CBDC4', - surfaceSubdued: 'var(--lightmode-gray-slate-solid-2)', - lightmodeIndigoAlpha11: '#00259ECC', - surfaceSelected: 'var(--lightmode-blue-solid-2)', - lightmodeIndigoAlpha12: '#000E3AF0', - surfaceWarning: 'var(--lightmode-amber-solid-2)', - surfaceCritical: 'var(--lightmode-red-solid-2)', - lightmodeBlueAlpha1: '#0582FF05', - lightmodeBlueAlpha2: '#0582FF0A', - surfaceSuccess: 'var(--lightmode-green-solid-2)', - surfaceHighlightSubdued: 'var(--lightmode-violet-solid-2)', - lightmodeBlueAlpha3: '#0280FF12', - lightmodeBlueAlpha4: '#0180FF1F', - surfaceInteractive: 'var(--lightmode-blue-solid-2)', - surfaceHighlightDefault: 'var(--lightmode-violet-solid-4)', - lightmodeBlueAlpha5: '#0180EF30', - surfaceHighlightHovered: 'var(--lightmode-violet-solid-6)', - lightmodeBlueAlpha6: '#0177E647', - lightmodeBlueAlpha7: '#0077DF69', - lightmodeBlueAlpha8: '#0082E6A1', - lightmodeBlueAlpha9: '#0091FFFA', - lightmodeBlueAlpha10: '#0080F1FA', - lightmodeBlueAlpha11: '#0066DBFA', - lightmodeBlueAlpha12: '#002149FA', - lightmodeVioletAlpha1: '#5805AB03', - lightmodeVioletAlpha2: '#3705FF05', - lightmodeVioletAlpha3: '#3C00FF0D', - lightmodeVioletAlpha4: '#2E02F417', - lightmodeVioletAlpha5: '#2F01E821', - lightmodeVioletAlpha6: '#2A01DF30', - lightmodeVioletAlpha7: '#2B01D447', - lightmodeVioletAlpha8: '#2A00D066', - lightmodeVioletAlpha9: '#2500B6A8', - lightmodeVioletAlpha10: '#1F00A5B0', - lightmodeVioletAlpha11: '#180091BA', - lightmodeVioletAlpha12: '#0E003DED', - lightmodeGraySlateAlpha1: '#05448205', - lightmodeGraySlateAlpha2: '#05294D08', - lightmodeGraySlateAlpha3: '#0025490D', - lightmodeGraySlateAlpha4: '#021C3714', - lightmodeGraySlateAlpha5: '#0217351A', - lightmodeGraySlateAlpha6: '#01213921', - lightmodeGraySlateAlpha7: '#001A3329', - lightmodeGraySlateAlpha8: '#011E323D', - lightmodeGraySlateAlpha9: '#00111E78', - lightmodeGraySlateAlpha10: '#00101B82', - lightmodeGraySlateAlpha11: '#000E1896', - lightmodeGraySlateAlpha12: '#00080CED', - lightmodeGreenAlpha1: '#05C04305', - lightmodeGreenAlpha2: '#00C43B0D', - lightmodeGreenAlpha3: '#02BA3C17', - lightmodeGreenAlpha4: '#01A63521', - lightmodeGreenAlpha5: '#009B3633', - lightmodeGreenAlpha6: '#0193364A', - lightmodeGreenAlpha7: '#008C3D6E', - lightmodeGreenAlpha8: '#00934CA3', - lightmodeGreenAlpha9: '#008F4ACF', - lightmodeGreenAlpha10: '#008346D6', - lightmodeGreenAlpha11: '#006B3BE8', - lightmodeGreenAlpha12: '#002012EB', - lightmodeAmberAlpha1: '#C0820505', - lightmodeAmberAlpha2: '#FFAB0212', - lightmodeAmberAlpha3: '#FFBB012B', - lightmodeAmberAlpha4: '#FFB70042', - lightmodeAmberAlpha5: '#FFB3005E', - lightmodeAmberAlpha6: '#FFA20178', - lightmodeAmberAlpha7: '#EC8D009C', - lightmodeAmberAlpha8: '#EA8900D4', - lightmodeAmberAlpha9: '#FFA600DB', - lightmodeAmberAlpha10: '#FF9500E3', - lightmodeAmberAlpha11: '#AB5300FA', - lightmodeAmberAlpha12: '#481800F5', - lightmodeRedAlpha1: '#FF050503', - lightmodeRedAlpha2: '#FF050508', - lightmodeRedAlpha3: '#FF01010F', - lightmodeRedAlpha4: '#FF00001A', - lightmodeRedAlpha5: '#F2000026', - lightmodeRedAlpha6: '#E4010138', - lightmodeRedAlpha7: '#D9000452', - lightmodeRedAlpha8: '#D1000470', - lightmodeRedAlpha9: '#DB0007B8', - lightmodeRedAlpha10: '#D10007C2', - lightmodeRedAlpha11: '#C30007D4', - lightmodeRedAlpha12: '#280003ED', + textDisabled: 'var(--base-gray-slate-solid-9)', + textCritical: 'var(--base-red-solid-11)', + textWarning: 'var(--base-amber-solid-11)', + textSuccess: 'var(--base-green-solid-11)', + textHighlight: 'var(--base-violet-solid-11)', + textInteractive: 'var(--base-blue-solid-11)', + textOnBGDisabled: 'var(--base-gray-slate-solid-9)', + textOnBGDefault: 'var(--base-gray-slate-solid-1)', + borderDefault: 'var(--base-gray-slate-solid-8)', + borderSubdued: 'var(--base-gray-slate-solid-7)', + borderDisabled: 'var(--base-gray-slate-solid-6)', + borderCriticalDefault: 'var(--base-red-solid-8)', + borderCriticalDisabled: 'var(--base-red-solid-7)', + borderCriticalSubdued: 'var(--base-red-solid-6)', + borderSuccessDefault: 'var(--base-green-solid-8)', + borderSuccessSubdued: 'var(--base-green-solid-7)', + borderWarningDefault: 'var(--base-amber-solid-8)', + borderWarningSubdued: 'var(--base-amber-solid-7)', + borderHighlightDefault: 'var(--base-violet-solid-8)', + borderHighlightSubdued: 'var(--base-violet-solid-7)', + borderHighlightOnBGDefault: 'var(--base-violet-solid-7)', + borderHighlightOnBGSubdued: 'var(--base-violet-solid-9)', + borderInteractiveDefault: 'var(--base-blue-solid-8)', + borderInteractiveFocused: 'var(--base-blue-solid-7)', + iconDefault: 'var(--base-gray-slate-solid-11)', + iconSubdued: 'var(--base-gray-slate-solid-10)', + iconDisabled: 'var(--base-gray-slate-solid-9)', + iconCritical: 'var(--base-red-solid-10)', + iconWarning: 'var(--base-amber-solid-10)', + actionPrimaryBasicDefault: 'var(--base-violet-solid-9)', + actionPrimaryBasicHovered: 'var(--base-violet-solid-10)', + iconSuccess: 'var(--base-green-solid-10)', + actionPrimaryBasicPressed: 'var(--base-violet-solid-11)', + iconHighlight: 'var(--base-violet-solid-10)', + iconInteractive: 'var(--base-indigo-solid-11)', + actionPrimaryBasicDepressed: 'var(--base-violet-solid-12)', + iconOnBGDefault: 'var(--base-gray-slate-solid-1)', + iconOnBGSubdued: 'var(--base-gray-slate-solid-4)', + actionPrimaryDisabled: 'var(--base-gray-slate-solid-9)', + actionPrimaryCriticalDefault: 'var(--base-red-solid-9)', + iconOnBGDisabled: 'var(--base-gray-slate-solid-9)', + actionPrimaryCriticalHovered: 'var(--base-red-solid-10)', + actionPrimarySuccessDefault: 'var(--base-green-solid-9)', + actionSecondaryCriticalPressed: 'var(--base-red-solid-5)', + actionSecondaryCriticalHovered: 'var(--base-red-solid-4)', + actionSecondaryCriticalDepressed: 'var(--base-red-solid-6)', + actionPrimaryInteractiveDefault: 'var(--base-blue-solid-9)', + actionSecondaryCriticalDefault: 'var(--base-red-solid-3)', + actionPrimaryInteractiveHovered: 'var(--base-blue-solid-10)', + actionPrimaryInteractivePressed: 'var(--base-blue-solid-11)', + actionPrimaryInteractiveDepressed: 'var(--base-blue-solid-12)', + actionPrimarySuccessHovered: 'var(--base-green-solid-10)', + actionSecondaryBasicDefault: 'var(--base-violet-solid-3)', + actionPrimaryCriticalPressed: 'var(--base-red-solid-11)', + actionPrimaryCriticalDepressed: 'var(--base-red-solid-12)', + actionPrimarySuccessPressed: 'var(--base-green-solid-11)', + actionSecondaryDisabled: 'var(--base-gray-slate-solid-3)', + actionSecondaryInteractivePressed: 'var(--base-blue-solid-5)', + actionPrimarySuccessDepressed: 'var(--base-green-solid-12)', + actionSecondaryNeutralDefault: 'var(--base-gray-slate-solid-1)', + actionSecondaryInteractiveDepressed: 'var(--base-blue-solid-6)', + actionSecondaryInteractiveHovered: 'var(--base-blue-solid-4)', + actionSecondarySuccessPressed: 'var(--base-green-solid-5)', + actionSecondarySuccessDepressed: 'var(--base-green-solid-6)', + actionSecondarySuccessHovered: 'var(--base-green-solid-4)', + actionSecondarySuccessDefault: 'var(--base-green-solid-3)', + actionSecondaryNeutralHovered: 'var(--base-gray-slate-solid-2)', + actionSecondaryInteractiveDefault: 'var(--base-blue-solid-3)', + actionSecondaryBasicHovered: 'var(--base-violet-solid-4)', + actionSecondaryNeutralPressed: 'var(--base-gray-slate-solid-5)', + actionSecondaryBasicDepressed: 'var(--base-violet-solid-6)', + actionSecondaryBasicPressed: 'var(--base-violet-solid-5)', + actionSecondaryNeutralDepressed: 'var(--base-gray-slate-solid-6)', + actionTertiaryBasicHover: 'var(--base-violet-alpha-2)', + baseIndigoAlpha1: '#05058203', + actionTertiaryInteractiveHover: 'var(--base-blue-alpha-2)', + actionTertiarySuccessHover: 'var(--base-green-alpha-2)', + baseIndigoAlpha2: '#054CFF08', + actionTertiaryCriticalHover: 'var(--base-red-alpha-2)', + baseIndigoAlpha3: '#0144FF0F', + baseIndigoAlpha4: '#0247F51A', + baseIndigoAlpha5: '#023CEB26', + backgroundAlphaDark: 'var(--base-indigo-alpha-12)', + baseIndigoAlpha6: '#013DE438', + baseIndigoAlpha7: '#0038E052', + baseIndigoAlpha8: '#0134DB73', + baseIndigoAlpha9: '#0031D2C2', + backgroundSolidSubdued: 'var(--base-indigo-solid-2)', + backgroundSolidDark: 'var(--base-indigo-solid-12)', + backgroundSolidDefault: 'var(--base-indigo-solid-3)', + surfaceDefault: 'var(--base-pure-white)', + surfaceSubdued: 'var(--base-gray-slate-solid-2)', + baseIndigoAlpha10: '#002CBDC4', + surfaceSelected: 'var(--base-blue-solid-2)', + baseIndigoAlpha11: '#00259ECC', + surfaceWarning: 'var(--base-amber-solid-2)', + baseIndigoAlpha12: '#000E3AF0', + baseBlueAlpha1: '#0582FF05', + surfaceCritical: 'var(--base-red-solid-2)', + surfaceSuccess: 'var(--base-green-solid-2)', + baseBlueAlpha2: '#0582FF0A', + surfaceHighlightSubdued: 'var(--base-violet-solid-2)', + baseBlueAlpha3: '#0280FF12', + surfaceInteractive: 'var(--base-blue-solid-2)', + baseBlueAlpha4: '#0180FF1F', + surfaceHighlightDefault: 'var(--base-violet-solid-4)', + baseBlueAlpha5: '#0180EF30', + baseBlueAlpha6: '#0177E647', + surfaceHighlightHovered: 'var(--base-violet-solid-6)', + baseBlueAlpha7: '#0077DF69', + baseBlueAlpha8: '#0082E6A1', + baseBlueAlpha9: '#0091FFFA', + baseBlueAlpha10: '#0080F1FA', + baseBlueAlpha11: '#0066DBFA', + baseBlueAlpha12: '#002149FA', + baseVioletAlpha1: '#5805AB03', + baseVioletAlpha2: '#3705FF05', + baseVioletAlpha3: '#3C00FF0D', + baseVioletAlpha4: '#2E02F417', + baseVioletAlpha5: '#2F01E821', + baseVioletAlpha6: '#2A01DF30', + baseVioletAlpha7: '#2B01D447', + baseVioletAlpha8: '#2A00D066', + baseVioletAlpha9: '#2500B6A8', + baseVioletAlpha10: '#1F00A5B0', + baseVioletAlpha11: '#180091BA', + baseVioletAlpha12: '#0E003DED', + baseGraySlateAlpha1: '#05448205', + baseGraySlateAlpha2: '#05294D08', + baseGraySlateAlpha3: '#0025490D', + baseGraySlateAlpha4: '#021C3714', + baseGraySlateAlpha5: '#0217351A', + baseGraySlateAlpha6: '#01213921', + baseGraySlateAlpha7: '#001A3329', + baseGraySlateAlpha8: '#011E323D', + baseGraySlateAlpha9: '#00111E78', + baseGraySlateAlpha10: '#00101B82', + baseGraySlateAlpha11: '#000E1896', + baseGraySlateAlpha12: '#00080CED', + baseGreenAlpha1: '#05C04305', + baseGreenAlpha2: '#00C43B0D', + baseGreenAlpha3: '#02BA3C17', + baseGreenAlpha4: '#01A63521', + baseGreenAlpha5: '#009B3633', + baseGreenAlpha6: '#0193364A', + baseGreenAlpha7: '#008C3D6E', + baseGreenAlpha8: '#00934CA3', + baseGreenAlpha9: '#008F4ACF', + baseGreenAlpha10: '#008346D6', + baseGreenAlpha11: '#006B3BE8', + baseGreenAlpha12: '#002012EB', + baseAmberAlpha1: '#C0820505', + baseAmberAlpha2: '#FFAB0212', + baseAmberAlpha3: '#FFBB012B', + baseAmberAlpha4: '#FFB70042', + baseAmberAlpha5: '#FFB3005E', + baseAmberAlpha6: '#FFA20178', + baseAmberAlpha7: '#EC8D009C', + baseAmberAlpha8: '#EA8900D4', + baseAmberAlpha9: '#FFA600DB', + baseAmberAlpha10: '#FF9500E3', + baseAmberAlpha11: '#AB5300FA', + baseAmberAlpha12: '#481800F5', + baseRedAlpha1: '#FF050503', + baseRedAlpha2: '#FF050508', + baseRedAlpha3: '#FF01010F', + baseRedAlpha4: '#FF00001A', + baseRedAlpha5: '#F2000026', + baseRedAlpha6: '#E4010138', + baseRedAlpha7: '#D9000452', + baseRedAlpha8: '#D1000470', + baseRedAlpha9: '#DB0007B8', + baseRedAlpha10: '#D10007C2', + baseRedAlpha11: '#C30007D4', + baseRedAlpha12: '#280003ED', mapareadistrictDefault: 'var(--surface-highlight-default)', mapareadistrictHover: 'var(--action-secondary-success-hovered)', mapareadistrictSelected: 'var(--action-primary-basic-default)', mapareadistrictDisabled: 'var(--action-primary-disabled)', - mapareadistrictBorder: 'var(--lightmode-gray-slate-solid-9)', + mapareadistrictBorder: 'var(--base-gray-slate-solid-9)', borderFocus: '#FFFFFF03', + transparent: '#FFFFFF00', + borderOnBGSubdued: 'var(--base-gray-slate-solid-11)', }; diff --git a/packages/opub-viz/styles/tokens/tokens.json b/packages/opub-viz/styles/tokens/tokens.json deleted file mode 100644 index 296b8933..00000000 --- a/packages/opub-viz/styles/tokens/tokens.json +++ /dev/null @@ -1,3009 +0,0 @@ -{ - "collections": [ - { - "name": "Colors", - "modes": [ - { - "name": "Mode 1", - "variables": [ - { - "name": "lightmode/indigo/solid/1", - "type": "color", - "isAlias": false, - "value": "#FDFDFE" - }, - { - "name": "lightmode/indigo/solid/2", - "type": "color", - "isAlias": false, - "value": "#F8FAFF" - }, - { - "name": "lightmode/indigo/solid/3", - "type": "color", - "isAlias": false, - "value": "#F0F4FF" - }, - { - "name": "lightmode/indigo/solid/4", - "type": "color", - "isAlias": false, - "value": "#E6EDFE" - }, - { - "name": "lightmode/indigo/solid/5", - "type": "color", - "isAlias": false, - "value": "#D9E2FC" - }, - { - "name": "lightmode/indigo/solid/6", - "type": "color", - "isAlias": false, - "value": "#C6D4F9" - }, - { - "name": "lightmode/indigo/solid/7", - "type": "color", - "isAlias": false, - "value": "#AEC0F5" - }, - { - "name": "lightmode/indigo/solid/8", - "type": "color", - "isAlias": false, - "value": "#8DA4EF" - }, - { - "name": "lightmode/indigo/solid/9", - "type": "color", - "isAlias": false, - "value": "#3E63DD" - }, - { - "name": "lightmode/indigo/solid/10", - "type": "color", - "isAlias": false, - "value": "#3A5CCC" - }, - { - "name": "lightmode/indigo/solid/11", - "type": "color", - "isAlias": false, - "value": "#3451B2" - }, - { - "name": "lightmode/indigo/solid/12", - "type": "color", - "isAlias": false, - "value": "#101D46" - }, - { - "name": "lightmode/blue/solid/1", - "type": "color", - "isAlias": false, - "value": "#FBFDFF" - }, - { - "name": "lightmode/blue/solid/2", - "type": "color", - "isAlias": false, - "value": "#F5FAFF" - }, - { - "name": "lightmode/blue/solid/3", - "type": "color", - "isAlias": false, - "value": "#EDF6FF" - }, - { - "name": "lightmode/blue/solid/4", - "type": "color", - "isAlias": false, - "value": "#E1F0FF" - }, - { - "name": "lightmode/blue/solid/5", - "type": "color", - "isAlias": false, - "value": "#CEE7FE" - }, - { - "name": "lightmode/blue/solid/6", - "type": "color", - "isAlias": false, - "value": "#B7D9F8" - }, - { - "name": "lightmode/blue/solid/7", - "type": "color", - "isAlias": false, - "value": "#96C7F2" - }, - { - "name": "lightmode/blue/solid/8", - "type": "color", - "isAlias": false, - "value": "#5EB0EF" - }, - { - "name": "lightmode/blue/solid/9", - "type": "color", - "isAlias": false, - "value": "#0091FF" - }, - { - "name": "lightmode/blue/solid/10", - "type": "color", - "isAlias": false, - "value": "#0081F1" - }, - { - "name": "lightmode/blue/solid/11", - "type": "color", - "isAlias": false, - "value": "#006ADC" - }, - { - "name": "lightmode/blue/solid/12", - "type": "color", - "isAlias": false, - "value": "#00254D" - }, - { - "name": "lightmode/violet/solid/1", - "type": "color", - "isAlias": false, - "value": "#FDFCFE" - }, - { - "name": "lightmode/violet/solid/2", - "type": "color", - "isAlias": false, - "value": "#FBFAFF" - }, - { - "name": "lightmode/violet/solid/3", - "type": "color", - "isAlias": false, - "value": "#F5F2FF" - }, - { - "name": "lightmode/violet/solid/4", - "type": "color", - "isAlias": false, - "value": "#EDE9FE" - }, - { - "name": "lightmode/violet/solid/5", - "type": "color", - "isAlias": false, - "value": "#E4DEFC" - }, - { - "name": "lightmode/violet/solid/6", - "type": "color", - "isAlias": false, - "value": "#D7CFF9" - }, - { - "name": "lightmode/violet/solid/7", - "type": "color", - "isAlias": false, - "value": "#C4B8F3" - }, - { - "name": "lightmode/violet/solid/8", - "type": "color", - "isAlias": false, - "value": "#AA99EC" - }, - { - "name": "lightmode/violet/solid/9", - "type": "color", - "isAlias": false, - "value": "#6E56CF" - }, - { - "name": "lightmode/violet/solid/10", - "type": "color", - "isAlias": false, - "value": "#644FC1" - }, - { - "name": "lightmode/violet/solid/11", - "type": "color", - "isAlias": false, - "value": "#5746AF" - }, - { - "name": "lightmode/violet/solid/12", - "type": "color", - "isAlias": false, - "value": "#20134B" - }, - { - "name": "lightmode/gray/slate/solid/1", - "type": "color", - "isAlias": false, - "value": "#FBFCFD" - }, - { - "name": "lightmode/gray/slate/solid/2", - "type": "color", - "isAlias": false, - "value": "#F8F9FA" - }, - { - "name": "lightmode/gray/slate/solid/3", - "type": "color", - "isAlias": false, - "value": "#F1F3F5" - }, - { - "name": "lightmode/gray/slate/solid/4", - "type": "color", - "isAlias": false, - "value": "#ECEEF0" - }, - { - "name": "lightmode/gray/slate/solid/5", - "type": "color", - "isAlias": false, - "value": "#E6E8EB" - }, - { - "name": "lightmode/gray/slate/solid/6", - "type": "color", - "isAlias": false, - "value": "#DFE3E6" - }, - { - "name": "lightmode/gray/slate/solid/7", - "type": "color", - "isAlias": false, - "value": "#D7DBDF" - }, - { - "name": "lightmode/gray/slate/solid/8", - "type": "color", - "isAlias": false, - "value": "#C1C8CD" - }, - { - "name": "lightmode/gray/slate/solid/9", - "type": "color", - "isAlias": false, - "value": "#889096" - }, - { - "name": "lightmode/gray/slate/solid/10", - "type": "color", - "isAlias": false, - "value": "#7E868C" - }, - { - "name": "lightmode/gray/slate/solid/11", - "type": "color", - "isAlias": false, - "value": "#687076" - }, - { - "name": "lightmode/gray/slate/solid/12", - "type": "color", - "isAlias": false, - "value": "#11181C" - }, - { - "name": "lightmode/red/solid/1", - "type": "color", - "isAlias": false, - "value": "#FFFCFC" - }, - { - "name": "lightmode/red/solid/2", - "type": "color", - "isAlias": false, - "value": "#FFF8F8" - }, - { - "name": "lightmode/red/solid/3", - "type": "color", - "isAlias": false, - "value": "#FFEFEF" - }, - { - "name": "lightmode/red/solid/4", - "type": "color", - "isAlias": false, - "value": "#FFE5E5" - }, - { - "name": "lightmode/red/solid/5", - "type": "color", - "isAlias": false, - "value": "#FDD8D8" - }, - { - "name": "lightmode/red/solid/6", - "type": "color", - "isAlias": false, - "value": "#F9C6C6" - }, - { - "name": "lightmode/red/solid/7", - "type": "color", - "isAlias": false, - "value": "#F3AEAF" - }, - { - "name": "lightmode/red/solid/8", - "type": "color", - "isAlias": false, - "value": "#EB9091" - }, - { - "name": "lightmode/red/solid/9", - "type": "color", - "isAlias": false, - "value": "#E5484D" - }, - { - "name": "lightmode/red/solid/10", - "type": "color", - "isAlias": false, - "value": "#DC3D43" - }, - { - "name": "lightmode/red/solid/11", - "type": "color", - "isAlias": false, - "value": "#CD2B31" - }, - { - "name": "lightmode/red/solid/12", - "type": "color", - "isAlias": false, - "value": "#381316" - }, - { - "name": "lightmode/green/solid/1", - "type": "color", - "isAlias": false, - "value": "#FBFEFC" - }, - { - "name": "lightmode/green/solid/2", - "type": "color", - "isAlias": false, - "value": "#F2FCF5" - }, - { - "name": "lightmode/green/solid/3", - "type": "color", - "isAlias": false, - "value": "#E9F9EE" - }, - { - "name": "lightmode/green/solid/4", - "type": "color", - "isAlias": false, - "value": "#DDF3E4" - }, - { - "name": "lightmode/green/solid/5", - "type": "color", - "isAlias": false, - "value": "#CCEBD7" - }, - { - "name": "lightmode/green/solid/6", - "type": "color", - "isAlias": false, - "value": "#B4DFC4" - }, - { - "name": "lightmode/green/solid/7", - "type": "color", - "isAlias": false, - "value": "#92CEAC" - }, - { - "name": "lightmode/green/solid/8", - "type": "color", - "isAlias": false, - "value": "#5BB98C" - }, - { - "name": "lightmode/green/solid/9", - "type": "color", - "isAlias": false, - "value": "#30A46C" - }, - { - "name": "lightmode/green/solid/10", - "type": "color", - "isAlias": false, - "value": "#299764" - }, - { - "name": "lightmode/green/solid/11", - "type": "color", - "isAlias": false, - "value": "#18794E" - }, - { - "name": "lightmode/green/solid/12", - "type": "color", - "isAlias": false, - "value": "#153226" - }, - { - "name": "lightmode/amber/solid/1", - "type": "color", - "isAlias": false, - "value": "#FEFDFB" - }, - { - "name": "lightmode/amber/solid/2", - "type": "color", - "isAlias": false, - "value": "#FFF9ED" - }, - { - "name": "lightmode/amber/solid/3", - "type": "color", - "isAlias": false, - "value": "#FFF4D5" - }, - { - "name": "lightmode/amber/solid/4", - "type": "color", - "isAlias": false, - "value": "#FFECBC" - }, - { - "name": "lightmode/amber/solid/5", - "type": "color", - "isAlias": false, - "value": "#FFE3A2" - }, - { - "name": "lightmode/amber/solid/6", - "type": "color", - "isAlias": false, - "value": "#FFD386" - }, - { - "name": "lightmode/amber/solid/7", - "type": "color", - "isAlias": false, - "value": "#F3BA63" - }, - { - "name": "lightmode/amber/solid/8", - "type": "color", - "isAlias": false, - "value": "#EE9D2B" - }, - { - "name": "lightmode/amber/solid/9", - "type": "color", - "isAlias": false, - "value": "#FFB224" - }, - { - "name": "lightmode/amber/solid/10", - "type": "color", - "isAlias": false, - "value": "#FFA01C" - }, - { - "name": "lightmode/amber/solid/11", - "type": "color", - "isAlias": false, - "value": "#AD5700" - }, - { - "name": "lightmode/amber/solid/12", - "type": "color", - "isAlias": false, - "value": "#4E2009" - }, - { - "name": "lightmode/Pure/White", - "type": "color", - "isAlias": false, - "value": "#FFFFFF" - }, - { - "name": "lightmode/Pure/Black", - "type": "color", - "isAlias": false, - "value": "#000000" - }, - { - "name": "Text/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/12" - } - }, - { - "name": "Text/Subdued", - "type": "color", - "isAlias": false, - "value": "#3E4346" - }, - { - "name": "Text/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/9" - } - }, - { - "name": "Text/Critical", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/11" - } - }, - { - "name": "Text/Warning", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/amber/solid/11" - } - }, - { - "name": "Text/Success", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/11" - } - }, - { - "name": "Text/Highlight", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/11" - } - }, - { - "name": "Text/Interactive", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/11" - } - }, - { - "name": "Text/OnBG/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/6" - } - }, - { - "name": "Text/OnBG/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/Pure/White" - } - }, - { - "name": "Border/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/8" - } - }, - { - "name": "Border/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/7" - } - }, - { - "name": "Border/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/6" - } - }, - { - "name": "Border/Critical/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/8" - } - }, - { - "name": "Border/Critical/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/7" - } - }, - { - "name": "Border/Critical/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/6" - } - }, - { - "name": "Border/Success/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/8" - } - }, - { - "name": "Border/Success/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/7" - } - }, - { - "name": "Border/Warning/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/amber/solid/8" - } - }, - { - "name": "Border/Warning/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/amber/solid/7" - } - }, - { - "name": "Border/Highlight/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/8" - } - }, - { - "name": "Border/Highlight/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/7" - } - }, - { - "name": "Border/Interactive/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/8" - } - }, - { - "name": "Border/Interactive/Focused", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/7" - } - }, - { - "name": "Icon/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/11" - } - }, - { - "name": "Icon/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/10" - } - }, - { - "name": "Icon/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/9" - } - }, - { - "name": "Icon/Critical", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/10" - } - }, - { - "name": "Icon/Warning", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/amber/solid/10" - } - }, - { - "name": "Action/Primary/Basic/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/9" - } - }, - { - "name": "Action/Primary/Basic/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/10" - } - }, - { - "name": "Icon/Success", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/10" - } - }, - { - "name": "Action/Primary/Basic/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/11" - } - }, - { - "name": "Icon/Highlight", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/10" - } - }, - { - "name": "Action/Primary/Basic/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/12" - } - }, - { - "name": "Icon/Interactive", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/indigo/solid/11" - } - }, - { - "name": "Action/Primary/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/9" - } - }, - { - "name": "Action/Primary/Critical/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/9" - } - }, - { - "name": "Action/Primary/Critical/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/10" - } - }, - { - "name": "Action/Primary/Success/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/9" - } - }, - { - "name": "Action/Secondary/Critical/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/5" - } - }, - { - "name": "Action/Secondary/Critical/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/4" - } - }, - { - "name": "Action/Secondary/Critical/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/6" - } - }, - { - "name": "Action/Primary/Interactive/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/9" - } - }, - { - "name": "Action/Secondary/Critical/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/3" - } - }, - { - "name": "Action/Primary/Interactive/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/10" - } - }, - { - "name": "Action/Primary/Interactive/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/11" - } - }, - { - "name": "Action/Primary/Interactive/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/12" - } - }, - { - "name": "Action/Secondary/Basic/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/3" - } - }, - { - "name": "Action/Primary/Critical/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/11" - } - }, - { - "name": "Action/Primary/Success/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/10" - } - }, - { - "name": "Action/Primary/Critical/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/12" - } - }, - { - "name": "Action/Secondary/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/3" - } - }, - { - "name": "Action/Primary/Success/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/11" - } - }, - { - "name": "Action/Secondary/Interactive/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/4" - } - }, - { - "name": "Action/Secondary/Success/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/5" - } - }, - { - "name": "Action/Secondary/Success/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/4" - } - }, - { - "name": "Action/Secondary/Interactive/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/6" - } - }, - { - "name": "Action/Primary/Success/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/12" - } - }, - { - "name": "Action/Secondary/Interactive/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/5" - } - }, - { - "name": "Action/Secondary/Success/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/6" - } - }, - { - "name": "Action/Secondary/Success/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/3" - } - }, - { - "name": "Action/Secondary/Interactive/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/3" - } - }, - { - "name": "Action/Secondary/Basic/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/5" - } - }, - { - "name": "Action/Secondary/Basic/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/4" - } - }, - { - "name": "Action/Secondary/Basic/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/6" - } - }, - { - "name": "lightmode/indigo/alpha/1", - "type": "color", - "isAlias": false, - "value": "#05058203" - }, - { - "name": "lightmode/indigo/alpha/2", - "type": "color", - "isAlias": false, - "value": "#054CFF08" - }, - { - "name": "lightmode/indigo/alpha/3", - "type": "color", - "isAlias": false, - "value": "#0144FF0F" - }, - { - "name": "lightmode/indigo/alpha/4", - "type": "color", - "isAlias": false, - "value": "#0247F51A" - }, - { - "name": "lightmode/indigo/alpha/5", - "type": "color", - "isAlias": false, - "value": "#023CEB26" - }, - { - "name": "lightmode/indigo/alpha/6", - "type": "color", - "isAlias": false, - "value": "#013DE438" - }, - { - "name": "lightmode/indigo/alpha/7", - "type": "color", - "isAlias": false, - "value": "#0038E052" - }, - { - "name": "lightmode/indigo/alpha/8", - "type": "color", - "isAlias": false, - "value": "#0134DB73" - }, - { - "name": "lightmode/indigo/alpha/9", - "type": "color", - "isAlias": false, - "value": "#0031D2C2" - }, - { - "name": "Background/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/indigo/solid/2" - } - }, - { - "name": "Background/Dark", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/indigo/solid/12" - } - }, - { - "name": "Background/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/indigo/solid/3" - } - }, - { - "name": "Surface/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/Pure/White" - } - }, - { - "name": "Surface/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/2" - } - }, - { - "name": "lightmode/indigo/alpha/10", - "type": "color", - "isAlias": false, - "value": "#002CBDC4" - }, - { - "name": "lightmode/indigo/alpha/11", - "type": "color", - "isAlias": false, - "value": "#00259ECC" - }, - { - "name": "Surface/Selected", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/2" - } - }, - { - "name": "Surface/Warning", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/amber/solid/2" - } - }, - { - "name": "lightmode/indigo/alpha/12", - "type": "color", - "isAlias": false, - "value": "#000E3AF0" - }, - { - "name": "Surface/Critical", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/red/solid/2" - } - }, - { - "name": "lightmode/blue/alpha/1", - "type": "color", - "isAlias": false, - "value": "#0582FF05" - }, - { - "name": "Surface/Success", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/green/solid/2" - } - }, - { - "name": "lightmode/blue/alpha/2", - "type": "color", - "isAlias": false, - "value": "#0582FF0A" - }, - { - "name": "lightmode/blue/alpha/3", - "type": "color", - "isAlias": false, - "value": "#0280FF12" - }, - { - "name": "Surface/Highlight/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/2" - } - }, - { - "name": "lightmode/blue/alpha/4", - "type": "color", - "isAlias": false, - "value": "#0180FF1F" - }, - { - "name": "Surface/Interactive", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/blue/solid/2" - } - }, - { - "name": "lightmode/blue/alpha/5", - "type": "color", - "isAlias": false, - "value": "#0180EF30" - }, - { - "name": "Surface/Highlight/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/4" - } - }, - { - "name": "lightmode/blue/alpha/6", - "type": "color", - "isAlias": false, - "value": "#0177E647" - }, - { - "name": "Surface/Highlight/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/violet/solid/6" - } - }, - { - "name": "lightmode/blue/alpha/7", - "type": "color", - "isAlias": false, - "value": "#0077DF69" - }, - { - "name": "lightmode/blue/alpha/8", - "type": "color", - "isAlias": false, - "value": "#0082E6A1" - }, - { - "name": "lightmode/blue/alpha/9", - "type": "color", - "isAlias": false, - "value": "#0091FFFA" - }, - { - "name": "lightmode/blue/alpha/10", - "type": "color", - "isAlias": false, - "value": "#0080F1FA" - }, - { - "name": "lightmode/blue/alpha/11", - "type": "color", - "isAlias": false, - "value": "#0066DBFA" - }, - { - "name": "lightmode/blue/alpha/12", - "type": "color", - "isAlias": false, - "value": "#002149FA" - }, - { - "name": "lightmode/violet/alpha/1", - "type": "color", - "isAlias": false, - "value": "#5805AB03" - }, - { - "name": "lightmode/violet/alpha/2", - "type": "color", - "isAlias": false, - "value": "#3705FF05" - }, - { - "name": "lightmode/violet/alpha/3", - "type": "color", - "isAlias": false, - "value": "#3C00FF0D" - }, - { - "name": "lightmode/violet/alpha/4", - "type": "color", - "isAlias": false, - "value": "#2E02F417" - }, - { - "name": "lightmode/violet/alpha/5", - "type": "color", - "isAlias": false, - "value": "#2F01E821" - }, - { - "name": "lightmode/violet/alpha/6", - "type": "color", - "isAlias": false, - "value": "#2A01DF30" - }, - { - "name": "lightmode/violet/alpha/7", - "type": "color", - "isAlias": false, - "value": "#2B01D447" - }, - { - "name": "lightmode/violet/alpha/8", - "type": "color", - "isAlias": false, - "value": "#2A00D066" - }, - { - "name": "lightmode/violet/alpha/9", - "type": "color", - "isAlias": false, - "value": "#2500B6A8" - }, - { - "name": "lightmode/violet/alpha/10", - "type": "color", - "isAlias": false, - "value": "#1F00A5B0" - }, - { - "name": "lightmode/violet/alpha/11", - "type": "color", - "isAlias": false, - "value": "#180091BA" - }, - { - "name": "lightmode/violet/alpha/12", - "type": "color", - "isAlias": false, - "value": "#0E003DED" - }, - { - "name": "lightmode/gray/slate/alpha/1", - "type": "color", - "isAlias": false, - "value": "#05448205" - }, - { - "name": "lightmode/gray/slate/alpha/2", - "type": "color", - "isAlias": false, - "value": "#05294D08" - }, - { - "name": "lightmode/gray/slate/alpha/3", - "type": "color", - "isAlias": false, - "value": "#0025490D" - }, - { - "name": "lightmode/gray/slate/alpha/4", - "type": "color", - "isAlias": false, - "value": "#021C3714" - }, - { - "name": "lightmode/gray/slate/alpha/5", - "type": "color", - "isAlias": false, - "value": "#0217351A" - }, - { - "name": "lightmode/gray/slate/alpha/6", - "type": "color", - "isAlias": false, - "value": "#01213921" - }, - { - "name": "lightmode/gray/slate/alpha/7", - "type": "color", - "isAlias": false, - "value": "#001A3329" - }, - { - "name": "lightmode/gray/slate/alpha/8", - "type": "color", - "isAlias": false, - "value": "#011E323D" - }, - { - "name": "lightmode/gray/slate/alpha/9", - "type": "color", - "isAlias": false, - "value": "#00111E78" - }, - { - "name": "lightmode/gray/slate/alpha/10", - "type": "color", - "isAlias": false, - "value": "#00101B82" - }, - { - "name": "lightmode/gray/slate/alpha/11", - "type": "color", - "isAlias": false, - "value": "#000E1896" - }, - { - "name": "lightmode/gray/slate/alpha/12", - "type": "color", - "isAlias": false, - "value": "#00080CED" - }, - { - "name": "lightmode/green/alpha/1", - "type": "color", - "isAlias": false, - "value": "#05C04305" - }, - { - "name": "lightmode/green/alpha/2", - "type": "color", - "isAlias": false, - "value": "#00C43B0D" - }, - { - "name": "lightmode/green/alpha/3", - "type": "color", - "isAlias": false, - "value": "#02BA3C17" - }, - { - "name": "lightmode/green/alpha/4", - "type": "color", - "isAlias": false, - "value": "#01A63521" - }, - { - "name": "lightmode/green/alpha/5", - "type": "color", - "isAlias": false, - "value": "#009B3633" - }, - { - "name": "lightmode/green/alpha/6", - "type": "color", - "isAlias": false, - "value": "#0193364A" - }, - { - "name": "lightmode/green/alpha/7", - "type": "color", - "isAlias": false, - "value": "#008C3D6E" - }, - { - "name": "lightmode/green/alpha/8", - "type": "color", - "isAlias": false, - "value": "#00934CA3" - }, - { - "name": "lightmode/green/alpha/9", - "type": "color", - "isAlias": false, - "value": "#008F4ACF" - }, - { - "name": "lightmode/green/alpha/10", - "type": "color", - "isAlias": false, - "value": "#008346D6" - }, - { - "name": "lightmode/green/alpha/11", - "type": "color", - "isAlias": false, - "value": "#006B3BE8" - }, - { - "name": "lightmode/green/alpha/12", - "type": "color", - "isAlias": false, - "value": "#002012EB" - }, - { - "name": "lightmode/amber/alpha/1", - "type": "color", - "isAlias": false, - "value": "#C0820505" - }, - { - "name": "lightmode/amber/alpha/2", - "type": "color", - "isAlias": false, - "value": "#FFAB0212" - }, - { - "name": "lightmode/amber/alpha/3", - "type": "color", - "isAlias": false, - "value": "#FFBB012B" - }, - { - "name": "lightmode/amber/alpha/4", - "type": "color", - "isAlias": false, - "value": "#FFB70042" - }, - { - "name": "lightmode/amber/alpha/5", - "type": "color", - "isAlias": false, - "value": "#FFB3005E" - }, - { - "name": "lightmode/amber/alpha/6", - "type": "color", - "isAlias": false, - "value": "#FFA20178" - }, - { - "name": "lightmode/amber/alpha/7", - "type": "color", - "isAlias": false, - "value": "#EC8D009C" - }, - { - "name": "lightmode/amber/alpha/8", - "type": "color", - "isAlias": false, - "value": "#EA8900D4" - }, - { - "name": "lightmode/amber/alpha/9", - "type": "color", - "isAlias": false, - "value": "#FFA600DB" - }, - { - "name": "lightmode/amber/alpha/10", - "type": "color", - "isAlias": false, - "value": "#FF9500E3" - }, - { - "name": "lightmode/amber/alpha/11", - "type": "color", - "isAlias": false, - "value": "#AB5300FA" - }, - { - "name": "lightmode/amber/alpha/12", - "type": "color", - "isAlias": false, - "value": "#481800F5" - }, - { - "name": "lightmode/red/alpha/1", - "type": "color", - "isAlias": false, - "value": "#FF050503" - }, - { - "name": "lightmode/red/alpha/2", - "type": "color", - "isAlias": false, - "value": "#FF050508" - }, - { - "name": "lightmode/red/alpha/3", - "type": "color", - "isAlias": false, - "value": "#FF01010F" - }, - { - "name": "lightmode/red/alpha/4", - "type": "color", - "isAlias": false, - "value": "#FF00001A" - }, - { - "name": "lightmode/red/alpha/5", - "type": "color", - "isAlias": false, - "value": "#F2000026" - }, - { - "name": "lightmode/red/alpha/6", - "type": "color", - "isAlias": false, - "value": "#E4010138" - }, - { - "name": "lightmode/red/alpha/7", - "type": "color", - "isAlias": false, - "value": "#D9000452" - }, - { - "name": "lightmode/red/alpha/8", - "type": "color", - "isAlias": false, - "value": "#D1000470" - }, - { - "name": "lightmode/red/alpha/9", - "type": "color", - "isAlias": false, - "value": "#DB0007B8" - }, - { - "name": "lightmode/red/alpha/10", - "type": "color", - "isAlias": false, - "value": "#D10007C2" - }, - { - "name": "lightmode/red/alpha/11", - "type": "color", - "isAlias": false, - "value": "#C30007D4" - }, - { - "name": "lightmode/red/alpha/12", - "type": "color", - "isAlias": false, - "value": "#280003ED" - }, - { - "name": "MapAreaDistrict/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "Surface/Highlight/Default" - } - }, - { - "name": "MapAreaDistrict/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "Action/Secondary/Success/Hovered" - } - }, - { - "name": "MapAreaDistrict/Selected", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "Action/Primary/Basic/Default" - } - }, - { - "name": "MapAreaDistrict/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "Action/Primary/Disabled" - } - }, - { - "name": "MapAreaDistrict/Border", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "lightmode/gray/slate/solid/9" - } - }, - { - "name": "Border/Focus", - "type": "color", - "isAlias": false, - "value": "#FFFFFF03" - } - ] - } - ] - }, - { - "name": "Spacing / Numericals", - "modes": [ - { - "name": "Mode 1", - "variables": [ - { - "name": "space/0", - "type": "number", - "isAlias": false, - "value": 0 - }, - { - "name": "space/025", - "type": "number", - "isAlias": false, - "value": 1 - }, - { - "name": "space/05", - "type": "number", - "isAlias": false, - "value": 2 - }, - { - "name": "space/1", - "type": "number", - "isAlias": false, - "value": 4 - }, - { - "name": "space/2", - "type": "number", - "isAlias": false, - "value": 8 - }, - { - "name": "space/3", - "type": "number", - "isAlias": false, - "value": 12 - }, - { - "name": "space/4", - "type": "number", - "isAlias": false, - "value": 16 - }, - { - "name": "space/5", - "type": "number", - "isAlias": false, - "value": 20 - }, - { - "name": "space/6", - "type": "number", - "isAlias": false, - "value": 24 - }, - { - "name": "space/8", - "type": "number", - "isAlias": false, - "value": 32 - }, - { - "name": "space/10", - "type": "number", - "isAlias": false, - "value": 40 - }, - { - "name": "space/12", - "type": "number", - "isAlias": false, - "value": 48 - }, - { - "name": "space/16", - "type": "number", - "isAlias": false, - "value": 64 - }, - { - "name": "space/20", - "type": "number", - "isAlias": false, - "value": 80 - }, - { - "name": "space/24", - "type": "number", - "isAlias": false, - "value": 96 - }, - { - "name": "space/32", - "type": "number", - "isAlias": false, - "value": 128 - } - ] - } - ] - }, - { - "name": "Borders", - "modes": [ - { - "name": "Mode 1", - "variables": [ - { - "name": "border/radius/0", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/0" - } - }, - { - "name": "border/radius/05", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/05" - } - }, - { - "name": "border/radius/1", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/1" - } - }, - { - "name": "border/radius/2", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/2" - } - }, - { - "name": "border/radius/3", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/3" - } - }, - { - "name": "border/radius/4", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/4" - } - }, - { - "name": "border/radius/5", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/5" - } - }, - { - "name": "border/radius/6", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/6" - } - }, - { - "name": "border/radius/full", - "type": "number", - "isAlias": false, - "value": 9999 - }, - { - "name": "border/width/1", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/025" - } - }, - { - "name": "border/width/2", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/05" - } - }, - { - "name": "border/width/4", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/1" - } - } - ] - } - ] - }, - { - "name": "Typography", - "modes": [ - { - "name": "Style", - "variables": [ - { - "name": "Desktop Heading/4xl-Bold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 40, - "fontFamily": "Inter", - "fontWeight": "Bold", - "lineHeight": 48, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/3xl-Bold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 32, - "fontFamily": "Inter", - "fontWeight": "Bold", - "lineHeight": 40, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/2xl-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 28, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 32, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/xl-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 24, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 28, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Lg-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 20, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 26, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Md-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 24, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Sm-Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Xs-Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Sm Caps", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 2, - "letterSpacingUnit": "PIXELS", - "textCase": "UPPER", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Lg-Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 20, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 24, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Lg-Regular", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 20, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 24, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Medium/Regular", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Medium/Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Medium/Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Medium/Underline-Reg", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "UNDERLINE" - } - }, - { - "name": "Body/Large/Regular", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Large/Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Large/Underline-Reg", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "UNDERLINE" - } - }, - { - "name": "Body/Small/Regular", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Small/Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Small/Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PERCENT", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Small/bodySm- underline", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "UNDERLINE" - } - } - ] - } - ] - }, - { - "name": "Effects", - "modes": [ - { - "name": "Style", - "variables": [ - { - "name": "shadow/modal", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": 26 - }, - "radius": 80, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 1, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/layer", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 32, - "g": 42, - "b": 53, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": 31 - }, - "radius": 41, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 32, - "g": 42, - "b": 54, - "a": 0.08 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 16, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/inset/basic", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "INNER_SHADOW", - "color": { - "r": 228, - "g": 229, - "b": 231, - "a": 1 - }, - "offset": { - "x": -1, - "y": 0 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/inset/button", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "INNER_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": -1 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/button/pressed", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "INNER_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/button/default", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/deep", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 33, - "g": 43, - "b": 54, - "a": 0.08 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 16, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 6, - "g": 44, - "b": 82, - "a": 0.1 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 0, - "spread": 1 - } - ] - } - }, - { - "name": "shadow/basic/faint", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 22, - "g": 29, - "b": 37, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/transparent", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/xs", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.24 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 2, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/sm", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.1 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 1, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/md", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 6, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.1 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 4, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/lg", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 6, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": 4 - }, - "radius": 12, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/xl", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 12 - }, - "radius": 18, - "spread": -2 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.08 - }, - "offset": { - "x": 0, - "y": 4 - }, - "radius": 18, - "spread": -2 - } - ] - } - }, - { - "name": "shadow/basic/2xl", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.16 - }, - "offset": { - "x": 0, - "y": 32 - }, - "radius": 56, - "spread": -2 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 32 - }, - "radius": 32, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/element/popover", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 23, - "g": 24, - "b": 24, - "a": 0.12 - }, - "offset": { - "x": 0, - "y": 8 - }, - "radius": 20, - "spread": -4 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 23, - "g": 24, - "b": 24, - "a": 0.08 - }, - "offset": { - "x": 0, - "y": 3 - }, - "radius": 6, - "spread": -3 - } - ] - } - }, - { - "name": "shadow/element/card", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 2, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 23, - "g": 24, - "b": 24, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 5, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/element/topNav", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 2, - "spread": -1 - } - ] - } - }, - { - "name": "shadow/element/focus", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 145, - "b": 255, - "a": 1 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 0, - "spread": 2 - } - ] - } - } - ] - } - ] - }, - { - "name": "Grids", - "modes": [ - { - "name": "Style", - "variables": [ - { - "name": "Basic 12 Col", - "type": "grid", - "isAlias": false, - "value": { - "layoutGrids": [ - { - "pattern": "COLUMNS", - "color": { - "r": 255, - "g": 0, - "b": 0, - "a": 0.1 - }, - "alignment": "STRETCH", - "gutterSize": 16, - "offset": 40, - "count": 12 - } - ] - } - } - ] - } - ] - } - ] -} From 44afa3cff3f58b267d5066c3bc5e2d38f8e09141 Mon Sep 17 00:00:00 2001 From: = <=> Date: Wed, 18 Oct 2023 12:46:24 +0530 Subject: [PATCH 2/8] replace Assam with home icon --- .../[scheme]/components/scheme-layout.tsx | 2 +- .../components/department-layout.tsx | 2 +- .../[district]/components/district-layout.tsx | 2 +- .../[locale]/[district]/components/index.tsx | 6 +- examples/district/config/copy-tokens.js | 1 + examples/district/config/design-tokens.mjs | 4 + examples/district/package.json | 3 +- .../district/styles/tokens/_variables.css | 36 ++-- .../district/styles/tokens/tailwind/color.js | 36 ++-- examples/district/styles/tokens/tokens.json | 154 ++++++++++-------- 10 files changed, 137 insertions(+), 109 deletions(-) create mode 100644 examples/district/config/copy-tokens.js create mode 100644 examples/district/config/design-tokens.mjs diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx index 9d343228..19b89b48 100644 --- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx +++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx @@ -94,7 +94,7 @@ export const Content = ({ data }: { data: IProps }) => { const breadcrumbs = [ { - label: 'Assam', + label: , href: '/', }, { diff --git a/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx b/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx index a0346713..83a19c29 100644 --- a/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx +++ b/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx @@ -42,7 +42,7 @@ export function Content({ data }: { data: IProps }) { const breadcrumbs = [ { - label: 'Assam', + label: , href: '/', }, { diff --git a/examples/district/app/[locale]/[district]/components/district-layout.tsx b/examples/district/app/[locale]/[district]/components/district-layout.tsx index 551a0dad..d75b92b4 100644 --- a/examples/district/app/[locale]/[district]/components/district-layout.tsx +++ b/examples/district/app/[locale]/[district]/components/district-layout.tsx @@ -38,7 +38,7 @@ export interface IProps { export function Content({ data }: { data: IProps }) { const breadcrumbs = [ { - label: 'Assam', + label: , href: '/', }, { diff --git a/examples/district/app/[locale]/[district]/components/index.tsx b/examples/district/app/[locale]/[district]/components/index.tsx index 7c73ac59..85769e0f 100644 --- a/examples/district/app/[locale]/[district]/components/index.tsx +++ b/examples/district/app/[locale]/[district]/components/index.tsx @@ -31,14 +31,14 @@ export const BreadCrumb = ({ backUrl, }: { crumbs: { - label: string; + label: any; href: string; }[]; backUrl: string; }) => { return ( -
- +
+ Go to State Page diff --git a/examples/district/config/copy-tokens.js b/examples/district/config/copy-tokens.js new file mode 100644 index 00000000..7e446cf6 --- /dev/null +++ b/examples/district/config/copy-tokens.js @@ -0,0 +1 @@ +console.log('I ran'); diff --git a/examples/district/config/design-tokens.mjs b/examples/district/config/design-tokens.mjs new file mode 100644 index 00000000..917f6feb --- /dev/null +++ b/examples/district/config/design-tokens.mjs @@ -0,0 +1,4 @@ +import StyleDictionary from 'style-dictionary'; +import config from './style-dictionary.js'; + +StyleDictionary.extend(config).buildAllPlatforms(); diff --git a/examples/district/package.json b/examples/district/package.json index 28c46904..0a22cc45 100644 --- a/examples/district/package.json +++ b/examples/district/package.json @@ -7,7 +7,8 @@ "build": "next build", "start": "next start", "lint": "next lint", - "build:tokens": "style-dictionary build --config ./config/style-dictionary.js", + "build:tokens": "node ./config/design-tokens.mjs", + "postbuild:tokens": "node ./config/copy-tokens.js", "generate": "graphql-codegen --config ./config/codegen.ts", "clean": "rm -rf node_modules yarn.lock" }, diff --git a/examples/district/styles/tokens/_variables.css b/examples/district/styles/tokens/_variables.css index c2b664b8..cb627231 100644 --- a/examples/district/styles/tokens/_variables.css +++ b/examples/district/styles/tokens/_variables.css @@ -86,6 +86,7 @@ --base-pure-white: #FFFFFF; --base-pure-black: #000000; --text-default: var(--base-gray-slate-solid-12); + --text-medium: var(--base-gray-slate-solid-11); --text-subdued: #3E4346; --text-disabled: var(--base-gray-slate-solid-9); --text-critical: var(--base-red-solid-11); @@ -93,8 +94,8 @@ --text-success: var(--base-green-solid-11); --text-highlight: var(--base-violet-solid-11); --text-interactive: var(--base-blue-solid-11); - --text-onbg-disabled: var(--base-gray-slate-solid-9); --text-onbg-default: var(--base-gray-slate-solid-1); + --text-onbg-disabled: var(--base-gray-slate-solid-9); --border-default: var(--base-gray-slate-solid-8); --border-subdued: var(--base-gray-slate-solid-7); --border-disabled: var(--base-gray-slate-solid-6); @@ -107,16 +108,16 @@ --border-warning-subdued: var(--base-amber-solid-7); --border-highlight-default: var(--base-violet-solid-8); --border-highlight-subdued: var(--base-violet-solid-7); - --border-highlight-onbg-default: var(--base-violet-solid-7); --border-highlight-onbg-subdued: var(--base-violet-solid-9); + --border-highlight-onbg-default: var(--base-violet-solid-7); --border-interactive-default: var(--base-blue-solid-8); --border-interactive-focused: var(--base-blue-solid-7); --icon-default: var(--base-gray-slate-solid-11); --icon-subdued: var(--base-gray-slate-solid-10); --icon-disabled: var(--base-gray-slate-solid-9); --icon-critical: var(--base-red-solid-10); - --icon-warning: var(--base-amber-solid-10); --action-primary-basic-default: var(--base-violet-solid-9); + --icon-warning: var(--base-amber-solid-10); --action-primary-basic-hovered: var(--base-violet-solid-10); --icon-success: var(--base-green-solid-10); --action-primary-basic-pressed: var(--base-violet-solid-11); @@ -124,12 +125,12 @@ --icon-interactive: var(--base-indigo-solid-11); --action-primary-basic-depressed: var(--base-violet-solid-12); --icon-onbg-default: var(--base-gray-slate-solid-1); - --icon-onbg-subdued: var(--base-gray-slate-solid-4); --action-primary-disabled: var(--base-gray-slate-solid-9); + --icon-onbg-subdued: var(--base-gray-slate-solid-4); --action-primary-critical-default: var(--base-red-solid-9); --icon-onbg-disabled: var(--base-gray-slate-solid-9); - --action-primary-critical-hovered: var(--base-red-solid-10); --action-primary-success-default: var(--base-green-solid-9); + --action-primary-critical-hovered: var(--base-red-solid-10); --action-secondary-critical-pressed: var(--base-red-solid-5); --action-secondary-critical-hovered: var(--base-red-solid-4); --action-secondary-critical-depressed: var(--base-red-solid-6); @@ -138,27 +139,27 @@ --action-primary-interactive-hovered: var(--base-blue-solid-10); --action-primary-interactive-pressed: var(--base-blue-solid-11); --action-primary-interactive-depressed: var(--base-blue-solid-12); - --action-primary-success-hovered: var(--base-green-solid-10); - --action-secondary-basic-default: var(--base-violet-solid-3); --action-primary-critical-pressed: var(--base-red-solid-11); - --action-primary-critical-depressed: var(--base-red-solid-12); + --action-secondary-basic-default: var(--base-violet-solid-3); + --action-primary-success-hovered: var(--base-green-solid-10); --action-primary-success-pressed: var(--base-green-solid-11); --action-secondary-disabled: var(--base-gray-slate-solid-3); + --action-primary-critical-depressed: var(--base-red-solid-12); --action-secondary-interactive-pressed: var(--base-blue-solid-5); + --action-secondary-success-pressed: var(--base-green-solid-5); --action-primary-success-depressed: var(--base-green-solid-12); - --action-secondary-neutral-default: var(--base-gray-slate-solid-1); - --action-secondary-interactive-depressed: var(--base-blue-solid-6); --action-secondary-interactive-hovered: var(--base-blue-solid-4); - --action-secondary-success-pressed: var(--base-green-solid-5); --action-secondary-success-depressed: var(--base-green-solid-6); + --action-secondary-neutral-default: var(--base-gray-slate-solid-1); --action-secondary-success-hovered: var(--base-green-solid-4); + --action-secondary-interactive-depressed: var(--base-blue-solid-6); --action-secondary-success-default: var(--base-green-solid-3); --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2); --action-secondary-interactive-default: var(--base-blue-solid-3); --action-secondary-basic-hovered: var(--base-violet-solid-4); + --action-secondary-basic-pressed: var(--base-violet-solid-5); --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5); --action-secondary-basic-depressed: var(--base-violet-solid-6); - --action-secondary-basic-pressed: var(--base-violet-solid-5); --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6); --action-tertiary-basic-hover: var(--base-violet-alpha-2); --base-indigo-alpha-1: #05058203; @@ -171,6 +172,7 @@ --base-indigo-alpha-5: #023CEB26; --background-alpha-dark: var(--base-indigo-alpha-12); --base-indigo-alpha-6: #013DE438; + --background-alpha-medium: var(--base-indigo-alpha-4); --base-indigo-alpha-7: #0038E052; --base-indigo-alpha-8: #0134DB73; --base-indigo-alpha-9: #0031D2C2; @@ -182,18 +184,18 @@ --base-indigo-alpha-10: #002CBDC4; --surface-selected: var(--base-blue-solid-2); --base-indigo-alpha-11: #00259ECC; - --surface-warning: var(--base-amber-solid-2); --base-indigo-alpha-12: #000E3AF0; + --surface-warning: var(--base-amber-solid-2); --base-blue-alpha-1: #0582FF05; --surface-critical: var(--base-red-solid-2); - --surface-success: var(--base-green-solid-2); --base-blue-alpha-2: #0582FF0A; - --surface-highlight-subdued: var(--base-violet-solid-2); + --surface-success: var(--base-green-solid-2); --base-blue-alpha-3: #0280FF12; - --surface-interactive: var(--base-blue-solid-2); + --surface-highlight-subdued: var(--base-violet-solid-2); --base-blue-alpha-4: #0180FF1F; - --surface-highlight-default: var(--base-violet-solid-4); + --surface-interactive: var(--base-blue-solid-2); --base-blue-alpha-5: #0180EF30; + --surface-highlight-default: var(--base-violet-solid-4); --base-blue-alpha-6: #0177E647; --surface-highlight-hovered: var(--base-violet-solid-6); --base-blue-alpha-7: #0077DF69; diff --git a/examples/district/styles/tokens/tailwind/color.js b/examples/district/styles/tokens/tailwind/color.js index 26c3de63..ded0b84d 100644 --- a/examples/district/styles/tokens/tailwind/color.js +++ b/examples/district/styles/tokens/tailwind/color.js @@ -86,6 +86,7 @@ module.exports = { "basePureWhite": "#FFFFFF", "basePureBlack": "#000000", "textDefault": "var(--base-gray-slate-solid-12)", + "textMedium": "var(--base-gray-slate-solid-11)", "textSubdued": "#3E4346", "textDisabled": "var(--base-gray-slate-solid-9)", "textCritical": "var(--base-red-solid-11)", @@ -93,8 +94,8 @@ module.exports = { "textSuccess": "var(--base-green-solid-11)", "textHighlight": "var(--base-violet-solid-11)", "textInteractive": "var(--base-blue-solid-11)", - "textOnBGDisabled": "var(--base-gray-slate-solid-9)", "textOnBGDefault": "var(--base-gray-slate-solid-1)", + "textOnBGDisabled": "var(--base-gray-slate-solid-9)", "borderDefault": "var(--base-gray-slate-solid-8)", "borderSubdued": "var(--base-gray-slate-solid-7)", "borderDisabled": "var(--base-gray-slate-solid-6)", @@ -107,16 +108,16 @@ module.exports = { "borderWarningSubdued": "var(--base-amber-solid-7)", "borderHighlightDefault": "var(--base-violet-solid-8)", "borderHighlightSubdued": "var(--base-violet-solid-7)", - "borderHighlightOnBGDefault": "var(--base-violet-solid-7)", "borderHighlightOnBGSubdued": "var(--base-violet-solid-9)", + "borderHighlightOnBGDefault": "var(--base-violet-solid-7)", "borderInteractiveDefault": "var(--base-blue-solid-8)", "borderInteractiveFocused": "var(--base-blue-solid-7)", "iconDefault": "var(--base-gray-slate-solid-11)", "iconSubdued": "var(--base-gray-slate-solid-10)", "iconDisabled": "var(--base-gray-slate-solid-9)", "iconCritical": "var(--base-red-solid-10)", - "iconWarning": "var(--base-amber-solid-10)", "actionPrimaryBasicDefault": "var(--base-violet-solid-9)", + "iconWarning": "var(--base-amber-solid-10)", "actionPrimaryBasicHovered": "var(--base-violet-solid-10)", "iconSuccess": "var(--base-green-solid-10)", "actionPrimaryBasicPressed": "var(--base-violet-solid-11)", @@ -124,12 +125,12 @@ module.exports = { "iconInteractive": "var(--base-indigo-solid-11)", "actionPrimaryBasicDepressed": "var(--base-violet-solid-12)", "iconOnBGDefault": "var(--base-gray-slate-solid-1)", - "iconOnBGSubdued": "var(--base-gray-slate-solid-4)", "actionPrimaryDisabled": "var(--base-gray-slate-solid-9)", + "iconOnBGSubdued": "var(--base-gray-slate-solid-4)", "actionPrimaryCriticalDefault": "var(--base-red-solid-9)", "iconOnBGDisabled": "var(--base-gray-slate-solid-9)", - "actionPrimaryCriticalHovered": "var(--base-red-solid-10)", "actionPrimarySuccessDefault": "var(--base-green-solid-9)", + "actionPrimaryCriticalHovered": "var(--base-red-solid-10)", "actionSecondaryCriticalPressed": "var(--base-red-solid-5)", "actionSecondaryCriticalHovered": "var(--base-red-solid-4)", "actionSecondaryCriticalDepressed": "var(--base-red-solid-6)", @@ -138,27 +139,27 @@ module.exports = { "actionPrimaryInteractiveHovered": "var(--base-blue-solid-10)", "actionPrimaryInteractivePressed": "var(--base-blue-solid-11)", "actionPrimaryInteractiveDepressed": "var(--base-blue-solid-12)", - "actionPrimarySuccessHovered": "var(--base-green-solid-10)", - "actionSecondaryBasicDefault": "var(--base-violet-solid-3)", "actionPrimaryCriticalPressed": "var(--base-red-solid-11)", - "actionPrimaryCriticalDepressed": "var(--base-red-solid-12)", + "actionSecondaryBasicDefault": "var(--base-violet-solid-3)", + "actionPrimarySuccessHovered": "var(--base-green-solid-10)", "actionPrimarySuccessPressed": "var(--base-green-solid-11)", "actionSecondaryDisabled": "var(--base-gray-slate-solid-3)", + "actionPrimaryCriticalDepressed": "var(--base-red-solid-12)", "actionSecondaryInteractivePressed": "var(--base-blue-solid-5)", + "actionSecondarySuccessPressed": "var(--base-green-solid-5)", "actionPrimarySuccessDepressed": "var(--base-green-solid-12)", - "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)", - "actionSecondaryInteractiveDepressed": "var(--base-blue-solid-6)", "actionSecondaryInteractiveHovered": "var(--base-blue-solid-4)", - "actionSecondarySuccessPressed": "var(--base-green-solid-5)", "actionSecondarySuccessDepressed": "var(--base-green-solid-6)", + "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)", "actionSecondarySuccessHovered": "var(--base-green-solid-4)", + "actionSecondaryInteractiveDepressed": "var(--base-blue-solid-6)", "actionSecondarySuccessDefault": "var(--base-green-solid-3)", "actionSecondaryNeutralHovered": "var(--base-gray-slate-solid-2)", "actionSecondaryInteractiveDefault": "var(--base-blue-solid-3)", "actionSecondaryBasicHovered": "var(--base-violet-solid-4)", + "actionSecondaryBasicPressed": "var(--base-violet-solid-5)", "actionSecondaryNeutralPressed": "var(--base-gray-slate-solid-5)", "actionSecondaryBasicDepressed": "var(--base-violet-solid-6)", - "actionSecondaryBasicPressed": "var(--base-violet-solid-5)", "actionSecondaryNeutralDepressed": "var(--base-gray-slate-solid-6)", "actionTertiaryBasicHover": "var(--base-violet-alpha-2)", "baseIndigoAlpha1": "#05058203", @@ -171,6 +172,7 @@ module.exports = { "baseIndigoAlpha5": "#023CEB26", "backgroundAlphaDark": "var(--base-indigo-alpha-12)", "baseIndigoAlpha6": "#013DE438", + "backgroundAlphaMedium": "var(--base-indigo-alpha-4)", "baseIndigoAlpha7": "#0038E052", "baseIndigoAlpha8": "#0134DB73", "baseIndigoAlpha9": "#0031D2C2", @@ -182,18 +184,18 @@ module.exports = { "baseIndigoAlpha10": "#002CBDC4", "surfaceSelected": "var(--base-blue-solid-2)", "baseIndigoAlpha11": "#00259ECC", - "surfaceWarning": "var(--base-amber-solid-2)", "baseIndigoAlpha12": "#000E3AF0", + "surfaceWarning": "var(--base-amber-solid-2)", "baseBlueAlpha1": "#0582FF05", "surfaceCritical": "var(--base-red-solid-2)", - "surfaceSuccess": "var(--base-green-solid-2)", "baseBlueAlpha2": "#0582FF0A", - "surfaceHighlightSubdued": "var(--base-violet-solid-2)", + "surfaceSuccess": "var(--base-green-solid-2)", "baseBlueAlpha3": "#0280FF12", - "surfaceInteractive": "var(--base-blue-solid-2)", + "surfaceHighlightSubdued": "var(--base-violet-solid-2)", "baseBlueAlpha4": "#0180FF1F", - "surfaceHighlightDefault": "var(--base-violet-solid-4)", + "surfaceInteractive": "var(--base-blue-solid-2)", "baseBlueAlpha5": "#0180EF30", + "surfaceHighlightDefault": "var(--base-violet-solid-4)", "baseBlueAlpha6": "#0177E647", "surfaceHighlightHovered": "var(--base-violet-solid-6)", "baseBlueAlpha7": "#0077DF69", diff --git a/examples/district/styles/tokens/tokens.json b/examples/district/styles/tokens/tokens.json index e94159a7..6c9fd67c 100644 --- a/examples/district/styles/tokens/tokens.json +++ b/examples/district/styles/tokens/tokens.json @@ -531,6 +531,15 @@ "name": "base/gray/slate/solid/12" } }, + { + "name": "Text/Medium", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + }, { "name": "Text/Subdued", "type": "color", @@ -592,21 +601,21 @@ } }, { - "name": "Text/OnBG/Disabled", + "name": "Text/OnBG/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/9" + "name": "base/gray/slate/solid/1" } }, { - "name": "Text/OnBG/Default", + "name": "Text/OnBG/Disabled", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/1" + "name": "base/gray/slate/solid/9" } }, { @@ -718,21 +727,21 @@ } }, { - "name": "Border/Highlight/OnBG/Default", + "name": "Border/Highlight/OnBG/Subdued", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/7" + "name": "base/violet/solid/9" } }, { - "name": "Border/Highlight/OnBG/Subdued", + "name": "Border/Highlight/OnBG/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/9" + "name": "base/violet/solid/7" } }, { @@ -790,21 +799,21 @@ } }, { - "name": "Icon/Warning", + "name": "Action/Primary/Basic/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/amber/solid/10" + "name": "base/violet/solid/9" } }, { - "name": "Action/Primary/Basic/Default", + "name": "Icon/Warning", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/9" + "name": "base/amber/solid/10" } }, { @@ -871,21 +880,21 @@ } }, { - "name": "Icon/OnBG/Subdued", + "name": "Action/Primary/Disabled", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/4" + "name": "base/gray/slate/solid/9" } }, { - "name": "Action/Primary/Disabled", + "name": "Icon/OnBG/Subdued", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/9" + "name": "base/gray/slate/solid/4" } }, { @@ -907,21 +916,21 @@ } }, { - "name": "Action/Primary/Critical/Hovered", + "name": "Action/Primary/Success/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/red/solid/10" + "name": "base/green/solid/9" } }, { - "name": "Action/Primary/Success/Default", + "name": "Action/Primary/Critical/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/9" + "name": "base/red/solid/10" } }, { @@ -997,12 +1006,12 @@ } }, { - "name": "Action/Primary/Success/Hovered", + "name": "Action/Primary/Critical/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/10" + "name": "base/red/solid/11" } }, { @@ -1015,39 +1024,39 @@ } }, { - "name": "Action/Primary/Critical/Pressed", + "name": "Action/Primary/Success/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/red/solid/11" + "name": "base/green/solid/10" } }, { - "name": "Action/Primary/Critical/Depressed", + "name": "Action/Primary/Success/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/red/solid/12" + "name": "base/green/solid/11" } }, { - "name": "Action/Primary/Success/Pressed", + "name": "Action/Secondary/Disabled", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/11" + "name": "base/gray/slate/solid/3" } }, { - "name": "Action/Secondary/Disabled", + "name": "Action/Primary/Critical/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/3" + "name": "base/red/solid/12" } }, { @@ -1060,66 +1069,66 @@ } }, { - "name": "Action/Primary/Success/Depressed", + "name": "Action/Secondary/Success/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/12" + "name": "base/green/solid/5" } }, { - "name": "Action/Secondary/Neutral/Default", + "name": "Action/Primary/Success/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/1" + "name": "base/green/solid/12" } }, { - "name": "Action/Secondary/Interactive/Depressed", + "name": "Action/Secondary/Interactive/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/blue/solid/6" + "name": "base/blue/solid/4" } }, { - "name": "Action/Secondary/Interactive/Hovered", + "name": "Action/Secondary/Success/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/blue/solid/4" + "name": "base/green/solid/6" } }, { - "name": "Action/Secondary/Success/Pressed", + "name": "Action/Secondary/Neutral/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/5" + "name": "base/gray/slate/solid/1" } }, { - "name": "Action/Secondary/Success/Depressed", + "name": "Action/Secondary/Success/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/6" + "name": "base/green/solid/4" } }, { - "name": "Action/Secondary/Success/Hovered", + "name": "Action/Secondary/Interactive/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/4" + "name": "base/blue/solid/6" } }, { @@ -1159,30 +1168,30 @@ } }, { - "name": "Action/Secondary/Neutral/Pressed", + "name": "Action/Secondary/Basic/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/5" + "name": "base/violet/solid/5" } }, { - "name": "Action/Secondary/Basic/Depressed", + "name": "Action/Secondary/Neutral/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/6" + "name": "base/gray/slate/solid/5" } }, { - "name": "Action/Secondary/Basic/Pressed", + "name": "Action/Secondary/Basic/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/5" + "name": "base/violet/solid/6" } }, { @@ -1275,6 +1284,15 @@ "isAlias": false, "value": "#013DE438" }, + { + "name": "Background/Alpha/Medium", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/alpha/4" + } + }, { "name": "base/indigo/alpha/7", "type": "color", @@ -1359,6 +1377,12 @@ "isAlias": false, "value": "#00259ECC" }, + { + "name": "base/indigo/alpha/12", + "type": "color", + "isAlias": false, + "value": "#000E3AF0" + }, { "name": "Surface/Warning", "type": "color", @@ -1368,12 +1392,6 @@ "name": "base/amber/solid/2" } }, - { - "name": "base/indigo/alpha/12", - "type": "color", - "isAlias": false, - "value": "#000E3AF0" - }, { "name": "base/blue/alpha/1", "type": "color", @@ -1389,6 +1407,12 @@ "name": "base/red/solid/2" } }, + { + "name": "base/blue/alpha/2", + "type": "color", + "isAlias": false, + "value": "#0582FF0A" + }, { "name": "Surface/Success", "type": "color", @@ -1399,10 +1423,10 @@ } }, { - "name": "base/blue/alpha/2", + "name": "base/blue/alpha/3", "type": "color", "isAlias": false, - "value": "#0582FF0A" + "value": "#0280FF12" }, { "name": "Surface/Highlight/Subdued", @@ -1414,10 +1438,10 @@ } }, { - "name": "base/blue/alpha/3", + "name": "base/blue/alpha/4", "type": "color", "isAlias": false, - "value": "#0280FF12" + "value": "#0180FF1F" }, { "name": "Surface/Interactive", @@ -1429,10 +1453,10 @@ } }, { - "name": "base/blue/alpha/4", + "name": "base/blue/alpha/5", "type": "color", "isAlias": false, - "value": "#0180FF1F" + "value": "#0180EF30" }, { "name": "Surface/Highlight/Default", @@ -1443,12 +1467,6 @@ "name": "base/violet/solid/4" } }, - { - "name": "base/blue/alpha/5", - "type": "color", - "isAlias": false, - "value": "#0180EF30" - }, { "name": "base/blue/alpha/6", "type": "color", From 309095d31732d81ed31eef59869beb4e323ea3f9 Mon Sep 17 00:00:00 2001 From: = <=> Date: Wed, 18 Oct 2023 13:04:11 +0530 Subject: [PATCH 3/8] refactor style dictionary --- examples/district/config/copy-tokens.js | 1 - examples/district/config/tokens/copy.js | 14 + .../generate.mjs} | 2 +- .../tokens/helpers}/css-formattor.js | 0 .../tokens/helpers}/effect-convert.js | 0 .../tokens/helpers}/tailwind-formattor.js | 0 .../sd-config.js} | 6 +- .../{styles => config}/tokens/tokens.json | 0 examples/district/package.json | 4 +- packages/opub-ui/styles/_variables.css | 384 +- .../opub-ui/styles/tailwind/border-radius.js | 11 + .../opub-ui/styles/tailwind/border-width.js | 5 + .../opub-ui/styles/tailwind/box-shadow.js | 21 + packages/opub-ui/styles/tailwind/color.js | 275 ++ packages/opub-ui/styles/tailwind/duration.js | 13 + .../opub-ui/styles/tailwind/ease-function.js | 7 + .../opub-ui/styles/tailwind/font-family.js | 4 + packages/opub-ui/styles/tailwind/font-size.js | 10 + .../opub-ui/styles/tailwind/font-weight.js | 6 + .../opub-ui/styles/tailwind/line-height.js | 9 + packages/opub-ui/styles/tailwind/space.js | 18 + packages/opub-ui/styles/tailwind/z-index.js | 13 + packages/opub-ui/styles/tokens.json | 3360 +++++++++++++++++ .../opub-viz/styles/tokens/_variables.css | 384 +- .../opub-viz/styles/tokens/tailwind/color.js | 548 +-- packages/opub-viz/styles/tokens/tokens.json | 3360 +++++++++++++++++ 26 files changed, 7785 insertions(+), 670 deletions(-) delete mode 100644 examples/district/config/copy-tokens.js create mode 100644 examples/district/config/tokens/copy.js rename examples/district/config/{design-tokens.mjs => tokens/generate.mjs} (69%) rename examples/district/{lib/style-dictionary => config/tokens/helpers}/css-formattor.js (100%) rename examples/district/{lib/style-dictionary => config/tokens/helpers}/effect-convert.js (100%) rename examples/district/{lib/style-dictionary => config/tokens/helpers}/tailwind-formattor.js (100%) rename examples/district/config/{style-dictionary.js => tokens/sd-config.js} (87%) rename examples/district/{styles => config}/tokens/tokens.json (100%) create mode 100644 packages/opub-ui/styles/tailwind/border-radius.js create mode 100644 packages/opub-ui/styles/tailwind/border-width.js create mode 100644 packages/opub-ui/styles/tailwind/box-shadow.js create mode 100644 packages/opub-ui/styles/tailwind/color.js create mode 100644 packages/opub-ui/styles/tailwind/duration.js create mode 100644 packages/opub-ui/styles/tailwind/ease-function.js create mode 100644 packages/opub-ui/styles/tailwind/font-family.js create mode 100644 packages/opub-ui/styles/tailwind/font-size.js create mode 100644 packages/opub-ui/styles/tailwind/font-weight.js create mode 100644 packages/opub-ui/styles/tailwind/line-height.js create mode 100644 packages/opub-ui/styles/tailwind/space.js create mode 100644 packages/opub-ui/styles/tailwind/z-index.js create mode 100644 packages/opub-ui/styles/tokens.json create mode 100644 packages/opub-viz/styles/tokens/tokens.json diff --git a/examples/district/config/copy-tokens.js b/examples/district/config/copy-tokens.js deleted file mode 100644 index 7e446cf6..00000000 --- a/examples/district/config/copy-tokens.js +++ /dev/null @@ -1 +0,0 @@ -console.log('I ran'); diff --git a/examples/district/config/tokens/copy.js b/examples/district/config/tokens/copy.js new file mode 100644 index 00000000..63932b6e --- /dev/null +++ b/examples/district/config/tokens/copy.js @@ -0,0 +1,14 @@ +const fse = require('fs-extra'); + +const srcDir = `styles/tokens`; +const opubUI = `../../packages/opub-ui/styles`; +const opubViz = `../../packages/opub-viz/styles/tokens`; + +try { + fse.copySync(srcDir, opubUI, { overwrite: true | false }); + console.log('copied to opub-ui'); + fse.copySync(srcDir, opubViz, { overwrite: true | false }); + console.log('copied to opub-viz'); +} catch (err) { + console.error(err); +} diff --git a/examples/district/config/design-tokens.mjs b/examples/district/config/tokens/generate.mjs similarity index 69% rename from examples/district/config/design-tokens.mjs rename to examples/district/config/tokens/generate.mjs index 917f6feb..a70ac1cf 100644 --- a/examples/district/config/design-tokens.mjs +++ b/examples/district/config/tokens/generate.mjs @@ -1,4 +1,4 @@ import StyleDictionary from 'style-dictionary'; -import config from './style-dictionary.js'; +import config from './sd-config.js'; StyleDictionary.extend(config).buildAllPlatforms(); diff --git a/examples/district/lib/style-dictionary/css-formattor.js b/examples/district/config/tokens/helpers/css-formattor.js similarity index 100% rename from examples/district/lib/style-dictionary/css-formattor.js rename to examples/district/config/tokens/helpers/css-formattor.js diff --git a/examples/district/lib/style-dictionary/effect-convert.js b/examples/district/config/tokens/helpers/effect-convert.js similarity index 100% rename from examples/district/lib/style-dictionary/effect-convert.js rename to examples/district/config/tokens/helpers/effect-convert.js diff --git a/examples/district/lib/style-dictionary/tailwind-formattor.js b/examples/district/config/tokens/helpers/tailwind-formattor.js similarity index 100% rename from examples/district/lib/style-dictionary/tailwind-formattor.js rename to examples/district/config/tokens/helpers/tailwind-formattor.js diff --git a/examples/district/config/style-dictionary.js b/examples/district/config/tokens/sd-config.js similarity index 87% rename from examples/district/config/style-dictionary.js rename to examples/district/config/tokens/sd-config.js index f9c1426f..aed5e277 100644 --- a/examples/district/config/style-dictionary.js +++ b/examples/district/config/tokens/sd-config.js @@ -1,6 +1,6 @@ -const cssFormattor = require('../lib/style-dictionary/css-formattor'); -const twFormat = require('../lib/style-dictionary/tailwind-formattor'); -const config = require('../styles/tokens/tokens.json'); +const cssFormattor = require('./helpers/css-formattor'); +const twFormat = require('./helpers/tailwind-formattor'); +const config = require('./tokens.json'); module.exports = { format: { diff --git a/examples/district/styles/tokens/tokens.json b/examples/district/config/tokens/tokens.json similarity index 100% rename from examples/district/styles/tokens/tokens.json rename to examples/district/config/tokens/tokens.json diff --git a/examples/district/package.json b/examples/district/package.json index 0a22cc45..1dc2497d 100644 --- a/examples/district/package.json +++ b/examples/district/package.json @@ -7,8 +7,8 @@ "build": "next build", "start": "next start", "lint": "next lint", - "build:tokens": "node ./config/design-tokens.mjs", - "postbuild:tokens": "node ./config/copy-tokens.js", + "build:tokens": "node ./config/tokens/generate.mjs", + "postbuild:tokens": "node ./config/tokens/copy.js", "generate": "graphql-codegen --config ./config/codegen.ts", "clean": "rm -rf node_modules yarn.lock" }, diff --git a/packages/opub-ui/styles/_variables.css b/packages/opub-ui/styles/_variables.css index 6f66b68a..cb627231 100644 --- a/packages/opub-ui/styles/_variables.css +++ b/packages/opub-ui/styles/_variables.css @@ -1,100 +1,101 @@ -:root { - --base-indigo-solid-1: #fdfdfe; - --base-indigo-solid-2: #f8faff; - --base-indigo-solid-3: #f0f4ff; - --base-indigo-solid-4: #e6edfe; - --base-indigo-solid-5: #d9e2fc; - --base-indigo-solid-6: #c6d4f9; - --base-indigo-solid-7: #aec0f5; - --base-indigo-solid-8: #8da4ef; - --base-indigo-solid-9: #3e63dd; - --base-indigo-solid-10: #3a5ccc; - --base-indigo-solid-11: #3451b2; - --base-indigo-solid-12: #101d46; - --base-blue-solid-1: #fbfdff; - --base-blue-solid-2: #f5faff; - --base-blue-solid-3: #edf6ff; - --base-blue-solid-4: #e1f0ff; - --base-blue-solid-5: #cee7fe; - --base-blue-solid-6: #b7d9f8; - --base-blue-solid-7: #96c7f2; - --base-blue-solid-8: #5eb0ef; - --base-blue-solid-9: #0091ff; - --base-blue-solid-10: #0081f1; - --base-blue-solid-11: #006adc; - --base-blue-solid-12: #00254d; - --base-violet-solid-1: #fdfcfe; - --base-violet-solid-2: #fbfaff; - --base-violet-solid-3: #f5f2ff; - --base-violet-solid-4: #ede9fe; - --base-violet-solid-5: #e4defc; - --base-violet-solid-6: #d7cff9; - --base-violet-solid-7: #c4b8f3; - --base-violet-solid-8: #aa99ec; - --base-violet-solid-9: #6e56cf; - --base-violet-solid-10: #644fc1; - --base-violet-solid-11: #5746af; - --base-violet-solid-12: #20134b; - --base-gray-slate-solid-1: #fbfcfd; - --base-gray-slate-solid-2: #f8f9fa; - --base-gray-slate-solid-3: #f1f3f5; - --base-gray-slate-solid-4: #eceef0; - --base-gray-slate-solid-5: #e6e8eb; - --base-gray-slate-solid-6: #dfe3e6; - --base-gray-slate-solid-7: #d7dbdf; - --base-gray-slate-solid-8: #c1c8cd; +:root { + --base-indigo-solid-1: #FDFDFE; + --base-indigo-solid-2: #F8FAFF; + --base-indigo-solid-3: #F0F4FF; + --base-indigo-solid-4: #E6EDFE; + --base-indigo-solid-5: #D9E2FC; + --base-indigo-solid-6: #C6D4F9; + --base-indigo-solid-7: #AEC0F5; + --base-indigo-solid-8: #8DA4EF; + --base-indigo-solid-9: #3E63DD; + --base-indigo-solid-10: #3A5CCC; + --base-indigo-solid-11: #3451B2; + --base-indigo-solid-12: #101D46; + --base-blue-solid-1: #FBFDFF; + --base-blue-solid-2: #F5FAFF; + --base-blue-solid-3: #EDF6FF; + --base-blue-solid-4: #E1F0FF; + --base-blue-solid-5: #CEE7FE; + --base-blue-solid-6: #B7D9F8; + --base-blue-solid-7: #96C7F2; + --base-blue-solid-8: #5EB0EF; + --base-blue-solid-9: #0091FF; + --base-blue-solid-10: #0081F1; + --base-blue-solid-11: #006ADC; + --base-blue-solid-12: #00254D; + --base-violet-solid-1: #FDFCFE; + --base-violet-solid-2: #FBFAFF; + --base-violet-solid-3: #F5F2FF; + --base-violet-solid-4: #EDE9FE; + --base-violet-solid-5: #E4DEFC; + --base-violet-solid-6: #D7CFF9; + --base-violet-solid-7: #C4B8F3; + --base-violet-solid-8: #AA99EC; + --base-violet-solid-9: #6E56CF; + --base-violet-solid-10: #644FC1; + --base-violet-solid-11: #5746AF; + --base-violet-solid-12: #20134B; + --base-gray-slate-solid-1: #FBFCFD; + --base-gray-slate-solid-2: #F8F9FA; + --base-gray-slate-solid-3: #F1F3F5; + --base-gray-slate-solid-4: #ECEEF0; + --base-gray-slate-solid-5: #E6E8EB; + --base-gray-slate-solid-6: #DFE3E6; + --base-gray-slate-solid-7: #D7DBDF; + --base-gray-slate-solid-8: #C1C8CD; --base-gray-slate-solid-9: #889096; - --base-gray-slate-solid-10: #7e868c; + --base-gray-slate-solid-10: #7E868C; --base-gray-slate-solid-11: #687076; - --base-gray-slate-solid-12: #11181c; - --base-red-solid-1: #fffcfc; - --base-red-solid-2: #fff8f8; - --base-red-solid-3: #ffefef; - --base-red-solid-4: #ffe5e5; - --base-red-solid-5: #fdd8d8; - --base-red-solid-6: #f9c6c6; - --base-red-solid-7: #f3aeaf; - --base-red-solid-8: #eb9091; - --base-red-solid-9: #e5484d; - --base-red-solid-10: #dc3d43; - --base-red-solid-11: #cd2b31; + --base-gray-slate-solid-12: #11181C; + --base-red-solid-1: #FFFCFC; + --base-red-solid-2: #FFF8F8; + --base-red-solid-3: #FFEFEF; + --base-red-solid-4: #FFE5E5; + --base-red-solid-5: #FDD8D8; + --base-red-solid-6: #F9C6C6; + --base-red-solid-7: #F3AEAF; + --base-red-solid-8: #EB9091; + --base-red-solid-9: #E5484D; + --base-red-solid-10: #DC3D43; + --base-red-solid-11: #CD2B31; --base-red-solid-12: #381316; - --base-green-solid-1: #fbfefc; - --base-green-solid-2: #f2fcf5; - --base-green-solid-3: #e9f9ee; - --base-green-solid-4: #ddf3e4; - --base-green-solid-5: #ccebd7; - --base-green-solid-6: #b4dfc4; - --base-green-solid-7: #92ceac; - --base-green-solid-8: #5bb98c; - --base-green-solid-9: #30a46c; + --base-green-solid-1: #FBFEFC; + --base-green-solid-2: #F2FCF5; + --base-green-solid-3: #E9F9EE; + --base-green-solid-4: #DDF3E4; + --base-green-solid-5: #CCEBD7; + --base-green-solid-6: #B4DFC4; + --base-green-solid-7: #92CEAC; + --base-green-solid-8: #5BB98C; + --base-green-solid-9: #30A46C; --base-green-solid-10: #299764; - --base-green-solid-11: #18794e; + --base-green-solid-11: #18794E; --base-green-solid-12: #153226; - --base-amber-solid-1: #fefdfb; - --base-amber-solid-2: #fff9ed; - --base-amber-solid-3: #fff4d5; - --base-amber-solid-4: #ffecbc; - --base-amber-solid-5: #ffe3a2; - --base-amber-solid-6: #ffd386; - --base-amber-solid-7: #f3ba63; - --base-amber-solid-8: #ee9d2b; - --base-amber-solid-9: #ffb224; - --base-amber-solid-10: #ffa01c; - --base-amber-solid-11: #ad5700; - --base-amber-solid-12: #4e2009; - --base-pure-white: #ffffff; + --base-amber-solid-1: #FEFDFB; + --base-amber-solid-2: #FFF9ED; + --base-amber-solid-3: #FFF4D5; + --base-amber-solid-4: #FFECBC; + --base-amber-solid-5: #FFE3A2; + --base-amber-solid-6: #FFD386; + --base-amber-solid-7: #F3BA63; + --base-amber-solid-8: #EE9D2B; + --base-amber-solid-9: #FFB224; + --base-amber-solid-10: #FFA01C; + --base-amber-solid-11: #AD5700; + --base-amber-solid-12: #4E2009; + --base-pure-white: #FFFFFF; --base-pure-black: #000000; --text-default: var(--base-gray-slate-solid-12); - --text-subdued: #3e4346; + --text-medium: var(--base-gray-slate-solid-11); + --text-subdued: #3E4346; --text-disabled: var(--base-gray-slate-solid-9); --text-critical: var(--base-red-solid-11); --text-warning: var(--base-amber-solid-11); --text-success: var(--base-green-solid-11); --text-highlight: var(--base-violet-solid-11); --text-interactive: var(--base-blue-solid-11); - --text-onbg-disabled: var(--base-gray-slate-solid-9); --text-onbg-default: var(--base-gray-slate-solid-1); + --text-onbg-disabled: var(--base-gray-slate-solid-9); --border-default: var(--base-gray-slate-solid-8); --border-subdued: var(--base-gray-slate-solid-7); --border-disabled: var(--base-gray-slate-solid-6); @@ -107,16 +108,16 @@ --border-warning-subdued: var(--base-amber-solid-7); --border-highlight-default: var(--base-violet-solid-8); --border-highlight-subdued: var(--base-violet-solid-7); - --border-highlight-onbg-default: var(--base-violet-solid-7); --border-highlight-onbg-subdued: var(--base-violet-solid-9); + --border-highlight-onbg-default: var(--base-violet-solid-7); --border-interactive-default: var(--base-blue-solid-8); --border-interactive-focused: var(--base-blue-solid-7); --icon-default: var(--base-gray-slate-solid-11); --icon-subdued: var(--base-gray-slate-solid-10); --icon-disabled: var(--base-gray-slate-solid-9); --icon-critical: var(--base-red-solid-10); - --icon-warning: var(--base-amber-solid-10); --action-primary-basic-default: var(--base-violet-solid-9); + --icon-warning: var(--base-amber-solid-10); --action-primary-basic-hovered: var(--base-violet-solid-10); --icon-success: var(--base-green-solid-10); --action-primary-basic-pressed: var(--base-violet-solid-11); @@ -124,12 +125,12 @@ --icon-interactive: var(--base-indigo-solid-11); --action-primary-basic-depressed: var(--base-violet-solid-12); --icon-onbg-default: var(--base-gray-slate-solid-1); - --icon-onbg-subdued: var(--base-gray-slate-solid-4); --action-primary-disabled: var(--base-gray-slate-solid-9); + --icon-onbg-subdued: var(--base-gray-slate-solid-4); --action-primary-critical-default: var(--base-red-solid-9); --icon-onbg-disabled: var(--base-gray-slate-solid-9); - --action-primary-critical-hovered: var(--base-red-solid-10); --action-primary-success-default: var(--base-green-solid-9); + --action-primary-critical-hovered: var(--base-red-solid-10); --action-secondary-critical-pressed: var(--base-red-solid-5); --action-secondary-critical-hovered: var(--base-red-solid-4); --action-secondary-critical-depressed: var(--base-red-solid-6); @@ -138,137 +139,138 @@ --action-primary-interactive-hovered: var(--base-blue-solid-10); --action-primary-interactive-pressed: var(--base-blue-solid-11); --action-primary-interactive-depressed: var(--base-blue-solid-12); - --action-primary-success-hovered: var(--base-green-solid-10); - --action-secondary-basic-default: var(--base-violet-solid-3); --action-primary-critical-pressed: var(--base-red-solid-11); - --action-primary-critical-depressed: var(--base-red-solid-12); + --action-secondary-basic-default: var(--base-violet-solid-3); + --action-primary-success-hovered: var(--base-green-solid-10); --action-primary-success-pressed: var(--base-green-solid-11); --action-secondary-disabled: var(--base-gray-slate-solid-3); + --action-primary-critical-depressed: var(--base-red-solid-12); --action-secondary-interactive-pressed: var(--base-blue-solid-5); + --action-secondary-success-pressed: var(--base-green-solid-5); --action-primary-success-depressed: var(--base-green-solid-12); - --action-secondary-neutral-default: var(--base-gray-slate-solid-1); - --action-secondary-interactive-depressed: var(--base-blue-solid-6); --action-secondary-interactive-hovered: var(--base-blue-solid-4); - --action-secondary-success-pressed: var(--base-green-solid-5); --action-secondary-success-depressed: var(--base-green-solid-6); + --action-secondary-neutral-default: var(--base-gray-slate-solid-1); --action-secondary-success-hovered: var(--base-green-solid-4); + --action-secondary-interactive-depressed: var(--base-blue-solid-6); --action-secondary-success-default: var(--base-green-solid-3); --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2); --action-secondary-interactive-default: var(--base-blue-solid-3); --action-secondary-basic-hovered: var(--base-violet-solid-4); + --action-secondary-basic-pressed: var(--base-violet-solid-5); --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5); --action-secondary-basic-depressed: var(--base-violet-solid-6); - --action-secondary-basic-pressed: var(--base-violet-solid-5); --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6); --action-tertiary-basic-hover: var(--base-violet-alpha-2); --base-indigo-alpha-1: #05058203; --action-tertiary-interactive-hover: var(--base-blue-alpha-2); --action-tertiary-success-hover: var(--base-green-alpha-2); - --base-indigo-alpha-2: #054cff08; + --base-indigo-alpha-2: #054CFF08; --action-tertiary-critical-hover: var(--base-red-alpha-2); - --base-indigo-alpha-3: #0144ff0f; - --base-indigo-alpha-4: #0247f51a; - --base-indigo-alpha-5: #023ceb26; + --base-indigo-alpha-3: #0144FF0F; + --base-indigo-alpha-4: #0247F51A; + --base-indigo-alpha-5: #023CEB26; --background-alpha-dark: var(--base-indigo-alpha-12); - --base-indigo-alpha-6: #013de438; - --base-indigo-alpha-7: #0038e052; - --base-indigo-alpha-8: #0134db73; - --base-indigo-alpha-9: #0031d2c2; + --base-indigo-alpha-6: #013DE438; + --background-alpha-medium: var(--base-indigo-alpha-4); + --base-indigo-alpha-7: #0038E052; + --base-indigo-alpha-8: #0134DB73; + --base-indigo-alpha-9: #0031D2C2; --background-solid-subdued: var(--base-indigo-solid-2); --background-solid-dark: var(--base-indigo-solid-12); --background-solid-default: var(--base-indigo-solid-3); --surface-default: var(--base-pure-white); --surface-subdued: var(--base-gray-slate-solid-2); - --base-indigo-alpha-10: #002cbdc4; + --base-indigo-alpha-10: #002CBDC4; --surface-selected: var(--base-blue-solid-2); - --base-indigo-alpha-11: #00259ecc; + --base-indigo-alpha-11: #00259ECC; + --base-indigo-alpha-12: #000E3AF0; --surface-warning: var(--base-amber-solid-2); - --base-indigo-alpha-12: #000e3af0; - --base-blue-alpha-1: #0582ff05; + --base-blue-alpha-1: #0582FF05; --surface-critical: var(--base-red-solid-2); + --base-blue-alpha-2: #0582FF0A; --surface-success: var(--base-green-solid-2); - --base-blue-alpha-2: #0582ff0a; + --base-blue-alpha-3: #0280FF12; --surface-highlight-subdued: var(--base-violet-solid-2); - --base-blue-alpha-3: #0280ff12; + --base-blue-alpha-4: #0180FF1F; --surface-interactive: var(--base-blue-solid-2); - --base-blue-alpha-4: #0180ff1f; + --base-blue-alpha-5: #0180EF30; --surface-highlight-default: var(--base-violet-solid-4); - --base-blue-alpha-5: #0180ef30; - --base-blue-alpha-6: #0177e647; + --base-blue-alpha-6: #0177E647; --surface-highlight-hovered: var(--base-violet-solid-6); - --base-blue-alpha-7: #0077df69; - --base-blue-alpha-8: #0082e6a1; - --base-blue-alpha-9: #0091fffa; - --base-blue-alpha-10: #0080f1fa; - --base-blue-alpha-11: #0066dbfa; - --base-blue-alpha-12: #002149fa; - --base-violet-alpha-1: #5805ab03; - --base-violet-alpha-2: #3705ff05; - --base-violet-alpha-3: #3c00ff0d; - --base-violet-alpha-4: #2e02f417; - --base-violet-alpha-5: #2f01e821; - --base-violet-alpha-6: #2a01df30; - --base-violet-alpha-7: #2b01d447; - --base-violet-alpha-8: #2a00d066; - --base-violet-alpha-9: #2500b6a8; - --base-violet-alpha-10: #1f00a5b0; - --base-violet-alpha-11: #180091ba; - --base-violet-alpha-12: #0e003ded; + --base-blue-alpha-7: #0077DF69; + --base-blue-alpha-8: #0082E6A1; + --base-blue-alpha-9: #0091FFFA; + --base-blue-alpha-10: #0080F1FA; + --base-blue-alpha-11: #0066DBFA; + --base-blue-alpha-12: #002149FA; + --base-violet-alpha-1: #5805AB03; + --base-violet-alpha-2: #3705FF05; + --base-violet-alpha-3: #3C00FF0D; + --base-violet-alpha-4: #2E02F417; + --base-violet-alpha-5: #2F01E821; + --base-violet-alpha-6: #2A01DF30; + --base-violet-alpha-7: #2B01D447; + --base-violet-alpha-8: #2A00D066; + --base-violet-alpha-9: #2500B6A8; + --base-violet-alpha-10: #1F00A5B0; + --base-violet-alpha-11: #180091BA; + --base-violet-alpha-12: #0E003DED; --base-gray-slate-alpha-1: #05448205; - --base-gray-slate-alpha-2: #05294d08; - --base-gray-slate-alpha-3: #0025490d; - --base-gray-slate-alpha-4: #021c3714; - --base-gray-slate-alpha-5: #0217351a; + --base-gray-slate-alpha-2: #05294D08; + --base-gray-slate-alpha-3: #0025490D; + --base-gray-slate-alpha-4: #021C3714; + --base-gray-slate-alpha-5: #0217351A; --base-gray-slate-alpha-6: #01213921; - --base-gray-slate-alpha-7: #001a3329; - --base-gray-slate-alpha-8: #011e323d; - --base-gray-slate-alpha-9: #00111e78; - --base-gray-slate-alpha-10: #00101b82; - --base-gray-slate-alpha-11: #000e1896; - --base-gray-slate-alpha-12: #00080ced; - --base-green-alpha-1: #05c04305; - --base-green-alpha-2: #00c43b0d; - --base-green-alpha-3: #02ba3c17; - --base-green-alpha-4: #01a63521; - --base-green-alpha-5: #009b3633; - --base-green-alpha-6: #0193364a; - --base-green-alpha-7: #008c3d6e; - --base-green-alpha-8: #00934ca3; - --base-green-alpha-9: #008f4acf; - --base-green-alpha-10: #008346d6; - --base-green-alpha-11: #006b3be8; - --base-green-alpha-12: #002012eb; - --base-amber-alpha-1: #c0820505; - --base-amber-alpha-2: #ffab0212; - --base-amber-alpha-3: #ffbb012b; - --base-amber-alpha-4: #ffb70042; - --base-amber-alpha-5: #ffb3005e; - --base-amber-alpha-6: #ffa20178; - --base-amber-alpha-7: #ec8d009c; - --base-amber-alpha-8: #ea8900d4; - --base-amber-alpha-9: #ffa600db; - --base-amber-alpha-10: #ff9500e3; - --base-amber-alpha-11: #ab5300fa; - --base-amber-alpha-12: #481800f5; - --base-red-alpha-1: #ff050503; - --base-red-alpha-2: #ff050508; - --base-red-alpha-3: #ff01010f; - --base-red-alpha-4: #ff00001a; - --base-red-alpha-5: #f2000026; - --base-red-alpha-6: #e4010138; - --base-red-alpha-7: #d9000452; - --base-red-alpha-8: #d1000470; - --base-red-alpha-9: #db0007b8; - --base-red-alpha-10: #d10007c2; - --base-red-alpha-11: #c30007d4; - --base-red-alpha-12: #280003ed; + --base-gray-slate-alpha-7: #001A3329; + --base-gray-slate-alpha-8: #011E323D; + --base-gray-slate-alpha-9: #00111E78; + --base-gray-slate-alpha-10: #00101B82; + --base-gray-slate-alpha-11: #000E1896; + --base-gray-slate-alpha-12: #00080CED; + --base-green-alpha-1: #05C04305; + --base-green-alpha-2: #00C43B0D; + --base-green-alpha-3: #02BA3C17; + --base-green-alpha-4: #01A63521; + --base-green-alpha-5: #009B3633; + --base-green-alpha-6: #0193364A; + --base-green-alpha-7: #008C3D6E; + --base-green-alpha-8: #00934CA3; + --base-green-alpha-9: #008F4ACF; + --base-green-alpha-10: #008346D6; + --base-green-alpha-11: #006B3BE8; + --base-green-alpha-12: #002012EB; + --base-amber-alpha-1: #C0820505; + --base-amber-alpha-2: #FFAB0212; + --base-amber-alpha-3: #FFBB012B; + --base-amber-alpha-4: #FFB70042; + --base-amber-alpha-5: #FFB3005E; + --base-amber-alpha-6: #FFA20178; + --base-amber-alpha-7: #EC8D009C; + --base-amber-alpha-8: #EA8900D4; + --base-amber-alpha-9: #FFA600DB; + --base-amber-alpha-10: #FF9500E3; + --base-amber-alpha-11: #AB5300FA; + --base-amber-alpha-12: #481800F5; + --base-red-alpha-1: #FF050503; + --base-red-alpha-2: #FF050508; + --base-red-alpha-3: #FF01010F; + --base-red-alpha-4: #FF00001A; + --base-red-alpha-5: #F2000026; + --base-red-alpha-6: #E4010138; + --base-red-alpha-7: #D9000452; + --base-red-alpha-8: #D1000470; + --base-red-alpha-9: #DB0007B8; + --base-red-alpha-10: #D10007C2; + --base-red-alpha-11: #C30007D4; + --base-red-alpha-12: #280003ED; --mapareadistrict-default: var(--surface-highlight-default); --mapareadistrict-hover: var(--action-secondary-success-hovered); --mapareadistrict-selected: var(--action-primary-basic-default); --mapareadistrict-disabled: var(--action-primary-disabled); --mapareadistrict-border: var(--base-gray-slate-solid-9); - --border-focus: #ffffff03; - --transparent: #ffffff00; + --border-focus: #FFFFFF03; + --transparent: #FFFFFF00; --border-onbg-subdued: var(--base-gray-slate-solid-11); --space-0: 0px; @@ -301,35 +303,27 @@ --border-width-2: var(--space-05); --border-width-4: var(--space-1); - --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2), - 0px 0px 1px 0px rgba(0, 0, 0, 0.2); - --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2), - 0px 2px 16px 0px rgba(32, 42, 54, 0.08); + --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2); + --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2), 0px 2px 16px 0px rgba(32, 42, 54, 0.08); --shadow-inset-basic: inset -1px 0px 0px 0px rgba(228, 229, 231, 1); --shadow-inset-button: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2); --shadow-button-pressed: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15); --shadow-button-default: 0px 1px 0px 0px rgba(0, 0, 0, 0.05); - --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), - 0px 0px 0px 1px rgba(6, 44, 82, 0.1); + --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), 0px 0px 0px 1px rgba(6, 44, 82, 0.1); --shadow-basic-faint: 0px 1px 0px 0px rgba(22, 29, 37, 0.05); --shadow-basic-transparent: 0px 0px 0px 0px rgba(0, 0, 0, 0); --shadow-basic-xs: 0px 0px 2px 0px rgba(31, 33, 36, 0.24); --shadow-basic-sm: 0px 1px 1px 0px rgba(31, 33, 36, 0.1); - --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05), - 0px 2px 4px 0px rgba(31, 33, 36, 0.1); - --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05), - 0px 4px 12px 0px rgba(31, 33, 36, 0.2); - --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15), - 0px 4px 18px -2px rgba(31, 33, 36, 0.08); - --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16), - 0px 32px 32px 0px rgba(31, 33, 36, 0.15); - --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12), - 0px 3px 6px -3px rgba(23, 24, 24, 0.08); - --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15), - 0px 0px 5px 0px rgba(23, 24, 24, 0.05); + --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05), 0px 2px 4px 0px rgba(31, 33, 36, 0.1); + --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05), 0px 4px 12px 0px rgba(31, 33, 36, 0.2); + --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15), 0px 4px 18px -2px rgba(31, 33, 36, 0.08); + --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16), 0px 32px 32px 0px rgba(31, 33, 36, 0.15); + --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12), 0px 3px 6px -3px rgba(23, 24, 24, 0.08); + --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(23, 24, 24, 0.05); --shadow-element-topnav: 0px 2px 2px -1px rgba(0, 0, 0, 0.15); --shadow-element-focus: 0px 0px 0px 2px rgba(0, 145, 255, 1); + --z-1: 100; --z-2: 400; --z-3: 513; diff --git a/packages/opub-ui/styles/tailwind/border-radius.js b/packages/opub-ui/styles/tailwind/border-radius.js new file mode 100644 index 00000000..fa5e5856 --- /dev/null +++ b/packages/opub-ui/styles/tailwind/border-radius.js @@ -0,0 +1,11 @@ +module.exports = { + "0": "var(--space-0)", + "05": "var(--space-05)", + "1": "var(--space-1)", + "2": "var(--space-2)", + "3": "var(--space-3)", + "4": "var(--space-4)", + "5": "var(--space-5)", + "6": "var(--space-6)", + "full": "9999px", +} diff --git a/packages/opub-ui/styles/tailwind/border-width.js b/packages/opub-ui/styles/tailwind/border-width.js new file mode 100644 index 00000000..018a18b8 --- /dev/null +++ b/packages/opub-ui/styles/tailwind/border-width.js @@ -0,0 +1,5 @@ +module.exports = { + "1": "var(--space-025)", + "2": "var(--space-05)", + "4": "var(--space-1)", +} diff --git a/packages/opub-ui/styles/tailwind/box-shadow.js b/packages/opub-ui/styles/tailwind/box-shadow.js new file mode 100644 index 00000000..32413699 --- /dev/null +++ b/packages/opub-ui/styles/tailwind/box-shadow.js @@ -0,0 +1,21 @@ +module.exports = { + "shadowModal": "var(--shadow-modal)", + "shadowLayer": "var(--shadow-layer)", + "insetBasic": "var(--shadow-inset-basic)", + "insetButton": "var(--shadow-inset-button)", + "buttonPressed": "var(--shadow-button-pressed)", + "buttonDefault": "var(--shadow-button-default)", + "basicDeep": "var(--shadow-basic-deep)", + "basicFaint": "var(--shadow-basic-faint)", + "basicTransparent": "var(--shadow-basic-transparent)", + "basicXs": "var(--shadow-basic-xs)", + "basicSm": "var(--shadow-basic-sm)", + "basicMd": "var(--shadow-basic-md)", + "basicLg": "var(--shadow-basic-lg)", + "basicXl": "var(--shadow-basic-xl)", + "basic2xl": "var(--shadow-basic-2xl)", + "elementPopover": "var(--shadow-element-popover)", + "elementCard": "var(--shadow-element-card)", + "elementTopNav": "var(--shadow-element-topnav)", + "elementFocus": "var(--shadow-element-focus)", +} diff --git a/packages/opub-ui/styles/tailwind/color.js b/packages/opub-ui/styles/tailwind/color.js new file mode 100644 index 00000000..ded0b84d --- /dev/null +++ b/packages/opub-ui/styles/tailwind/color.js @@ -0,0 +1,275 @@ +module.exports = { + "baseIndigoSolid1": "#FDFDFE", + "baseIndigoSolid2": "#F8FAFF", + "baseIndigoSolid3": "#F0F4FF", + "baseIndigoSolid4": "#E6EDFE", + "baseIndigoSolid5": "#D9E2FC", + "baseIndigoSolid6": "#C6D4F9", + "baseIndigoSolid7": "#AEC0F5", + "baseIndigoSolid8": "#8DA4EF", + "baseIndigoSolid9": "#3E63DD", + "baseIndigoSolid10": "#3A5CCC", + "baseIndigoSolid11": "#3451B2", + "baseIndigoSolid12": "#101D46", + "baseBlueSolid1": "#FBFDFF", + "baseBlueSolid2": "#F5FAFF", + "baseBlueSolid3": "#EDF6FF", + "baseBlueSolid4": "#E1F0FF", + "baseBlueSolid5": "#CEE7FE", + "baseBlueSolid6": "#B7D9F8", + "baseBlueSolid7": "#96C7F2", + "baseBlueSolid8": "#5EB0EF", + "baseBlueSolid9": "#0091FF", + "baseBlueSolid10": "#0081F1", + "baseBlueSolid11": "#006ADC", + "baseBlueSolid12": "#00254D", + "baseVioletSolid1": "#FDFCFE", + "baseVioletSolid2": "#FBFAFF", + "baseVioletSolid3": "#F5F2FF", + "baseVioletSolid4": "#EDE9FE", + "baseVioletSolid5": "#E4DEFC", + "baseVioletSolid6": "#D7CFF9", + "baseVioletSolid7": "#C4B8F3", + "baseVioletSolid8": "#AA99EC", + "baseVioletSolid9": "#6E56CF", + "baseVioletSolid10": "#644FC1", + "baseVioletSolid11": "#5746AF", + "baseVioletSolid12": "#20134B", + "baseGraySlateSolid1": "#FBFCFD", + "baseGraySlateSolid2": "#F8F9FA", + "baseGraySlateSolid3": "#F1F3F5", + "baseGraySlateSolid4": "#ECEEF0", + "baseGraySlateSolid5": "#E6E8EB", + "baseGraySlateSolid6": "#DFE3E6", + "baseGraySlateSolid7": "#D7DBDF", + "baseGraySlateSolid8": "#C1C8CD", + "baseGraySlateSolid9": "#889096", + "baseGraySlateSolid10": "#7E868C", + "baseGraySlateSolid11": "#687076", + "baseGraySlateSolid12": "#11181C", + "baseRedSolid1": "#FFFCFC", + "baseRedSolid2": "#FFF8F8", + "baseRedSolid3": "#FFEFEF", + "baseRedSolid4": "#FFE5E5", + "baseRedSolid5": "#FDD8D8", + "baseRedSolid6": "#F9C6C6", + "baseRedSolid7": "#F3AEAF", + "baseRedSolid8": "#EB9091", + "baseRedSolid9": "#E5484D", + "baseRedSolid10": "#DC3D43", + "baseRedSolid11": "#CD2B31", + "baseRedSolid12": "#381316", + "baseGreenSolid1": "#FBFEFC", + "baseGreenSolid2": "#F2FCF5", + "baseGreenSolid3": "#E9F9EE", + "baseGreenSolid4": "#DDF3E4", + "baseGreenSolid5": "#CCEBD7", + "baseGreenSolid6": "#B4DFC4", + "baseGreenSolid7": "#92CEAC", + "baseGreenSolid8": "#5BB98C", + "baseGreenSolid9": "#30A46C", + "baseGreenSolid10": "#299764", + "baseGreenSolid11": "#18794E", + "baseGreenSolid12": "#153226", + "baseAmberSolid1": "#FEFDFB", + "baseAmberSolid2": "#FFF9ED", + "baseAmberSolid3": "#FFF4D5", + "baseAmberSolid4": "#FFECBC", + "baseAmberSolid5": "#FFE3A2", + "baseAmberSolid6": "#FFD386", + "baseAmberSolid7": "#F3BA63", + "baseAmberSolid8": "#EE9D2B", + "baseAmberSolid9": "#FFB224", + "baseAmberSolid10": "#FFA01C", + "baseAmberSolid11": "#AD5700", + "baseAmberSolid12": "#4E2009", + "basePureWhite": "#FFFFFF", + "basePureBlack": "#000000", + "textDefault": "var(--base-gray-slate-solid-12)", + "textMedium": "var(--base-gray-slate-solid-11)", + "textSubdued": "#3E4346", + "textDisabled": "var(--base-gray-slate-solid-9)", + "textCritical": "var(--base-red-solid-11)", + "textWarning": "var(--base-amber-solid-11)", + "textSuccess": "var(--base-green-solid-11)", + "textHighlight": "var(--base-violet-solid-11)", + "textInteractive": "var(--base-blue-solid-11)", + "textOnBGDefault": "var(--base-gray-slate-solid-1)", + "textOnBGDisabled": "var(--base-gray-slate-solid-9)", + "borderDefault": "var(--base-gray-slate-solid-8)", + "borderSubdued": "var(--base-gray-slate-solid-7)", + "borderDisabled": "var(--base-gray-slate-solid-6)", + "borderCriticalDefault": "var(--base-red-solid-8)", + "borderCriticalDisabled": "var(--base-red-solid-7)", + "borderCriticalSubdued": "var(--base-red-solid-6)", + "borderSuccessDefault": "var(--base-green-solid-8)", + "borderSuccessSubdued": "var(--base-green-solid-7)", + "borderWarningDefault": "var(--base-amber-solid-8)", + "borderWarningSubdued": "var(--base-amber-solid-7)", + "borderHighlightDefault": "var(--base-violet-solid-8)", + "borderHighlightSubdued": "var(--base-violet-solid-7)", + "borderHighlightOnBGSubdued": "var(--base-violet-solid-9)", + "borderHighlightOnBGDefault": "var(--base-violet-solid-7)", + "borderInteractiveDefault": "var(--base-blue-solid-8)", + "borderInteractiveFocused": "var(--base-blue-solid-7)", + "iconDefault": "var(--base-gray-slate-solid-11)", + "iconSubdued": "var(--base-gray-slate-solid-10)", + "iconDisabled": "var(--base-gray-slate-solid-9)", + "iconCritical": "var(--base-red-solid-10)", + "actionPrimaryBasicDefault": "var(--base-violet-solid-9)", + "iconWarning": "var(--base-amber-solid-10)", + "actionPrimaryBasicHovered": "var(--base-violet-solid-10)", + "iconSuccess": "var(--base-green-solid-10)", + "actionPrimaryBasicPressed": "var(--base-violet-solid-11)", + "iconHighlight": "var(--base-violet-solid-10)", + "iconInteractive": "var(--base-indigo-solid-11)", + "actionPrimaryBasicDepressed": "var(--base-violet-solid-12)", + "iconOnBGDefault": "var(--base-gray-slate-solid-1)", + "actionPrimaryDisabled": "var(--base-gray-slate-solid-9)", + "iconOnBGSubdued": "var(--base-gray-slate-solid-4)", + "actionPrimaryCriticalDefault": "var(--base-red-solid-9)", + "iconOnBGDisabled": "var(--base-gray-slate-solid-9)", + "actionPrimarySuccessDefault": "var(--base-green-solid-9)", + "actionPrimaryCriticalHovered": "var(--base-red-solid-10)", + "actionSecondaryCriticalPressed": "var(--base-red-solid-5)", + "actionSecondaryCriticalHovered": "var(--base-red-solid-4)", + "actionSecondaryCriticalDepressed": "var(--base-red-solid-6)", + "actionPrimaryInteractiveDefault": "var(--base-blue-solid-9)", + "actionSecondaryCriticalDefault": "var(--base-red-solid-3)", + "actionPrimaryInteractiveHovered": "var(--base-blue-solid-10)", + "actionPrimaryInteractivePressed": "var(--base-blue-solid-11)", + "actionPrimaryInteractiveDepressed": "var(--base-blue-solid-12)", + "actionPrimaryCriticalPressed": "var(--base-red-solid-11)", + "actionSecondaryBasicDefault": "var(--base-violet-solid-3)", + "actionPrimarySuccessHovered": "var(--base-green-solid-10)", + "actionPrimarySuccessPressed": "var(--base-green-solid-11)", + "actionSecondaryDisabled": "var(--base-gray-slate-solid-3)", + "actionPrimaryCriticalDepressed": "var(--base-red-solid-12)", + "actionSecondaryInteractivePressed": "var(--base-blue-solid-5)", + "actionSecondarySuccessPressed": "var(--base-green-solid-5)", + "actionPrimarySuccessDepressed": "var(--base-green-solid-12)", + "actionSecondaryInteractiveHovered": "var(--base-blue-solid-4)", + "actionSecondarySuccessDepressed": "var(--base-green-solid-6)", + "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)", + "actionSecondarySuccessHovered": "var(--base-green-solid-4)", + "actionSecondaryInteractiveDepressed": "var(--base-blue-solid-6)", + "actionSecondarySuccessDefault": "var(--base-green-solid-3)", + "actionSecondaryNeutralHovered": "var(--base-gray-slate-solid-2)", + "actionSecondaryInteractiveDefault": "var(--base-blue-solid-3)", + "actionSecondaryBasicHovered": "var(--base-violet-solid-4)", + "actionSecondaryBasicPressed": "var(--base-violet-solid-5)", + "actionSecondaryNeutralPressed": "var(--base-gray-slate-solid-5)", + "actionSecondaryBasicDepressed": "var(--base-violet-solid-6)", + "actionSecondaryNeutralDepressed": "var(--base-gray-slate-solid-6)", + "actionTertiaryBasicHover": "var(--base-violet-alpha-2)", + "baseIndigoAlpha1": "#05058203", + "actionTertiaryInteractiveHover": "var(--base-blue-alpha-2)", + "actionTertiarySuccessHover": "var(--base-green-alpha-2)", + "baseIndigoAlpha2": "#054CFF08", + "actionTertiaryCriticalHover": "var(--base-red-alpha-2)", + "baseIndigoAlpha3": "#0144FF0F", + "baseIndigoAlpha4": "#0247F51A", + "baseIndigoAlpha5": "#023CEB26", + "backgroundAlphaDark": "var(--base-indigo-alpha-12)", + "baseIndigoAlpha6": "#013DE438", + "backgroundAlphaMedium": "var(--base-indigo-alpha-4)", + "baseIndigoAlpha7": "#0038E052", + "baseIndigoAlpha8": "#0134DB73", + "baseIndigoAlpha9": "#0031D2C2", + "backgroundSolidSubdued": "var(--base-indigo-solid-2)", + "backgroundSolidDark": "var(--base-indigo-solid-12)", + "backgroundSolidDefault": "var(--base-indigo-solid-3)", + "surfaceDefault": "var(--base-pure-white)", + "surfaceSubdued": "var(--base-gray-slate-solid-2)", + "baseIndigoAlpha10": "#002CBDC4", + "surfaceSelected": "var(--base-blue-solid-2)", + "baseIndigoAlpha11": "#00259ECC", + "baseIndigoAlpha12": "#000E3AF0", + "surfaceWarning": "var(--base-amber-solid-2)", + "baseBlueAlpha1": "#0582FF05", + "surfaceCritical": "var(--base-red-solid-2)", + "baseBlueAlpha2": "#0582FF0A", + "surfaceSuccess": "var(--base-green-solid-2)", + "baseBlueAlpha3": "#0280FF12", + "surfaceHighlightSubdued": "var(--base-violet-solid-2)", + "baseBlueAlpha4": "#0180FF1F", + "surfaceInteractive": "var(--base-blue-solid-2)", + "baseBlueAlpha5": "#0180EF30", + "surfaceHighlightDefault": "var(--base-violet-solid-4)", + "baseBlueAlpha6": "#0177E647", + "surfaceHighlightHovered": "var(--base-violet-solid-6)", + "baseBlueAlpha7": "#0077DF69", + "baseBlueAlpha8": "#0082E6A1", + "baseBlueAlpha9": "#0091FFFA", + "baseBlueAlpha10": "#0080F1FA", + "baseBlueAlpha11": "#0066DBFA", + "baseBlueAlpha12": "#002149FA", + "baseVioletAlpha1": "#5805AB03", + "baseVioletAlpha2": "#3705FF05", + "baseVioletAlpha3": "#3C00FF0D", + "baseVioletAlpha4": "#2E02F417", + "baseVioletAlpha5": "#2F01E821", + "baseVioletAlpha6": "#2A01DF30", + "baseVioletAlpha7": "#2B01D447", + "baseVioletAlpha8": "#2A00D066", + "baseVioletAlpha9": "#2500B6A8", + "baseVioletAlpha10": "#1F00A5B0", + "baseVioletAlpha11": "#180091BA", + "baseVioletAlpha12": "#0E003DED", + "baseGraySlateAlpha1": "#05448205", + "baseGraySlateAlpha2": "#05294D08", + "baseGraySlateAlpha3": "#0025490D", + "baseGraySlateAlpha4": "#021C3714", + "baseGraySlateAlpha5": "#0217351A", + "baseGraySlateAlpha6": "#01213921", + "baseGraySlateAlpha7": "#001A3329", + "baseGraySlateAlpha8": "#011E323D", + "baseGraySlateAlpha9": "#00111E78", + "baseGraySlateAlpha10": "#00101B82", + "baseGraySlateAlpha11": "#000E1896", + "baseGraySlateAlpha12": "#00080CED", + "baseGreenAlpha1": "#05C04305", + "baseGreenAlpha2": "#00C43B0D", + "baseGreenAlpha3": "#02BA3C17", + "baseGreenAlpha4": "#01A63521", + "baseGreenAlpha5": "#009B3633", + "baseGreenAlpha6": "#0193364A", + "baseGreenAlpha7": "#008C3D6E", + "baseGreenAlpha8": "#00934CA3", + "baseGreenAlpha9": "#008F4ACF", + "baseGreenAlpha10": "#008346D6", + "baseGreenAlpha11": "#006B3BE8", + "baseGreenAlpha12": "#002012EB", + "baseAmberAlpha1": "#C0820505", + "baseAmberAlpha2": "#FFAB0212", + "baseAmberAlpha3": "#FFBB012B", + "baseAmberAlpha4": "#FFB70042", + "baseAmberAlpha5": "#FFB3005E", + "baseAmberAlpha6": "#FFA20178", + "baseAmberAlpha7": "#EC8D009C", + "baseAmberAlpha8": "#EA8900D4", + "baseAmberAlpha9": "#FFA600DB", + "baseAmberAlpha10": "#FF9500E3", + "baseAmberAlpha11": "#AB5300FA", + "baseAmberAlpha12": "#481800F5", + "baseRedAlpha1": "#FF050503", + "baseRedAlpha2": "#FF050508", + "baseRedAlpha3": "#FF01010F", + "baseRedAlpha4": "#FF00001A", + "baseRedAlpha5": "#F2000026", + "baseRedAlpha6": "#E4010138", + "baseRedAlpha7": "#D9000452", + "baseRedAlpha8": "#D1000470", + "baseRedAlpha9": "#DB0007B8", + "baseRedAlpha10": "#D10007C2", + "baseRedAlpha11": "#C30007D4", + "baseRedAlpha12": "#280003ED", + "mapareadistrictDefault": "var(--surface-highlight-default)", + "mapareadistrictHover": "var(--action-secondary-success-hovered)", + "mapareadistrictSelected": "var(--action-primary-basic-default)", + "mapareadistrictDisabled": "var(--action-primary-disabled)", + "mapareadistrictBorder": "var(--base-gray-slate-solid-9)", + "borderFocus": "#FFFFFF03", + "transparent": "#FFFFFF00", + "borderOnBGSubdued": "var(--base-gray-slate-solid-11)", +} diff --git a/packages/opub-ui/styles/tailwind/duration.js b/packages/opub-ui/styles/tailwind/duration.js new file mode 100644 index 00000000..ee478106 --- /dev/null +++ b/packages/opub-ui/styles/tailwind/duration.js @@ -0,0 +1,13 @@ +module.exports = { + 0: 'var(--duration-0)', + 100: 'var(--duration-100)', + 150: 'var(--duration-150)', + 200: 'var(--duration-200)', + 250: 'var(--duration-250)', + 300: 'var(--duration-300)', + 350: 'var(--duration-350)', + 400: 'var(--duration-400)', + 450: 'var(--duration-450)', + 500: 'var(--duration-500)', + 5000: 'var(--duration-5000)', +}; diff --git a/packages/opub-ui/styles/tailwind/ease-function.js b/packages/opub-ui/styles/tailwind/ease-function.js new file mode 100644 index 00000000..75445c09 --- /dev/null +++ b/packages/opub-ui/styles/tailwind/ease-function.js @@ -0,0 +1,7 @@ +module.exports = { + ease: 'var(--ease)', + linear: 'var(--linear)', + 'ease-in': 'var(--ease-in)', + 'ease-out': 'var(--ease-out)', + 'ease-in-out': 'var(--ease-in-out)', +}; diff --git a/packages/opub-ui/styles/tailwind/font-family.js b/packages/opub-ui/styles/tailwind/font-family.js new file mode 100644 index 00000000..7fea5209 --- /dev/null +++ b/packages/opub-ui/styles/tailwind/font-family.js @@ -0,0 +1,4 @@ +module.exports = { + primary: 'var(--font-family-primary)', + mono: 'var(--font-family-mono)', +}; diff --git a/packages/opub-ui/styles/tailwind/font-size.js b/packages/opub-ui/styles/tailwind/font-size.js new file mode 100644 index 00000000..bebb8b65 --- /dev/null +++ b/packages/opub-ui/styles/tailwind/font-size.js @@ -0,0 +1,10 @@ +module.exports = { + 75: 'var(--font-size-75)', + 100: 'var(--font-size-100)', + 200: 'var(--font-size-200)', + 300: 'var(--font-size-300)', + 400: 'var(--font-size-400)', + 500: 'var(--font-size-500)', + 600: 'var(--font-size-600)', + 700: 'var(--font-size-700)', +}; diff --git a/packages/opub-ui/styles/tailwind/font-weight.js b/packages/opub-ui/styles/tailwind/font-weight.js new file mode 100644 index 00000000..b46bd26b --- /dev/null +++ b/packages/opub-ui/styles/tailwind/font-weight.js @@ -0,0 +1,6 @@ +module.exports = { + Regular: 'var(--font-weight-regular)', + Medium: 'var(--font-weight-medium)', + Bold: 'var(--font-weight-bold)', + 'Extra-Bold': 'var(--font-weight-extra-bold)', +}; diff --git a/packages/opub-ui/styles/tailwind/line-height.js b/packages/opub-ui/styles/tailwind/line-height.js new file mode 100644 index 00000000..ef65b16a --- /dev/null +++ b/packages/opub-ui/styles/tailwind/line-height.js @@ -0,0 +1,9 @@ +module.exports = { + 1: 'var(--font-line-height-1)', + 2: 'var(--font-line-height-2)', + 3: 'var(--font-line-height-3)', + 4: 'var(--font-line-height-4)', + 5: 'var(--font-line-height-5)', + 6: 'var(--font-line-height-6)', + 7: 'var(--font-line-height-7)', +}; diff --git a/packages/opub-ui/styles/tailwind/space.js b/packages/opub-ui/styles/tailwind/space.js new file mode 100644 index 00000000..2219de0a --- /dev/null +++ b/packages/opub-ui/styles/tailwind/space.js @@ -0,0 +1,18 @@ +module.exports = { + "0": "0px", + "025": "1px", + "05": "2px", + "1": "4px", + "2": "8px", + "3": "12px", + "4": "16px", + "5": "20px", + "6": "24px", + "8": "32px", + "10": "40px", + "12": "48px", + "16": "64px", + "20": "80px", + "24": "96px", + "32": "128px", +} diff --git a/packages/opub-ui/styles/tailwind/z-index.js b/packages/opub-ui/styles/tailwind/z-index.js new file mode 100644 index 00000000..b0bb0bfd --- /dev/null +++ b/packages/opub-ui/styles/tailwind/z-index.js @@ -0,0 +1,13 @@ +module.exports = { + 1: 'var(--z-1)', + 2: 'var(--z-2)', + 3: 'var(--z-3)', + 4: 'var(--z-4)', + 5: 'var(--z-5)', + 6: 'var(--z-6)', + 7: 'var(--z-7)', + 8: 'var(--z-8)', + 9: 'var(--z-9)', + 10: 'var(--z-10)', + max: 'var(--z-max)', +}; diff --git a/packages/opub-ui/styles/tokens.json b/packages/opub-ui/styles/tokens.json new file mode 100644 index 00000000..6c9fd67c --- /dev/null +++ b/packages/opub-ui/styles/tokens.json @@ -0,0 +1,3360 @@ +{ + "collections": [ + { + "name": "Colors", + "modes": [ + { + "name": "Light", + "variables": [ + { + "name": "base/indigo/solid/1", + "type": "color", + "isAlias": false, + "value": "#FDFDFE" + }, + { + "name": "base/indigo/solid/2", + "type": "color", + "isAlias": false, + "value": "#F8FAFF" + }, + { + "name": "base/indigo/solid/3", + "type": "color", + "isAlias": false, + "value": "#F0F4FF" + }, + { + "name": "base/indigo/solid/4", + "type": "color", + "isAlias": false, + "value": "#E6EDFE" + }, + { + "name": "base/indigo/solid/5", + "type": "color", + "isAlias": false, + "value": "#D9E2FC" + }, + { + "name": "base/indigo/solid/6", + "type": "color", + "isAlias": false, + "value": "#C6D4F9" + }, + { + "name": "base/indigo/solid/7", + "type": "color", + "isAlias": false, + "value": "#AEC0F5" + }, + { + "name": "base/indigo/solid/8", + "type": "color", + "isAlias": false, + "value": "#8DA4EF" + }, + { + "name": "base/indigo/solid/9", + "type": "color", + "isAlias": false, + "value": "#3E63DD" + }, + { + "name": "base/indigo/solid/10", + "type": "color", + "isAlias": false, + "value": "#3A5CCC" + }, + { + "name": "base/indigo/solid/11", + "type": "color", + "isAlias": false, + "value": "#3451B2" + }, + { + "name": "base/indigo/solid/12", + "type": "color", + "isAlias": false, + "value": "#101D46" + }, + { + "name": "base/blue/solid/1", + "type": "color", + "isAlias": false, + "value": "#FBFDFF" + }, + { + "name": "base/blue/solid/2", + "type": "color", + "isAlias": false, + "value": "#F5FAFF" + }, + { + "name": "base/blue/solid/3", + "type": "color", + "isAlias": false, + "value": "#EDF6FF" + }, + { + "name": "base/blue/solid/4", + "type": "color", + "isAlias": false, + "value": "#E1F0FF" + }, + { + "name": "base/blue/solid/5", + "type": "color", + "isAlias": false, + "value": "#CEE7FE" + }, + { + "name": "base/blue/solid/6", + "type": "color", + "isAlias": false, + "value": "#B7D9F8" + }, + { + "name": "base/blue/solid/7", + "type": "color", + "isAlias": false, + "value": "#96C7F2" + }, + { + "name": "base/blue/solid/8", + "type": "color", + "isAlias": false, + "value": "#5EB0EF" + }, + { + "name": "base/blue/solid/9", + "type": "color", + "isAlias": false, + "value": "#0091FF" + }, + { + "name": "base/blue/solid/10", + "type": "color", + "isAlias": false, + "value": "#0081F1" + }, + { + "name": "base/blue/solid/11", + "type": "color", + "isAlias": false, + "value": "#006ADC" + }, + { + "name": "base/blue/solid/12", + "type": "color", + "isAlias": false, + "value": "#00254D" + }, + { + "name": "base/violet/solid/1", + "type": "color", + "isAlias": false, + "value": "#FDFCFE" + }, + { + "name": "base/violet/solid/2", + "type": "color", + "isAlias": false, + "value": "#FBFAFF" + }, + { + "name": "base/violet/solid/3", + "type": "color", + "isAlias": false, + "value": "#F5F2FF" + }, + { + "name": "base/violet/solid/4", + "type": "color", + "isAlias": false, + "value": "#EDE9FE" + }, + { + "name": "base/violet/solid/5", + "type": "color", + "isAlias": false, + "value": "#E4DEFC" + }, + { + "name": "base/violet/solid/6", + "type": "color", + "isAlias": false, + "value": "#D7CFF9" + }, + { + "name": "base/violet/solid/7", + "type": "color", + "isAlias": false, + "value": "#C4B8F3" + }, + { + "name": "base/violet/solid/8", + "type": "color", + "isAlias": false, + "value": "#AA99EC" + }, + { + "name": "base/violet/solid/9", + "type": "color", + "isAlias": false, + "value": "#6E56CF" + }, + { + "name": "base/violet/solid/10", + "type": "color", + "isAlias": false, + "value": "#644FC1" + }, + { + "name": "base/violet/solid/11", + "type": "color", + "isAlias": false, + "value": "#5746AF" + }, + { + "name": "base/violet/solid/12", + "type": "color", + "isAlias": false, + "value": "#20134B" + }, + { + "name": "base/gray/slate/solid/1", + "type": "color", + "isAlias": false, + "value": "#FBFCFD" + }, + { + "name": "base/gray/slate/solid/2", + "type": "color", + "isAlias": false, + "value": "#F8F9FA" + }, + { + "name": "base/gray/slate/solid/3", + "type": "color", + "isAlias": false, + "value": "#F1F3F5" + }, + { + "name": "base/gray/slate/solid/4", + "type": "color", + "isAlias": false, + "value": "#ECEEF0" + }, + { + "name": "base/gray/slate/solid/5", + "type": "color", + "isAlias": false, + "value": "#E6E8EB" + }, + { + "name": "base/gray/slate/solid/6", + "type": "color", + "isAlias": false, + "value": "#DFE3E6" + }, + { + "name": "base/gray/slate/solid/7", + "type": "color", + "isAlias": false, + "value": "#D7DBDF" + }, + { + "name": "base/gray/slate/solid/8", + "type": "color", + "isAlias": false, + "value": "#C1C8CD" + }, + { + "name": "base/gray/slate/solid/9", + "type": "color", + "isAlias": false, + "value": "#889096" + }, + { + "name": "base/gray/slate/solid/10", + "type": "color", + "isAlias": false, + "value": "#7E868C" + }, + { + "name": "base/gray/slate/solid/11", + "type": "color", + "isAlias": false, + "value": "#687076" + }, + { + "name": "base/gray/slate/solid/12", + "type": "color", + "isAlias": false, + "value": "#11181C" + }, + { + "name": "base/red/solid/1", + "type": "color", + "isAlias": false, + "value": "#FFFCFC" + }, + { + "name": "base/red/solid/2", + "type": "color", + "isAlias": false, + "value": "#FFF8F8" + }, + { + "name": "base/red/solid/3", + "type": "color", + "isAlias": false, + "value": "#FFEFEF" + }, + { + "name": "base/red/solid/4", + "type": "color", + "isAlias": false, + "value": "#FFE5E5" + }, + { + "name": "base/red/solid/5", + "type": "color", + "isAlias": false, + "value": "#FDD8D8" + }, + { + "name": "base/red/solid/6", + "type": "color", + "isAlias": false, + "value": "#F9C6C6" + }, + { + "name": "base/red/solid/7", + "type": "color", + "isAlias": false, + "value": "#F3AEAF" + }, + { + "name": "base/red/solid/8", + "type": "color", + "isAlias": false, + "value": "#EB9091" + }, + { + "name": "base/red/solid/9", + "type": "color", + "isAlias": false, + "value": "#E5484D" + }, + { + "name": "base/red/solid/10", + "type": "color", + "isAlias": false, + "value": "#DC3D43" + }, + { + "name": "base/red/solid/11", + "type": "color", + "isAlias": false, + "value": "#CD2B31" + }, + { + "name": "base/red/solid/12", + "type": "color", + "isAlias": false, + "value": "#381316" + }, + { + "name": "base/green/solid/1", + "type": "color", + "isAlias": false, + "value": "#FBFEFC" + }, + { + "name": "base/green/solid/2", + "type": "color", + "isAlias": false, + "value": "#F2FCF5" + }, + { + "name": "base/green/solid/3", + "type": "color", + "isAlias": false, + "value": "#E9F9EE" + }, + { + "name": "base/green/solid/4", + "type": "color", + "isAlias": false, + "value": "#DDF3E4" + }, + { + "name": "base/green/solid/5", + "type": "color", + "isAlias": false, + "value": "#CCEBD7" + }, + { + "name": "base/green/solid/6", + "type": "color", + "isAlias": false, + "value": "#B4DFC4" + }, + { + "name": "base/green/solid/7", + "type": "color", + "isAlias": false, + "value": "#92CEAC" + }, + { + "name": "base/green/solid/8", + "type": "color", + "isAlias": false, + "value": "#5BB98C" + }, + { + "name": "base/green/solid/9", + "type": "color", + "isAlias": false, + "value": "#30A46C" + }, + { + "name": "base/green/solid/10", + "type": "color", + "isAlias": false, + "value": "#299764" + }, + { + "name": "base/green/solid/11", + "type": "color", + "isAlias": false, + "value": "#18794E" + }, + { + "name": "base/green/solid/12", + "type": "color", + "isAlias": false, + "value": "#153226" + }, + { + "name": "base/amber/solid/1", + "type": "color", + "isAlias": false, + "value": "#FEFDFB" + }, + { + "name": "base/amber/solid/2", + "type": "color", + "isAlias": false, + "value": "#FFF9ED" + }, + { + "name": "base/amber/solid/3", + "type": "color", + "isAlias": false, + "value": "#FFF4D5" + }, + { + "name": "base/amber/solid/4", + "type": "color", + "isAlias": false, + "value": "#FFECBC" + }, + { + "name": "base/amber/solid/5", + "type": "color", + "isAlias": false, + "value": "#FFE3A2" + }, + { + "name": "base/amber/solid/6", + "type": "color", + "isAlias": false, + "value": "#FFD386" + }, + { + "name": "base/amber/solid/7", + "type": "color", + "isAlias": false, + "value": "#F3BA63" + }, + { + "name": "base/amber/solid/8", + "type": "color", + "isAlias": false, + "value": "#EE9D2B" + }, + { + "name": "base/amber/solid/9", + "type": "color", + "isAlias": false, + "value": "#FFB224" + }, + { + "name": "base/amber/solid/10", + "type": "color", + "isAlias": false, + "value": "#FFA01C" + }, + { + "name": "base/amber/solid/11", + "type": "color", + "isAlias": false, + "value": "#AD5700" + }, + { + "name": "base/amber/solid/12", + "type": "color", + "isAlias": false, + "value": "#4E2009" + }, + { + "name": "base/Pure/White", + "type": "color", + "isAlias": false, + "value": "#FFFFFF" + }, + { + "name": "base/Pure/Black", + "type": "color", + "isAlias": false, + "value": "#000000" + }, + { + "name": "Text/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/12" + } + }, + { + "name": "Text/Medium", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + }, + { + "name": "Text/Subdued", + "type": "color", + "isAlias": false, + "value": "#3E4346" + }, + { + "name": "Text/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Text/Critical", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/11" + } + }, + { + "name": "Text/Warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/11" + } + }, + { + "name": "Text/Success", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/11" + } + }, + { + "name": "Text/Highlight", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/11" + } + }, + { + "name": "Text/Interactive", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/11" + } + }, + { + "name": "Text/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Text/OnBG/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/8" + } + }, + { + "name": "Border/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/7" + } + }, + { + "name": "Border/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/6" + } + }, + { + "name": "Border/Critical/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/8" + } + }, + { + "name": "Border/Critical/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/7" + } + }, + { + "name": "Border/Critical/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/6" + } + }, + { + "name": "Border/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/8" + } + }, + { + "name": "Border/Success/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/7" + } + }, + { + "name": "Border/Warning/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/8" + } + }, + { + "name": "Border/Warning/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/7" + } + }, + { + "name": "Border/Highlight/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/8" + } + }, + { + "name": "Border/Highlight/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/7" + } + }, + { + "name": "Border/Highlight/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/9" + } + }, + { + "name": "Border/Highlight/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/7" + } + }, + { + "name": "Border/Interactive/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/8" + } + }, + { + "name": "Border/Interactive/Focused", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/7" + } + }, + { + "name": "Icon/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + }, + { + "name": "Icon/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/10" + } + }, + { + "name": "Icon/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Icon/Critical", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/10" + } + }, + { + "name": "Action/Primary/Basic/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/9" + } + }, + { + "name": "Icon/Warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/10" + } + }, + { + "name": "Action/Primary/Basic/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/10" + } + }, + { + "name": "Icon/Success", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/10" + } + }, + { + "name": "Action/Primary/Basic/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/11" + } + }, + { + "name": "Icon/Highlight", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/10" + } + }, + { + "name": "Icon/Interactive", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/11" + } + }, + { + "name": "Action/Primary/Basic/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/12" + } + }, + { + "name": "Icon/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Action/Primary/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Icon/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/4" + } + }, + { + "name": "Action/Primary/Critical/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/9" + } + }, + { + "name": "Icon/OnBG/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Action/Primary/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/9" + } + }, + { + "name": "Action/Primary/Critical/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/10" + } + }, + { + "name": "Action/Secondary/Critical/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/5" + } + }, + { + "name": "Action/Secondary/Critical/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/4" + } + }, + { + "name": "Action/Secondary/Critical/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/6" + } + }, + { + "name": "Action/Primary/Interactive/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/9" + } + }, + { + "name": "Action/Secondary/Critical/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/3" + } + }, + { + "name": "Action/Primary/Interactive/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/10" + } + }, + { + "name": "Action/Primary/Interactive/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/11" + } + }, + { + "name": "Action/Primary/Interactive/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/12" + } + }, + { + "name": "Action/Primary/Critical/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/11" + } + }, + { + "name": "Action/Secondary/Basic/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/3" + } + }, + { + "name": "Action/Primary/Success/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/10" + } + }, + { + "name": "Action/Primary/Success/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/11" + } + }, + { + "name": "Action/Secondary/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/3" + } + }, + { + "name": "Action/Primary/Critical/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/12" + } + }, + { + "name": "Action/Secondary/Interactive/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/5" + } + }, + { + "name": "Action/Secondary/Success/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/5" + } + }, + { + "name": "Action/Primary/Success/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/12" + } + }, + { + "name": "Action/Secondary/Interactive/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/4" + } + }, + { + "name": "Action/Secondary/Success/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/6" + } + }, + { + "name": "Action/Secondary/Neutral/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Action/Secondary/Success/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/4" + } + }, + { + "name": "Action/Secondary/Interactive/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/6" + } + }, + { + "name": "Action/Secondary/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/3" + } + }, + { + "name": "Action/Secondary/Neutral/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/2" + } + }, + { + "name": "Action/Secondary/Interactive/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/3" + } + }, + { + "name": "Action/Secondary/Basic/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/4" + } + }, + { + "name": "Action/Secondary/Basic/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/5" + } + }, + { + "name": "Action/Secondary/Neutral/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/5" + } + }, + { + "name": "Action/Secondary/Basic/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/6" + } + }, + { + "name": "Action/Secondary/Neutral/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/6" + } + }, + { + "name": "Action/Tertiary/Basic/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/alpha/2" + } + }, + { + "name": "base/indigo/alpha/1", + "type": "color", + "isAlias": false, + "value": "#05058203" + }, + { + "name": "Action/Tertiary/Interactive/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/alpha/2" + } + }, + { + "name": "Action/Tertiary/Success/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/alpha/2" + } + }, + { + "name": "base/indigo/alpha/2", + "type": "color", + "isAlias": false, + "value": "#054CFF08" + }, + { + "name": "Action/Tertiary/Critical/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/alpha/2" + } + }, + { + "name": "base/indigo/alpha/3", + "type": "color", + "isAlias": false, + "value": "#0144FF0F" + }, + { + "name": "base/indigo/alpha/4", + "type": "color", + "isAlias": false, + "value": "#0247F51A" + }, + { + "name": "base/indigo/alpha/5", + "type": "color", + "isAlias": false, + "value": "#023CEB26" + }, + { + "name": "Background/Alpha/Dark", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/alpha/12" + } + }, + { + "name": "base/indigo/alpha/6", + "type": "color", + "isAlias": false, + "value": "#013DE438" + }, + { + "name": "Background/Alpha/Medium", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/alpha/4" + } + }, + { + "name": "base/indigo/alpha/7", + "type": "color", + "isAlias": false, + "value": "#0038E052" + }, + { + "name": "base/indigo/alpha/8", + "type": "color", + "isAlias": false, + "value": "#0134DB73" + }, + { + "name": "base/indigo/alpha/9", + "type": "color", + "isAlias": false, + "value": "#0031D2C2" + }, + { + "name": "Background/Solid/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/2" + } + }, + { + "name": "Background/Solid/Dark", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/12" + } + }, + { + "name": "Background/Solid/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/3" + } + }, + { + "name": "Surface/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/Pure/White" + } + }, + { + "name": "Surface/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/2" + } + }, + { + "name": "base/indigo/alpha/10", + "type": "color", + "isAlias": false, + "value": "#002CBDC4" + }, + { + "name": "Surface/Selected", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/2" + } + }, + { + "name": "base/indigo/alpha/11", + "type": "color", + "isAlias": false, + "value": "#00259ECC" + }, + { + "name": "base/indigo/alpha/12", + "type": "color", + "isAlias": false, + "value": "#000E3AF0" + }, + { + "name": "Surface/Warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/2" + } + }, + { + "name": "base/blue/alpha/1", + "type": "color", + "isAlias": false, + "value": "#0582FF05" + }, + { + "name": "Surface/Critical", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/2" + } + }, + { + "name": "base/blue/alpha/2", + "type": "color", + "isAlias": false, + "value": "#0582FF0A" + }, + { + "name": "Surface/Success", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/2" + } + }, + { + "name": "base/blue/alpha/3", + "type": "color", + "isAlias": false, + "value": "#0280FF12" + }, + { + "name": "Surface/Highlight/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/2" + } + }, + { + "name": "base/blue/alpha/4", + "type": "color", + "isAlias": false, + "value": "#0180FF1F" + }, + { + "name": "Surface/Interactive", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/2" + } + }, + { + "name": "base/blue/alpha/5", + "type": "color", + "isAlias": false, + "value": "#0180EF30" + }, + { + "name": "Surface/Highlight/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/4" + } + }, + { + "name": "base/blue/alpha/6", + "type": "color", + "isAlias": false, + "value": "#0177E647" + }, + { + "name": "Surface/Highlight/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/6" + } + }, + { + "name": "base/blue/alpha/7", + "type": "color", + "isAlias": false, + "value": "#0077DF69" + }, + { + "name": "base/blue/alpha/8", + "type": "color", + "isAlias": false, + "value": "#0082E6A1" + }, + { + "name": "base/blue/alpha/9", + "type": "color", + "isAlias": false, + "value": "#0091FFFA" + }, + { + "name": "base/blue/alpha/10", + "type": "color", + "isAlias": false, + "value": "#0080F1FA" + }, + { + "name": "base/blue/alpha/11", + "type": "color", + "isAlias": false, + "value": "#0066DBFA" + }, + { + "name": "base/blue/alpha/12", + "type": "color", + "isAlias": false, + "value": "#002149FA" + }, + { + "name": "base/violet/alpha/1", + "type": "color", + "isAlias": false, + "value": "#5805AB03" + }, + { + "name": "base/violet/alpha/2", + "type": "color", + "isAlias": false, + "value": "#3705FF05" + }, + { + "name": "base/violet/alpha/3", + "type": "color", + "isAlias": false, + "value": "#3C00FF0D" + }, + { + "name": "base/violet/alpha/4", + "type": "color", + "isAlias": false, + "value": "#2E02F417" + }, + { + "name": "base/violet/alpha/5", + "type": "color", + "isAlias": false, + "value": "#2F01E821" + }, + { + "name": "base/violet/alpha/6", + "type": "color", + "isAlias": false, + "value": "#2A01DF30" + }, + { + "name": "base/violet/alpha/7", + "type": "color", + "isAlias": false, + "value": "#2B01D447" + }, + { + "name": "base/violet/alpha/8", + "type": "color", + "isAlias": false, + "value": "#2A00D066" + }, + { + "name": "base/violet/alpha/9", + "type": "color", + "isAlias": false, + "value": "#2500B6A8" + }, + { + "name": "base/violet/alpha/10", + "type": "color", + "isAlias": false, + "value": "#1F00A5B0" + }, + { + "name": "base/violet/alpha/11", + "type": "color", + "isAlias": false, + "value": "#180091BA" + }, + { + "name": "base/violet/alpha/12", + "type": "color", + "isAlias": false, + "value": "#0E003DED" + }, + { + "name": "base/gray/slate/alpha/1", + "type": "color", + "isAlias": false, + "value": "#05448205" + }, + { + "name": "base/gray/slate/alpha/2", + "type": "color", + "isAlias": false, + "value": "#05294D08" + }, + { + "name": "base/gray/slate/alpha/3", + "type": "color", + "isAlias": false, + "value": "#0025490D" + }, + { + "name": "base/gray/slate/alpha/4", + "type": "color", + "isAlias": false, + "value": "#021C3714" + }, + { + "name": "base/gray/slate/alpha/5", + "type": "color", + "isAlias": false, + "value": "#0217351A" + }, + { + "name": "base/gray/slate/alpha/6", + "type": "color", + "isAlias": false, + "value": "#01213921" + }, + { + "name": "base/gray/slate/alpha/7", + "type": "color", + "isAlias": false, + "value": "#001A3329" + }, + { + "name": "base/gray/slate/alpha/8", + "type": "color", + "isAlias": false, + "value": "#011E323D" + }, + { + "name": "base/gray/slate/alpha/9", + "type": "color", + "isAlias": false, + "value": "#00111E78" + }, + { + "name": "base/gray/slate/alpha/10", + "type": "color", + "isAlias": false, + "value": "#00101B82" + }, + { + "name": "base/gray/slate/alpha/11", + "type": "color", + "isAlias": false, + "value": "#000E1896" + }, + { + "name": "base/gray/slate/alpha/12", + "type": "color", + "isAlias": false, + "value": "#00080CED" + }, + { + "name": "base/green/alpha/1", + "type": "color", + "isAlias": false, + "value": "#05C04305" + }, + { + "name": "base/green/alpha/2", + "type": "color", + "isAlias": false, + "value": "#00C43B0D" + }, + { + "name": "base/green/alpha/3", + "type": "color", + "isAlias": false, + "value": "#02BA3C17" + }, + { + "name": "base/green/alpha/4", + "type": "color", + "isAlias": false, + "value": "#01A63521" + }, + { + "name": "base/green/alpha/5", + "type": "color", + "isAlias": false, + "value": "#009B3633" + }, + { + "name": "base/green/alpha/6", + "type": "color", + "isAlias": false, + "value": "#0193364A" + }, + { + "name": "base/green/alpha/7", + "type": "color", + "isAlias": false, + "value": "#008C3D6E" + }, + { + "name": "base/green/alpha/8", + "type": "color", + "isAlias": false, + "value": "#00934CA3" + }, + { + "name": "base/green/alpha/9", + "type": "color", + "isAlias": false, + "value": "#008F4ACF" + }, + { + "name": "base/green/alpha/10", + "type": "color", + "isAlias": false, + "value": "#008346D6" + }, + { + "name": "base/green/alpha/11", + "type": "color", + "isAlias": false, + "value": "#006B3BE8" + }, + { + "name": "base/green/alpha/12", + "type": "color", + "isAlias": false, + "value": "#002012EB" + }, + { + "name": "base/amber/alpha/1", + "type": "color", + "isAlias": false, + "value": "#C0820505" + }, + { + "name": "base/amber/alpha/2", + "type": "color", + "isAlias": false, + "value": "#FFAB0212" + }, + { + "name": "base/amber/alpha/3", + "type": "color", + "isAlias": false, + "value": "#FFBB012B" + }, + { + "name": "base/amber/alpha/4", + "type": "color", + "isAlias": false, + "value": "#FFB70042" + }, + { + "name": "base/amber/alpha/5", + "type": "color", + "isAlias": false, + "value": "#FFB3005E" + }, + { + "name": "base/amber/alpha/6", + "type": "color", + "isAlias": false, + "value": "#FFA20178" + }, + { + "name": "base/amber/alpha/7", + "type": "color", + "isAlias": false, + "value": "#EC8D009C" + }, + { + "name": "base/amber/alpha/8", + "type": "color", + "isAlias": false, + "value": "#EA8900D4" + }, + { + "name": "base/amber/alpha/9", + "type": "color", + "isAlias": false, + "value": "#FFA600DB" + }, + { + "name": "base/amber/alpha/10", + "type": "color", + "isAlias": false, + "value": "#FF9500E3" + }, + { + "name": "base/amber/alpha/11", + "type": "color", + "isAlias": false, + "value": "#AB5300FA" + }, + { + "name": "base/amber/alpha/12", + "type": "color", + "isAlias": false, + "value": "#481800F5" + }, + { + "name": "base/red/alpha/1", + "type": "color", + "isAlias": false, + "value": "#FF050503" + }, + { + "name": "base/red/alpha/2", + "type": "color", + "isAlias": false, + "value": "#FF050508" + }, + { + "name": "base/red/alpha/3", + "type": "color", + "isAlias": false, + "value": "#FF01010F" + }, + { + "name": "base/red/alpha/4", + "type": "color", + "isAlias": false, + "value": "#FF00001A" + }, + { + "name": "base/red/alpha/5", + "type": "color", + "isAlias": false, + "value": "#F2000026" + }, + { + "name": "base/red/alpha/6", + "type": "color", + "isAlias": false, + "value": "#E4010138" + }, + { + "name": "base/red/alpha/7", + "type": "color", + "isAlias": false, + "value": "#D9000452" + }, + { + "name": "base/red/alpha/8", + "type": "color", + "isAlias": false, + "value": "#D1000470" + }, + { + "name": "base/red/alpha/9", + "type": "color", + "isAlias": false, + "value": "#DB0007B8" + }, + { + "name": "base/red/alpha/10", + "type": "color", + "isAlias": false, + "value": "#D10007C2" + }, + { + "name": "base/red/alpha/11", + "type": "color", + "isAlias": false, + "value": "#C30007D4" + }, + { + "name": "base/red/alpha/12", + "type": "color", + "isAlias": false, + "value": "#280003ED" + }, + { + "name": "MapAreaDistrict/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Surface/Highlight/Default" + } + }, + { + "name": "MapAreaDistrict/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Action/Secondary/Success/Hovered" + } + }, + { + "name": "MapAreaDistrict/Selected", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Action/Primary/Basic/Default" + } + }, + { + "name": "MapAreaDistrict/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Action/Primary/Disabled" + } + }, + { + "name": "MapAreaDistrict/Border", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Border/Focus", + "type": "color", + "isAlias": false, + "value": "#FFFFFF03" + }, + { + "name": "Transparent", + "type": "color", + "isAlias": false, + "value": "#FFFFFF00" + }, + { + "name": "Border/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + } + ] + } + ] + }, + { + "name": "Spacing / Numericals", + "modes": [ + { + "name": "Mode 1", + "variables": [ + { + "name": "space/0", + "type": "number", + "isAlias": false, + "value": 0 + }, + { + "name": "space/025", + "type": "number", + "isAlias": false, + "value": 1 + }, + { + "name": "space/05", + "type": "number", + "isAlias": false, + "value": 2 + }, + { + "name": "space/1", + "type": "number", + "isAlias": false, + "value": 4 + }, + { + "name": "space/2", + "type": "number", + "isAlias": false, + "value": 8 + }, + { + "name": "space/3", + "type": "number", + "isAlias": false, + "value": 12 + }, + { + "name": "space/4", + "type": "number", + "isAlias": false, + "value": 16 + }, + { + "name": "space/5", + "type": "number", + "isAlias": false, + "value": 20 + }, + { + "name": "space/6", + "type": "number", + "isAlias": false, + "value": 24 + }, + { + "name": "space/8", + "type": "number", + "isAlias": false, + "value": 32 + }, + { + "name": "space/10", + "type": "number", + "isAlias": false, + "value": 40 + }, + { + "name": "space/12", + "type": "number", + "isAlias": false, + "value": 48 + }, + { + "name": "space/16", + "type": "number", + "isAlias": false, + "value": 64 + }, + { + "name": "space/20", + "type": "number", + "isAlias": false, + "value": 80 + }, + { + "name": "space/24", + "type": "number", + "isAlias": false, + "value": 96 + }, + { + "name": "space/32", + "type": "number", + "isAlias": false, + "value": 128 + } + ] + } + ] + }, + { + "name": "Borders", + "modes": [ + { + "name": "Mode 1", + "variables": [ + { + "name": "border/radius/0", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/0" + } + }, + { + "name": "border/radius/05", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/05" + } + }, + { + "name": "border/radius/1", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/1" + } + }, + { + "name": "border/radius/2", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/2" + } + }, + { + "name": "border/radius/3", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/3" + } + }, + { + "name": "border/radius/4", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/4" + } + }, + { + "name": "border/radius/5", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/5" + } + }, + { + "name": "border/radius/6", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/6" + } + }, + { + "name": "border/radius/full", + "type": "number", + "isAlias": false, + "value": 9999 + }, + { + "name": "border/width/1", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/025" + } + }, + { + "name": "border/width/2", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/05" + } + }, + { + "name": "border/width/4", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/1" + } + } + ] + } + ] + }, + { + "name": "Typography", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Desktop Heading/4xl-Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 40, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 48, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/3xl-Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 32, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 40, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/2xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 28, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 32, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Lg-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 26, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Md-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Sm-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Xs-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Sm Caps", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 2, + "letterSpacingUnit": "PIXELS", + "textCase": "UPPER", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Lg-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Lg-Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Underline-Reg", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Body/Large/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Large/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Large/Underline-Reg", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Body/Small/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Small/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Small/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Small/bodySm- underline", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Mobile Heading/4xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 32, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 40, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/3xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/2xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Lg-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Lg-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Lg-Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Md-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Sm-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Sm Caps", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 2, + "letterSpacingUnit": "PIXELS", + "textCase": "UPPER", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Xs-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Xs Caps", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 2, + "letterSpacingUnit": "PIXELS", + "textCase": "UPPER", + "textDecoration": "NONE" + } + } + ] + } + ] + }, + { + "name": "Effects", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "shadow/modal", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 26 + }, + "radius": 80, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 1, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/layer", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 32, + "g": 42, + "b": 53, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 31 + }, + "radius": 41, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 32, + "g": 42, + "b": 54, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 16, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/inset/basic", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "INNER_SHADOW", + "color": { + "r": 228, + "g": 229, + "b": 231, + "a": 1 + }, + "offset": { + "x": -1, + "y": 0 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/inset/button", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "INNER_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": -1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/button/pressed", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "INNER_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/button/default", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/deep", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 33, + "g": 43, + "b": 54, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 16, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 6, + "g": 44, + "b": 82, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 1 + } + ] + } + }, + { + "name": "shadow/basic/faint", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 22, + "g": 29, + "b": 37, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/transparent", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/xs", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.24 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 2, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/sm", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 1, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/md", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 6, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 4, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/lg", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 6, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 4 + }, + "radius": 12, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 12 + }, + "radius": 18, + "spread": -2 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 4 + }, + "radius": 18, + "spread": -2 + } + ] + } + }, + { + "name": "shadow/basic/2xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.16 + }, + "offset": { + "x": 0, + "y": 32 + }, + "radius": 56, + "spread": -2 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 32 + }, + "radius": 32, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/element/popover", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 23, + "g": 24, + "b": 24, + "a": 0.12 + }, + "offset": { + "x": 0, + "y": 8 + }, + "radius": 20, + "spread": -4 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 23, + "g": 24, + "b": 24, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 3 + }, + "radius": 6, + "spread": -3 + } + ] + } + }, + { + "name": "shadow/element/card", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 23, + "g": 24, + "b": 24, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 5, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/element/topNav", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 2, + "spread": -1 + } + ] + } + }, + { + "name": "shadow/element/focus", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 145, + "b": 255, + "a": 1 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 2 + } + ] + } + } + ] + } + ] + }, + { + "name": "Grids", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Basic 12 Col", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "STRETCH", + "gutterSize": 16, + "offset": 40, + "count": 12 + } + ] + } + } + ] + } + ] + } + ] +} diff --git a/packages/opub-viz/styles/tokens/_variables.css b/packages/opub-viz/styles/tokens/_variables.css index 6f66b68a..cb627231 100644 --- a/packages/opub-viz/styles/tokens/_variables.css +++ b/packages/opub-viz/styles/tokens/_variables.css @@ -1,100 +1,101 @@ -:root { - --base-indigo-solid-1: #fdfdfe; - --base-indigo-solid-2: #f8faff; - --base-indigo-solid-3: #f0f4ff; - --base-indigo-solid-4: #e6edfe; - --base-indigo-solid-5: #d9e2fc; - --base-indigo-solid-6: #c6d4f9; - --base-indigo-solid-7: #aec0f5; - --base-indigo-solid-8: #8da4ef; - --base-indigo-solid-9: #3e63dd; - --base-indigo-solid-10: #3a5ccc; - --base-indigo-solid-11: #3451b2; - --base-indigo-solid-12: #101d46; - --base-blue-solid-1: #fbfdff; - --base-blue-solid-2: #f5faff; - --base-blue-solid-3: #edf6ff; - --base-blue-solid-4: #e1f0ff; - --base-blue-solid-5: #cee7fe; - --base-blue-solid-6: #b7d9f8; - --base-blue-solid-7: #96c7f2; - --base-blue-solid-8: #5eb0ef; - --base-blue-solid-9: #0091ff; - --base-blue-solid-10: #0081f1; - --base-blue-solid-11: #006adc; - --base-blue-solid-12: #00254d; - --base-violet-solid-1: #fdfcfe; - --base-violet-solid-2: #fbfaff; - --base-violet-solid-3: #f5f2ff; - --base-violet-solid-4: #ede9fe; - --base-violet-solid-5: #e4defc; - --base-violet-solid-6: #d7cff9; - --base-violet-solid-7: #c4b8f3; - --base-violet-solid-8: #aa99ec; - --base-violet-solid-9: #6e56cf; - --base-violet-solid-10: #644fc1; - --base-violet-solid-11: #5746af; - --base-violet-solid-12: #20134b; - --base-gray-slate-solid-1: #fbfcfd; - --base-gray-slate-solid-2: #f8f9fa; - --base-gray-slate-solid-3: #f1f3f5; - --base-gray-slate-solid-4: #eceef0; - --base-gray-slate-solid-5: #e6e8eb; - --base-gray-slate-solid-6: #dfe3e6; - --base-gray-slate-solid-7: #d7dbdf; - --base-gray-slate-solid-8: #c1c8cd; +:root { + --base-indigo-solid-1: #FDFDFE; + --base-indigo-solid-2: #F8FAFF; + --base-indigo-solid-3: #F0F4FF; + --base-indigo-solid-4: #E6EDFE; + --base-indigo-solid-5: #D9E2FC; + --base-indigo-solid-6: #C6D4F9; + --base-indigo-solid-7: #AEC0F5; + --base-indigo-solid-8: #8DA4EF; + --base-indigo-solid-9: #3E63DD; + --base-indigo-solid-10: #3A5CCC; + --base-indigo-solid-11: #3451B2; + --base-indigo-solid-12: #101D46; + --base-blue-solid-1: #FBFDFF; + --base-blue-solid-2: #F5FAFF; + --base-blue-solid-3: #EDF6FF; + --base-blue-solid-4: #E1F0FF; + --base-blue-solid-5: #CEE7FE; + --base-blue-solid-6: #B7D9F8; + --base-blue-solid-7: #96C7F2; + --base-blue-solid-8: #5EB0EF; + --base-blue-solid-9: #0091FF; + --base-blue-solid-10: #0081F1; + --base-blue-solid-11: #006ADC; + --base-blue-solid-12: #00254D; + --base-violet-solid-1: #FDFCFE; + --base-violet-solid-2: #FBFAFF; + --base-violet-solid-3: #F5F2FF; + --base-violet-solid-4: #EDE9FE; + --base-violet-solid-5: #E4DEFC; + --base-violet-solid-6: #D7CFF9; + --base-violet-solid-7: #C4B8F3; + --base-violet-solid-8: #AA99EC; + --base-violet-solid-9: #6E56CF; + --base-violet-solid-10: #644FC1; + --base-violet-solid-11: #5746AF; + --base-violet-solid-12: #20134B; + --base-gray-slate-solid-1: #FBFCFD; + --base-gray-slate-solid-2: #F8F9FA; + --base-gray-slate-solid-3: #F1F3F5; + --base-gray-slate-solid-4: #ECEEF0; + --base-gray-slate-solid-5: #E6E8EB; + --base-gray-slate-solid-6: #DFE3E6; + --base-gray-slate-solid-7: #D7DBDF; + --base-gray-slate-solid-8: #C1C8CD; --base-gray-slate-solid-9: #889096; - --base-gray-slate-solid-10: #7e868c; + --base-gray-slate-solid-10: #7E868C; --base-gray-slate-solid-11: #687076; - --base-gray-slate-solid-12: #11181c; - --base-red-solid-1: #fffcfc; - --base-red-solid-2: #fff8f8; - --base-red-solid-3: #ffefef; - --base-red-solid-4: #ffe5e5; - --base-red-solid-5: #fdd8d8; - --base-red-solid-6: #f9c6c6; - --base-red-solid-7: #f3aeaf; - --base-red-solid-8: #eb9091; - --base-red-solid-9: #e5484d; - --base-red-solid-10: #dc3d43; - --base-red-solid-11: #cd2b31; + --base-gray-slate-solid-12: #11181C; + --base-red-solid-1: #FFFCFC; + --base-red-solid-2: #FFF8F8; + --base-red-solid-3: #FFEFEF; + --base-red-solid-4: #FFE5E5; + --base-red-solid-5: #FDD8D8; + --base-red-solid-6: #F9C6C6; + --base-red-solid-7: #F3AEAF; + --base-red-solid-8: #EB9091; + --base-red-solid-9: #E5484D; + --base-red-solid-10: #DC3D43; + --base-red-solid-11: #CD2B31; --base-red-solid-12: #381316; - --base-green-solid-1: #fbfefc; - --base-green-solid-2: #f2fcf5; - --base-green-solid-3: #e9f9ee; - --base-green-solid-4: #ddf3e4; - --base-green-solid-5: #ccebd7; - --base-green-solid-6: #b4dfc4; - --base-green-solid-7: #92ceac; - --base-green-solid-8: #5bb98c; - --base-green-solid-9: #30a46c; + --base-green-solid-1: #FBFEFC; + --base-green-solid-2: #F2FCF5; + --base-green-solid-3: #E9F9EE; + --base-green-solid-4: #DDF3E4; + --base-green-solid-5: #CCEBD7; + --base-green-solid-6: #B4DFC4; + --base-green-solid-7: #92CEAC; + --base-green-solid-8: #5BB98C; + --base-green-solid-9: #30A46C; --base-green-solid-10: #299764; - --base-green-solid-11: #18794e; + --base-green-solid-11: #18794E; --base-green-solid-12: #153226; - --base-amber-solid-1: #fefdfb; - --base-amber-solid-2: #fff9ed; - --base-amber-solid-3: #fff4d5; - --base-amber-solid-4: #ffecbc; - --base-amber-solid-5: #ffe3a2; - --base-amber-solid-6: #ffd386; - --base-amber-solid-7: #f3ba63; - --base-amber-solid-8: #ee9d2b; - --base-amber-solid-9: #ffb224; - --base-amber-solid-10: #ffa01c; - --base-amber-solid-11: #ad5700; - --base-amber-solid-12: #4e2009; - --base-pure-white: #ffffff; + --base-amber-solid-1: #FEFDFB; + --base-amber-solid-2: #FFF9ED; + --base-amber-solid-3: #FFF4D5; + --base-amber-solid-4: #FFECBC; + --base-amber-solid-5: #FFE3A2; + --base-amber-solid-6: #FFD386; + --base-amber-solid-7: #F3BA63; + --base-amber-solid-8: #EE9D2B; + --base-amber-solid-9: #FFB224; + --base-amber-solid-10: #FFA01C; + --base-amber-solid-11: #AD5700; + --base-amber-solid-12: #4E2009; + --base-pure-white: #FFFFFF; --base-pure-black: #000000; --text-default: var(--base-gray-slate-solid-12); - --text-subdued: #3e4346; + --text-medium: var(--base-gray-slate-solid-11); + --text-subdued: #3E4346; --text-disabled: var(--base-gray-slate-solid-9); --text-critical: var(--base-red-solid-11); --text-warning: var(--base-amber-solid-11); --text-success: var(--base-green-solid-11); --text-highlight: var(--base-violet-solid-11); --text-interactive: var(--base-blue-solid-11); - --text-onbg-disabled: var(--base-gray-slate-solid-9); --text-onbg-default: var(--base-gray-slate-solid-1); + --text-onbg-disabled: var(--base-gray-slate-solid-9); --border-default: var(--base-gray-slate-solid-8); --border-subdued: var(--base-gray-slate-solid-7); --border-disabled: var(--base-gray-slate-solid-6); @@ -107,16 +108,16 @@ --border-warning-subdued: var(--base-amber-solid-7); --border-highlight-default: var(--base-violet-solid-8); --border-highlight-subdued: var(--base-violet-solid-7); - --border-highlight-onbg-default: var(--base-violet-solid-7); --border-highlight-onbg-subdued: var(--base-violet-solid-9); + --border-highlight-onbg-default: var(--base-violet-solid-7); --border-interactive-default: var(--base-blue-solid-8); --border-interactive-focused: var(--base-blue-solid-7); --icon-default: var(--base-gray-slate-solid-11); --icon-subdued: var(--base-gray-slate-solid-10); --icon-disabled: var(--base-gray-slate-solid-9); --icon-critical: var(--base-red-solid-10); - --icon-warning: var(--base-amber-solid-10); --action-primary-basic-default: var(--base-violet-solid-9); + --icon-warning: var(--base-amber-solid-10); --action-primary-basic-hovered: var(--base-violet-solid-10); --icon-success: var(--base-green-solid-10); --action-primary-basic-pressed: var(--base-violet-solid-11); @@ -124,12 +125,12 @@ --icon-interactive: var(--base-indigo-solid-11); --action-primary-basic-depressed: var(--base-violet-solid-12); --icon-onbg-default: var(--base-gray-slate-solid-1); - --icon-onbg-subdued: var(--base-gray-slate-solid-4); --action-primary-disabled: var(--base-gray-slate-solid-9); + --icon-onbg-subdued: var(--base-gray-slate-solid-4); --action-primary-critical-default: var(--base-red-solid-9); --icon-onbg-disabled: var(--base-gray-slate-solid-9); - --action-primary-critical-hovered: var(--base-red-solid-10); --action-primary-success-default: var(--base-green-solid-9); + --action-primary-critical-hovered: var(--base-red-solid-10); --action-secondary-critical-pressed: var(--base-red-solid-5); --action-secondary-critical-hovered: var(--base-red-solid-4); --action-secondary-critical-depressed: var(--base-red-solid-6); @@ -138,137 +139,138 @@ --action-primary-interactive-hovered: var(--base-blue-solid-10); --action-primary-interactive-pressed: var(--base-blue-solid-11); --action-primary-interactive-depressed: var(--base-blue-solid-12); - --action-primary-success-hovered: var(--base-green-solid-10); - --action-secondary-basic-default: var(--base-violet-solid-3); --action-primary-critical-pressed: var(--base-red-solid-11); - --action-primary-critical-depressed: var(--base-red-solid-12); + --action-secondary-basic-default: var(--base-violet-solid-3); + --action-primary-success-hovered: var(--base-green-solid-10); --action-primary-success-pressed: var(--base-green-solid-11); --action-secondary-disabled: var(--base-gray-slate-solid-3); + --action-primary-critical-depressed: var(--base-red-solid-12); --action-secondary-interactive-pressed: var(--base-blue-solid-5); + --action-secondary-success-pressed: var(--base-green-solid-5); --action-primary-success-depressed: var(--base-green-solid-12); - --action-secondary-neutral-default: var(--base-gray-slate-solid-1); - --action-secondary-interactive-depressed: var(--base-blue-solid-6); --action-secondary-interactive-hovered: var(--base-blue-solid-4); - --action-secondary-success-pressed: var(--base-green-solid-5); --action-secondary-success-depressed: var(--base-green-solid-6); + --action-secondary-neutral-default: var(--base-gray-slate-solid-1); --action-secondary-success-hovered: var(--base-green-solid-4); + --action-secondary-interactive-depressed: var(--base-blue-solid-6); --action-secondary-success-default: var(--base-green-solid-3); --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2); --action-secondary-interactive-default: var(--base-blue-solid-3); --action-secondary-basic-hovered: var(--base-violet-solid-4); + --action-secondary-basic-pressed: var(--base-violet-solid-5); --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5); --action-secondary-basic-depressed: var(--base-violet-solid-6); - --action-secondary-basic-pressed: var(--base-violet-solid-5); --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6); --action-tertiary-basic-hover: var(--base-violet-alpha-2); --base-indigo-alpha-1: #05058203; --action-tertiary-interactive-hover: var(--base-blue-alpha-2); --action-tertiary-success-hover: var(--base-green-alpha-2); - --base-indigo-alpha-2: #054cff08; + --base-indigo-alpha-2: #054CFF08; --action-tertiary-critical-hover: var(--base-red-alpha-2); - --base-indigo-alpha-3: #0144ff0f; - --base-indigo-alpha-4: #0247f51a; - --base-indigo-alpha-5: #023ceb26; + --base-indigo-alpha-3: #0144FF0F; + --base-indigo-alpha-4: #0247F51A; + --base-indigo-alpha-5: #023CEB26; --background-alpha-dark: var(--base-indigo-alpha-12); - --base-indigo-alpha-6: #013de438; - --base-indigo-alpha-7: #0038e052; - --base-indigo-alpha-8: #0134db73; - --base-indigo-alpha-9: #0031d2c2; + --base-indigo-alpha-6: #013DE438; + --background-alpha-medium: var(--base-indigo-alpha-4); + --base-indigo-alpha-7: #0038E052; + --base-indigo-alpha-8: #0134DB73; + --base-indigo-alpha-9: #0031D2C2; --background-solid-subdued: var(--base-indigo-solid-2); --background-solid-dark: var(--base-indigo-solid-12); --background-solid-default: var(--base-indigo-solid-3); --surface-default: var(--base-pure-white); --surface-subdued: var(--base-gray-slate-solid-2); - --base-indigo-alpha-10: #002cbdc4; + --base-indigo-alpha-10: #002CBDC4; --surface-selected: var(--base-blue-solid-2); - --base-indigo-alpha-11: #00259ecc; + --base-indigo-alpha-11: #00259ECC; + --base-indigo-alpha-12: #000E3AF0; --surface-warning: var(--base-amber-solid-2); - --base-indigo-alpha-12: #000e3af0; - --base-blue-alpha-1: #0582ff05; + --base-blue-alpha-1: #0582FF05; --surface-critical: var(--base-red-solid-2); + --base-blue-alpha-2: #0582FF0A; --surface-success: var(--base-green-solid-2); - --base-blue-alpha-2: #0582ff0a; + --base-blue-alpha-3: #0280FF12; --surface-highlight-subdued: var(--base-violet-solid-2); - --base-blue-alpha-3: #0280ff12; + --base-blue-alpha-4: #0180FF1F; --surface-interactive: var(--base-blue-solid-2); - --base-blue-alpha-4: #0180ff1f; + --base-blue-alpha-5: #0180EF30; --surface-highlight-default: var(--base-violet-solid-4); - --base-blue-alpha-5: #0180ef30; - --base-blue-alpha-6: #0177e647; + --base-blue-alpha-6: #0177E647; --surface-highlight-hovered: var(--base-violet-solid-6); - --base-blue-alpha-7: #0077df69; - --base-blue-alpha-8: #0082e6a1; - --base-blue-alpha-9: #0091fffa; - --base-blue-alpha-10: #0080f1fa; - --base-blue-alpha-11: #0066dbfa; - --base-blue-alpha-12: #002149fa; - --base-violet-alpha-1: #5805ab03; - --base-violet-alpha-2: #3705ff05; - --base-violet-alpha-3: #3c00ff0d; - --base-violet-alpha-4: #2e02f417; - --base-violet-alpha-5: #2f01e821; - --base-violet-alpha-6: #2a01df30; - --base-violet-alpha-7: #2b01d447; - --base-violet-alpha-8: #2a00d066; - --base-violet-alpha-9: #2500b6a8; - --base-violet-alpha-10: #1f00a5b0; - --base-violet-alpha-11: #180091ba; - --base-violet-alpha-12: #0e003ded; + --base-blue-alpha-7: #0077DF69; + --base-blue-alpha-8: #0082E6A1; + --base-blue-alpha-9: #0091FFFA; + --base-blue-alpha-10: #0080F1FA; + --base-blue-alpha-11: #0066DBFA; + --base-blue-alpha-12: #002149FA; + --base-violet-alpha-1: #5805AB03; + --base-violet-alpha-2: #3705FF05; + --base-violet-alpha-3: #3C00FF0D; + --base-violet-alpha-4: #2E02F417; + --base-violet-alpha-5: #2F01E821; + --base-violet-alpha-6: #2A01DF30; + --base-violet-alpha-7: #2B01D447; + --base-violet-alpha-8: #2A00D066; + --base-violet-alpha-9: #2500B6A8; + --base-violet-alpha-10: #1F00A5B0; + --base-violet-alpha-11: #180091BA; + --base-violet-alpha-12: #0E003DED; --base-gray-slate-alpha-1: #05448205; - --base-gray-slate-alpha-2: #05294d08; - --base-gray-slate-alpha-3: #0025490d; - --base-gray-slate-alpha-4: #021c3714; - --base-gray-slate-alpha-5: #0217351a; + --base-gray-slate-alpha-2: #05294D08; + --base-gray-slate-alpha-3: #0025490D; + --base-gray-slate-alpha-4: #021C3714; + --base-gray-slate-alpha-5: #0217351A; --base-gray-slate-alpha-6: #01213921; - --base-gray-slate-alpha-7: #001a3329; - --base-gray-slate-alpha-8: #011e323d; - --base-gray-slate-alpha-9: #00111e78; - --base-gray-slate-alpha-10: #00101b82; - --base-gray-slate-alpha-11: #000e1896; - --base-gray-slate-alpha-12: #00080ced; - --base-green-alpha-1: #05c04305; - --base-green-alpha-2: #00c43b0d; - --base-green-alpha-3: #02ba3c17; - --base-green-alpha-4: #01a63521; - --base-green-alpha-5: #009b3633; - --base-green-alpha-6: #0193364a; - --base-green-alpha-7: #008c3d6e; - --base-green-alpha-8: #00934ca3; - --base-green-alpha-9: #008f4acf; - --base-green-alpha-10: #008346d6; - --base-green-alpha-11: #006b3be8; - --base-green-alpha-12: #002012eb; - --base-amber-alpha-1: #c0820505; - --base-amber-alpha-2: #ffab0212; - --base-amber-alpha-3: #ffbb012b; - --base-amber-alpha-4: #ffb70042; - --base-amber-alpha-5: #ffb3005e; - --base-amber-alpha-6: #ffa20178; - --base-amber-alpha-7: #ec8d009c; - --base-amber-alpha-8: #ea8900d4; - --base-amber-alpha-9: #ffa600db; - --base-amber-alpha-10: #ff9500e3; - --base-amber-alpha-11: #ab5300fa; - --base-amber-alpha-12: #481800f5; - --base-red-alpha-1: #ff050503; - --base-red-alpha-2: #ff050508; - --base-red-alpha-3: #ff01010f; - --base-red-alpha-4: #ff00001a; - --base-red-alpha-5: #f2000026; - --base-red-alpha-6: #e4010138; - --base-red-alpha-7: #d9000452; - --base-red-alpha-8: #d1000470; - --base-red-alpha-9: #db0007b8; - --base-red-alpha-10: #d10007c2; - --base-red-alpha-11: #c30007d4; - --base-red-alpha-12: #280003ed; + --base-gray-slate-alpha-7: #001A3329; + --base-gray-slate-alpha-8: #011E323D; + --base-gray-slate-alpha-9: #00111E78; + --base-gray-slate-alpha-10: #00101B82; + --base-gray-slate-alpha-11: #000E1896; + --base-gray-slate-alpha-12: #00080CED; + --base-green-alpha-1: #05C04305; + --base-green-alpha-2: #00C43B0D; + --base-green-alpha-3: #02BA3C17; + --base-green-alpha-4: #01A63521; + --base-green-alpha-5: #009B3633; + --base-green-alpha-6: #0193364A; + --base-green-alpha-7: #008C3D6E; + --base-green-alpha-8: #00934CA3; + --base-green-alpha-9: #008F4ACF; + --base-green-alpha-10: #008346D6; + --base-green-alpha-11: #006B3BE8; + --base-green-alpha-12: #002012EB; + --base-amber-alpha-1: #C0820505; + --base-amber-alpha-2: #FFAB0212; + --base-amber-alpha-3: #FFBB012B; + --base-amber-alpha-4: #FFB70042; + --base-amber-alpha-5: #FFB3005E; + --base-amber-alpha-6: #FFA20178; + --base-amber-alpha-7: #EC8D009C; + --base-amber-alpha-8: #EA8900D4; + --base-amber-alpha-9: #FFA600DB; + --base-amber-alpha-10: #FF9500E3; + --base-amber-alpha-11: #AB5300FA; + --base-amber-alpha-12: #481800F5; + --base-red-alpha-1: #FF050503; + --base-red-alpha-2: #FF050508; + --base-red-alpha-3: #FF01010F; + --base-red-alpha-4: #FF00001A; + --base-red-alpha-5: #F2000026; + --base-red-alpha-6: #E4010138; + --base-red-alpha-7: #D9000452; + --base-red-alpha-8: #D1000470; + --base-red-alpha-9: #DB0007B8; + --base-red-alpha-10: #D10007C2; + --base-red-alpha-11: #C30007D4; + --base-red-alpha-12: #280003ED; --mapareadistrict-default: var(--surface-highlight-default); --mapareadistrict-hover: var(--action-secondary-success-hovered); --mapareadistrict-selected: var(--action-primary-basic-default); --mapareadistrict-disabled: var(--action-primary-disabled); --mapareadistrict-border: var(--base-gray-slate-solid-9); - --border-focus: #ffffff03; - --transparent: #ffffff00; + --border-focus: #FFFFFF03; + --transparent: #FFFFFF00; --border-onbg-subdued: var(--base-gray-slate-solid-11); --space-0: 0px; @@ -301,35 +303,27 @@ --border-width-2: var(--space-05); --border-width-4: var(--space-1); - --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2), - 0px 0px 1px 0px rgba(0, 0, 0, 0.2); - --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2), - 0px 2px 16px 0px rgba(32, 42, 54, 0.08); + --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2); + --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2), 0px 2px 16px 0px rgba(32, 42, 54, 0.08); --shadow-inset-basic: inset -1px 0px 0px 0px rgba(228, 229, 231, 1); --shadow-inset-button: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2); --shadow-button-pressed: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15); --shadow-button-default: 0px 1px 0px 0px rgba(0, 0, 0, 0.05); - --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), - 0px 0px 0px 1px rgba(6, 44, 82, 0.1); + --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), 0px 0px 0px 1px rgba(6, 44, 82, 0.1); --shadow-basic-faint: 0px 1px 0px 0px rgba(22, 29, 37, 0.05); --shadow-basic-transparent: 0px 0px 0px 0px rgba(0, 0, 0, 0); --shadow-basic-xs: 0px 0px 2px 0px rgba(31, 33, 36, 0.24); --shadow-basic-sm: 0px 1px 1px 0px rgba(31, 33, 36, 0.1); - --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05), - 0px 2px 4px 0px rgba(31, 33, 36, 0.1); - --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05), - 0px 4px 12px 0px rgba(31, 33, 36, 0.2); - --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15), - 0px 4px 18px -2px rgba(31, 33, 36, 0.08); - --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16), - 0px 32px 32px 0px rgba(31, 33, 36, 0.15); - --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12), - 0px 3px 6px -3px rgba(23, 24, 24, 0.08); - --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15), - 0px 0px 5px 0px rgba(23, 24, 24, 0.05); + --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05), 0px 2px 4px 0px rgba(31, 33, 36, 0.1); + --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05), 0px 4px 12px 0px rgba(31, 33, 36, 0.2); + --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15), 0px 4px 18px -2px rgba(31, 33, 36, 0.08); + --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16), 0px 32px 32px 0px rgba(31, 33, 36, 0.15); + --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12), 0px 3px 6px -3px rgba(23, 24, 24, 0.08); + --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(23, 24, 24, 0.05); --shadow-element-topnav: 0px 2px 2px -1px rgba(0, 0, 0, 0.15); --shadow-element-focus: 0px 0px 0px 2px rgba(0, 145, 255, 1); + --z-1: 100; --z-2: 400; --z-3: 513; diff --git a/packages/opub-viz/styles/tokens/tailwind/color.js b/packages/opub-viz/styles/tokens/tailwind/color.js index 2deaf592..ded0b84d 100644 --- a/packages/opub-viz/styles/tokens/tailwind/color.js +++ b/packages/opub-viz/styles/tokens/tailwind/color.js @@ -1,273 +1,275 @@ -module.exports = { - baseIndigoSolid1: '#FDFDFE', - baseIndigoSolid2: '#F8FAFF', - baseIndigoSolid3: '#F0F4FF', - baseIndigoSolid4: '#E6EDFE', - baseIndigoSolid5: '#D9E2FC', - baseIndigoSolid6: '#C6D4F9', - baseIndigoSolid7: '#AEC0F5', - baseIndigoSolid8: '#8DA4EF', - baseIndigoSolid9: '#3E63DD', - baseIndigoSolid10: '#3A5CCC', - baseIndigoSolid11: '#3451B2', - baseIndigoSolid12: '#101D46', - baseBlueSolid1: '#FBFDFF', - baseBlueSolid2: '#F5FAFF', - baseBlueSolid3: '#EDF6FF', - baseBlueSolid4: '#E1F0FF', - baseBlueSolid5: '#CEE7FE', - baseBlueSolid6: '#B7D9F8', - baseBlueSolid7: '#96C7F2', - baseBlueSolid8: '#5EB0EF', - baseBlueSolid9: '#0091FF', - baseBlueSolid10: '#0081F1', - baseBlueSolid11: '#006ADC', - baseBlueSolid12: '#00254D', - baseVioletSolid1: '#FDFCFE', - baseVioletSolid2: '#FBFAFF', - baseVioletSolid3: '#F5F2FF', - baseVioletSolid4: '#EDE9FE', - baseVioletSolid5: '#E4DEFC', - baseVioletSolid6: '#D7CFF9', - baseVioletSolid7: '#C4B8F3', - baseVioletSolid8: '#AA99EC', - baseVioletSolid9: '#6E56CF', - baseVioletSolid10: '#644FC1', - baseVioletSolid11: '#5746AF', - baseVioletSolid12: '#20134B', - baseGraySlateSolid1: '#FBFCFD', - baseGraySlateSolid2: '#F8F9FA', - baseGraySlateSolid3: '#F1F3F5', - baseGraySlateSolid4: '#ECEEF0', - baseGraySlateSolid5: '#E6E8EB', - baseGraySlateSolid6: '#DFE3E6', - baseGraySlateSolid7: '#D7DBDF', - baseGraySlateSolid8: '#C1C8CD', - baseGraySlateSolid9: '#889096', - baseGraySlateSolid10: '#7E868C', - baseGraySlateSolid11: '#687076', - baseGraySlateSolid12: '#11181C', - baseRedSolid1: '#FFFCFC', - baseRedSolid2: '#FFF8F8', - baseRedSolid3: '#FFEFEF', - baseRedSolid4: '#FFE5E5', - baseRedSolid5: '#FDD8D8', - baseRedSolid6: '#F9C6C6', - baseRedSolid7: '#F3AEAF', - baseRedSolid8: '#EB9091', - baseRedSolid9: '#E5484D', - baseRedSolid10: '#DC3D43', - baseRedSolid11: '#CD2B31', - baseRedSolid12: '#381316', - baseGreenSolid1: '#FBFEFC', - baseGreenSolid2: '#F2FCF5', - baseGreenSolid3: '#E9F9EE', - baseGreenSolid4: '#DDF3E4', - baseGreenSolid5: '#CCEBD7', - baseGreenSolid6: '#B4DFC4', - baseGreenSolid7: '#92CEAC', - baseGreenSolid8: '#5BB98C', - baseGreenSolid9: '#30A46C', - baseGreenSolid10: '#299764', - baseGreenSolid11: '#18794E', - baseGreenSolid12: '#153226', - baseAmberSolid1: '#FEFDFB', - baseAmberSolid2: '#FFF9ED', - baseAmberSolid3: '#FFF4D5', - baseAmberSolid4: '#FFECBC', - baseAmberSolid5: '#FFE3A2', - baseAmberSolid6: '#FFD386', - baseAmberSolid7: '#F3BA63', - baseAmberSolid8: '#EE9D2B', - baseAmberSolid9: '#FFB224', - baseAmberSolid10: '#FFA01C', - baseAmberSolid11: '#AD5700', - baseAmberSolid12: '#4E2009', - basePureWhite: '#FFFFFF', - basePureBlack: '#000000', - textDefault: 'var(--base-gray-slate-solid-12)', - textSubdued: '#3E4346', - textDisabled: 'var(--base-gray-slate-solid-9)', - textCritical: 'var(--base-red-solid-11)', - textWarning: 'var(--base-amber-solid-11)', - textSuccess: 'var(--base-green-solid-11)', - textHighlight: 'var(--base-violet-solid-11)', - textInteractive: 'var(--base-blue-solid-11)', - textOnBGDisabled: 'var(--base-gray-slate-solid-9)', - textOnBGDefault: 'var(--base-gray-slate-solid-1)', - borderDefault: 'var(--base-gray-slate-solid-8)', - borderSubdued: 'var(--base-gray-slate-solid-7)', - borderDisabled: 'var(--base-gray-slate-solid-6)', - borderCriticalDefault: 'var(--base-red-solid-8)', - borderCriticalDisabled: 'var(--base-red-solid-7)', - borderCriticalSubdued: 'var(--base-red-solid-6)', - borderSuccessDefault: 'var(--base-green-solid-8)', - borderSuccessSubdued: 'var(--base-green-solid-7)', - borderWarningDefault: 'var(--base-amber-solid-8)', - borderWarningSubdued: 'var(--base-amber-solid-7)', - borderHighlightDefault: 'var(--base-violet-solid-8)', - borderHighlightSubdued: 'var(--base-violet-solid-7)', - borderHighlightOnBGDefault: 'var(--base-violet-solid-7)', - borderHighlightOnBGSubdued: 'var(--base-violet-solid-9)', - borderInteractiveDefault: 'var(--base-blue-solid-8)', - borderInteractiveFocused: 'var(--base-blue-solid-7)', - iconDefault: 'var(--base-gray-slate-solid-11)', - iconSubdued: 'var(--base-gray-slate-solid-10)', - iconDisabled: 'var(--base-gray-slate-solid-9)', - iconCritical: 'var(--base-red-solid-10)', - iconWarning: 'var(--base-amber-solid-10)', - actionPrimaryBasicDefault: 'var(--base-violet-solid-9)', - actionPrimaryBasicHovered: 'var(--base-violet-solid-10)', - iconSuccess: 'var(--base-green-solid-10)', - actionPrimaryBasicPressed: 'var(--base-violet-solid-11)', - iconHighlight: 'var(--base-violet-solid-10)', - iconInteractive: 'var(--base-indigo-solid-11)', - actionPrimaryBasicDepressed: 'var(--base-violet-solid-12)', - iconOnBGDefault: 'var(--base-gray-slate-solid-1)', - iconOnBGSubdued: 'var(--base-gray-slate-solid-4)', - actionPrimaryDisabled: 'var(--base-gray-slate-solid-9)', - actionPrimaryCriticalDefault: 'var(--base-red-solid-9)', - iconOnBGDisabled: 'var(--base-gray-slate-solid-9)', - actionPrimaryCriticalHovered: 'var(--base-red-solid-10)', - actionPrimarySuccessDefault: 'var(--base-green-solid-9)', - actionSecondaryCriticalPressed: 'var(--base-red-solid-5)', - actionSecondaryCriticalHovered: 'var(--base-red-solid-4)', - actionSecondaryCriticalDepressed: 'var(--base-red-solid-6)', - actionPrimaryInteractiveDefault: 'var(--base-blue-solid-9)', - actionSecondaryCriticalDefault: 'var(--base-red-solid-3)', - actionPrimaryInteractiveHovered: 'var(--base-blue-solid-10)', - actionPrimaryInteractivePressed: 'var(--base-blue-solid-11)', - actionPrimaryInteractiveDepressed: 'var(--base-blue-solid-12)', - actionPrimarySuccessHovered: 'var(--base-green-solid-10)', - actionSecondaryBasicDefault: 'var(--base-violet-solid-3)', - actionPrimaryCriticalPressed: 'var(--base-red-solid-11)', - actionPrimaryCriticalDepressed: 'var(--base-red-solid-12)', - actionPrimarySuccessPressed: 'var(--base-green-solid-11)', - actionSecondaryDisabled: 'var(--base-gray-slate-solid-3)', - actionSecondaryInteractivePressed: 'var(--base-blue-solid-5)', - actionPrimarySuccessDepressed: 'var(--base-green-solid-12)', - actionSecondaryNeutralDefault: 'var(--base-gray-slate-solid-1)', - actionSecondaryInteractiveDepressed: 'var(--base-blue-solid-6)', - actionSecondaryInteractiveHovered: 'var(--base-blue-solid-4)', - actionSecondarySuccessPressed: 'var(--base-green-solid-5)', - actionSecondarySuccessDepressed: 'var(--base-green-solid-6)', - actionSecondarySuccessHovered: 'var(--base-green-solid-4)', - actionSecondarySuccessDefault: 'var(--base-green-solid-3)', - actionSecondaryNeutralHovered: 'var(--base-gray-slate-solid-2)', - actionSecondaryInteractiveDefault: 'var(--base-blue-solid-3)', - actionSecondaryBasicHovered: 'var(--base-violet-solid-4)', - actionSecondaryNeutralPressed: 'var(--base-gray-slate-solid-5)', - actionSecondaryBasicDepressed: 'var(--base-violet-solid-6)', - actionSecondaryBasicPressed: 'var(--base-violet-solid-5)', - actionSecondaryNeutralDepressed: 'var(--base-gray-slate-solid-6)', - actionTertiaryBasicHover: 'var(--base-violet-alpha-2)', - baseIndigoAlpha1: '#05058203', - actionTertiaryInteractiveHover: 'var(--base-blue-alpha-2)', - actionTertiarySuccessHover: 'var(--base-green-alpha-2)', - baseIndigoAlpha2: '#054CFF08', - actionTertiaryCriticalHover: 'var(--base-red-alpha-2)', - baseIndigoAlpha3: '#0144FF0F', - baseIndigoAlpha4: '#0247F51A', - baseIndigoAlpha5: '#023CEB26', - backgroundAlphaDark: 'var(--base-indigo-alpha-12)', - baseIndigoAlpha6: '#013DE438', - baseIndigoAlpha7: '#0038E052', - baseIndigoAlpha8: '#0134DB73', - baseIndigoAlpha9: '#0031D2C2', - backgroundSolidSubdued: 'var(--base-indigo-solid-2)', - backgroundSolidDark: 'var(--base-indigo-solid-12)', - backgroundSolidDefault: 'var(--base-indigo-solid-3)', - surfaceDefault: 'var(--base-pure-white)', - surfaceSubdued: 'var(--base-gray-slate-solid-2)', - baseIndigoAlpha10: '#002CBDC4', - surfaceSelected: 'var(--base-blue-solid-2)', - baseIndigoAlpha11: '#00259ECC', - surfaceWarning: 'var(--base-amber-solid-2)', - baseIndigoAlpha12: '#000E3AF0', - baseBlueAlpha1: '#0582FF05', - surfaceCritical: 'var(--base-red-solid-2)', - surfaceSuccess: 'var(--base-green-solid-2)', - baseBlueAlpha2: '#0582FF0A', - surfaceHighlightSubdued: 'var(--base-violet-solid-2)', - baseBlueAlpha3: '#0280FF12', - surfaceInteractive: 'var(--base-blue-solid-2)', - baseBlueAlpha4: '#0180FF1F', - surfaceHighlightDefault: 'var(--base-violet-solid-4)', - baseBlueAlpha5: '#0180EF30', - baseBlueAlpha6: '#0177E647', - surfaceHighlightHovered: 'var(--base-violet-solid-6)', - baseBlueAlpha7: '#0077DF69', - baseBlueAlpha8: '#0082E6A1', - baseBlueAlpha9: '#0091FFFA', - baseBlueAlpha10: '#0080F1FA', - baseBlueAlpha11: '#0066DBFA', - baseBlueAlpha12: '#002149FA', - baseVioletAlpha1: '#5805AB03', - baseVioletAlpha2: '#3705FF05', - baseVioletAlpha3: '#3C00FF0D', - baseVioletAlpha4: '#2E02F417', - baseVioletAlpha5: '#2F01E821', - baseVioletAlpha6: '#2A01DF30', - baseVioletAlpha7: '#2B01D447', - baseVioletAlpha8: '#2A00D066', - baseVioletAlpha9: '#2500B6A8', - baseVioletAlpha10: '#1F00A5B0', - baseVioletAlpha11: '#180091BA', - baseVioletAlpha12: '#0E003DED', - baseGraySlateAlpha1: '#05448205', - baseGraySlateAlpha2: '#05294D08', - baseGraySlateAlpha3: '#0025490D', - baseGraySlateAlpha4: '#021C3714', - baseGraySlateAlpha5: '#0217351A', - baseGraySlateAlpha6: '#01213921', - baseGraySlateAlpha7: '#001A3329', - baseGraySlateAlpha8: '#011E323D', - baseGraySlateAlpha9: '#00111E78', - baseGraySlateAlpha10: '#00101B82', - baseGraySlateAlpha11: '#000E1896', - baseGraySlateAlpha12: '#00080CED', - baseGreenAlpha1: '#05C04305', - baseGreenAlpha2: '#00C43B0D', - baseGreenAlpha3: '#02BA3C17', - baseGreenAlpha4: '#01A63521', - baseGreenAlpha5: '#009B3633', - baseGreenAlpha6: '#0193364A', - baseGreenAlpha7: '#008C3D6E', - baseGreenAlpha8: '#00934CA3', - baseGreenAlpha9: '#008F4ACF', - baseGreenAlpha10: '#008346D6', - baseGreenAlpha11: '#006B3BE8', - baseGreenAlpha12: '#002012EB', - baseAmberAlpha1: '#C0820505', - baseAmberAlpha2: '#FFAB0212', - baseAmberAlpha3: '#FFBB012B', - baseAmberAlpha4: '#FFB70042', - baseAmberAlpha5: '#FFB3005E', - baseAmberAlpha6: '#FFA20178', - baseAmberAlpha7: '#EC8D009C', - baseAmberAlpha8: '#EA8900D4', - baseAmberAlpha9: '#FFA600DB', - baseAmberAlpha10: '#FF9500E3', - baseAmberAlpha11: '#AB5300FA', - baseAmberAlpha12: '#481800F5', - baseRedAlpha1: '#FF050503', - baseRedAlpha2: '#FF050508', - baseRedAlpha3: '#FF01010F', - baseRedAlpha4: '#FF00001A', - baseRedAlpha5: '#F2000026', - baseRedAlpha6: '#E4010138', - baseRedAlpha7: '#D9000452', - baseRedAlpha8: '#D1000470', - baseRedAlpha9: '#DB0007B8', - baseRedAlpha10: '#D10007C2', - baseRedAlpha11: '#C30007D4', - baseRedAlpha12: '#280003ED', - mapareadistrictDefault: 'var(--surface-highlight-default)', - mapareadistrictHover: 'var(--action-secondary-success-hovered)', - mapareadistrictSelected: 'var(--action-primary-basic-default)', - mapareadistrictDisabled: 'var(--action-primary-disabled)', - mapareadistrictBorder: 'var(--base-gray-slate-solid-9)', - borderFocus: '#FFFFFF03', - transparent: '#FFFFFF00', - borderOnBGSubdued: 'var(--base-gray-slate-solid-11)', -}; +module.exports = { + "baseIndigoSolid1": "#FDFDFE", + "baseIndigoSolid2": "#F8FAFF", + "baseIndigoSolid3": "#F0F4FF", + "baseIndigoSolid4": "#E6EDFE", + "baseIndigoSolid5": "#D9E2FC", + "baseIndigoSolid6": "#C6D4F9", + "baseIndigoSolid7": "#AEC0F5", + "baseIndigoSolid8": "#8DA4EF", + "baseIndigoSolid9": "#3E63DD", + "baseIndigoSolid10": "#3A5CCC", + "baseIndigoSolid11": "#3451B2", + "baseIndigoSolid12": "#101D46", + "baseBlueSolid1": "#FBFDFF", + "baseBlueSolid2": "#F5FAFF", + "baseBlueSolid3": "#EDF6FF", + "baseBlueSolid4": "#E1F0FF", + "baseBlueSolid5": "#CEE7FE", + "baseBlueSolid6": "#B7D9F8", + "baseBlueSolid7": "#96C7F2", + "baseBlueSolid8": "#5EB0EF", + "baseBlueSolid9": "#0091FF", + "baseBlueSolid10": "#0081F1", + "baseBlueSolid11": "#006ADC", + "baseBlueSolid12": "#00254D", + "baseVioletSolid1": "#FDFCFE", + "baseVioletSolid2": "#FBFAFF", + "baseVioletSolid3": "#F5F2FF", + "baseVioletSolid4": "#EDE9FE", + "baseVioletSolid5": "#E4DEFC", + "baseVioletSolid6": "#D7CFF9", + "baseVioletSolid7": "#C4B8F3", + "baseVioletSolid8": "#AA99EC", + "baseVioletSolid9": "#6E56CF", + "baseVioletSolid10": "#644FC1", + "baseVioletSolid11": "#5746AF", + "baseVioletSolid12": "#20134B", + "baseGraySlateSolid1": "#FBFCFD", + "baseGraySlateSolid2": "#F8F9FA", + "baseGraySlateSolid3": "#F1F3F5", + "baseGraySlateSolid4": "#ECEEF0", + "baseGraySlateSolid5": "#E6E8EB", + "baseGraySlateSolid6": "#DFE3E6", + "baseGraySlateSolid7": "#D7DBDF", + "baseGraySlateSolid8": "#C1C8CD", + "baseGraySlateSolid9": "#889096", + "baseGraySlateSolid10": "#7E868C", + "baseGraySlateSolid11": "#687076", + "baseGraySlateSolid12": "#11181C", + "baseRedSolid1": "#FFFCFC", + "baseRedSolid2": "#FFF8F8", + "baseRedSolid3": "#FFEFEF", + "baseRedSolid4": "#FFE5E5", + "baseRedSolid5": "#FDD8D8", + "baseRedSolid6": "#F9C6C6", + "baseRedSolid7": "#F3AEAF", + "baseRedSolid8": "#EB9091", + "baseRedSolid9": "#E5484D", + "baseRedSolid10": "#DC3D43", + "baseRedSolid11": "#CD2B31", + "baseRedSolid12": "#381316", + "baseGreenSolid1": "#FBFEFC", + "baseGreenSolid2": "#F2FCF5", + "baseGreenSolid3": "#E9F9EE", + "baseGreenSolid4": "#DDF3E4", + "baseGreenSolid5": "#CCEBD7", + "baseGreenSolid6": "#B4DFC4", + "baseGreenSolid7": "#92CEAC", + "baseGreenSolid8": "#5BB98C", + "baseGreenSolid9": "#30A46C", + "baseGreenSolid10": "#299764", + "baseGreenSolid11": "#18794E", + "baseGreenSolid12": "#153226", + "baseAmberSolid1": "#FEFDFB", + "baseAmberSolid2": "#FFF9ED", + "baseAmberSolid3": "#FFF4D5", + "baseAmberSolid4": "#FFECBC", + "baseAmberSolid5": "#FFE3A2", + "baseAmberSolid6": "#FFD386", + "baseAmberSolid7": "#F3BA63", + "baseAmberSolid8": "#EE9D2B", + "baseAmberSolid9": "#FFB224", + "baseAmberSolid10": "#FFA01C", + "baseAmberSolid11": "#AD5700", + "baseAmberSolid12": "#4E2009", + "basePureWhite": "#FFFFFF", + "basePureBlack": "#000000", + "textDefault": "var(--base-gray-slate-solid-12)", + "textMedium": "var(--base-gray-slate-solid-11)", + "textSubdued": "#3E4346", + "textDisabled": "var(--base-gray-slate-solid-9)", + "textCritical": "var(--base-red-solid-11)", + "textWarning": "var(--base-amber-solid-11)", + "textSuccess": "var(--base-green-solid-11)", + "textHighlight": "var(--base-violet-solid-11)", + "textInteractive": "var(--base-blue-solid-11)", + "textOnBGDefault": "var(--base-gray-slate-solid-1)", + "textOnBGDisabled": "var(--base-gray-slate-solid-9)", + "borderDefault": "var(--base-gray-slate-solid-8)", + "borderSubdued": "var(--base-gray-slate-solid-7)", + "borderDisabled": "var(--base-gray-slate-solid-6)", + "borderCriticalDefault": "var(--base-red-solid-8)", + "borderCriticalDisabled": "var(--base-red-solid-7)", + "borderCriticalSubdued": "var(--base-red-solid-6)", + "borderSuccessDefault": "var(--base-green-solid-8)", + "borderSuccessSubdued": "var(--base-green-solid-7)", + "borderWarningDefault": "var(--base-amber-solid-8)", + "borderWarningSubdued": "var(--base-amber-solid-7)", + "borderHighlightDefault": "var(--base-violet-solid-8)", + "borderHighlightSubdued": "var(--base-violet-solid-7)", + "borderHighlightOnBGSubdued": "var(--base-violet-solid-9)", + "borderHighlightOnBGDefault": "var(--base-violet-solid-7)", + "borderInteractiveDefault": "var(--base-blue-solid-8)", + "borderInteractiveFocused": "var(--base-blue-solid-7)", + "iconDefault": "var(--base-gray-slate-solid-11)", + "iconSubdued": "var(--base-gray-slate-solid-10)", + "iconDisabled": "var(--base-gray-slate-solid-9)", + "iconCritical": "var(--base-red-solid-10)", + "actionPrimaryBasicDefault": "var(--base-violet-solid-9)", + "iconWarning": "var(--base-amber-solid-10)", + "actionPrimaryBasicHovered": "var(--base-violet-solid-10)", + "iconSuccess": "var(--base-green-solid-10)", + "actionPrimaryBasicPressed": "var(--base-violet-solid-11)", + "iconHighlight": "var(--base-violet-solid-10)", + "iconInteractive": "var(--base-indigo-solid-11)", + "actionPrimaryBasicDepressed": "var(--base-violet-solid-12)", + "iconOnBGDefault": "var(--base-gray-slate-solid-1)", + "actionPrimaryDisabled": "var(--base-gray-slate-solid-9)", + "iconOnBGSubdued": "var(--base-gray-slate-solid-4)", + "actionPrimaryCriticalDefault": "var(--base-red-solid-9)", + "iconOnBGDisabled": "var(--base-gray-slate-solid-9)", + "actionPrimarySuccessDefault": "var(--base-green-solid-9)", + "actionPrimaryCriticalHovered": "var(--base-red-solid-10)", + "actionSecondaryCriticalPressed": "var(--base-red-solid-5)", + "actionSecondaryCriticalHovered": "var(--base-red-solid-4)", + "actionSecondaryCriticalDepressed": "var(--base-red-solid-6)", + "actionPrimaryInteractiveDefault": "var(--base-blue-solid-9)", + "actionSecondaryCriticalDefault": "var(--base-red-solid-3)", + "actionPrimaryInteractiveHovered": "var(--base-blue-solid-10)", + "actionPrimaryInteractivePressed": "var(--base-blue-solid-11)", + "actionPrimaryInteractiveDepressed": "var(--base-blue-solid-12)", + "actionPrimaryCriticalPressed": "var(--base-red-solid-11)", + "actionSecondaryBasicDefault": "var(--base-violet-solid-3)", + "actionPrimarySuccessHovered": "var(--base-green-solid-10)", + "actionPrimarySuccessPressed": "var(--base-green-solid-11)", + "actionSecondaryDisabled": "var(--base-gray-slate-solid-3)", + "actionPrimaryCriticalDepressed": "var(--base-red-solid-12)", + "actionSecondaryInteractivePressed": "var(--base-blue-solid-5)", + "actionSecondarySuccessPressed": "var(--base-green-solid-5)", + "actionPrimarySuccessDepressed": "var(--base-green-solid-12)", + "actionSecondaryInteractiveHovered": "var(--base-blue-solid-4)", + "actionSecondarySuccessDepressed": "var(--base-green-solid-6)", + "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)", + "actionSecondarySuccessHovered": "var(--base-green-solid-4)", + "actionSecondaryInteractiveDepressed": "var(--base-blue-solid-6)", + "actionSecondarySuccessDefault": "var(--base-green-solid-3)", + "actionSecondaryNeutralHovered": "var(--base-gray-slate-solid-2)", + "actionSecondaryInteractiveDefault": "var(--base-blue-solid-3)", + "actionSecondaryBasicHovered": "var(--base-violet-solid-4)", + "actionSecondaryBasicPressed": "var(--base-violet-solid-5)", + "actionSecondaryNeutralPressed": "var(--base-gray-slate-solid-5)", + "actionSecondaryBasicDepressed": "var(--base-violet-solid-6)", + "actionSecondaryNeutralDepressed": "var(--base-gray-slate-solid-6)", + "actionTertiaryBasicHover": "var(--base-violet-alpha-2)", + "baseIndigoAlpha1": "#05058203", + "actionTertiaryInteractiveHover": "var(--base-blue-alpha-2)", + "actionTertiarySuccessHover": "var(--base-green-alpha-2)", + "baseIndigoAlpha2": "#054CFF08", + "actionTertiaryCriticalHover": "var(--base-red-alpha-2)", + "baseIndigoAlpha3": "#0144FF0F", + "baseIndigoAlpha4": "#0247F51A", + "baseIndigoAlpha5": "#023CEB26", + "backgroundAlphaDark": "var(--base-indigo-alpha-12)", + "baseIndigoAlpha6": "#013DE438", + "backgroundAlphaMedium": "var(--base-indigo-alpha-4)", + "baseIndigoAlpha7": "#0038E052", + "baseIndigoAlpha8": "#0134DB73", + "baseIndigoAlpha9": "#0031D2C2", + "backgroundSolidSubdued": "var(--base-indigo-solid-2)", + "backgroundSolidDark": "var(--base-indigo-solid-12)", + "backgroundSolidDefault": "var(--base-indigo-solid-3)", + "surfaceDefault": "var(--base-pure-white)", + "surfaceSubdued": "var(--base-gray-slate-solid-2)", + "baseIndigoAlpha10": "#002CBDC4", + "surfaceSelected": "var(--base-blue-solid-2)", + "baseIndigoAlpha11": "#00259ECC", + "baseIndigoAlpha12": "#000E3AF0", + "surfaceWarning": "var(--base-amber-solid-2)", + "baseBlueAlpha1": "#0582FF05", + "surfaceCritical": "var(--base-red-solid-2)", + "baseBlueAlpha2": "#0582FF0A", + "surfaceSuccess": "var(--base-green-solid-2)", + "baseBlueAlpha3": "#0280FF12", + "surfaceHighlightSubdued": "var(--base-violet-solid-2)", + "baseBlueAlpha4": "#0180FF1F", + "surfaceInteractive": "var(--base-blue-solid-2)", + "baseBlueAlpha5": "#0180EF30", + "surfaceHighlightDefault": "var(--base-violet-solid-4)", + "baseBlueAlpha6": "#0177E647", + "surfaceHighlightHovered": "var(--base-violet-solid-6)", + "baseBlueAlpha7": "#0077DF69", + "baseBlueAlpha8": "#0082E6A1", + "baseBlueAlpha9": "#0091FFFA", + "baseBlueAlpha10": "#0080F1FA", + "baseBlueAlpha11": "#0066DBFA", + "baseBlueAlpha12": "#002149FA", + "baseVioletAlpha1": "#5805AB03", + "baseVioletAlpha2": "#3705FF05", + "baseVioletAlpha3": "#3C00FF0D", + "baseVioletAlpha4": "#2E02F417", + "baseVioletAlpha5": "#2F01E821", + "baseVioletAlpha6": "#2A01DF30", + "baseVioletAlpha7": "#2B01D447", + "baseVioletAlpha8": "#2A00D066", + "baseVioletAlpha9": "#2500B6A8", + "baseVioletAlpha10": "#1F00A5B0", + "baseVioletAlpha11": "#180091BA", + "baseVioletAlpha12": "#0E003DED", + "baseGraySlateAlpha1": "#05448205", + "baseGraySlateAlpha2": "#05294D08", + "baseGraySlateAlpha3": "#0025490D", + "baseGraySlateAlpha4": "#021C3714", + "baseGraySlateAlpha5": "#0217351A", + "baseGraySlateAlpha6": "#01213921", + "baseGraySlateAlpha7": "#001A3329", + "baseGraySlateAlpha8": "#011E323D", + "baseGraySlateAlpha9": "#00111E78", + "baseGraySlateAlpha10": "#00101B82", + "baseGraySlateAlpha11": "#000E1896", + "baseGraySlateAlpha12": "#00080CED", + "baseGreenAlpha1": "#05C04305", + "baseGreenAlpha2": "#00C43B0D", + "baseGreenAlpha3": "#02BA3C17", + "baseGreenAlpha4": "#01A63521", + "baseGreenAlpha5": "#009B3633", + "baseGreenAlpha6": "#0193364A", + "baseGreenAlpha7": "#008C3D6E", + "baseGreenAlpha8": "#00934CA3", + "baseGreenAlpha9": "#008F4ACF", + "baseGreenAlpha10": "#008346D6", + "baseGreenAlpha11": "#006B3BE8", + "baseGreenAlpha12": "#002012EB", + "baseAmberAlpha1": "#C0820505", + "baseAmberAlpha2": "#FFAB0212", + "baseAmberAlpha3": "#FFBB012B", + "baseAmberAlpha4": "#FFB70042", + "baseAmberAlpha5": "#FFB3005E", + "baseAmberAlpha6": "#FFA20178", + "baseAmberAlpha7": "#EC8D009C", + "baseAmberAlpha8": "#EA8900D4", + "baseAmberAlpha9": "#FFA600DB", + "baseAmberAlpha10": "#FF9500E3", + "baseAmberAlpha11": "#AB5300FA", + "baseAmberAlpha12": "#481800F5", + "baseRedAlpha1": "#FF050503", + "baseRedAlpha2": "#FF050508", + "baseRedAlpha3": "#FF01010F", + "baseRedAlpha4": "#FF00001A", + "baseRedAlpha5": "#F2000026", + "baseRedAlpha6": "#E4010138", + "baseRedAlpha7": "#D9000452", + "baseRedAlpha8": "#D1000470", + "baseRedAlpha9": "#DB0007B8", + "baseRedAlpha10": "#D10007C2", + "baseRedAlpha11": "#C30007D4", + "baseRedAlpha12": "#280003ED", + "mapareadistrictDefault": "var(--surface-highlight-default)", + "mapareadistrictHover": "var(--action-secondary-success-hovered)", + "mapareadistrictSelected": "var(--action-primary-basic-default)", + "mapareadistrictDisabled": "var(--action-primary-disabled)", + "mapareadistrictBorder": "var(--base-gray-slate-solid-9)", + "borderFocus": "#FFFFFF03", + "transparent": "#FFFFFF00", + "borderOnBGSubdued": "var(--base-gray-slate-solid-11)", +} diff --git a/packages/opub-viz/styles/tokens/tokens.json b/packages/opub-viz/styles/tokens/tokens.json new file mode 100644 index 00000000..6c9fd67c --- /dev/null +++ b/packages/opub-viz/styles/tokens/tokens.json @@ -0,0 +1,3360 @@ +{ + "collections": [ + { + "name": "Colors", + "modes": [ + { + "name": "Light", + "variables": [ + { + "name": "base/indigo/solid/1", + "type": "color", + "isAlias": false, + "value": "#FDFDFE" + }, + { + "name": "base/indigo/solid/2", + "type": "color", + "isAlias": false, + "value": "#F8FAFF" + }, + { + "name": "base/indigo/solid/3", + "type": "color", + "isAlias": false, + "value": "#F0F4FF" + }, + { + "name": "base/indigo/solid/4", + "type": "color", + "isAlias": false, + "value": "#E6EDFE" + }, + { + "name": "base/indigo/solid/5", + "type": "color", + "isAlias": false, + "value": "#D9E2FC" + }, + { + "name": "base/indigo/solid/6", + "type": "color", + "isAlias": false, + "value": "#C6D4F9" + }, + { + "name": "base/indigo/solid/7", + "type": "color", + "isAlias": false, + "value": "#AEC0F5" + }, + { + "name": "base/indigo/solid/8", + "type": "color", + "isAlias": false, + "value": "#8DA4EF" + }, + { + "name": "base/indigo/solid/9", + "type": "color", + "isAlias": false, + "value": "#3E63DD" + }, + { + "name": "base/indigo/solid/10", + "type": "color", + "isAlias": false, + "value": "#3A5CCC" + }, + { + "name": "base/indigo/solid/11", + "type": "color", + "isAlias": false, + "value": "#3451B2" + }, + { + "name": "base/indigo/solid/12", + "type": "color", + "isAlias": false, + "value": "#101D46" + }, + { + "name": "base/blue/solid/1", + "type": "color", + "isAlias": false, + "value": "#FBFDFF" + }, + { + "name": "base/blue/solid/2", + "type": "color", + "isAlias": false, + "value": "#F5FAFF" + }, + { + "name": "base/blue/solid/3", + "type": "color", + "isAlias": false, + "value": "#EDF6FF" + }, + { + "name": "base/blue/solid/4", + "type": "color", + "isAlias": false, + "value": "#E1F0FF" + }, + { + "name": "base/blue/solid/5", + "type": "color", + "isAlias": false, + "value": "#CEE7FE" + }, + { + "name": "base/blue/solid/6", + "type": "color", + "isAlias": false, + "value": "#B7D9F8" + }, + { + "name": "base/blue/solid/7", + "type": "color", + "isAlias": false, + "value": "#96C7F2" + }, + { + "name": "base/blue/solid/8", + "type": "color", + "isAlias": false, + "value": "#5EB0EF" + }, + { + "name": "base/blue/solid/9", + "type": "color", + "isAlias": false, + "value": "#0091FF" + }, + { + "name": "base/blue/solid/10", + "type": "color", + "isAlias": false, + "value": "#0081F1" + }, + { + "name": "base/blue/solid/11", + "type": "color", + "isAlias": false, + "value": "#006ADC" + }, + { + "name": "base/blue/solid/12", + "type": "color", + "isAlias": false, + "value": "#00254D" + }, + { + "name": "base/violet/solid/1", + "type": "color", + "isAlias": false, + "value": "#FDFCFE" + }, + { + "name": "base/violet/solid/2", + "type": "color", + "isAlias": false, + "value": "#FBFAFF" + }, + { + "name": "base/violet/solid/3", + "type": "color", + "isAlias": false, + "value": "#F5F2FF" + }, + { + "name": "base/violet/solid/4", + "type": "color", + "isAlias": false, + "value": "#EDE9FE" + }, + { + "name": "base/violet/solid/5", + "type": "color", + "isAlias": false, + "value": "#E4DEFC" + }, + { + "name": "base/violet/solid/6", + "type": "color", + "isAlias": false, + "value": "#D7CFF9" + }, + { + "name": "base/violet/solid/7", + "type": "color", + "isAlias": false, + "value": "#C4B8F3" + }, + { + "name": "base/violet/solid/8", + "type": "color", + "isAlias": false, + "value": "#AA99EC" + }, + { + "name": "base/violet/solid/9", + "type": "color", + "isAlias": false, + "value": "#6E56CF" + }, + { + "name": "base/violet/solid/10", + "type": "color", + "isAlias": false, + "value": "#644FC1" + }, + { + "name": "base/violet/solid/11", + "type": "color", + "isAlias": false, + "value": "#5746AF" + }, + { + "name": "base/violet/solid/12", + "type": "color", + "isAlias": false, + "value": "#20134B" + }, + { + "name": "base/gray/slate/solid/1", + "type": "color", + "isAlias": false, + "value": "#FBFCFD" + }, + { + "name": "base/gray/slate/solid/2", + "type": "color", + "isAlias": false, + "value": "#F8F9FA" + }, + { + "name": "base/gray/slate/solid/3", + "type": "color", + "isAlias": false, + "value": "#F1F3F5" + }, + { + "name": "base/gray/slate/solid/4", + "type": "color", + "isAlias": false, + "value": "#ECEEF0" + }, + { + "name": "base/gray/slate/solid/5", + "type": "color", + "isAlias": false, + "value": "#E6E8EB" + }, + { + "name": "base/gray/slate/solid/6", + "type": "color", + "isAlias": false, + "value": "#DFE3E6" + }, + { + "name": "base/gray/slate/solid/7", + "type": "color", + "isAlias": false, + "value": "#D7DBDF" + }, + { + "name": "base/gray/slate/solid/8", + "type": "color", + "isAlias": false, + "value": "#C1C8CD" + }, + { + "name": "base/gray/slate/solid/9", + "type": "color", + "isAlias": false, + "value": "#889096" + }, + { + "name": "base/gray/slate/solid/10", + "type": "color", + "isAlias": false, + "value": "#7E868C" + }, + { + "name": "base/gray/slate/solid/11", + "type": "color", + "isAlias": false, + "value": "#687076" + }, + { + "name": "base/gray/slate/solid/12", + "type": "color", + "isAlias": false, + "value": "#11181C" + }, + { + "name": "base/red/solid/1", + "type": "color", + "isAlias": false, + "value": "#FFFCFC" + }, + { + "name": "base/red/solid/2", + "type": "color", + "isAlias": false, + "value": "#FFF8F8" + }, + { + "name": "base/red/solid/3", + "type": "color", + "isAlias": false, + "value": "#FFEFEF" + }, + { + "name": "base/red/solid/4", + "type": "color", + "isAlias": false, + "value": "#FFE5E5" + }, + { + "name": "base/red/solid/5", + "type": "color", + "isAlias": false, + "value": "#FDD8D8" + }, + { + "name": "base/red/solid/6", + "type": "color", + "isAlias": false, + "value": "#F9C6C6" + }, + { + "name": "base/red/solid/7", + "type": "color", + "isAlias": false, + "value": "#F3AEAF" + }, + { + "name": "base/red/solid/8", + "type": "color", + "isAlias": false, + "value": "#EB9091" + }, + { + "name": "base/red/solid/9", + "type": "color", + "isAlias": false, + "value": "#E5484D" + }, + { + "name": "base/red/solid/10", + "type": "color", + "isAlias": false, + "value": "#DC3D43" + }, + { + "name": "base/red/solid/11", + "type": "color", + "isAlias": false, + "value": "#CD2B31" + }, + { + "name": "base/red/solid/12", + "type": "color", + "isAlias": false, + "value": "#381316" + }, + { + "name": "base/green/solid/1", + "type": "color", + "isAlias": false, + "value": "#FBFEFC" + }, + { + "name": "base/green/solid/2", + "type": "color", + "isAlias": false, + "value": "#F2FCF5" + }, + { + "name": "base/green/solid/3", + "type": "color", + "isAlias": false, + "value": "#E9F9EE" + }, + { + "name": "base/green/solid/4", + "type": "color", + "isAlias": false, + "value": "#DDF3E4" + }, + { + "name": "base/green/solid/5", + "type": "color", + "isAlias": false, + "value": "#CCEBD7" + }, + { + "name": "base/green/solid/6", + "type": "color", + "isAlias": false, + "value": "#B4DFC4" + }, + { + "name": "base/green/solid/7", + "type": "color", + "isAlias": false, + "value": "#92CEAC" + }, + { + "name": "base/green/solid/8", + "type": "color", + "isAlias": false, + "value": "#5BB98C" + }, + { + "name": "base/green/solid/9", + "type": "color", + "isAlias": false, + "value": "#30A46C" + }, + { + "name": "base/green/solid/10", + "type": "color", + "isAlias": false, + "value": "#299764" + }, + { + "name": "base/green/solid/11", + "type": "color", + "isAlias": false, + "value": "#18794E" + }, + { + "name": "base/green/solid/12", + "type": "color", + "isAlias": false, + "value": "#153226" + }, + { + "name": "base/amber/solid/1", + "type": "color", + "isAlias": false, + "value": "#FEFDFB" + }, + { + "name": "base/amber/solid/2", + "type": "color", + "isAlias": false, + "value": "#FFF9ED" + }, + { + "name": "base/amber/solid/3", + "type": "color", + "isAlias": false, + "value": "#FFF4D5" + }, + { + "name": "base/amber/solid/4", + "type": "color", + "isAlias": false, + "value": "#FFECBC" + }, + { + "name": "base/amber/solid/5", + "type": "color", + "isAlias": false, + "value": "#FFE3A2" + }, + { + "name": "base/amber/solid/6", + "type": "color", + "isAlias": false, + "value": "#FFD386" + }, + { + "name": "base/amber/solid/7", + "type": "color", + "isAlias": false, + "value": "#F3BA63" + }, + { + "name": "base/amber/solid/8", + "type": "color", + "isAlias": false, + "value": "#EE9D2B" + }, + { + "name": "base/amber/solid/9", + "type": "color", + "isAlias": false, + "value": "#FFB224" + }, + { + "name": "base/amber/solid/10", + "type": "color", + "isAlias": false, + "value": "#FFA01C" + }, + { + "name": "base/amber/solid/11", + "type": "color", + "isAlias": false, + "value": "#AD5700" + }, + { + "name": "base/amber/solid/12", + "type": "color", + "isAlias": false, + "value": "#4E2009" + }, + { + "name": "base/Pure/White", + "type": "color", + "isAlias": false, + "value": "#FFFFFF" + }, + { + "name": "base/Pure/Black", + "type": "color", + "isAlias": false, + "value": "#000000" + }, + { + "name": "Text/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/12" + } + }, + { + "name": "Text/Medium", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + }, + { + "name": "Text/Subdued", + "type": "color", + "isAlias": false, + "value": "#3E4346" + }, + { + "name": "Text/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Text/Critical", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/11" + } + }, + { + "name": "Text/Warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/11" + } + }, + { + "name": "Text/Success", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/11" + } + }, + { + "name": "Text/Highlight", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/11" + } + }, + { + "name": "Text/Interactive", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/11" + } + }, + { + "name": "Text/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Text/OnBG/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/8" + } + }, + { + "name": "Border/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/7" + } + }, + { + "name": "Border/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/6" + } + }, + { + "name": "Border/Critical/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/8" + } + }, + { + "name": "Border/Critical/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/7" + } + }, + { + "name": "Border/Critical/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/6" + } + }, + { + "name": "Border/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/8" + } + }, + { + "name": "Border/Success/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/7" + } + }, + { + "name": "Border/Warning/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/8" + } + }, + { + "name": "Border/Warning/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/7" + } + }, + { + "name": "Border/Highlight/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/8" + } + }, + { + "name": "Border/Highlight/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/7" + } + }, + { + "name": "Border/Highlight/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/9" + } + }, + { + "name": "Border/Highlight/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/7" + } + }, + { + "name": "Border/Interactive/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/8" + } + }, + { + "name": "Border/Interactive/Focused", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/7" + } + }, + { + "name": "Icon/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + }, + { + "name": "Icon/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/10" + } + }, + { + "name": "Icon/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Icon/Critical", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/10" + } + }, + { + "name": "Action/Primary/Basic/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/9" + } + }, + { + "name": "Icon/Warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/10" + } + }, + { + "name": "Action/Primary/Basic/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/10" + } + }, + { + "name": "Icon/Success", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/10" + } + }, + { + "name": "Action/Primary/Basic/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/11" + } + }, + { + "name": "Icon/Highlight", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/10" + } + }, + { + "name": "Icon/Interactive", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/11" + } + }, + { + "name": "Action/Primary/Basic/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/12" + } + }, + { + "name": "Icon/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Action/Primary/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Icon/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/4" + } + }, + { + "name": "Action/Primary/Critical/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/9" + } + }, + { + "name": "Icon/OnBG/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Action/Primary/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/9" + } + }, + { + "name": "Action/Primary/Critical/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/10" + } + }, + { + "name": "Action/Secondary/Critical/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/5" + } + }, + { + "name": "Action/Secondary/Critical/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/4" + } + }, + { + "name": "Action/Secondary/Critical/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/6" + } + }, + { + "name": "Action/Primary/Interactive/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/9" + } + }, + { + "name": "Action/Secondary/Critical/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/3" + } + }, + { + "name": "Action/Primary/Interactive/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/10" + } + }, + { + "name": "Action/Primary/Interactive/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/11" + } + }, + { + "name": "Action/Primary/Interactive/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/12" + } + }, + { + "name": "Action/Primary/Critical/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/11" + } + }, + { + "name": "Action/Secondary/Basic/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/3" + } + }, + { + "name": "Action/Primary/Success/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/10" + } + }, + { + "name": "Action/Primary/Success/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/11" + } + }, + { + "name": "Action/Secondary/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/3" + } + }, + { + "name": "Action/Primary/Critical/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/12" + } + }, + { + "name": "Action/Secondary/Interactive/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/5" + } + }, + { + "name": "Action/Secondary/Success/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/5" + } + }, + { + "name": "Action/Primary/Success/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/12" + } + }, + { + "name": "Action/Secondary/Interactive/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/4" + } + }, + { + "name": "Action/Secondary/Success/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/6" + } + }, + { + "name": "Action/Secondary/Neutral/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Action/Secondary/Success/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/4" + } + }, + { + "name": "Action/Secondary/Interactive/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/6" + } + }, + { + "name": "Action/Secondary/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/3" + } + }, + { + "name": "Action/Secondary/Neutral/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/2" + } + }, + { + "name": "Action/Secondary/Interactive/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/3" + } + }, + { + "name": "Action/Secondary/Basic/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/4" + } + }, + { + "name": "Action/Secondary/Basic/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/5" + } + }, + { + "name": "Action/Secondary/Neutral/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/5" + } + }, + { + "name": "Action/Secondary/Basic/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/6" + } + }, + { + "name": "Action/Secondary/Neutral/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/6" + } + }, + { + "name": "Action/Tertiary/Basic/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/alpha/2" + } + }, + { + "name": "base/indigo/alpha/1", + "type": "color", + "isAlias": false, + "value": "#05058203" + }, + { + "name": "Action/Tertiary/Interactive/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/alpha/2" + } + }, + { + "name": "Action/Tertiary/Success/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/alpha/2" + } + }, + { + "name": "base/indigo/alpha/2", + "type": "color", + "isAlias": false, + "value": "#054CFF08" + }, + { + "name": "Action/Tertiary/Critical/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/alpha/2" + } + }, + { + "name": "base/indigo/alpha/3", + "type": "color", + "isAlias": false, + "value": "#0144FF0F" + }, + { + "name": "base/indigo/alpha/4", + "type": "color", + "isAlias": false, + "value": "#0247F51A" + }, + { + "name": "base/indigo/alpha/5", + "type": "color", + "isAlias": false, + "value": "#023CEB26" + }, + { + "name": "Background/Alpha/Dark", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/alpha/12" + } + }, + { + "name": "base/indigo/alpha/6", + "type": "color", + "isAlias": false, + "value": "#013DE438" + }, + { + "name": "Background/Alpha/Medium", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/alpha/4" + } + }, + { + "name": "base/indigo/alpha/7", + "type": "color", + "isAlias": false, + "value": "#0038E052" + }, + { + "name": "base/indigo/alpha/8", + "type": "color", + "isAlias": false, + "value": "#0134DB73" + }, + { + "name": "base/indigo/alpha/9", + "type": "color", + "isAlias": false, + "value": "#0031D2C2" + }, + { + "name": "Background/Solid/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/2" + } + }, + { + "name": "Background/Solid/Dark", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/12" + } + }, + { + "name": "Background/Solid/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/3" + } + }, + { + "name": "Surface/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/Pure/White" + } + }, + { + "name": "Surface/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/2" + } + }, + { + "name": "base/indigo/alpha/10", + "type": "color", + "isAlias": false, + "value": "#002CBDC4" + }, + { + "name": "Surface/Selected", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/2" + } + }, + { + "name": "base/indigo/alpha/11", + "type": "color", + "isAlias": false, + "value": "#00259ECC" + }, + { + "name": "base/indigo/alpha/12", + "type": "color", + "isAlias": false, + "value": "#000E3AF0" + }, + { + "name": "Surface/Warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/2" + } + }, + { + "name": "base/blue/alpha/1", + "type": "color", + "isAlias": false, + "value": "#0582FF05" + }, + { + "name": "Surface/Critical", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/2" + } + }, + { + "name": "base/blue/alpha/2", + "type": "color", + "isAlias": false, + "value": "#0582FF0A" + }, + { + "name": "Surface/Success", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/2" + } + }, + { + "name": "base/blue/alpha/3", + "type": "color", + "isAlias": false, + "value": "#0280FF12" + }, + { + "name": "Surface/Highlight/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/2" + } + }, + { + "name": "base/blue/alpha/4", + "type": "color", + "isAlias": false, + "value": "#0180FF1F" + }, + { + "name": "Surface/Interactive", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/2" + } + }, + { + "name": "base/blue/alpha/5", + "type": "color", + "isAlias": false, + "value": "#0180EF30" + }, + { + "name": "Surface/Highlight/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/4" + } + }, + { + "name": "base/blue/alpha/6", + "type": "color", + "isAlias": false, + "value": "#0177E647" + }, + { + "name": "Surface/Highlight/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/6" + } + }, + { + "name": "base/blue/alpha/7", + "type": "color", + "isAlias": false, + "value": "#0077DF69" + }, + { + "name": "base/blue/alpha/8", + "type": "color", + "isAlias": false, + "value": "#0082E6A1" + }, + { + "name": "base/blue/alpha/9", + "type": "color", + "isAlias": false, + "value": "#0091FFFA" + }, + { + "name": "base/blue/alpha/10", + "type": "color", + "isAlias": false, + "value": "#0080F1FA" + }, + { + "name": "base/blue/alpha/11", + "type": "color", + "isAlias": false, + "value": "#0066DBFA" + }, + { + "name": "base/blue/alpha/12", + "type": "color", + "isAlias": false, + "value": "#002149FA" + }, + { + "name": "base/violet/alpha/1", + "type": "color", + "isAlias": false, + "value": "#5805AB03" + }, + { + "name": "base/violet/alpha/2", + "type": "color", + "isAlias": false, + "value": "#3705FF05" + }, + { + "name": "base/violet/alpha/3", + "type": "color", + "isAlias": false, + "value": "#3C00FF0D" + }, + { + "name": "base/violet/alpha/4", + "type": "color", + "isAlias": false, + "value": "#2E02F417" + }, + { + "name": "base/violet/alpha/5", + "type": "color", + "isAlias": false, + "value": "#2F01E821" + }, + { + "name": "base/violet/alpha/6", + "type": "color", + "isAlias": false, + "value": "#2A01DF30" + }, + { + "name": "base/violet/alpha/7", + "type": "color", + "isAlias": false, + "value": "#2B01D447" + }, + { + "name": "base/violet/alpha/8", + "type": "color", + "isAlias": false, + "value": "#2A00D066" + }, + { + "name": "base/violet/alpha/9", + "type": "color", + "isAlias": false, + "value": "#2500B6A8" + }, + { + "name": "base/violet/alpha/10", + "type": "color", + "isAlias": false, + "value": "#1F00A5B0" + }, + { + "name": "base/violet/alpha/11", + "type": "color", + "isAlias": false, + "value": "#180091BA" + }, + { + "name": "base/violet/alpha/12", + "type": "color", + "isAlias": false, + "value": "#0E003DED" + }, + { + "name": "base/gray/slate/alpha/1", + "type": "color", + "isAlias": false, + "value": "#05448205" + }, + { + "name": "base/gray/slate/alpha/2", + "type": "color", + "isAlias": false, + "value": "#05294D08" + }, + { + "name": "base/gray/slate/alpha/3", + "type": "color", + "isAlias": false, + "value": "#0025490D" + }, + { + "name": "base/gray/slate/alpha/4", + "type": "color", + "isAlias": false, + "value": "#021C3714" + }, + { + "name": "base/gray/slate/alpha/5", + "type": "color", + "isAlias": false, + "value": "#0217351A" + }, + { + "name": "base/gray/slate/alpha/6", + "type": "color", + "isAlias": false, + "value": "#01213921" + }, + { + "name": "base/gray/slate/alpha/7", + "type": "color", + "isAlias": false, + "value": "#001A3329" + }, + { + "name": "base/gray/slate/alpha/8", + "type": "color", + "isAlias": false, + "value": "#011E323D" + }, + { + "name": "base/gray/slate/alpha/9", + "type": "color", + "isAlias": false, + "value": "#00111E78" + }, + { + "name": "base/gray/slate/alpha/10", + "type": "color", + "isAlias": false, + "value": "#00101B82" + }, + { + "name": "base/gray/slate/alpha/11", + "type": "color", + "isAlias": false, + "value": "#000E1896" + }, + { + "name": "base/gray/slate/alpha/12", + "type": "color", + "isAlias": false, + "value": "#00080CED" + }, + { + "name": "base/green/alpha/1", + "type": "color", + "isAlias": false, + "value": "#05C04305" + }, + { + "name": "base/green/alpha/2", + "type": "color", + "isAlias": false, + "value": "#00C43B0D" + }, + { + "name": "base/green/alpha/3", + "type": "color", + "isAlias": false, + "value": "#02BA3C17" + }, + { + "name": "base/green/alpha/4", + "type": "color", + "isAlias": false, + "value": "#01A63521" + }, + { + "name": "base/green/alpha/5", + "type": "color", + "isAlias": false, + "value": "#009B3633" + }, + { + "name": "base/green/alpha/6", + "type": "color", + "isAlias": false, + "value": "#0193364A" + }, + { + "name": "base/green/alpha/7", + "type": "color", + "isAlias": false, + "value": "#008C3D6E" + }, + { + "name": "base/green/alpha/8", + "type": "color", + "isAlias": false, + "value": "#00934CA3" + }, + { + "name": "base/green/alpha/9", + "type": "color", + "isAlias": false, + "value": "#008F4ACF" + }, + { + "name": "base/green/alpha/10", + "type": "color", + "isAlias": false, + "value": "#008346D6" + }, + { + "name": "base/green/alpha/11", + "type": "color", + "isAlias": false, + "value": "#006B3BE8" + }, + { + "name": "base/green/alpha/12", + "type": "color", + "isAlias": false, + "value": "#002012EB" + }, + { + "name": "base/amber/alpha/1", + "type": "color", + "isAlias": false, + "value": "#C0820505" + }, + { + "name": "base/amber/alpha/2", + "type": "color", + "isAlias": false, + "value": "#FFAB0212" + }, + { + "name": "base/amber/alpha/3", + "type": "color", + "isAlias": false, + "value": "#FFBB012B" + }, + { + "name": "base/amber/alpha/4", + "type": "color", + "isAlias": false, + "value": "#FFB70042" + }, + { + "name": "base/amber/alpha/5", + "type": "color", + "isAlias": false, + "value": "#FFB3005E" + }, + { + "name": "base/amber/alpha/6", + "type": "color", + "isAlias": false, + "value": "#FFA20178" + }, + { + "name": "base/amber/alpha/7", + "type": "color", + "isAlias": false, + "value": "#EC8D009C" + }, + { + "name": "base/amber/alpha/8", + "type": "color", + "isAlias": false, + "value": "#EA8900D4" + }, + { + "name": "base/amber/alpha/9", + "type": "color", + "isAlias": false, + "value": "#FFA600DB" + }, + { + "name": "base/amber/alpha/10", + "type": "color", + "isAlias": false, + "value": "#FF9500E3" + }, + { + "name": "base/amber/alpha/11", + "type": "color", + "isAlias": false, + "value": "#AB5300FA" + }, + { + "name": "base/amber/alpha/12", + "type": "color", + "isAlias": false, + "value": "#481800F5" + }, + { + "name": "base/red/alpha/1", + "type": "color", + "isAlias": false, + "value": "#FF050503" + }, + { + "name": "base/red/alpha/2", + "type": "color", + "isAlias": false, + "value": "#FF050508" + }, + { + "name": "base/red/alpha/3", + "type": "color", + "isAlias": false, + "value": "#FF01010F" + }, + { + "name": "base/red/alpha/4", + "type": "color", + "isAlias": false, + "value": "#FF00001A" + }, + { + "name": "base/red/alpha/5", + "type": "color", + "isAlias": false, + "value": "#F2000026" + }, + { + "name": "base/red/alpha/6", + "type": "color", + "isAlias": false, + "value": "#E4010138" + }, + { + "name": "base/red/alpha/7", + "type": "color", + "isAlias": false, + "value": "#D9000452" + }, + { + "name": "base/red/alpha/8", + "type": "color", + "isAlias": false, + "value": "#D1000470" + }, + { + "name": "base/red/alpha/9", + "type": "color", + "isAlias": false, + "value": "#DB0007B8" + }, + { + "name": "base/red/alpha/10", + "type": "color", + "isAlias": false, + "value": "#D10007C2" + }, + { + "name": "base/red/alpha/11", + "type": "color", + "isAlias": false, + "value": "#C30007D4" + }, + { + "name": "base/red/alpha/12", + "type": "color", + "isAlias": false, + "value": "#280003ED" + }, + { + "name": "MapAreaDistrict/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Surface/Highlight/Default" + } + }, + { + "name": "MapAreaDistrict/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Action/Secondary/Success/Hovered" + } + }, + { + "name": "MapAreaDistrict/Selected", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Action/Primary/Basic/Default" + } + }, + { + "name": "MapAreaDistrict/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Action/Primary/Disabled" + } + }, + { + "name": "MapAreaDistrict/Border", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Border/Focus", + "type": "color", + "isAlias": false, + "value": "#FFFFFF03" + }, + { + "name": "Transparent", + "type": "color", + "isAlias": false, + "value": "#FFFFFF00" + }, + { + "name": "Border/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + } + ] + } + ] + }, + { + "name": "Spacing / Numericals", + "modes": [ + { + "name": "Mode 1", + "variables": [ + { + "name": "space/0", + "type": "number", + "isAlias": false, + "value": 0 + }, + { + "name": "space/025", + "type": "number", + "isAlias": false, + "value": 1 + }, + { + "name": "space/05", + "type": "number", + "isAlias": false, + "value": 2 + }, + { + "name": "space/1", + "type": "number", + "isAlias": false, + "value": 4 + }, + { + "name": "space/2", + "type": "number", + "isAlias": false, + "value": 8 + }, + { + "name": "space/3", + "type": "number", + "isAlias": false, + "value": 12 + }, + { + "name": "space/4", + "type": "number", + "isAlias": false, + "value": 16 + }, + { + "name": "space/5", + "type": "number", + "isAlias": false, + "value": 20 + }, + { + "name": "space/6", + "type": "number", + "isAlias": false, + "value": 24 + }, + { + "name": "space/8", + "type": "number", + "isAlias": false, + "value": 32 + }, + { + "name": "space/10", + "type": "number", + "isAlias": false, + "value": 40 + }, + { + "name": "space/12", + "type": "number", + "isAlias": false, + "value": 48 + }, + { + "name": "space/16", + "type": "number", + "isAlias": false, + "value": 64 + }, + { + "name": "space/20", + "type": "number", + "isAlias": false, + "value": 80 + }, + { + "name": "space/24", + "type": "number", + "isAlias": false, + "value": 96 + }, + { + "name": "space/32", + "type": "number", + "isAlias": false, + "value": 128 + } + ] + } + ] + }, + { + "name": "Borders", + "modes": [ + { + "name": "Mode 1", + "variables": [ + { + "name": "border/radius/0", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/0" + } + }, + { + "name": "border/radius/05", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/05" + } + }, + { + "name": "border/radius/1", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/1" + } + }, + { + "name": "border/radius/2", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/2" + } + }, + { + "name": "border/radius/3", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/3" + } + }, + { + "name": "border/radius/4", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/4" + } + }, + { + "name": "border/radius/5", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/5" + } + }, + { + "name": "border/radius/6", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/6" + } + }, + { + "name": "border/radius/full", + "type": "number", + "isAlias": false, + "value": 9999 + }, + { + "name": "border/width/1", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/025" + } + }, + { + "name": "border/width/2", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/05" + } + }, + { + "name": "border/width/4", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/1" + } + } + ] + } + ] + }, + { + "name": "Typography", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Desktop Heading/4xl-Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 40, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 48, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/3xl-Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 32, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 40, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/2xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 28, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 32, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Lg-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 26, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Md-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Sm-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Xs-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Sm Caps", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 2, + "letterSpacingUnit": "PIXELS", + "textCase": "UPPER", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Lg-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Lg-Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Underline-Reg", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Body/Large/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Large/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Large/Underline-Reg", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Body/Small/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Small/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Small/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Small/bodySm- underline", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Mobile Heading/4xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 32, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 40, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/3xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/2xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Lg-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Lg-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Lg-Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Md-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Sm-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Sm Caps", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 2, + "letterSpacingUnit": "PIXELS", + "textCase": "UPPER", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Xs-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Xs Caps", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 2, + "letterSpacingUnit": "PIXELS", + "textCase": "UPPER", + "textDecoration": "NONE" + } + } + ] + } + ] + }, + { + "name": "Effects", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "shadow/modal", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 26 + }, + "radius": 80, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 1, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/layer", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 32, + "g": 42, + "b": 53, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 31 + }, + "radius": 41, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 32, + "g": 42, + "b": 54, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 16, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/inset/basic", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "INNER_SHADOW", + "color": { + "r": 228, + "g": 229, + "b": 231, + "a": 1 + }, + "offset": { + "x": -1, + "y": 0 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/inset/button", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "INNER_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": -1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/button/pressed", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "INNER_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/button/default", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/deep", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 33, + "g": 43, + "b": 54, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 16, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 6, + "g": 44, + "b": 82, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 1 + } + ] + } + }, + { + "name": "shadow/basic/faint", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 22, + "g": 29, + "b": 37, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/transparent", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/xs", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.24 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 2, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/sm", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 1, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/md", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 6, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 4, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/lg", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 6, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 4 + }, + "radius": 12, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 12 + }, + "radius": 18, + "spread": -2 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 4 + }, + "radius": 18, + "spread": -2 + } + ] + } + }, + { + "name": "shadow/basic/2xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.16 + }, + "offset": { + "x": 0, + "y": 32 + }, + "radius": 56, + "spread": -2 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 32 + }, + "radius": 32, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/element/popover", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 23, + "g": 24, + "b": 24, + "a": 0.12 + }, + "offset": { + "x": 0, + "y": 8 + }, + "radius": 20, + "spread": -4 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 23, + "g": 24, + "b": 24, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 3 + }, + "radius": 6, + "spread": -3 + } + ] + } + }, + { + "name": "shadow/element/card", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 23, + "g": 24, + "b": 24, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 5, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/element/topNav", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 2, + "spread": -1 + } + ] + } + }, + { + "name": "shadow/element/focus", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 145, + "b": 255, + "a": 1 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 2 + } + ] + } + } + ] + } + ] + }, + { + "name": "Grids", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Basic 12 Col", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "STRETCH", + "gutterSize": 16, + "offset": 40, + "count": 12 + } + ] + } + } + ] + } + ] + } + ] +} From 98620e2bb46efb05ee016a387d2250477cee6760 Mon Sep 17 00:00:00 2001 From: = <=> Date: Wed, 18 Oct 2023 13:10:16 +0530 Subject: [PATCH 4/8] rename --- examples/district/config/tokens/sd-config.js | 2 +- examples/district/config/tokens/{tokens.json => variables.json} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename examples/district/config/tokens/{tokens.json => variables.json} (100%) diff --git a/examples/district/config/tokens/sd-config.js b/examples/district/config/tokens/sd-config.js index aed5e277..4848eceb 100644 --- a/examples/district/config/tokens/sd-config.js +++ b/examples/district/config/tokens/sd-config.js @@ -1,6 +1,6 @@ const cssFormattor = require('./helpers/css-formattor'); const twFormat = require('./helpers/tailwind-formattor'); -const config = require('./tokens.json'); +const config = require('./variables.json'); module.exports = { format: { diff --git a/examples/district/config/tokens/tokens.json b/examples/district/config/tokens/variables.json similarity index 100% rename from examples/district/config/tokens/tokens.json rename to examples/district/config/tokens/variables.json From f769c89ea73d2f5702923d7805bf71093e3df4f3 Mon Sep 17 00:00:00 2001 From: = <=> Date: Wed, 18 Oct 2023 13:16:54 +0530 Subject: [PATCH 5/8] remove variables --- examples/district/components/provider.tsx | 4 +- .../district/config/tokens/variables.json | 3360 ----------------- 2 files changed, 2 insertions(+), 3362 deletions(-) delete mode 100644 examples/district/config/tokens/variables.json diff --git a/examples/district/components/provider.tsx b/examples/district/components/provider.tsx index 017dd589..2c75da5f 100644 --- a/examples/district/components/provider.tsx +++ b/examples/district/components/provider.tsx @@ -13,14 +13,14 @@ export default function Provider({ children }: { children: React.ReactNode }) { return ( - <> + {children} - + ); } diff --git a/examples/district/config/tokens/variables.json b/examples/district/config/tokens/variables.json deleted file mode 100644 index 6c9fd67c..00000000 --- a/examples/district/config/tokens/variables.json +++ /dev/null @@ -1,3360 +0,0 @@ -{ - "collections": [ - { - "name": "Colors", - "modes": [ - { - "name": "Light", - "variables": [ - { - "name": "base/indigo/solid/1", - "type": "color", - "isAlias": false, - "value": "#FDFDFE" - }, - { - "name": "base/indigo/solid/2", - "type": "color", - "isAlias": false, - "value": "#F8FAFF" - }, - { - "name": "base/indigo/solid/3", - "type": "color", - "isAlias": false, - "value": "#F0F4FF" - }, - { - "name": "base/indigo/solid/4", - "type": "color", - "isAlias": false, - "value": "#E6EDFE" - }, - { - "name": "base/indigo/solid/5", - "type": "color", - "isAlias": false, - "value": "#D9E2FC" - }, - { - "name": "base/indigo/solid/6", - "type": "color", - "isAlias": false, - "value": "#C6D4F9" - }, - { - "name": "base/indigo/solid/7", - "type": "color", - "isAlias": false, - "value": "#AEC0F5" - }, - { - "name": "base/indigo/solid/8", - "type": "color", - "isAlias": false, - "value": "#8DA4EF" - }, - { - "name": "base/indigo/solid/9", - "type": "color", - "isAlias": false, - "value": "#3E63DD" - }, - { - "name": "base/indigo/solid/10", - "type": "color", - "isAlias": false, - "value": "#3A5CCC" - }, - { - "name": "base/indigo/solid/11", - "type": "color", - "isAlias": false, - "value": "#3451B2" - }, - { - "name": "base/indigo/solid/12", - "type": "color", - "isAlias": false, - "value": "#101D46" - }, - { - "name": "base/blue/solid/1", - "type": "color", - "isAlias": false, - "value": "#FBFDFF" - }, - { - "name": "base/blue/solid/2", - "type": "color", - "isAlias": false, - "value": "#F5FAFF" - }, - { - "name": "base/blue/solid/3", - "type": "color", - "isAlias": false, - "value": "#EDF6FF" - }, - { - "name": "base/blue/solid/4", - "type": "color", - "isAlias": false, - "value": "#E1F0FF" - }, - { - "name": "base/blue/solid/5", - "type": "color", - "isAlias": false, - "value": "#CEE7FE" - }, - { - "name": "base/blue/solid/6", - "type": "color", - "isAlias": false, - "value": "#B7D9F8" - }, - { - "name": "base/blue/solid/7", - "type": "color", - "isAlias": false, - "value": "#96C7F2" - }, - { - "name": "base/blue/solid/8", - "type": "color", - "isAlias": false, - "value": "#5EB0EF" - }, - { - "name": "base/blue/solid/9", - "type": "color", - "isAlias": false, - "value": "#0091FF" - }, - { - "name": "base/blue/solid/10", - "type": "color", - "isAlias": false, - "value": "#0081F1" - }, - { - "name": "base/blue/solid/11", - "type": "color", - "isAlias": false, - "value": "#006ADC" - }, - { - "name": "base/blue/solid/12", - "type": "color", - "isAlias": false, - "value": "#00254D" - }, - { - "name": "base/violet/solid/1", - "type": "color", - "isAlias": false, - "value": "#FDFCFE" - }, - { - "name": "base/violet/solid/2", - "type": "color", - "isAlias": false, - "value": "#FBFAFF" - }, - { - "name": "base/violet/solid/3", - "type": "color", - "isAlias": false, - "value": "#F5F2FF" - }, - { - "name": "base/violet/solid/4", - "type": "color", - "isAlias": false, - "value": "#EDE9FE" - }, - { - "name": "base/violet/solid/5", - "type": "color", - "isAlias": false, - "value": "#E4DEFC" - }, - { - "name": "base/violet/solid/6", - "type": "color", - "isAlias": false, - "value": "#D7CFF9" - }, - { - "name": "base/violet/solid/7", - "type": "color", - "isAlias": false, - "value": "#C4B8F3" - }, - { - "name": "base/violet/solid/8", - "type": "color", - "isAlias": false, - "value": "#AA99EC" - }, - { - "name": "base/violet/solid/9", - "type": "color", - "isAlias": false, - "value": "#6E56CF" - }, - { - "name": "base/violet/solid/10", - "type": "color", - "isAlias": false, - "value": "#644FC1" - }, - { - "name": "base/violet/solid/11", - "type": "color", - "isAlias": false, - "value": "#5746AF" - }, - { - "name": "base/violet/solid/12", - "type": "color", - "isAlias": false, - "value": "#20134B" - }, - { - "name": "base/gray/slate/solid/1", - "type": "color", - "isAlias": false, - "value": "#FBFCFD" - }, - { - "name": "base/gray/slate/solid/2", - "type": "color", - "isAlias": false, - "value": "#F8F9FA" - }, - { - "name": "base/gray/slate/solid/3", - "type": "color", - "isAlias": false, - "value": "#F1F3F5" - }, - { - "name": "base/gray/slate/solid/4", - "type": "color", - "isAlias": false, - "value": "#ECEEF0" - }, - { - "name": "base/gray/slate/solid/5", - "type": "color", - "isAlias": false, - "value": "#E6E8EB" - }, - { - "name": "base/gray/slate/solid/6", - "type": "color", - "isAlias": false, - "value": "#DFE3E6" - }, - { - "name": "base/gray/slate/solid/7", - "type": "color", - "isAlias": false, - "value": "#D7DBDF" - }, - { - "name": "base/gray/slate/solid/8", - "type": "color", - "isAlias": false, - "value": "#C1C8CD" - }, - { - "name": "base/gray/slate/solid/9", - "type": "color", - "isAlias": false, - "value": "#889096" - }, - { - "name": "base/gray/slate/solid/10", - "type": "color", - "isAlias": false, - "value": "#7E868C" - }, - { - "name": "base/gray/slate/solid/11", - "type": "color", - "isAlias": false, - "value": "#687076" - }, - { - "name": "base/gray/slate/solid/12", - "type": "color", - "isAlias": false, - "value": "#11181C" - }, - { - "name": "base/red/solid/1", - "type": "color", - "isAlias": false, - "value": "#FFFCFC" - }, - { - "name": "base/red/solid/2", - "type": "color", - "isAlias": false, - "value": "#FFF8F8" - }, - { - "name": "base/red/solid/3", - "type": "color", - "isAlias": false, - "value": "#FFEFEF" - }, - { - "name": "base/red/solid/4", - "type": "color", - "isAlias": false, - "value": "#FFE5E5" - }, - { - "name": "base/red/solid/5", - "type": "color", - "isAlias": false, - "value": "#FDD8D8" - }, - { - "name": "base/red/solid/6", - "type": "color", - "isAlias": false, - "value": "#F9C6C6" - }, - { - "name": "base/red/solid/7", - "type": "color", - "isAlias": false, - "value": "#F3AEAF" - }, - { - "name": "base/red/solid/8", - "type": "color", - "isAlias": false, - "value": "#EB9091" - }, - { - "name": "base/red/solid/9", - "type": "color", - "isAlias": false, - "value": "#E5484D" - }, - { - "name": "base/red/solid/10", - "type": "color", - "isAlias": false, - "value": "#DC3D43" - }, - { - "name": "base/red/solid/11", - "type": "color", - "isAlias": false, - "value": "#CD2B31" - }, - { - "name": "base/red/solid/12", - "type": "color", - "isAlias": false, - "value": "#381316" - }, - { - "name": "base/green/solid/1", - "type": "color", - "isAlias": false, - "value": "#FBFEFC" - }, - { - "name": "base/green/solid/2", - "type": "color", - "isAlias": false, - "value": "#F2FCF5" - }, - { - "name": "base/green/solid/3", - "type": "color", - "isAlias": false, - "value": "#E9F9EE" - }, - { - "name": "base/green/solid/4", - "type": "color", - "isAlias": false, - "value": "#DDF3E4" - }, - { - "name": "base/green/solid/5", - "type": "color", - "isAlias": false, - "value": "#CCEBD7" - }, - { - "name": "base/green/solid/6", - "type": "color", - "isAlias": false, - "value": "#B4DFC4" - }, - { - "name": "base/green/solid/7", - "type": "color", - "isAlias": false, - "value": "#92CEAC" - }, - { - "name": "base/green/solid/8", - "type": "color", - "isAlias": false, - "value": "#5BB98C" - }, - { - "name": "base/green/solid/9", - "type": "color", - "isAlias": false, - "value": "#30A46C" - }, - { - "name": "base/green/solid/10", - "type": "color", - "isAlias": false, - "value": "#299764" - }, - { - "name": "base/green/solid/11", - "type": "color", - "isAlias": false, - "value": "#18794E" - }, - { - "name": "base/green/solid/12", - "type": "color", - "isAlias": false, - "value": "#153226" - }, - { - "name": "base/amber/solid/1", - "type": "color", - "isAlias": false, - "value": "#FEFDFB" - }, - { - "name": "base/amber/solid/2", - "type": "color", - "isAlias": false, - "value": "#FFF9ED" - }, - { - "name": "base/amber/solid/3", - "type": "color", - "isAlias": false, - "value": "#FFF4D5" - }, - { - "name": "base/amber/solid/4", - "type": "color", - "isAlias": false, - "value": "#FFECBC" - }, - { - "name": "base/amber/solid/5", - "type": "color", - "isAlias": false, - "value": "#FFE3A2" - }, - { - "name": "base/amber/solid/6", - "type": "color", - "isAlias": false, - "value": "#FFD386" - }, - { - "name": "base/amber/solid/7", - "type": "color", - "isAlias": false, - "value": "#F3BA63" - }, - { - "name": "base/amber/solid/8", - "type": "color", - "isAlias": false, - "value": "#EE9D2B" - }, - { - "name": "base/amber/solid/9", - "type": "color", - "isAlias": false, - "value": "#FFB224" - }, - { - "name": "base/amber/solid/10", - "type": "color", - "isAlias": false, - "value": "#FFA01C" - }, - { - "name": "base/amber/solid/11", - "type": "color", - "isAlias": false, - "value": "#AD5700" - }, - { - "name": "base/amber/solid/12", - "type": "color", - "isAlias": false, - "value": "#4E2009" - }, - { - "name": "base/Pure/White", - "type": "color", - "isAlias": false, - "value": "#FFFFFF" - }, - { - "name": "base/Pure/Black", - "type": "color", - "isAlias": false, - "value": "#000000" - }, - { - "name": "Text/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/12" - } - }, - { - "name": "Text/Medium", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/11" - } - }, - { - "name": "Text/Subdued", - "type": "color", - "isAlias": false, - "value": "#3E4346" - }, - { - "name": "Text/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/9" - } - }, - { - "name": "Text/Critical", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/11" - } - }, - { - "name": "Text/Warning", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/amber/solid/11" - } - }, - { - "name": "Text/Success", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/11" - } - }, - { - "name": "Text/Highlight", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/11" - } - }, - { - "name": "Text/Interactive", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/11" - } - }, - { - "name": "Text/OnBG/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/1" - } - }, - { - "name": "Text/OnBG/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/9" - } - }, - { - "name": "Border/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/8" - } - }, - { - "name": "Border/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/7" - } - }, - { - "name": "Border/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/6" - } - }, - { - "name": "Border/Critical/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/8" - } - }, - { - "name": "Border/Critical/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/7" - } - }, - { - "name": "Border/Critical/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/6" - } - }, - { - "name": "Border/Success/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/8" - } - }, - { - "name": "Border/Success/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/7" - } - }, - { - "name": "Border/Warning/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/amber/solid/8" - } - }, - { - "name": "Border/Warning/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/amber/solid/7" - } - }, - { - "name": "Border/Highlight/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/8" - } - }, - { - "name": "Border/Highlight/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/7" - } - }, - { - "name": "Border/Highlight/OnBG/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/9" - } - }, - { - "name": "Border/Highlight/OnBG/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/7" - } - }, - { - "name": "Border/Interactive/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/8" - } - }, - { - "name": "Border/Interactive/Focused", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/7" - } - }, - { - "name": "Icon/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/11" - } - }, - { - "name": "Icon/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/10" - } - }, - { - "name": "Icon/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/9" - } - }, - { - "name": "Icon/Critical", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/10" - } - }, - { - "name": "Action/Primary/Basic/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/9" - } - }, - { - "name": "Icon/Warning", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/amber/solid/10" - } - }, - { - "name": "Action/Primary/Basic/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/10" - } - }, - { - "name": "Icon/Success", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/10" - } - }, - { - "name": "Action/Primary/Basic/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/11" - } - }, - { - "name": "Icon/Highlight", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/10" - } - }, - { - "name": "Icon/Interactive", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/indigo/solid/11" - } - }, - { - "name": "Action/Primary/Basic/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/12" - } - }, - { - "name": "Icon/OnBG/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/1" - } - }, - { - "name": "Action/Primary/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/9" - } - }, - { - "name": "Icon/OnBG/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/4" - } - }, - { - "name": "Action/Primary/Critical/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/9" - } - }, - { - "name": "Icon/OnBG/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/9" - } - }, - { - "name": "Action/Primary/Success/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/9" - } - }, - { - "name": "Action/Primary/Critical/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/10" - } - }, - { - "name": "Action/Secondary/Critical/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/5" - } - }, - { - "name": "Action/Secondary/Critical/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/4" - } - }, - { - "name": "Action/Secondary/Critical/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/6" - } - }, - { - "name": "Action/Primary/Interactive/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/9" - } - }, - { - "name": "Action/Secondary/Critical/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/3" - } - }, - { - "name": "Action/Primary/Interactive/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/10" - } - }, - { - "name": "Action/Primary/Interactive/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/11" - } - }, - { - "name": "Action/Primary/Interactive/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/12" - } - }, - { - "name": "Action/Primary/Critical/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/11" - } - }, - { - "name": "Action/Secondary/Basic/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/3" - } - }, - { - "name": "Action/Primary/Success/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/10" - } - }, - { - "name": "Action/Primary/Success/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/11" - } - }, - { - "name": "Action/Secondary/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/3" - } - }, - { - "name": "Action/Primary/Critical/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/12" - } - }, - { - "name": "Action/Secondary/Interactive/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/5" - } - }, - { - "name": "Action/Secondary/Success/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/5" - } - }, - { - "name": "Action/Primary/Success/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/12" - } - }, - { - "name": "Action/Secondary/Interactive/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/4" - } - }, - { - "name": "Action/Secondary/Success/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/6" - } - }, - { - "name": "Action/Secondary/Neutral/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/1" - } - }, - { - "name": "Action/Secondary/Success/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/4" - } - }, - { - "name": "Action/Secondary/Interactive/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/6" - } - }, - { - "name": "Action/Secondary/Success/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/3" - } - }, - { - "name": "Action/Secondary/Neutral/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/2" - } - }, - { - "name": "Action/Secondary/Interactive/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/3" - } - }, - { - "name": "Action/Secondary/Basic/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/4" - } - }, - { - "name": "Action/Secondary/Basic/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/5" - } - }, - { - "name": "Action/Secondary/Neutral/Pressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/5" - } - }, - { - "name": "Action/Secondary/Basic/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/6" - } - }, - { - "name": "Action/Secondary/Neutral/Depressed", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/6" - } - }, - { - "name": "Action/Tertiary/Basic/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/alpha/2" - } - }, - { - "name": "base/indigo/alpha/1", - "type": "color", - "isAlias": false, - "value": "#05058203" - }, - { - "name": "Action/Tertiary/Interactive/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/alpha/2" - } - }, - { - "name": "Action/Tertiary/Success/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/alpha/2" - } - }, - { - "name": "base/indigo/alpha/2", - "type": "color", - "isAlias": false, - "value": "#054CFF08" - }, - { - "name": "Action/Tertiary/Critical/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/alpha/2" - } - }, - { - "name": "base/indigo/alpha/3", - "type": "color", - "isAlias": false, - "value": "#0144FF0F" - }, - { - "name": "base/indigo/alpha/4", - "type": "color", - "isAlias": false, - "value": "#0247F51A" - }, - { - "name": "base/indigo/alpha/5", - "type": "color", - "isAlias": false, - "value": "#023CEB26" - }, - { - "name": "Background/Alpha/Dark", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/indigo/alpha/12" - } - }, - { - "name": "base/indigo/alpha/6", - "type": "color", - "isAlias": false, - "value": "#013DE438" - }, - { - "name": "Background/Alpha/Medium", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/indigo/alpha/4" - } - }, - { - "name": "base/indigo/alpha/7", - "type": "color", - "isAlias": false, - "value": "#0038E052" - }, - { - "name": "base/indigo/alpha/8", - "type": "color", - "isAlias": false, - "value": "#0134DB73" - }, - { - "name": "base/indigo/alpha/9", - "type": "color", - "isAlias": false, - "value": "#0031D2C2" - }, - { - "name": "Background/Solid/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/indigo/solid/2" - } - }, - { - "name": "Background/Solid/Dark", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/indigo/solid/12" - } - }, - { - "name": "Background/Solid/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/indigo/solid/3" - } - }, - { - "name": "Surface/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/Pure/White" - } - }, - { - "name": "Surface/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/2" - } - }, - { - "name": "base/indigo/alpha/10", - "type": "color", - "isAlias": false, - "value": "#002CBDC4" - }, - { - "name": "Surface/Selected", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/2" - } - }, - { - "name": "base/indigo/alpha/11", - "type": "color", - "isAlias": false, - "value": "#00259ECC" - }, - { - "name": "base/indigo/alpha/12", - "type": "color", - "isAlias": false, - "value": "#000E3AF0" - }, - { - "name": "Surface/Warning", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/amber/solid/2" - } - }, - { - "name": "base/blue/alpha/1", - "type": "color", - "isAlias": false, - "value": "#0582FF05" - }, - { - "name": "Surface/Critical", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/red/solid/2" - } - }, - { - "name": "base/blue/alpha/2", - "type": "color", - "isAlias": false, - "value": "#0582FF0A" - }, - { - "name": "Surface/Success", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/green/solid/2" - } - }, - { - "name": "base/blue/alpha/3", - "type": "color", - "isAlias": false, - "value": "#0280FF12" - }, - { - "name": "Surface/Highlight/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/2" - } - }, - { - "name": "base/blue/alpha/4", - "type": "color", - "isAlias": false, - "value": "#0180FF1F" - }, - { - "name": "Surface/Interactive", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/blue/solid/2" - } - }, - { - "name": "base/blue/alpha/5", - "type": "color", - "isAlias": false, - "value": "#0180EF30" - }, - { - "name": "Surface/Highlight/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/4" - } - }, - { - "name": "base/blue/alpha/6", - "type": "color", - "isAlias": false, - "value": "#0177E647" - }, - { - "name": "Surface/Highlight/Hovered", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/violet/solid/6" - } - }, - { - "name": "base/blue/alpha/7", - "type": "color", - "isAlias": false, - "value": "#0077DF69" - }, - { - "name": "base/blue/alpha/8", - "type": "color", - "isAlias": false, - "value": "#0082E6A1" - }, - { - "name": "base/blue/alpha/9", - "type": "color", - "isAlias": false, - "value": "#0091FFFA" - }, - { - "name": "base/blue/alpha/10", - "type": "color", - "isAlias": false, - "value": "#0080F1FA" - }, - { - "name": "base/blue/alpha/11", - "type": "color", - "isAlias": false, - "value": "#0066DBFA" - }, - { - "name": "base/blue/alpha/12", - "type": "color", - "isAlias": false, - "value": "#002149FA" - }, - { - "name": "base/violet/alpha/1", - "type": "color", - "isAlias": false, - "value": "#5805AB03" - }, - { - "name": "base/violet/alpha/2", - "type": "color", - "isAlias": false, - "value": "#3705FF05" - }, - { - "name": "base/violet/alpha/3", - "type": "color", - "isAlias": false, - "value": "#3C00FF0D" - }, - { - "name": "base/violet/alpha/4", - "type": "color", - "isAlias": false, - "value": "#2E02F417" - }, - { - "name": "base/violet/alpha/5", - "type": "color", - "isAlias": false, - "value": "#2F01E821" - }, - { - "name": "base/violet/alpha/6", - "type": "color", - "isAlias": false, - "value": "#2A01DF30" - }, - { - "name": "base/violet/alpha/7", - "type": "color", - "isAlias": false, - "value": "#2B01D447" - }, - { - "name": "base/violet/alpha/8", - "type": "color", - "isAlias": false, - "value": "#2A00D066" - }, - { - "name": "base/violet/alpha/9", - "type": "color", - "isAlias": false, - "value": "#2500B6A8" - }, - { - "name": "base/violet/alpha/10", - "type": "color", - "isAlias": false, - "value": "#1F00A5B0" - }, - { - "name": "base/violet/alpha/11", - "type": "color", - "isAlias": false, - "value": "#180091BA" - }, - { - "name": "base/violet/alpha/12", - "type": "color", - "isAlias": false, - "value": "#0E003DED" - }, - { - "name": "base/gray/slate/alpha/1", - "type": "color", - "isAlias": false, - "value": "#05448205" - }, - { - "name": "base/gray/slate/alpha/2", - "type": "color", - "isAlias": false, - "value": "#05294D08" - }, - { - "name": "base/gray/slate/alpha/3", - "type": "color", - "isAlias": false, - "value": "#0025490D" - }, - { - "name": "base/gray/slate/alpha/4", - "type": "color", - "isAlias": false, - "value": "#021C3714" - }, - { - "name": "base/gray/slate/alpha/5", - "type": "color", - "isAlias": false, - "value": "#0217351A" - }, - { - "name": "base/gray/slate/alpha/6", - "type": "color", - "isAlias": false, - "value": "#01213921" - }, - { - "name": "base/gray/slate/alpha/7", - "type": "color", - "isAlias": false, - "value": "#001A3329" - }, - { - "name": "base/gray/slate/alpha/8", - "type": "color", - "isAlias": false, - "value": "#011E323D" - }, - { - "name": "base/gray/slate/alpha/9", - "type": "color", - "isAlias": false, - "value": "#00111E78" - }, - { - "name": "base/gray/slate/alpha/10", - "type": "color", - "isAlias": false, - "value": "#00101B82" - }, - { - "name": "base/gray/slate/alpha/11", - "type": "color", - "isAlias": false, - "value": "#000E1896" - }, - { - "name": "base/gray/slate/alpha/12", - "type": "color", - "isAlias": false, - "value": "#00080CED" - }, - { - "name": "base/green/alpha/1", - "type": "color", - "isAlias": false, - "value": "#05C04305" - }, - { - "name": "base/green/alpha/2", - "type": "color", - "isAlias": false, - "value": "#00C43B0D" - }, - { - "name": "base/green/alpha/3", - "type": "color", - "isAlias": false, - "value": "#02BA3C17" - }, - { - "name": "base/green/alpha/4", - "type": "color", - "isAlias": false, - "value": "#01A63521" - }, - { - "name": "base/green/alpha/5", - "type": "color", - "isAlias": false, - "value": "#009B3633" - }, - { - "name": "base/green/alpha/6", - "type": "color", - "isAlias": false, - "value": "#0193364A" - }, - { - "name": "base/green/alpha/7", - "type": "color", - "isAlias": false, - "value": "#008C3D6E" - }, - { - "name": "base/green/alpha/8", - "type": "color", - "isAlias": false, - "value": "#00934CA3" - }, - { - "name": "base/green/alpha/9", - "type": "color", - "isAlias": false, - "value": "#008F4ACF" - }, - { - "name": "base/green/alpha/10", - "type": "color", - "isAlias": false, - "value": "#008346D6" - }, - { - "name": "base/green/alpha/11", - "type": "color", - "isAlias": false, - "value": "#006B3BE8" - }, - { - "name": "base/green/alpha/12", - "type": "color", - "isAlias": false, - "value": "#002012EB" - }, - { - "name": "base/amber/alpha/1", - "type": "color", - "isAlias": false, - "value": "#C0820505" - }, - { - "name": "base/amber/alpha/2", - "type": "color", - "isAlias": false, - "value": "#FFAB0212" - }, - { - "name": "base/amber/alpha/3", - "type": "color", - "isAlias": false, - "value": "#FFBB012B" - }, - { - "name": "base/amber/alpha/4", - "type": "color", - "isAlias": false, - "value": "#FFB70042" - }, - { - "name": "base/amber/alpha/5", - "type": "color", - "isAlias": false, - "value": "#FFB3005E" - }, - { - "name": "base/amber/alpha/6", - "type": "color", - "isAlias": false, - "value": "#FFA20178" - }, - { - "name": "base/amber/alpha/7", - "type": "color", - "isAlias": false, - "value": "#EC8D009C" - }, - { - "name": "base/amber/alpha/8", - "type": "color", - "isAlias": false, - "value": "#EA8900D4" - }, - { - "name": "base/amber/alpha/9", - "type": "color", - "isAlias": false, - "value": "#FFA600DB" - }, - { - "name": "base/amber/alpha/10", - "type": "color", - "isAlias": false, - "value": "#FF9500E3" - }, - { - "name": "base/amber/alpha/11", - "type": "color", - "isAlias": false, - "value": "#AB5300FA" - }, - { - "name": "base/amber/alpha/12", - "type": "color", - "isAlias": false, - "value": "#481800F5" - }, - { - "name": "base/red/alpha/1", - "type": "color", - "isAlias": false, - "value": "#FF050503" - }, - { - "name": "base/red/alpha/2", - "type": "color", - "isAlias": false, - "value": "#FF050508" - }, - { - "name": "base/red/alpha/3", - "type": "color", - "isAlias": false, - "value": "#FF01010F" - }, - { - "name": "base/red/alpha/4", - "type": "color", - "isAlias": false, - "value": "#FF00001A" - }, - { - "name": "base/red/alpha/5", - "type": "color", - "isAlias": false, - "value": "#F2000026" - }, - { - "name": "base/red/alpha/6", - "type": "color", - "isAlias": false, - "value": "#E4010138" - }, - { - "name": "base/red/alpha/7", - "type": "color", - "isAlias": false, - "value": "#D9000452" - }, - { - "name": "base/red/alpha/8", - "type": "color", - "isAlias": false, - "value": "#D1000470" - }, - { - "name": "base/red/alpha/9", - "type": "color", - "isAlias": false, - "value": "#DB0007B8" - }, - { - "name": "base/red/alpha/10", - "type": "color", - "isAlias": false, - "value": "#D10007C2" - }, - { - "name": "base/red/alpha/11", - "type": "color", - "isAlias": false, - "value": "#C30007D4" - }, - { - "name": "base/red/alpha/12", - "type": "color", - "isAlias": false, - "value": "#280003ED" - }, - { - "name": "MapAreaDistrict/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "Surface/Highlight/Default" - } - }, - { - "name": "MapAreaDistrict/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "Action/Secondary/Success/Hovered" - } - }, - { - "name": "MapAreaDistrict/Selected", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "Action/Primary/Basic/Default" - } - }, - { - "name": "MapAreaDistrict/Disabled", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "Action/Primary/Disabled" - } - }, - { - "name": "MapAreaDistrict/Border", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/9" - } - }, - { - "name": "Border/Focus", - "type": "color", - "isAlias": false, - "value": "#FFFFFF03" - }, - { - "name": "Transparent", - "type": "color", - "isAlias": false, - "value": "#FFFFFF00" - }, - { - "name": "Border/OnBG/Subdued", - "type": "color", - "isAlias": true, - "value": { - "collection": "Colors", - "name": "base/gray/slate/solid/11" - } - } - ] - } - ] - }, - { - "name": "Spacing / Numericals", - "modes": [ - { - "name": "Mode 1", - "variables": [ - { - "name": "space/0", - "type": "number", - "isAlias": false, - "value": 0 - }, - { - "name": "space/025", - "type": "number", - "isAlias": false, - "value": 1 - }, - { - "name": "space/05", - "type": "number", - "isAlias": false, - "value": 2 - }, - { - "name": "space/1", - "type": "number", - "isAlias": false, - "value": 4 - }, - { - "name": "space/2", - "type": "number", - "isAlias": false, - "value": 8 - }, - { - "name": "space/3", - "type": "number", - "isAlias": false, - "value": 12 - }, - { - "name": "space/4", - "type": "number", - "isAlias": false, - "value": 16 - }, - { - "name": "space/5", - "type": "number", - "isAlias": false, - "value": 20 - }, - { - "name": "space/6", - "type": "number", - "isAlias": false, - "value": 24 - }, - { - "name": "space/8", - "type": "number", - "isAlias": false, - "value": 32 - }, - { - "name": "space/10", - "type": "number", - "isAlias": false, - "value": 40 - }, - { - "name": "space/12", - "type": "number", - "isAlias": false, - "value": 48 - }, - { - "name": "space/16", - "type": "number", - "isAlias": false, - "value": 64 - }, - { - "name": "space/20", - "type": "number", - "isAlias": false, - "value": 80 - }, - { - "name": "space/24", - "type": "number", - "isAlias": false, - "value": 96 - }, - { - "name": "space/32", - "type": "number", - "isAlias": false, - "value": 128 - } - ] - } - ] - }, - { - "name": "Borders", - "modes": [ - { - "name": "Mode 1", - "variables": [ - { - "name": "border/radius/0", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/0" - } - }, - { - "name": "border/radius/05", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/05" - } - }, - { - "name": "border/radius/1", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/1" - } - }, - { - "name": "border/radius/2", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/2" - } - }, - { - "name": "border/radius/3", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/3" - } - }, - { - "name": "border/radius/4", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/4" - } - }, - { - "name": "border/radius/5", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/5" - } - }, - { - "name": "border/radius/6", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/6" - } - }, - { - "name": "border/radius/full", - "type": "number", - "isAlias": false, - "value": 9999 - }, - { - "name": "border/width/1", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/025" - } - }, - { - "name": "border/width/2", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/05" - } - }, - { - "name": "border/width/4", - "type": "number", - "isAlias": true, - "value": { - "collection": "Spacing / Numericals", - "name": "space/1" - } - } - ] - } - ] - }, - { - "name": "Typography", - "modes": [ - { - "name": "Style", - "variables": [ - { - "name": "Desktop Heading/4xl-Bold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 40, - "fontFamily": "Inter", - "fontWeight": "Bold", - "lineHeight": 48, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/3xl-Bold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 32, - "fontFamily": "Inter", - "fontWeight": "Bold", - "lineHeight": 40, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/2xl-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 28, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 32, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/xl-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 24, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 28, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Lg-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 20, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 26, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Md-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 24, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Sm-Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Xs-Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Sm Caps", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 2, - "letterSpacingUnit": "PIXELS", - "textCase": "UPPER", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Lg-Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 20, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 24, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Desktop Heading/Lg-Regular", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 20, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 24, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Medium/Regular", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Medium/Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Medium/Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Medium/Underline-Reg", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "UNDERLINE" - } - }, - { - "name": "Body/Large/Regular", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Large/Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Large/Underline-Reg", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "UNDERLINE" - } - }, - { - "name": "Body/Small/Regular", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Small/Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Small/Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PERCENT", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Body/Small/bodySm- underline", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "UNDERLINE" - } - }, - { - "name": "Mobile Heading/4xl-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 32, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 40, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/3xl-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 24, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 28, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/2xl-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 20, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 24, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/xl-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 20, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 24, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/Lg-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/Lg-Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/Lg-Regular", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Regular", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/Md-Semibold", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 16, - "fontFamily": "Inter", - "fontWeight": "Semi Bold", - "lineHeight": 24, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/Sm-Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/Sm Caps", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 14, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 20, - "lineHeightUnit": "PIXELS", - "letterSpacing": 2, - "letterSpacingUnit": "PIXELS", - "textCase": "UPPER", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/Xs-Medium", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 0, - "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", - "textDecoration": "NONE" - } - }, - { - "name": "Mobile Heading/Xs Caps", - "type": "typography", - "isAlias": false, - "value": { - "fontSize": 12, - "fontFamily": "Inter", - "fontWeight": "Medium", - "lineHeight": 16, - "lineHeightUnit": "PIXELS", - "letterSpacing": 2, - "letterSpacingUnit": "PIXELS", - "textCase": "UPPER", - "textDecoration": "NONE" - } - } - ] - } - ] - }, - { - "name": "Effects", - "modes": [ - { - "name": "Style", - "variables": [ - { - "name": "shadow/modal", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": 26 - }, - "radius": 80, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 1, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/layer", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 32, - "g": 42, - "b": 53, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": 31 - }, - "radius": 41, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 32, - "g": 42, - "b": 54, - "a": 0.08 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 16, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/inset/basic", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "INNER_SHADOW", - "color": { - "r": 228, - "g": 229, - "b": 231, - "a": 1 - }, - "offset": { - "x": -1, - "y": 0 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/inset/button", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "INNER_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": -1 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/button/pressed", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "INNER_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/button/default", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/deep", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 33, - "g": 43, - "b": 54, - "a": 0.08 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 16, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 6, - "g": 44, - "b": 82, - "a": 0.1 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 0, - "spread": 1 - } - ] - } - }, - { - "name": "shadow/basic/faint", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 22, - "g": 29, - "b": 37, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/transparent", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 0, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/xs", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.24 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 2, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/sm", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.1 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 1, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/md", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 6, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.1 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 4, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/lg", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 6, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.2 - }, - "offset": { - "x": 0, - "y": 4 - }, - "radius": 12, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/basic/xl", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 12 - }, - "radius": 18, - "spread": -2 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.08 - }, - "offset": { - "x": 0, - "y": 4 - }, - "radius": 18, - "spread": -2 - } - ] - } - }, - { - "name": "shadow/basic/2xl", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.16 - }, - "offset": { - "x": 0, - "y": 32 - }, - "radius": 56, - "spread": -2 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 31, - "g": 33, - "b": 36, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 32 - }, - "radius": 32, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/element/popover", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 23, - "g": 24, - "b": 24, - "a": 0.12 - }, - "offset": { - "x": 0, - "y": 8 - }, - "radius": 20, - "spread": -4 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 23, - "g": 24, - "b": 24, - "a": 0.08 - }, - "offset": { - "x": 0, - "y": 3 - }, - "radius": 6, - "spread": -3 - } - ] - } - }, - { - "name": "shadow/element/card", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 1 - }, - "radius": 2, - "spread": 0 - }, - { - "type": "DROP_SHADOW", - "color": { - "r": 23, - "g": 24, - "b": 24, - "a": 0.05 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 5, - "spread": 0 - } - ] - } - }, - { - "name": "shadow/element/topNav", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 0, - "b": 0, - "a": 0.15 - }, - "offset": { - "x": 0, - "y": 2 - }, - "radius": 2, - "spread": -1 - } - ] - } - }, - { - "name": "shadow/element/focus", - "type": "effect", - "isAlias": false, - "value": { - "effects": [ - { - "type": "DROP_SHADOW", - "color": { - "r": 0, - "g": 145, - "b": 255, - "a": 1 - }, - "offset": { - "x": 0, - "y": 0 - }, - "radius": 0, - "spread": 2 - } - ] - } - } - ] - } - ] - }, - { - "name": "Grids", - "modes": [ - { - "name": "Style", - "variables": [ - { - "name": "Basic 12 Col", - "type": "grid", - "isAlias": false, - "value": { - "layoutGrids": [ - { - "pattern": "COLUMNS", - "color": { - "r": 255, - "g": 0, - "b": 0, - "a": 0.1 - }, - "alignment": "STRETCH", - "gutterSize": 16, - "offset": 40, - "count": 12 - } - ] - } - } - ] - } - ] - } - ] -} From 7b8283381b25e841a1deb2a0114af598242a2a27 Mon Sep 17 00:00:00 2001 From: = <=> Date: Wed, 18 Oct 2023 13:17:27 +0530 Subject: [PATCH 6/8] add tokens --- examples/district/config/tokens/sd-config.js | 2 +- examples/district/config/tokens/tokens.json | 3360 ++++++++++++++++++ 2 files changed, 3361 insertions(+), 1 deletion(-) create mode 100644 examples/district/config/tokens/tokens.json diff --git a/examples/district/config/tokens/sd-config.js b/examples/district/config/tokens/sd-config.js index 4848eceb..aed5e277 100644 --- a/examples/district/config/tokens/sd-config.js +++ b/examples/district/config/tokens/sd-config.js @@ -1,6 +1,6 @@ const cssFormattor = require('./helpers/css-formattor'); const twFormat = require('./helpers/tailwind-formattor'); -const config = require('./variables.json'); +const config = require('./tokens.json'); module.exports = { format: { diff --git a/examples/district/config/tokens/tokens.json b/examples/district/config/tokens/tokens.json new file mode 100644 index 00000000..6c9fd67c --- /dev/null +++ b/examples/district/config/tokens/tokens.json @@ -0,0 +1,3360 @@ +{ + "collections": [ + { + "name": "Colors", + "modes": [ + { + "name": "Light", + "variables": [ + { + "name": "base/indigo/solid/1", + "type": "color", + "isAlias": false, + "value": "#FDFDFE" + }, + { + "name": "base/indigo/solid/2", + "type": "color", + "isAlias": false, + "value": "#F8FAFF" + }, + { + "name": "base/indigo/solid/3", + "type": "color", + "isAlias": false, + "value": "#F0F4FF" + }, + { + "name": "base/indigo/solid/4", + "type": "color", + "isAlias": false, + "value": "#E6EDFE" + }, + { + "name": "base/indigo/solid/5", + "type": "color", + "isAlias": false, + "value": "#D9E2FC" + }, + { + "name": "base/indigo/solid/6", + "type": "color", + "isAlias": false, + "value": "#C6D4F9" + }, + { + "name": "base/indigo/solid/7", + "type": "color", + "isAlias": false, + "value": "#AEC0F5" + }, + { + "name": "base/indigo/solid/8", + "type": "color", + "isAlias": false, + "value": "#8DA4EF" + }, + { + "name": "base/indigo/solid/9", + "type": "color", + "isAlias": false, + "value": "#3E63DD" + }, + { + "name": "base/indigo/solid/10", + "type": "color", + "isAlias": false, + "value": "#3A5CCC" + }, + { + "name": "base/indigo/solid/11", + "type": "color", + "isAlias": false, + "value": "#3451B2" + }, + { + "name": "base/indigo/solid/12", + "type": "color", + "isAlias": false, + "value": "#101D46" + }, + { + "name": "base/blue/solid/1", + "type": "color", + "isAlias": false, + "value": "#FBFDFF" + }, + { + "name": "base/blue/solid/2", + "type": "color", + "isAlias": false, + "value": "#F5FAFF" + }, + { + "name": "base/blue/solid/3", + "type": "color", + "isAlias": false, + "value": "#EDF6FF" + }, + { + "name": "base/blue/solid/4", + "type": "color", + "isAlias": false, + "value": "#E1F0FF" + }, + { + "name": "base/blue/solid/5", + "type": "color", + "isAlias": false, + "value": "#CEE7FE" + }, + { + "name": "base/blue/solid/6", + "type": "color", + "isAlias": false, + "value": "#B7D9F8" + }, + { + "name": "base/blue/solid/7", + "type": "color", + "isAlias": false, + "value": "#96C7F2" + }, + { + "name": "base/blue/solid/8", + "type": "color", + "isAlias": false, + "value": "#5EB0EF" + }, + { + "name": "base/blue/solid/9", + "type": "color", + "isAlias": false, + "value": "#0091FF" + }, + { + "name": "base/blue/solid/10", + "type": "color", + "isAlias": false, + "value": "#0081F1" + }, + { + "name": "base/blue/solid/11", + "type": "color", + "isAlias": false, + "value": "#006ADC" + }, + { + "name": "base/blue/solid/12", + "type": "color", + "isAlias": false, + "value": "#00254D" + }, + { + "name": "base/violet/solid/1", + "type": "color", + "isAlias": false, + "value": "#FDFCFE" + }, + { + "name": "base/violet/solid/2", + "type": "color", + "isAlias": false, + "value": "#FBFAFF" + }, + { + "name": "base/violet/solid/3", + "type": "color", + "isAlias": false, + "value": "#F5F2FF" + }, + { + "name": "base/violet/solid/4", + "type": "color", + "isAlias": false, + "value": "#EDE9FE" + }, + { + "name": "base/violet/solid/5", + "type": "color", + "isAlias": false, + "value": "#E4DEFC" + }, + { + "name": "base/violet/solid/6", + "type": "color", + "isAlias": false, + "value": "#D7CFF9" + }, + { + "name": "base/violet/solid/7", + "type": "color", + "isAlias": false, + "value": "#C4B8F3" + }, + { + "name": "base/violet/solid/8", + "type": "color", + "isAlias": false, + "value": "#AA99EC" + }, + { + "name": "base/violet/solid/9", + "type": "color", + "isAlias": false, + "value": "#6E56CF" + }, + { + "name": "base/violet/solid/10", + "type": "color", + "isAlias": false, + "value": "#644FC1" + }, + { + "name": "base/violet/solid/11", + "type": "color", + "isAlias": false, + "value": "#5746AF" + }, + { + "name": "base/violet/solid/12", + "type": "color", + "isAlias": false, + "value": "#20134B" + }, + { + "name": "base/gray/slate/solid/1", + "type": "color", + "isAlias": false, + "value": "#FBFCFD" + }, + { + "name": "base/gray/slate/solid/2", + "type": "color", + "isAlias": false, + "value": "#F8F9FA" + }, + { + "name": "base/gray/slate/solid/3", + "type": "color", + "isAlias": false, + "value": "#F1F3F5" + }, + { + "name": "base/gray/slate/solid/4", + "type": "color", + "isAlias": false, + "value": "#ECEEF0" + }, + { + "name": "base/gray/slate/solid/5", + "type": "color", + "isAlias": false, + "value": "#E6E8EB" + }, + { + "name": "base/gray/slate/solid/6", + "type": "color", + "isAlias": false, + "value": "#DFE3E6" + }, + { + "name": "base/gray/slate/solid/7", + "type": "color", + "isAlias": false, + "value": "#D7DBDF" + }, + { + "name": "base/gray/slate/solid/8", + "type": "color", + "isAlias": false, + "value": "#C1C8CD" + }, + { + "name": "base/gray/slate/solid/9", + "type": "color", + "isAlias": false, + "value": "#889096" + }, + { + "name": "base/gray/slate/solid/10", + "type": "color", + "isAlias": false, + "value": "#7E868C" + }, + { + "name": "base/gray/slate/solid/11", + "type": "color", + "isAlias": false, + "value": "#687076" + }, + { + "name": "base/gray/slate/solid/12", + "type": "color", + "isAlias": false, + "value": "#11181C" + }, + { + "name": "base/red/solid/1", + "type": "color", + "isAlias": false, + "value": "#FFFCFC" + }, + { + "name": "base/red/solid/2", + "type": "color", + "isAlias": false, + "value": "#FFF8F8" + }, + { + "name": "base/red/solid/3", + "type": "color", + "isAlias": false, + "value": "#FFEFEF" + }, + { + "name": "base/red/solid/4", + "type": "color", + "isAlias": false, + "value": "#FFE5E5" + }, + { + "name": "base/red/solid/5", + "type": "color", + "isAlias": false, + "value": "#FDD8D8" + }, + { + "name": "base/red/solid/6", + "type": "color", + "isAlias": false, + "value": "#F9C6C6" + }, + { + "name": "base/red/solid/7", + "type": "color", + "isAlias": false, + "value": "#F3AEAF" + }, + { + "name": "base/red/solid/8", + "type": "color", + "isAlias": false, + "value": "#EB9091" + }, + { + "name": "base/red/solid/9", + "type": "color", + "isAlias": false, + "value": "#E5484D" + }, + { + "name": "base/red/solid/10", + "type": "color", + "isAlias": false, + "value": "#DC3D43" + }, + { + "name": "base/red/solid/11", + "type": "color", + "isAlias": false, + "value": "#CD2B31" + }, + { + "name": "base/red/solid/12", + "type": "color", + "isAlias": false, + "value": "#381316" + }, + { + "name": "base/green/solid/1", + "type": "color", + "isAlias": false, + "value": "#FBFEFC" + }, + { + "name": "base/green/solid/2", + "type": "color", + "isAlias": false, + "value": "#F2FCF5" + }, + { + "name": "base/green/solid/3", + "type": "color", + "isAlias": false, + "value": "#E9F9EE" + }, + { + "name": "base/green/solid/4", + "type": "color", + "isAlias": false, + "value": "#DDF3E4" + }, + { + "name": "base/green/solid/5", + "type": "color", + "isAlias": false, + "value": "#CCEBD7" + }, + { + "name": "base/green/solid/6", + "type": "color", + "isAlias": false, + "value": "#B4DFC4" + }, + { + "name": "base/green/solid/7", + "type": "color", + "isAlias": false, + "value": "#92CEAC" + }, + { + "name": "base/green/solid/8", + "type": "color", + "isAlias": false, + "value": "#5BB98C" + }, + { + "name": "base/green/solid/9", + "type": "color", + "isAlias": false, + "value": "#30A46C" + }, + { + "name": "base/green/solid/10", + "type": "color", + "isAlias": false, + "value": "#299764" + }, + { + "name": "base/green/solid/11", + "type": "color", + "isAlias": false, + "value": "#18794E" + }, + { + "name": "base/green/solid/12", + "type": "color", + "isAlias": false, + "value": "#153226" + }, + { + "name": "base/amber/solid/1", + "type": "color", + "isAlias": false, + "value": "#FEFDFB" + }, + { + "name": "base/amber/solid/2", + "type": "color", + "isAlias": false, + "value": "#FFF9ED" + }, + { + "name": "base/amber/solid/3", + "type": "color", + "isAlias": false, + "value": "#FFF4D5" + }, + { + "name": "base/amber/solid/4", + "type": "color", + "isAlias": false, + "value": "#FFECBC" + }, + { + "name": "base/amber/solid/5", + "type": "color", + "isAlias": false, + "value": "#FFE3A2" + }, + { + "name": "base/amber/solid/6", + "type": "color", + "isAlias": false, + "value": "#FFD386" + }, + { + "name": "base/amber/solid/7", + "type": "color", + "isAlias": false, + "value": "#F3BA63" + }, + { + "name": "base/amber/solid/8", + "type": "color", + "isAlias": false, + "value": "#EE9D2B" + }, + { + "name": "base/amber/solid/9", + "type": "color", + "isAlias": false, + "value": "#FFB224" + }, + { + "name": "base/amber/solid/10", + "type": "color", + "isAlias": false, + "value": "#FFA01C" + }, + { + "name": "base/amber/solid/11", + "type": "color", + "isAlias": false, + "value": "#AD5700" + }, + { + "name": "base/amber/solid/12", + "type": "color", + "isAlias": false, + "value": "#4E2009" + }, + { + "name": "base/Pure/White", + "type": "color", + "isAlias": false, + "value": "#FFFFFF" + }, + { + "name": "base/Pure/Black", + "type": "color", + "isAlias": false, + "value": "#000000" + }, + { + "name": "Text/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/12" + } + }, + { + "name": "Text/Medium", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + }, + { + "name": "Text/Subdued", + "type": "color", + "isAlias": false, + "value": "#3E4346" + }, + { + "name": "Text/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Text/Critical", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/11" + } + }, + { + "name": "Text/Warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/11" + } + }, + { + "name": "Text/Success", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/11" + } + }, + { + "name": "Text/Highlight", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/11" + } + }, + { + "name": "Text/Interactive", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/11" + } + }, + { + "name": "Text/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Text/OnBG/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/8" + } + }, + { + "name": "Border/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/7" + } + }, + { + "name": "Border/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/6" + } + }, + { + "name": "Border/Critical/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/8" + } + }, + { + "name": "Border/Critical/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/7" + } + }, + { + "name": "Border/Critical/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/6" + } + }, + { + "name": "Border/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/8" + } + }, + { + "name": "Border/Success/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/7" + } + }, + { + "name": "Border/Warning/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/8" + } + }, + { + "name": "Border/Warning/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/7" + } + }, + { + "name": "Border/Highlight/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/8" + } + }, + { + "name": "Border/Highlight/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/7" + } + }, + { + "name": "Border/Highlight/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/9" + } + }, + { + "name": "Border/Highlight/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/7" + } + }, + { + "name": "Border/Interactive/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/8" + } + }, + { + "name": "Border/Interactive/Focused", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/7" + } + }, + { + "name": "Icon/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + }, + { + "name": "Icon/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/10" + } + }, + { + "name": "Icon/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Icon/Critical", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/10" + } + }, + { + "name": "Action/Primary/Basic/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/9" + } + }, + { + "name": "Icon/Warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/10" + } + }, + { + "name": "Action/Primary/Basic/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/10" + } + }, + { + "name": "Icon/Success", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/10" + } + }, + { + "name": "Action/Primary/Basic/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/11" + } + }, + { + "name": "Icon/Highlight", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/10" + } + }, + { + "name": "Icon/Interactive", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/11" + } + }, + { + "name": "Action/Primary/Basic/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/12" + } + }, + { + "name": "Icon/OnBG/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Action/Primary/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Icon/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/4" + } + }, + { + "name": "Action/Primary/Critical/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/9" + } + }, + { + "name": "Icon/OnBG/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Action/Primary/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/9" + } + }, + { + "name": "Action/Primary/Critical/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/10" + } + }, + { + "name": "Action/Secondary/Critical/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/5" + } + }, + { + "name": "Action/Secondary/Critical/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/4" + } + }, + { + "name": "Action/Secondary/Critical/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/6" + } + }, + { + "name": "Action/Primary/Interactive/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/9" + } + }, + { + "name": "Action/Secondary/Critical/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/3" + } + }, + { + "name": "Action/Primary/Interactive/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/10" + } + }, + { + "name": "Action/Primary/Interactive/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/11" + } + }, + { + "name": "Action/Primary/Interactive/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/12" + } + }, + { + "name": "Action/Primary/Critical/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/11" + } + }, + { + "name": "Action/Secondary/Basic/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/3" + } + }, + { + "name": "Action/Primary/Success/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/10" + } + }, + { + "name": "Action/Primary/Success/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/11" + } + }, + { + "name": "Action/Secondary/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/3" + } + }, + { + "name": "Action/Primary/Critical/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/12" + } + }, + { + "name": "Action/Secondary/Interactive/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/5" + } + }, + { + "name": "Action/Secondary/Success/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/5" + } + }, + { + "name": "Action/Primary/Success/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/12" + } + }, + { + "name": "Action/Secondary/Interactive/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/4" + } + }, + { + "name": "Action/Secondary/Success/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/6" + } + }, + { + "name": "Action/Secondary/Neutral/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/1" + } + }, + { + "name": "Action/Secondary/Success/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/4" + } + }, + { + "name": "Action/Secondary/Interactive/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/6" + } + }, + { + "name": "Action/Secondary/Success/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/3" + } + }, + { + "name": "Action/Secondary/Neutral/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/2" + } + }, + { + "name": "Action/Secondary/Interactive/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/3" + } + }, + { + "name": "Action/Secondary/Basic/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/4" + } + }, + { + "name": "Action/Secondary/Basic/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/5" + } + }, + { + "name": "Action/Secondary/Neutral/Pressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/5" + } + }, + { + "name": "Action/Secondary/Basic/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/6" + } + }, + { + "name": "Action/Secondary/Neutral/Depressed", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/6" + } + }, + { + "name": "Action/Tertiary/Basic/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/alpha/2" + } + }, + { + "name": "base/indigo/alpha/1", + "type": "color", + "isAlias": false, + "value": "#05058203" + }, + { + "name": "Action/Tertiary/Interactive/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/alpha/2" + } + }, + { + "name": "Action/Tertiary/Success/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/alpha/2" + } + }, + { + "name": "base/indigo/alpha/2", + "type": "color", + "isAlias": false, + "value": "#054CFF08" + }, + { + "name": "Action/Tertiary/Critical/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/alpha/2" + } + }, + { + "name": "base/indigo/alpha/3", + "type": "color", + "isAlias": false, + "value": "#0144FF0F" + }, + { + "name": "base/indigo/alpha/4", + "type": "color", + "isAlias": false, + "value": "#0247F51A" + }, + { + "name": "base/indigo/alpha/5", + "type": "color", + "isAlias": false, + "value": "#023CEB26" + }, + { + "name": "Background/Alpha/Dark", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/alpha/12" + } + }, + { + "name": "base/indigo/alpha/6", + "type": "color", + "isAlias": false, + "value": "#013DE438" + }, + { + "name": "Background/Alpha/Medium", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/alpha/4" + } + }, + { + "name": "base/indigo/alpha/7", + "type": "color", + "isAlias": false, + "value": "#0038E052" + }, + { + "name": "base/indigo/alpha/8", + "type": "color", + "isAlias": false, + "value": "#0134DB73" + }, + { + "name": "base/indigo/alpha/9", + "type": "color", + "isAlias": false, + "value": "#0031D2C2" + }, + { + "name": "Background/Solid/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/2" + } + }, + { + "name": "Background/Solid/Dark", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/12" + } + }, + { + "name": "Background/Solid/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/indigo/solid/3" + } + }, + { + "name": "Surface/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/Pure/White" + } + }, + { + "name": "Surface/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/2" + } + }, + { + "name": "base/indigo/alpha/10", + "type": "color", + "isAlias": false, + "value": "#002CBDC4" + }, + { + "name": "Surface/Selected", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/2" + } + }, + { + "name": "base/indigo/alpha/11", + "type": "color", + "isAlias": false, + "value": "#00259ECC" + }, + { + "name": "base/indigo/alpha/12", + "type": "color", + "isAlias": false, + "value": "#000E3AF0" + }, + { + "name": "Surface/Warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/amber/solid/2" + } + }, + { + "name": "base/blue/alpha/1", + "type": "color", + "isAlias": false, + "value": "#0582FF05" + }, + { + "name": "Surface/Critical", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/red/solid/2" + } + }, + { + "name": "base/blue/alpha/2", + "type": "color", + "isAlias": false, + "value": "#0582FF0A" + }, + { + "name": "Surface/Success", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/green/solid/2" + } + }, + { + "name": "base/blue/alpha/3", + "type": "color", + "isAlias": false, + "value": "#0280FF12" + }, + { + "name": "Surface/Highlight/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/2" + } + }, + { + "name": "base/blue/alpha/4", + "type": "color", + "isAlias": false, + "value": "#0180FF1F" + }, + { + "name": "Surface/Interactive", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/blue/solid/2" + } + }, + { + "name": "base/blue/alpha/5", + "type": "color", + "isAlias": false, + "value": "#0180EF30" + }, + { + "name": "Surface/Highlight/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/4" + } + }, + { + "name": "base/blue/alpha/6", + "type": "color", + "isAlias": false, + "value": "#0177E647" + }, + { + "name": "Surface/Highlight/Hovered", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/violet/solid/6" + } + }, + { + "name": "base/blue/alpha/7", + "type": "color", + "isAlias": false, + "value": "#0077DF69" + }, + { + "name": "base/blue/alpha/8", + "type": "color", + "isAlias": false, + "value": "#0082E6A1" + }, + { + "name": "base/blue/alpha/9", + "type": "color", + "isAlias": false, + "value": "#0091FFFA" + }, + { + "name": "base/blue/alpha/10", + "type": "color", + "isAlias": false, + "value": "#0080F1FA" + }, + { + "name": "base/blue/alpha/11", + "type": "color", + "isAlias": false, + "value": "#0066DBFA" + }, + { + "name": "base/blue/alpha/12", + "type": "color", + "isAlias": false, + "value": "#002149FA" + }, + { + "name": "base/violet/alpha/1", + "type": "color", + "isAlias": false, + "value": "#5805AB03" + }, + { + "name": "base/violet/alpha/2", + "type": "color", + "isAlias": false, + "value": "#3705FF05" + }, + { + "name": "base/violet/alpha/3", + "type": "color", + "isAlias": false, + "value": "#3C00FF0D" + }, + { + "name": "base/violet/alpha/4", + "type": "color", + "isAlias": false, + "value": "#2E02F417" + }, + { + "name": "base/violet/alpha/5", + "type": "color", + "isAlias": false, + "value": "#2F01E821" + }, + { + "name": "base/violet/alpha/6", + "type": "color", + "isAlias": false, + "value": "#2A01DF30" + }, + { + "name": "base/violet/alpha/7", + "type": "color", + "isAlias": false, + "value": "#2B01D447" + }, + { + "name": "base/violet/alpha/8", + "type": "color", + "isAlias": false, + "value": "#2A00D066" + }, + { + "name": "base/violet/alpha/9", + "type": "color", + "isAlias": false, + "value": "#2500B6A8" + }, + { + "name": "base/violet/alpha/10", + "type": "color", + "isAlias": false, + "value": "#1F00A5B0" + }, + { + "name": "base/violet/alpha/11", + "type": "color", + "isAlias": false, + "value": "#180091BA" + }, + { + "name": "base/violet/alpha/12", + "type": "color", + "isAlias": false, + "value": "#0E003DED" + }, + { + "name": "base/gray/slate/alpha/1", + "type": "color", + "isAlias": false, + "value": "#05448205" + }, + { + "name": "base/gray/slate/alpha/2", + "type": "color", + "isAlias": false, + "value": "#05294D08" + }, + { + "name": "base/gray/slate/alpha/3", + "type": "color", + "isAlias": false, + "value": "#0025490D" + }, + { + "name": "base/gray/slate/alpha/4", + "type": "color", + "isAlias": false, + "value": "#021C3714" + }, + { + "name": "base/gray/slate/alpha/5", + "type": "color", + "isAlias": false, + "value": "#0217351A" + }, + { + "name": "base/gray/slate/alpha/6", + "type": "color", + "isAlias": false, + "value": "#01213921" + }, + { + "name": "base/gray/slate/alpha/7", + "type": "color", + "isAlias": false, + "value": "#001A3329" + }, + { + "name": "base/gray/slate/alpha/8", + "type": "color", + "isAlias": false, + "value": "#011E323D" + }, + { + "name": "base/gray/slate/alpha/9", + "type": "color", + "isAlias": false, + "value": "#00111E78" + }, + { + "name": "base/gray/slate/alpha/10", + "type": "color", + "isAlias": false, + "value": "#00101B82" + }, + { + "name": "base/gray/slate/alpha/11", + "type": "color", + "isAlias": false, + "value": "#000E1896" + }, + { + "name": "base/gray/slate/alpha/12", + "type": "color", + "isAlias": false, + "value": "#00080CED" + }, + { + "name": "base/green/alpha/1", + "type": "color", + "isAlias": false, + "value": "#05C04305" + }, + { + "name": "base/green/alpha/2", + "type": "color", + "isAlias": false, + "value": "#00C43B0D" + }, + { + "name": "base/green/alpha/3", + "type": "color", + "isAlias": false, + "value": "#02BA3C17" + }, + { + "name": "base/green/alpha/4", + "type": "color", + "isAlias": false, + "value": "#01A63521" + }, + { + "name": "base/green/alpha/5", + "type": "color", + "isAlias": false, + "value": "#009B3633" + }, + { + "name": "base/green/alpha/6", + "type": "color", + "isAlias": false, + "value": "#0193364A" + }, + { + "name": "base/green/alpha/7", + "type": "color", + "isAlias": false, + "value": "#008C3D6E" + }, + { + "name": "base/green/alpha/8", + "type": "color", + "isAlias": false, + "value": "#00934CA3" + }, + { + "name": "base/green/alpha/9", + "type": "color", + "isAlias": false, + "value": "#008F4ACF" + }, + { + "name": "base/green/alpha/10", + "type": "color", + "isAlias": false, + "value": "#008346D6" + }, + { + "name": "base/green/alpha/11", + "type": "color", + "isAlias": false, + "value": "#006B3BE8" + }, + { + "name": "base/green/alpha/12", + "type": "color", + "isAlias": false, + "value": "#002012EB" + }, + { + "name": "base/amber/alpha/1", + "type": "color", + "isAlias": false, + "value": "#C0820505" + }, + { + "name": "base/amber/alpha/2", + "type": "color", + "isAlias": false, + "value": "#FFAB0212" + }, + { + "name": "base/amber/alpha/3", + "type": "color", + "isAlias": false, + "value": "#FFBB012B" + }, + { + "name": "base/amber/alpha/4", + "type": "color", + "isAlias": false, + "value": "#FFB70042" + }, + { + "name": "base/amber/alpha/5", + "type": "color", + "isAlias": false, + "value": "#FFB3005E" + }, + { + "name": "base/amber/alpha/6", + "type": "color", + "isAlias": false, + "value": "#FFA20178" + }, + { + "name": "base/amber/alpha/7", + "type": "color", + "isAlias": false, + "value": "#EC8D009C" + }, + { + "name": "base/amber/alpha/8", + "type": "color", + "isAlias": false, + "value": "#EA8900D4" + }, + { + "name": "base/amber/alpha/9", + "type": "color", + "isAlias": false, + "value": "#FFA600DB" + }, + { + "name": "base/amber/alpha/10", + "type": "color", + "isAlias": false, + "value": "#FF9500E3" + }, + { + "name": "base/amber/alpha/11", + "type": "color", + "isAlias": false, + "value": "#AB5300FA" + }, + { + "name": "base/amber/alpha/12", + "type": "color", + "isAlias": false, + "value": "#481800F5" + }, + { + "name": "base/red/alpha/1", + "type": "color", + "isAlias": false, + "value": "#FF050503" + }, + { + "name": "base/red/alpha/2", + "type": "color", + "isAlias": false, + "value": "#FF050508" + }, + { + "name": "base/red/alpha/3", + "type": "color", + "isAlias": false, + "value": "#FF01010F" + }, + { + "name": "base/red/alpha/4", + "type": "color", + "isAlias": false, + "value": "#FF00001A" + }, + { + "name": "base/red/alpha/5", + "type": "color", + "isAlias": false, + "value": "#F2000026" + }, + { + "name": "base/red/alpha/6", + "type": "color", + "isAlias": false, + "value": "#E4010138" + }, + { + "name": "base/red/alpha/7", + "type": "color", + "isAlias": false, + "value": "#D9000452" + }, + { + "name": "base/red/alpha/8", + "type": "color", + "isAlias": false, + "value": "#D1000470" + }, + { + "name": "base/red/alpha/9", + "type": "color", + "isAlias": false, + "value": "#DB0007B8" + }, + { + "name": "base/red/alpha/10", + "type": "color", + "isAlias": false, + "value": "#D10007C2" + }, + { + "name": "base/red/alpha/11", + "type": "color", + "isAlias": false, + "value": "#C30007D4" + }, + { + "name": "base/red/alpha/12", + "type": "color", + "isAlias": false, + "value": "#280003ED" + }, + { + "name": "MapAreaDistrict/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Surface/Highlight/Default" + } + }, + { + "name": "MapAreaDistrict/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Action/Secondary/Success/Hovered" + } + }, + { + "name": "MapAreaDistrict/Selected", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Action/Primary/Basic/Default" + } + }, + { + "name": "MapAreaDistrict/Disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "Action/Primary/Disabled" + } + }, + { + "name": "MapAreaDistrict/Border", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/9" + } + }, + { + "name": "Border/Focus", + "type": "color", + "isAlias": false, + "value": "#FFFFFF03" + }, + { + "name": "Transparent", + "type": "color", + "isAlias": false, + "value": "#FFFFFF00" + }, + { + "name": "Border/OnBG/Subdued", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/solid/11" + } + } + ] + } + ] + }, + { + "name": "Spacing / Numericals", + "modes": [ + { + "name": "Mode 1", + "variables": [ + { + "name": "space/0", + "type": "number", + "isAlias": false, + "value": 0 + }, + { + "name": "space/025", + "type": "number", + "isAlias": false, + "value": 1 + }, + { + "name": "space/05", + "type": "number", + "isAlias": false, + "value": 2 + }, + { + "name": "space/1", + "type": "number", + "isAlias": false, + "value": 4 + }, + { + "name": "space/2", + "type": "number", + "isAlias": false, + "value": 8 + }, + { + "name": "space/3", + "type": "number", + "isAlias": false, + "value": 12 + }, + { + "name": "space/4", + "type": "number", + "isAlias": false, + "value": 16 + }, + { + "name": "space/5", + "type": "number", + "isAlias": false, + "value": 20 + }, + { + "name": "space/6", + "type": "number", + "isAlias": false, + "value": 24 + }, + { + "name": "space/8", + "type": "number", + "isAlias": false, + "value": 32 + }, + { + "name": "space/10", + "type": "number", + "isAlias": false, + "value": 40 + }, + { + "name": "space/12", + "type": "number", + "isAlias": false, + "value": 48 + }, + { + "name": "space/16", + "type": "number", + "isAlias": false, + "value": 64 + }, + { + "name": "space/20", + "type": "number", + "isAlias": false, + "value": 80 + }, + { + "name": "space/24", + "type": "number", + "isAlias": false, + "value": 96 + }, + { + "name": "space/32", + "type": "number", + "isAlias": false, + "value": 128 + } + ] + } + ] + }, + { + "name": "Borders", + "modes": [ + { + "name": "Mode 1", + "variables": [ + { + "name": "border/radius/0", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/0" + } + }, + { + "name": "border/radius/05", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/05" + } + }, + { + "name": "border/radius/1", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/1" + } + }, + { + "name": "border/radius/2", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/2" + } + }, + { + "name": "border/radius/3", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/3" + } + }, + { + "name": "border/radius/4", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/4" + } + }, + { + "name": "border/radius/5", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/5" + } + }, + { + "name": "border/radius/6", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/6" + } + }, + { + "name": "border/radius/full", + "type": "number", + "isAlias": false, + "value": 9999 + }, + { + "name": "border/width/1", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/025" + } + }, + { + "name": "border/width/2", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/05" + } + }, + { + "name": "border/width/4", + "type": "number", + "isAlias": true, + "value": { + "collection": "Spacing / Numericals", + "name": "space/1" + } + } + ] + } + ] + }, + { + "name": "Typography", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Desktop Heading/4xl-Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 40, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 48, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/3xl-Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 32, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 40, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/2xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 28, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 32, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Lg-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 26, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Md-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Sm-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Xs-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Sm Caps", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 2, + "letterSpacingUnit": "PIXELS", + "textCase": "UPPER", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Lg-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Desktop Heading/Lg-Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Medium/Underline-Reg", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Body/Large/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Large/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Large/Underline-Reg", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Body/Small/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Small/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Small/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Body/Small/bodySm- underline", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Mobile Heading/4xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 32, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 40, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/3xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/2xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/xl-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Lg-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Lg-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Lg-Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Md-Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Sm-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Sm Caps", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 2, + "letterSpacingUnit": "PIXELS", + "textCase": "UPPER", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Xs-Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PIXELS", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Mobile Heading/Xs Caps", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 16, + "lineHeightUnit": "PIXELS", + "letterSpacing": 2, + "letterSpacingUnit": "PIXELS", + "textCase": "UPPER", + "textDecoration": "NONE" + } + } + ] + } + ] + }, + { + "name": "Effects", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "shadow/modal", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 26 + }, + "radius": 80, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 1, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/layer", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 32, + "g": 42, + "b": 53, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 31 + }, + "radius": 41, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 32, + "g": 42, + "b": 54, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 16, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/inset/basic", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "INNER_SHADOW", + "color": { + "r": 228, + "g": 229, + "b": 231, + "a": 1 + }, + "offset": { + "x": -1, + "y": 0 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/inset/button", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "INNER_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": -1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/button/pressed", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "INNER_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/button/default", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/deep", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 33, + "g": 43, + "b": 54, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 16, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 6, + "g": 44, + "b": 82, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 1 + } + ] + } + }, + { + "name": "shadow/basic/faint", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 22, + "g": 29, + "b": 37, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/transparent", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/xs", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.24 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 2, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/sm", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 1, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/md", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 6, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 4, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/lg", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 6, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 4 + }, + "radius": 12, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/basic/xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 12 + }, + "radius": 18, + "spread": -2 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 4 + }, + "radius": 18, + "spread": -2 + } + ] + } + }, + { + "name": "shadow/basic/2xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.16 + }, + "offset": { + "x": 0, + "y": 32 + }, + "radius": 56, + "spread": -2 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 31, + "g": 33, + "b": 36, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 32 + }, + "radius": 32, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/element/popover", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 23, + "g": 24, + "b": 24, + "a": 0.12 + }, + "offset": { + "x": 0, + "y": 8 + }, + "radius": 20, + "spread": -4 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 23, + "g": 24, + "b": 24, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 3 + }, + "radius": 6, + "spread": -3 + } + ] + } + }, + { + "name": "shadow/element/card", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 23, + "g": 24, + "b": 24, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 5, + "spread": 0 + } + ] + } + }, + { + "name": "shadow/element/topNav", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 2, + "spread": -1 + } + ] + } + }, + { + "name": "shadow/element/focus", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 0, + "g": 145, + "b": 255, + "a": 1 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 2 + } + ] + } + } + ] + } + ] + }, + { + "name": "Grids", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Basic 12 Col", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "STRETCH", + "gutterSize": 16, + "offset": 40, + "count": 12 + } + ] + } + } + ] + } + ] + } + ] +} From bc005c333c6e7bff1a180d1f15ca5407765dcc81 Mon Sep 17 00:00:00 2001 From: = <=> Date: Wed, 18 Oct 2023 13:44:29 +0530 Subject: [PATCH 7/8] add breadcrumbs for mobile --- .../[scheme]/components/scheme-layout.tsx | 2 +- .../[district]/[department]/[scheme]/page.tsx | 6 +- .../components/department-layout.tsx | 100 ++++++------- .../[locale]/[district]/[department]/page.tsx | 6 +- .../components/dashboard-layout.tsx | 4 +- .../components/dashboard-sidebar.tsx | 2 +- .../[district]/components/district-layout.tsx | 137 +++++++++--------- .../[locale]/[district]/components/index.tsx | 16 +- .../district/app/[locale]/[district]/page.tsx | 6 +- .../app/[locale]/components/header.tsx | 3 +- examples/district/styles/globals.css | 2 +- 11 files changed, 142 insertions(+), 142 deletions(-) diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx index 19b89b48..c4aea05b 100644 --- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx +++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx @@ -118,7 +118,7 @@ export const Content = ({ data }: { data: IProps }) => { backUrl={`/${data.district}/${data.department}`} /> -
+
- -
- ); + return ; } diff --git a/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx b/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx index 83a19c29..4aea24ba 100644 --- a/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx +++ b/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx @@ -58,65 +58,67 @@ export function Content({ data }: { data: IProps }) { <> - - {departmentData.deptTitle} - +
+ + {departmentData.deptTitle} + -
- - - - {departmentData.collapsible.title} +
+ + + + {departmentData.collapsible.title} + + + + + + +
+ {departmentData.collapsible.content.map((item) => ( + {item} + ))} +
+ + +
+ + {departmentData.highlights && ( +
+ + {departmentData.highlights.title} - - - - -
- {departmentData.collapsible.content.map((item) => ( - {item} +
+ {departmentData.highlights.cards.map((card, index) => ( + ))}
- - -
- - {departmentData.highlights && ( -
- - {departmentData.highlights.title} - +
+ )} -
- {departmentData.highlights.cards.map((card, index) => ( - +
+ + {departmentData.listTitle} + + +
+ +
+ {departmentData.list.map((item) => ( + ))}
- )} - -
-
- - {departmentData.listTitle} - - -
- -
- {departmentData.list.map((item) => ( - - ))} -
); diff --git a/examples/district/app/[locale]/[district]/[department]/page.tsx b/examples/district/app/[locale]/[district]/[department]/page.tsx index 8d340245..746ff543 100644 --- a/examples/district/app/[locale]/[district]/[department]/page.tsx +++ b/examples/district/app/[locale]/[district]/[department]/page.tsx @@ -22,9 +22,5 @@ export default async function Home({ departmentData: districtObj['depts'][params.department], }; - return ( -
- -
- ); + return ; } diff --git a/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx b/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx index 06b223ad..1766d315 100644 --- a/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx +++ b/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx @@ -40,9 +40,9 @@ export function DashboardLayout({ items={dashboardConfig.sidebarNav} /> -
+ {/*
-
+
*/}
{children}
); diff --git a/examples/district/app/[locale]/[district]/components/dashboard-sidebar.tsx b/examples/district/app/[locale]/[district]/components/dashboard-sidebar.tsx index d1610226..e6d0adb1 100644 --- a/examples/district/app/[locale]/[district]/components/dashboard-sidebar.tsx +++ b/examples/district/app/[locale]/[district]/components/dashboard-sidebar.tsx @@ -25,7 +25,7 @@ export function DashboardSidebar({ items, isCollapsed }: DashboardNavProps) { return (