diff --git a/apps/docs/package.json b/apps/docs/package.json index b8de904d8..2b5d90b09 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -25,6 +25,8 @@ "unist-util-visit": "5.0.0" }, "devDependencies": { + "@hopper-ui/tokens": "workspace:*", + "@hopper-ui/components": "workspace:*", "@storybook/addon-essentials": "7.5.1", "@storybook/addon-interactions": "7.5.1", "@storybook/addon-links": "7.5.1", diff --git a/package.json b/package.json index e3538c7d2..8734c301c 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "doc:storybook": "pnpm --filter=docs storybook", "doc:build": "pnpm --filter=docs build", "test": "echo \"no test specified\"", - "build": "pnpm -r --parallel build ", + "build": "pnpm -r build ", "build:tokens": "pnpm --filter=\"@hopper-ui/tokens\" build", "changeset": "changeset", "ci-release": "pnpm build && changeset publish", diff --git a/packages/styled-system/package.json b/packages/styled-system/package.json index a363cd59b..1211cfa6e 100644 --- a/packages/styled-system/package.json +++ b/packages/styled-system/package.json @@ -37,6 +37,7 @@ "react-aria": "3.29.1" }, "devDependencies": { + "@hopper-ui/tokens": "workspace:*", "@swc/core": "1.3.95", "@swc/helpers": "0.5.3", "@swc/jest": "0.2.29", diff --git a/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts b/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts index 7d6e5f874..051cd42cc 100644 --- a/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts +++ b/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts @@ -1,5 +1,5 @@ /** - * TODO: This file needs to be auto-generated. It is not at the moment + * This file is generated by Style Dictionary. Do not edit directly. */ export const DarkSemanticTokens = { @@ -8,7 +8,7 @@ export const DarkSemanticTokens = { "--hop-upsell-icon-weakest": "var(--hop-sunken-treasure-100)", "--hop-upsell-icon-weak": "var(--hop-sunken-treasure-300)", "--hop-upsell-border": "var(--hop-sunken-treasure-200)", - "--hop-upsell-surface-hover": "var(--hop-sunken-treasure-600)", + "--hop-upsell-surface-hover": "var(--hop-sunken-treasure-100)", "--hop-upsell-border-disabled": "var(--hop-sunken-treasure-700)", "--hop-upsell-icon-active": "var(--hop-sunken-treasure-300)", "--hop-upsell-surface-weak": "var(--hop-sunken-treasure-800)", @@ -82,7 +82,7 @@ export const DarkSemanticTokens = { "--hop-decorative-option8-surface-strong": "var(--hop-amanita-100)", "--hop-decorative-option8-surface-hover": "var(--hop-amanita-200)", "--hop-decorative-option8-text-weak": "var(--hop-amanita-300)", - "--hop-decorative-option8-surface": "var(--hop-amanita-100)", + "--hop-decorative-option8-surface": "var(--hop-amanita-75)", "--hop-decorative-option8-text": "var(--hop-amanita-900)", "--hop-decorative-option7-border": "var(--hop-toad-400)", "--hop-decorative-option7-icon": "var(--hop-toad-900)", @@ -253,5 +253,10 @@ export const DarkSemanticTokens = { "--hop-status-positive-icon": "var(--hop-moss-900)", "--hop-status-positive-surface-strong": "var(--hop-moss-200)", "--hop-status-positive-surface": "var(--hop-moss-75)", - "--hop-status-positive-text": "var(--hop-moss-900)" -}; + "--hop-status-positive-text": "var(--hop-moss-900)", + "--hop-dataviz-unavailable": "var(--hop-rock-600)", + "--hop-dataviz-unavailable-weak": "var(--hop-rock-400)", + "--hop-dataviz-unavailable-strong": "var(--hop-rock-700)", + "--hop-dataviz-text-onlight": "var(--hop-rock-800)", + "--hop-dataviz-text-ondark": "var(--hop-samoyed)" +}; \ No newline at end of file diff --git a/packages/styled-system/src/tokens/generated/light-tokens.ts b/packages/styled-system/src/tokens/generated/light-tokens.ts index cb5cdb4fe..6130c84da 100644 --- a/packages/styled-system/src/tokens/generated/light-tokens.ts +++ b/packages/styled-system/src/tokens/generated/light-tokens.ts @@ -1,5 +1,5 @@ /** - * TODO: This file needs to be auto-generated. It is not at the moment + * This file is generated by Style Dictionary. Do not edit directly. */ export const CoreTokens = { @@ -290,7 +290,7 @@ export const SemanticTokens = { "--hop-decorative-option8-surface-hover": "var(--hop-amanita-200)", "--hop-decorative-option8-surface-strong": "var(--hop-amanita-100)", "--hop-decorative-option8-text-weak": "var(--hop-amanita-300)", - "--hop-decorative-option8-surface": "var(--hop-amanita-100)", + "--hop-decorative-option8-surface": "var(--hop-amanita-75)", "--hop-decorative-option8-text": "var(--hop-amanita-900)", "--hop-decorative-option8-border": "var(--hop-amanita-100)", "--hop-decorative-option7-icon": "var(--hop-toad-900)", @@ -370,6 +370,7 @@ export const SemanticTokens = { "--hop-neutral-text": "var(--hop-rock-800)", "--hop-neutral-text-weakest": "var(--hop-rock-200)", "--hop-neutral-border-disabled": "var(--hop-rock-50)", + "--hop-neutral-border-strong-hover": "var(--hop-rock-700)", "--hop-neutral-border-strong": "var(--hop-rock-800)", "--hop-neutral-surface-strong": "var(--hop-rock-800)", "--hop-neutral-surface-hover": "var(--hop-rock-25)", @@ -464,6 +465,271 @@ export const SemanticTokens = { "--hop-status-positive-surface-strong": "var(--hop-moss-200)", "--hop-status-positive-surface": "var(--hop-moss-50)", "--hop-status-positive-text": "var(--hop-moss-700)", + "--hop-dataviz-monochromatic-primary-25": "#f5f6ff", + "--hop-dataviz-monochromatic-primary-50": "#e6ebff", + "--hop-dataviz-monochromatic-primary-75": "#d6e0ff", + "--hop-dataviz-monochromatic-primary-100": "#b9cbff", + "--hop-dataviz-monochromatic-primary-200": "#95b1ff", + "--hop-dataviz-monochromatic-primary-300": "#6c8ffd", + "--hop-dataviz-monochromatic-primary-400": "#4767fe", + "--hop-dataviz-monochromatic-primary-500": "#3b57ff", + "--hop-dataviz-monochromatic-primary-600": "#2a43e8", + "--hop-dataviz-monochromatic-primary-700": "#2040c7", + "--hop-dataviz-monochromatic-primary-800": "#1b3587", + "--hop-dataviz-monochromatic-primary-900": "#152450", + "--hop-dataviz-monochromatic-primary-25-hover": "#e6ebff", + "--hop-dataviz-monochromatic-primary-50-hover": "#d6e0ff", + "--hop-dataviz-monochromatic-primary-75-hover": "#b9cbff", + "--hop-dataviz-monochromatic-primary-100-hover": "#95b1ff", + "--hop-dataviz-monochromatic-primary-200-hover": "#6c8ffd", + "--hop-dataviz-monochromatic-primary-300-hover": "#4767fe", + "--hop-dataviz-monochromatic-primary-400-hover": "#3b57ff", + "--hop-dataviz-monochromatic-primary-500-hover": "#2a43e8", + "--hop-dataviz-monochromatic-primary-600-hover": "#2040c7", + "--hop-dataviz-monochromatic-primary-700-hover": "#1b3587", + "--hop-dataviz-monochromatic-primary-800-hover": "#152450", + "--hop-dataviz-monochromatic-primary-900-hover": "#0b173a", + "--hop-dataviz-monochromatic-positive-25": "#f4f9e9", + "--hop-dataviz-monochromatic-positive-50": "#e3f3b9", + "--hop-dataviz-monochromatic-positive-75": "#cde8ac", + "--hop-dataviz-monochromatic-positive-100": "#aad89d", + "--hop-dataviz-monochromatic-positive-200": "#7dc291", + "--hop-dataviz-monochromatic-positive-300": "#47a584", + "--hop-dataviz-monochromatic-positive-400": "#188a71", + "--hop-dataviz-monochromatic-positive-500": "#0c796b", + "--hop-dataviz-monochromatic-positive-600": "#0a6f64", + "--hop-dataviz-monochromatic-positive-700": "#115a52", + "--hop-dataviz-monochromatic-positive-800": "#16433d", + "--hop-dataviz-monochromatic-positive-900": "#132a27", + "--hop-dataviz-monochromatic-positive-25-hover": "#e3f3b9", + "--hop-dataviz-monochromatic-positive-50-hover": "#cde8ac", + "--hop-dataviz-monochromatic-positive-75-hover": "#aad89d", + "--hop-dataviz-monochromatic-positive-100-hover": "#7dc291", + "--hop-dataviz-monochromatic-positive-200-hover": "#47a584", + "--hop-dataviz-monochromatic-positive-300-hover": "#188a71", + "--hop-dataviz-monochromatic-positive-400-hover": "#0c796b", + "--hop-dataviz-monochromatic-positive-500-hover": "#0a6f64", + "--hop-dataviz-monochromatic-positive-600-hover": "#115a52", + "--hop-dataviz-monochromatic-positive-700-hover": "#16433d", + "--hop-dataviz-monochromatic-positive-800-hover": "#132a27", + "--hop-dataviz-monochromatic-positive-900-hover": "#0a1716", + "--hop-dataviz-monochromatic-negative-25": "#fdf6f6", + "--hop-dataviz-monochromatic-negative-50": "#fde6e5", + "--hop-dataviz-monochromatic-negative-75": "#ffd6d3", + "--hop-dataviz-monochromatic-negative-100": "#ffbcb7", + "--hop-dataviz-monochromatic-negative-200": "#ff8e8e", + "--hop-dataviz-monochromatic-negative-300": "#f56263", + "--hop-dataviz-monochromatic-negative-400": "#df3236", + "--hop-dataviz-monochromatic-negative-500": "#cb2e31", + "--hop-dataviz-monochromatic-negative-600": "#ba2d2d", + "--hop-dataviz-monochromatic-negative-700": "#952927", + "--hop-dataviz-monochromatic-negative-800": "#6c2320", + "--hop-dataviz-monochromatic-negative-900": "#431a17", + "--hop-dataviz-monochromatic-negative-25-hover": "#fde6e5", + "--hop-dataviz-monochromatic-negative-50-hover": "#ffd6d3", + "--hop-dataviz-monochromatic-negative-75-hover": "#ffbcb7", + "--hop-dataviz-monochromatic-negative-100-hover": "#ff8e8e", + "--hop-dataviz-monochromatic-negative-200-hover": "#f56263", + "--hop-dataviz-monochromatic-negative-300-hover": "#df3236", + "--hop-dataviz-monochromatic-negative-400-hover": "#cb2e31", + "--hop-dataviz-monochromatic-negative-500-hover": "#ba2d2d", + "--hop-dataviz-monochromatic-negative-600-hover": "#952927", + "--hop-dataviz-monochromatic-negative-700-hover": "#6c2320", + "--hop-dataviz-monochromatic-negative-800-hover": "#431a17", + "--hop-dataviz-monochromatic-negative-900-hover": "#2d100d", + "--hop-dataviz-diverging-sequence-1-positive9": "#16433d", + "--hop-dataviz-diverging-sequence-1-positive9-hover": "#132a27", + "--hop-dataviz-diverging-sequence-1-positive8": "#115a52", + "--hop-dataviz-diverging-sequence-1-positive8-hover": "#16433d", + "--hop-dataviz-diverging-sequence-1-positive7": "#0a6f64", + "--hop-dataviz-diverging-sequence-1-positive7-hover": "#115a52", + "--hop-dataviz-diverging-sequence-1-positive6": "#0c796b", + "--hop-dataviz-diverging-sequence-1-positive6-hover": "#0a6f64", + "--hop-dataviz-diverging-sequence-1-positive5": "#188a71", + "--hop-dataviz-diverging-sequence-1-positive5-hover": "#0c796b", + "--hop-dataviz-diverging-sequence-1-positive4": "#47a584", + "--hop-dataviz-diverging-sequence-1-positive-4-hover": "#188a71", + "--hop-dataviz-diverging-sequence-1-positive3": "#7dc291", + "--hop-dataviz-diverging-sequence-1-positive3-hover": "#47a584", + "--hop-dataviz-diverging-sequence-1-positive2": "#aad89d", + "--hop-dataviz-diverging-sequence-1-positive2-hover": "#7dc291", + "--hop-dataviz-diverging-sequence-1-positive1": "#cde8ac", + "--hop-dataviz-diverging-sequence-1-positive1-hover": "#aad89d", + "--hop-dataviz-diverging-sequence-1-neutral": "#f7e694", + "--hop-dataviz-diverging-sequence-1-neutral-hover": "#eac96d", + "--hop-dataviz-diverging-sequence-1-negative1": "#ffd8be", + "--hop-dataviz-diverging-sequence-1-negative1-hover": "#ffbcb7", + "--hop-dataviz-diverging-sequence-1-negative2": "#ffbcb7", + "--hop-dataviz-diverging-sequence-1-negative2-hover": "#ff8e8e", + "--hop-dataviz-diverging-sequence-1-negative3": "#ff8e8e", + "--hop-dataviz-diverging-sequence-1-negative3-hover": "#f56263", + "--hop-dataviz-diverging-sequence-1-negative4": "#f56263", + "--hop-dataviz-diverging-sequence-1-negative4-hover": "#df3236", + "--hop-dataviz-diverging-sequence-1-negative5": "#df3236", + "--hop-dataviz-diverging-sequence-1-negative5-hover": "#cb2e31", + "--hop-dataviz-diverging-sequence-1-negative6": "#cb2e31", + "--hop-dataviz-diverging-sequence-1-negative6-hover": "#ba2d2d", + "--hop-dataviz-diverging-sequence-1-negative7": "#ba2d2d", + "--hop-dataviz-diverging-sequence-1-negative7-hover": "#952927", + "--hop-dataviz-diverging-sequence-1-negative8": "#952927", + "--hop-dataviz-diverging-sequence-1-negative8-hover": "#6c2320", + "--hop-dataviz-diverging-sequence-1-negative9": "#6c2320", + "--hop-dataviz-diverging-sequence-1-negative9-hover": "#431a17", + "--hop-dataviz-diverging-sequence-2-positive10": "#16433d", + "--hop-dataviz-diverging-sequence-2-positive10-hover": "#132a27", + "--hop-dataviz-diverging-sequence-2-positive9": "#115a52", + "--hop-dataviz-diverging-sequence-2-positive9-hover": "#16433d", + "--hop-dataviz-diverging-sequence-2-positive8": "#0a6f64", + "--hop-dataviz-diverging-sequence-2-positive8-hover": "#115a52", + "--hop-dataviz-diverging-sequence-2-positive7": "#0c796b", + "--hop-dataviz-diverging-sequence-2-positive7-hover": "#0a6f64", + "--hop-dataviz-diverging-sequence-2-positive6": "#188a71", + "--hop-dataviz-diverging-sequence-2-positive6-hover": "#0c796b", + "--hop-dataviz-diverging-sequence-2-positive5": "#47a584", + "--hop-dataviz-diverging-sequence-2-positive5-hover": "#188a71", + "--hop-dataviz-diverging-sequence-2-positive4": "#7dc291", + "--hop-dataviz-diverging-sequence-2-positive4-hover": "#47a584", + "--hop-dataviz-diverging-sequence-2-positive3": "#aad89d", + "--hop-dataviz-diverging-sequence-2-positive3-hover": "#7dc291", + "--hop-dataviz-diverging-sequence-2-positive2": "#cde8ac", + "--hop-dataviz-diverging-sequence-2-positive2-hover": "#aad89d", + "--hop-dataviz-diverging-sequence-2-positive1": "#e3f3b9", + "--hop-dataviz-diverging-sequence-2-positive1-hover": "#cde8ac", + "--hop-dataviz-diverging-sequence-2-negative1": "#fde6e5", + "--hop-dataviz-diverging-sequence-2-negative1-hover": "#ffd6d3", + "--hop-dataviz-diverging-sequence-2-negative2": "#ffd6d3", + "--hop-dataviz-diverging-sequence-2-negative2-hover": "#ffbcb7", + "--hop-dataviz-diverging-sequence-2-negative3": "#ffbcb7", + "--hop-dataviz-diverging-sequence-2-negative3-hover": "#ff8e8e", + "--hop-dataviz-diverging-sequence-2-negative4": "#ff8e8e", + "--hop-dataviz-diverging-sequence-2-negative4-hover": "#f56263", + "--hop-dataviz-diverging-sequence-2-negative5": "#f56263", + "--hop-dataviz-diverging-sequence-2-negative5-hover": "#df3236", + "--hop-dataviz-diverging-sequence-2-negative6": "#df3236", + "--hop-dataviz-diverging-sequence-2-negative6-hover": "#cb2e31", + "--hop-dataviz-diverging-sequence-2-negative7": "#cb2e31", + "--hop-dataviz-diverging-sequence-2-negative7-hover": "#ba2d2d", + "--hop-dataviz-diverging-sequence-2-negative8": "#ba2d2d", + "--hop-dataviz-diverging-sequence-2-negative8-hover": "#952927", + "--hop-dataviz-diverging-sequence-2-negative9": "#952927", + "--hop-dataviz-diverging-sequence-2-negative9-hover": "#6c2320", + "--hop-dataviz-diverging-sequence-2-negative10": "#6c2320", + "--hop-dataviz-diverging-sequence-2-negative10-hover": "#431a17", + "--hop-dataviz-categorical-sequence-category1": "#c7ebff", + "--hop-dataviz-categorical-sequence-category1-hover": "#ade2ff", + "--hop-dataviz-categorical-sequence-category2": "#ecd599", + "--hop-dataviz-categorical-sequence-category2-hover": "#e6c675", + "--hop-dataviz-categorical-sequence-category3": "#d2cdf8", + "--hop-dataviz-categorical-sequence-category3-hover": "#bfb8f5", + "--hop-dataviz-categorical-sequence-category4": "#b6bead", + "--hop-dataviz-categorical-sequence-category4-hover": "#a4ae98", + "--hop-dataviz-categorical-sequence-category5": "#fbbdcf", + "--hop-dataviz-categorical-sequence-category5-hover": "#f99fb8", + "--hop-dataviz-categorical-sequence-category6": "#bfdca9", + "--hop-dataviz-categorical-sequence-category6-hover": "#a9d08b", + "--hop-dataviz-categorical-sequence-category7": "#fbe997", + "--hop-dataviz-categorical-sequence-category7-hover": "#fae275", + "--hop-dataviz-categorical-sequence-category8": "#e8ddd0", + "--hop-dataviz-categorical-sequence-category8-hover": "#ddcebb", + "--hop-dataviz-categorical-sequence-category9": "#a7e6dc", + "--hop-dataviz-categorical-sequence-category9-hover": "#90e0d2", + "--hop-dataviz-categorical-sequence-category10": "#aecdd5", + "--hop-dataviz-categorical-sequence-category10-hover": "#93bdc8", + "--hop-dataviz-categorical-sequence-category11": "#ffbf92", + "--hop-dataviz-categorical-sequence-category-11-hover": "#ffac70", + "--hop-dataviz-categorical-sequence-category12": "#a0b8fa", + "--hop-dataviz-categorical-sequence-cateogry12-hover": "#779af8", + "--hop-dataviz-categorical-sequence-category13": "#69bfa0", + "--hop-dataviz-categorical-sequence-category13-hover": "#54b692", + "--hop-dataviz-categorical-2colorgroup-option6-category2": "#69bfa0", + "--hop-dataviz-categorical-2colorgroup-option6-category1": "#ffbf92", + "--hop-dataviz-categorical-2colorgroup-option5-category2": "#a0b8fa", + "--hop-dataviz-categorical-2colorgroup-option5-category1": "#a7e6dc", + "--hop-dataviz-categorical-2colorgroup-option4-category2": "#6c8ffd", + "--hop-dataviz-categorical-2colorgroup-option4-category1": "#bfdca9", + "--hop-dataviz-categorical-2colorgroup-option3-category2": "#ff9b3f", + "--hop-dataviz-categorical-2colorgroup-option3-category1": "#2f48ff", + "--hop-dataviz-categorical-2colorgroup-option2-category2": "#fbe997", + "--hop-dataviz-categorical-2colorgroup-option2-category1": "#fbbdcf", + "--hop-dataviz-categorical-2colorgroup-option1-category2": "#c7ebff", + "--hop-dataviz-categorical-2colorgroup-option1-category1": "#b6bead", + "--hop-dataviz-categorical-3colorgroup-option1-category1": "#b6bead", + "--hop-dataviz-categorical-3colorgroup-option1-category2": "#d2cdf8", + "--hop-dataviz-categorical-3colorgroup-option1-category3": "#bfdca9", + "--hop-dataviz-categorical-3colorgroup-option2-category1": "#ecd599", + "--hop-dataviz-categorical-3colorgroup-option2-category2": "#a7e6dc", + "--hop-dataviz-categorical-3colorgroup-option2-category3": "#69bfa0", + "--hop-dataviz-categorical-3colorgroup-option3-category1": "#69bfa0", + "--hop-dataviz-categorical-3colorgroup-option3-category2": "#fbe997", + "--hop-dataviz-categorical-3colorgroup-option3-category3": "#aecdd5", + "--hop-dataviz-categorical-3colorgroup-option4-category1": "#b6bead", + "--hop-dataviz-categorical-3colorgroup-option4-category2": "#a0b8fa", + "--hop-dataviz-categorical-3colorgroup-option4-category3": "#fbbdcf", + "--hop-dataviz-categorical-4colorgroup-option1-category1": "#b6bead", + "--hop-dataviz-categorical-4colorgroup-option1-category2": "#d2cdf8", + "--hop-dataviz-categorical-4colorgroup-option1-category3": "#cde8ac", + "--hop-dataviz-categorical-4colorgroup-option1-category4": "#fbbdcf", + "--hop-dataviz-categorical-4colorgroup-option2-category1": "#b6bead", + "--hop-dataviz-categorical-4colorgroup-option2-category2": "#c7ebff", + "--hop-dataviz-categorical-4colorgroup-option2-category3": "#84d0b4", + "--hop-dataviz-categorical-4colorgroup-option2-category4": "#fbe997", + "--hop-dataviz-categorical-4colorgroup-option3-category1": "#ffbf92", + "--hop-dataviz-categorical-4colorgroup-option3-category2": "#b6bead", + "--hop-dataviz-categorical-4colorgroup-option3-category3": "#2e70a8", + "--hop-dataviz-categorical-4colorgroup-option3-category4": "#ecd599", + "--hop-dataviz-categorical-4colorgroup-option4-category1": "#69bfa0", + "--hop-dataviz-categorical-4colorgroup-option4-category2": "#c7ebff", + "--hop-dataviz-categorical-4colorgroup-option4-category3": "#fa4d59", + "--hop-dataviz-categorical-4colorgroup-option4-category4": "#d2cdf8", + "--hop-dataviz-categorical-5colorgroup-option1-category1": "#b6bead", + "--hop-dataviz-categorical-5colorgroup-option1-category2": "#ff9b3f", + "--hop-dataviz-categorical-5colorgroup-option1-category3": "#bfdca9", + "--hop-dataviz-categorical-5colorgroup-option1-category4": "#ecd599", + "--hop-dataviz-categorical-5colorgroup-option1-category5": "#69bfa0", + "--hop-dataviz-categorical-5colorgroup-option2-category1": "#ff9b3f", + "--hop-dataviz-categorical-5colorgroup-option2-category2": "#b6bead", + "--hop-dataviz-categorical-5colorgroup-option2-category3": "#2e70a8", + "--hop-dataviz-categorical-5colorgroup-option2-category4": "#fbe997", + "--hop-dataviz-categorical-5colorgroup-option2-category5": "#c5bef6", + "--hop-dataviz-categorical-5colorgroup-option3-category1": "#d2cdf8", + "--hop-dataviz-categorical-5colorgroup-option3-category2": "#ecd599", + "--hop-dataviz-categorical-5colorgroup-option3-category3": "#aecdd5", + "--hop-dataviz-categorical-5colorgroup-option3-category4": "#b6bead", + "--hop-dataviz-categorical-5colorgroup-option3-category5": "#ffbf92", + "--hop-dataviz-categorical-5colorgroup-option4-category1": "#69bfa0", + "--hop-dataviz-categorical-5colorgroup-option4-category2": "#c7ebff", + "--hop-dataviz-categorical-5colorgroup-option4-category3": "#fa4d59", + "--hop-dataviz-categorical-5colorgroup-option4-category4": "#d2cdf8", + "--hop-dataviz-categorical-5colorgroup-option4-category5": "#b6bead", + "--hop-dataviz-categorical-6colorgroup-option1-category1": "#b6bead", + "--hop-dataviz-categorical-6colorgroup-option1-category2": "#a0b8fa", + "--hop-dataviz-categorical-6colorgroup-option1-category3": "#bfdca9", + "--hop-dataviz-categorical-6colorgroup-option1-category4": "#fa4d59", + "--hop-dataviz-categorical-6colorgroup-option1-category5": "#ecd599", + "--hop-dataviz-categorical-6colorgroup-option1-category6": "#69bfa0", + "--hop-dataviz-categorical-6colorgroup-option2-category1": "#2e70a8", + "--hop-dataviz-categorical-6colorgroup-option2-category2": "#fbe997", + "--hop-dataviz-categorical-6colorgroup-option2-category3": "#69bfa0", + "--hop-dataviz-categorical-6colorgroup-option2-category4": "#ff9b3f", + "--hop-dataviz-categorical-6colorgroup-option2-category5": "#a7e6dc", + "--hop-dataviz-categorical-6colorgroup-option2-category6": "#d2cdf8", + "--hop-dataviz-categorical-6colorgroup-option3-category1": "#b6bead", + "--hop-dataviz-categorical-6colorgroup-option3-category2": "#aecdd5", + "--hop-dataviz-categorical-6colorgroup-option3-category3": "#e8ddd0", + "--hop-dataviz-categorical-6colorgroup-option3-category4": "#a7e6dc", + "--hop-dataviz-categorical-6colorgroup-option3-category5": "#2e70a8", + "--hop-dataviz-categorical-6colorgroup-option3-category6": "#fbbdcf", + "--hop-dataviz-categorical-6colorgroup-option4-category1": "#fbbdcf", + "--hop-dataviz-categorical-6colorgroup-option4-category2": "#a0b8fa", + "--hop-dataviz-categorical-6colorgroup-option4-category3": "#ffbf92", + "--hop-dataviz-categorical-6colorgroup-option4-category4": "#c7ebff", + "--hop-dataviz-categorical-6colorgroup-option4-category5": "#bfdca9", + "--hop-dataviz-categorical-6colorgroup-option4-category6": "#fbe997", + "--hop-dataviz-unavailable": "var(--hop-rock-75)", + "--hop-dataviz-unavailable-weak": "var(--hop-rock-50)", + "--hop-dataviz-unavailable-strong": "var(--hop-rock-100)", + "--hop-dataviz-text-onlight": "var(--hop-rock-800)", + "--hop-dataviz-text-ondark": "var(--hop-samoyed)", "--hop-elevation-none": "var(--hop-shadow-none)", "--hop-elevation-raised": "var(--hop-shadow-sm)", "--hop-elevation-lifted": "var(--hop-shadow-md)", @@ -605,4 +871,4 @@ export const SemanticTokens = { "--hop-shape-rounded-lg": "var(--hop-border-radius-3)", "--hop-shape-rounded-md": "var(--hop-border-radius-2)", "--hop-shape-rounded-sm": "var(--hop-border-radius-1)" -}; +}; \ No newline at end of file diff --git a/packages/tokens/src/style-dictionary/build.ts b/packages/tokens/src/style-dictionary/build.ts index e2c0acd71..06400de7e 100644 --- a/packages/tokens/src/style-dictionary/build.ts +++ b/packages/tokens/src/style-dictionary/build.ts @@ -1,12 +1,13 @@ import StyleDictionary from "style-dictionary"; -import { getStyleDictionaryConfig, fontsConfig } from "./config.ts"; -import { isDarkTokens } from "./filter/isDarkTokens.ts"; +import { fontsConfig, getStyleDictionaryConfig, getStyledSystemTokensConfig } from "./config.ts"; import { isColorType } from "./filter/isColorType.ts"; -import { cssDarkMode, customDoc, customJson, fontFace } from "./format/index.ts"; +import { isDarkTokens } from "./filter/isDarkTokens.ts"; +import { cssDarkMode, customDoc, customJson, customTsTokens, fontFace } from "./format/index.ts"; import { w3cTokenJsonParser } from "./parser/w3c-token-parser.ts"; -import { isSizeType, pxToRem, attributeFont } from "./transform/index.ts"; +import { attributeFont, isSizeType, pxToRem } from "./transform/index.ts"; +const { fileHeader } = StyleDictionary.formatHelpers; // Filters StyleDictionary.registerFilter({ @@ -59,6 +60,23 @@ StyleDictionary.registerFormat({ formatter: customJson }); +StyleDictionary.registerFormat({ + name: "custom/ts-tokens", + formatter: ({ dictionary, file }) => { + return fileHeader({ file }) + customTsTokens({ dictionary }); + } +}); + +// File Headers +StyleDictionary.registerFileHeader({ + name: "typescript-file-header", + fileHeader: () => { + return [ + "This file is generated by Style Dictionary. Do not edit directly." + ]; + } +}); + // Parser StyleDictionary.registerParser(w3cTokenJsonParser); @@ -74,4 +92,10 @@ StyleDictionary.extend(getStyleDictionaryConfig("light")).buildAllPlatforms(); console.log("\n|- šŸŒ™ Building dark mode..."); StyleDictionary.extend(getStyleDictionaryConfig("dark")).buildAllPlatforms(); +console.log("\n|- šŸ’… Building Styled System tokens..."); +StyleDictionary.extend(getStyledSystemTokensConfig("light")).buildAllPlatforms(); + +console.log("\n|- šŸ’… Building Styled System dark tokens..."); +StyleDictionary.extend(getStyledSystemTokensConfig("dark")).buildAllPlatforms(); + console.log("\nšŸš€ Build completed!\n"); diff --git a/packages/tokens/src/style-dictionary/config.ts b/packages/tokens/src/style-dictionary/config.ts index 45909d769..f33616267 100644 --- a/packages/tokens/src/style-dictionary/config.ts +++ b/packages/tokens/src/style-dictionary/config.ts @@ -1,11 +1,12 @@ -import type { Config } from "style-dictionary"; +import type { Config, File } from "style-dictionary"; const PREFIX = "hop"; const BUILD_PATH = "dist/"; const STORYBOOK_BUILD_PATH = "../src/stories"; const DOCS_BUILD_PATH = "../../../apps/docs"; +const STYLED_SYSTEM_BUILD_PATH = "../styled-system/src/"; -export const fontsConfig = { +export const fontsConfig: Config = { "source": ["src/tokens/asset/*.tokens.json"], "platforms": { "css-font-face": { @@ -28,10 +29,41 @@ export const fontsConfig = { } }; +export function getStyledSystemTokensConfig(mode: "light" | "dark"): Config { + const isLightMode = mode === "light"; + + return { + "source": [ + "src/tokens/core/*.tokens.json", + `src/tokens/semantic/${mode}/*.tokens.json` + ], + "platforms": { + "typescript": { + "transformGroup": "custom/css", // We want the same values and name as the ones shown in css + "buildPath": STYLED_SYSTEM_BUILD_PATH, + "prefix": PREFIX, + "options": { + "fileHeader": "typescript-file-header" + }, + "files": [ + { + "destination": `tokens/generated/${isLightMode ? "light-tokens" : "dark-semantic-tokens" }.ts`, + "format": "custom/ts-tokens", + "options": { + "outputReferences": true + } + } + ] + + } + } + }; +} + export function getStyleDictionaryConfig(mode: "light" | "dark"): Config { const isLightMode = mode === "light"; - const lightConfig = { + const lightConfig: File = { "destination": "tokens.css", "format": "css/variables", "options": { @@ -39,7 +71,7 @@ export function getStyleDictionaryConfig(mode: "light" | "dark"): Config { } }; - const darkConfig = { + const darkConfig: File = { "destination": "dark/tokens.css", "format": "css/dark-mode", "filter": "mode/dark", diff --git a/packages/tokens/src/style-dictionary/format/custom-ts-tokens.ts b/packages/tokens/src/style-dictionary/format/custom-ts-tokens.ts new file mode 100644 index 000000000..dc3e9aef2 --- /dev/null +++ b/packages/tokens/src/style-dictionary/format/custom-ts-tokens.ts @@ -0,0 +1,59 @@ +import type { Dictionary, TransformedToken } from "style-dictionary"; +import { handleTypes } from "../helpers/index.ts"; + +export const customTsTokens = function ({ dictionary }: { dictionary: Dictionary }) { + const types = handleTypes(dictionary.allTokens); + + function getTokensByFamily(family: string) { + return dictionary.allTokens.filter(token => { + return token.filePath.includes(family); + }); + } + + let tokens = ""; + if (types !== undefined) { + const coreTokens = getTokensByFamily("core"); + const semanticTokens = getTokensByFamily("semantic"); + const darkSemanticTokens = getTokensByFamily("dark"); + + const isLightMode = darkSemanticTokens.length === 0; + + if (isLightMode) { + tokens += [ + formatTokenFamily("CoreTokens", coreTokens, dictionary), + formatTokenFamily("SemanticTokens", semanticTokens, dictionary) + ].join("\n"); + } else { + tokens += formatTokenFamily("DarkSemanticTokens", darkSemanticTokens, dictionary); + } + } + + return tokens; +}; + + +function formatTokenFamily(familyName: string, tokens: TransformedToken[], dictionary:Dictionary) { + const formattedTokens = tokens.map(token => { + const { name, value } = formatTypeScriptToken(token, dictionary); + + return ` "${name}": "${value}"`; + }).join(",\n"); + + return `export const ${familyName} = {\n${formattedTokens}\n};`; +} + +function formatTypeScriptToken(token: TransformedToken, dictionary:Dictionary) { + let value = token.value; + + if (dictionary.usesReference(token.original.value)) { + const refs = dictionary.getReferences(token.original.value); + refs.forEach(ref => { + value = token.value.replace(ref.value, () => `var(--${ref.name})`); + }); + } + + return { + name: `--${token.name}`, + value + }; +} diff --git a/packages/tokens/src/style-dictionary/format/index.ts b/packages/tokens/src/style-dictionary/format/index.ts index 32a47f50f..89d298bf2 100644 --- a/packages/tokens/src/style-dictionary/format/index.ts +++ b/packages/tokens/src/style-dictionary/format/index.ts @@ -1,4 +1,5 @@ export { cssDarkMode } from "./css-dark-mode.ts"; export { customDoc } from "./custom-doc.ts"; export { customJson } from "./custom-json.ts"; +export { customTsTokens } from "./custom-ts-tokens.ts"; export { fontFace } from "./font-face.ts"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 45f49ba78..45da36061 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -115,6 +115,12 @@ importers: specifier: 5.0.0 version: 5.0.0 devDependencies: + '@hopper-ui/components': + specifier: workspace:* + version: link:../../packages/components + '@hopper-ui/tokens': + specifier: workspace:* + version: link:../../packages/tokens '@storybook/addon-essentials': specifier: 7.5.1 version: 7.5.1(@types/react-dom@18.2.14)(@types/react@18.2.32)(react-dom@18.2.0)(react@18.2.0) @@ -246,6 +252,9 @@ importers: specifier: 3.29.1 version: 3.29.1(react-dom@18.2.0)(react@18.2.0) devDependencies: + '@hopper-ui/tokens': + specifier: workspace:* + version: link:../tokens '@swc/core': specifier: 1.3.95 version: 1.3.95(@swc/helpers@0.5.3) @@ -9426,25 +9435,6 @@ packages: - ts-node dev: true - /create-jest@29.7.0(@types/node@20.8.8): - resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==} - engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} - hasBin: true - dependencies: - '@jest/types': 29.6.3 - chalk: 4.1.2 - exit: 0.1.2 - graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.8.8) - jest-util: 29.7.0 - prompts: 2.4.2 - transitivePeerDependencies: - - '@types/node' - - babel-plugin-macros - - supports-color - - ts-node - dev: true - /create-require@1.1.1: resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==} dev: true @@ -10484,7 +10474,7 @@ packages: '@typescript-eslint/eslint-plugin': 6.9.0(@typescript-eslint/parser@6.9.0)(eslint@8.52.0)(typescript@5.2.2) '@typescript-eslint/utils': 5.62.0(eslint@8.52.0)(typescript@5.2.2) eslint: 8.52.0 - jest: 29.7.0(@types/node@20.8.8) + jest: 29.7.0(@types/node@20.8.10)(ts-node@10.9.1) transitivePeerDependencies: - supports-color - typescript @@ -12660,34 +12650,6 @@ packages: - ts-node dev: true - /jest-cli@29.7.0(@types/node@20.8.8): - resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==} - engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} - hasBin: true - peerDependencies: - node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 - peerDependenciesMeta: - node-notifier: - optional: true - dependencies: - '@jest/core': 29.7.0(ts-node@10.9.1) - '@jest/test-result': 29.7.0 - '@jest/types': 29.6.3 - chalk: 4.1.2 - create-jest: 29.7.0(@types/node@20.8.8) - exit: 0.1.2 - import-local: 3.1.0 - jest-config: 29.7.0(@types/node@20.8.8) - jest-util: 29.7.0 - jest-validate: 29.7.0 - yargs: 17.7.2 - transitivePeerDependencies: - - '@types/node' - - babel-plugin-macros - - supports-color - - ts-node - dev: true - /jest-config@29.7.0(@types/node@20.8.10)(ts-node@10.9.1): resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -12729,46 +12691,6 @@ packages: - supports-color dev: true - /jest-config@29.7.0(@types/node@20.8.8): - resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==} - engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} - peerDependencies: - '@types/node': '*' - ts-node: '>=9.0.0' - peerDependenciesMeta: - '@types/node': - optional: true - ts-node: - optional: true - dependencies: - '@babel/core': 7.22.9 - '@jest/test-sequencer': 29.7.0 - '@jest/types': 29.6.3 - '@types/node': 20.8.8 - babel-jest: 29.7.0(@babel/core@7.22.9) - chalk: 4.1.2 - ci-info: 3.8.0 - deepmerge: 4.3.1 - glob: 7.2.3 - graceful-fs: 4.2.11 - jest-circus: 29.7.0 - jest-environment-node: 29.7.0 - jest-get-type: 29.6.3 - jest-regex-util: 29.6.3 - jest-resolve: 29.7.0 - jest-runner: 29.7.0 - jest-util: 29.7.0 - jest-validate: 29.7.0 - micromatch: 4.0.5 - parse-json: 5.2.0 - pretty-format: 29.7.0 - slash: 3.0.0 - strip-json-comments: 3.1.1 - transitivePeerDependencies: - - babel-plugin-macros - - supports-color - dev: true - /jest-diff@29.6.2: resolution: {integrity: sha512-t+ST7CB9GX5F2xKwhwCf0TAR17uNDiaPTZnVymP9lw0lssa9vG+AFyDZoeIHStU3WowFFwT+ky+er0WVl2yGhA==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -13199,27 +13121,6 @@ packages: - ts-node dev: true - /jest@29.7.0(@types/node@20.8.8): - resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==} - engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} - hasBin: true - peerDependencies: - node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 - peerDependenciesMeta: - node-notifier: - optional: true - dependencies: - '@jest/core': 29.7.0(ts-node@10.9.1) - '@jest/types': 29.6.3 - import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@20.8.8) - transitivePeerDependencies: - - '@types/node' - - babel-plugin-macros - - supports-color - - ts-node - dev: true - /jiti@1.19.1: resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==} hasBin: true