@7shifts/sous-chef 4.4.1 → 4.5.0

package/llms-instructions/llms-tokens.md

@@ -1,3 +1,5 @@
+<!-- AUTO-GENERATED by scripts/build-llms-tokens.js. Do not edit manually. Run `yarn build-llms-tokens` to regenerate. -->
+
 # Sous Chef Design System Tokens
 
 Design tokens are the single source of truth to name and store design decisions, including colors, typography, spacing, and other design primitives. Tokens are available as CSS custom properties and as JavaScript constants.
@@ -143,13 +145,13 @@ Here is some information about common words you'll see across our color roles:
 
 | Token                                      | Light                                | Dark                                 |
 | ------------------------------------------ | ------------------------------------ | ------------------------------------ |
-| --color-surface-color                      | --color-white                        | --color-grey-600                     |
-| --color-surface-color-dim                  | --color-eggshell                     | --color-coal                         |
 | --color-surface-color-overlay              | --color-neutral-black-transparent-20 | rgba(0,0,0,0.5)                      |
+| --color-surface-color-dim                  | --color-eggshell                     | --color-coal                         |
+| --color-surface-color                      | --color-white                        | --color-grey-600                     |
+| --color-surface-on-color-disabled          | --color-neutral-black-transparent-20 | --color-neutral-white-transparent-30 |
+| --color-surface-on-color-subtle            | --color-grey-400                     | --color-grey-300                     |
 | --color-surface-on-color                   | --color-grey-500                     | --color-grey-100                     |
 | --color-surface-on-color-bold              | --color-grey-600                     | --color-white                        |
-| --color-surface-on-color-subtle            | --color-grey-400                     | --color-grey-300                     |
-| --color-surface-on-color-disabled          | --color-neutral-black-transparent-20 | --color-neutral-white-transparent-30 |
 | --color-surface-container                  | --color-white                        | --color-grey-600                     |
 | --color-surface-container-high             | --color-grey-100                     | --color-grey-500                     |
 | --color-surface-container-highest          | --color-grey-200                     | --color-grey-400                     |
@@ -284,18 +286,79 @@ Outline color tokens are used for borders.
 
 | Token                 | Light                                | Dark                                 |
 | --------------------- | ------------------------------------ | ------------------------------------ |
-| --color-hover-darken  | --color-neutral-black-transparent-05 | --color-neutral-white-transparent-05 |
-| --color-hover-lighten | --color-neutral-white-transparent-20 | --color-neutral-black-transparent-20 |
 | --color-hover-inverse | --color-neutral-white-transparent-05 | --color-neutral-black-transparent-05 |
+| --color-hover-lighten | --color-neutral-white-transparent-20 | --color-neutral-black-transparent-20 |
+| --color-hover-darken  | --color-neutral-black-transparent-05 | --color-neutral-white-transparent-05 |
 
-#### Brand & Graphic
-
-| Token                                    | Light         | Dark          |
-| ---------------------------------------- | ------------- | ------------- |
-| --color-brand-neutrals-caviar-dynamic    | --color-black | --color-white |
-| --color-brand-neutrals-chefscoat-dynamic | --color-white | --color-black |
-| --color-on-graphic-black                 | --color-black | --color-black |
-| --color-on-graphic-white                 | --color-white | --color-white |
+#### Sequential
+
+Used for data visualization such as charts and graphs.
+
+| Token          | Light   | Dark    |
+| -------------- | ------- | ------- |
+| --color-seq-1  | #00b5d8 | #28d2f3 |
+| --color-seq-2  | #f9922b | #f9ad61 |
+| --color-seq-3  | #28cc6d | #31e17b |
+| --color-seq-4  | #d83f87 | #ef5ca1 |
+| --color-seq-5  | #4359ce | #7288ff |
+| --color-seq-6  | #ff6f61 | #ff867a |
+| --color-seq-7  | #35e5c6 | #43f2d3 |
+| --color-seq-8  | #a966e7 | #cb93ff |
+| --color-seq-9  | #905642 | #b66d54 |
+| --color-seq-10 | #ffb300 | #ffc437 |
+| --color-seq-11 | #708238 | #8a9c52 |
+| --color-seq-12 | #4fc3f7 | #8adbff |
+| --color-seq-13 | #e94057 | #fa5c71 |
+| --color-seq-14 | #00a896 | #15c7b4 |
+| --color-seq-15 | #6a4c93 | #a978ec |
+| --color-seq-16 | #a3cb38 | #aed83e |
+| --color-seq-17 | #546e7a | #82adc0 |
+| --color-seq-18 | #fc9999 | #ffa9a9 |
+| --color-seq-19 | #2f80ed | #4594ff |
+| --color-seq-20 | #be3434 | #e45555 |
+
+#### Brand
+
+| Token                                    | Light                  | Dark                   |
+| ---------------------------------------- | ---------------------- | ---------------------- |
+| --color-brand-neutrals-caviar-dynamic    | --color-black          | --color-white          |
+| --color-brand-neutrals-caviar-hue        | --color-black          | --color-black          |
+| --color-brand-neutrals-chefscoat-dynamic | --color-white          | --color-black          |
+| --color-brand-neutrals-chefscoat-hue     | --color-white          | --color-white          |
+| --color-brand-neutrals-marshmallow-hue   | --color-oat-100        | --color-oat-100        |
+| --color-brand-neutrals-oat-hue           | --color-oat-200        | --color-oat-200        |
+| --color-brand-neutrals-earl-hue          | --color-oat-400        | --color-oat-400        |
+| --color-brand-primary-spritz-hue         | --color-tangerine-400  | --color-tangerine-400  |
+| --color-brand-primary-spritz-tint        | --color-tangerine-300  | --color-tangerine-300  |
+| --color-brand-primary-spritz-shade       | --color-tangerine-500  | --color-tangerine-500  |
+| --color-brand-primary-curacao-hue        | --color-blackberry-400 | --color-blackberry-400 |
+| --color-brand-primary-curacao-tint       | --color-blackberry-300 | --color-blackberry-300 |
+| --color-brand-primary-curacao-shade      | --color-blackberry-500 | --color-blackberry-500 |
+| --color-brand-primary-mojito-hue         | --color-lime-400       | --color-lime-400       |
+| --color-brand-primary-mojito-tint        | --color-lime-300       | --color-lime-300       |
+| --color-brand-primary-mojito-shade       | --color-lime-500       | --color-lime-500       |
+| --color-brand-primary-empress-hue        | --color-eggplant-400   | --color-eggplant-400   |
+| --color-brand-primary-empress-tint       | --color-eggplant-300   | --color-eggplant-300   |
+| --color-brand-primary-empress-shade      | --color-eggplant-500   | --color-eggplant-500   |
+| --color-brand-secondary-ice-hue          | --color-blackberry-200 | --color-blackberry-200 |
+| --color-brand-secondary-zest-hue         | --color-lime-200       | --color-lime-200       |
+| --color-brand-secondary-lavender-hue     | --color-eggplant-200   | --color-eggplant-200   |
+| --color-brand-secondary-ranch-hue        | --color-blackberry-600 | --color-blackberry-600 |
+| --color-brand-secondary-pesto-hue        | --color-lime-600       | --color-lime-600       |
+| --color-brand-secondary-babaganoush-hue  | --color-eggplant-600   | --color-eggplant-600   |
+
+#### Graphic
+
+| Token                    | Light         | Dark          |
+| ------------------------ | ------------- | ------------- |
+| --color-on-graphic-black | --color-black | --color-black |
+| --color-on-graphic-white | --color-white | --color-white |
+
+#### Canvas
+
+| Token                           | Light         | Dark    |
+| ------------------------------- | ------------- | ------- |
+| --color-canvas-background-color | --color-white | #2c2c2c |
 
 ## Typography
 
@@ -336,10 +399,14 @@ Ideally, you won't need to use the typography tokens, as you will be using the S
 
 | Token                    | Value |
 | ------------------------ | ----- |
-| --p-font-weight-light    | 300   |
-| --p-font-weight-normal   | 400   |
+| --p-font-weight-thin     | 100   |
+| --p-font-weight-light    | 200   |
+| --p-font-weight-normal   | 300   |
+| --p-font-weight-medium   | 400   |
 | --p-font-weight-semibold | 500   |
 | --p-font-weight-bold     | 600   |
+| --p-font-weight-heavy    | 700   |
+| --p-font-weight-black    | 800   |
 
 ## Border radius
 
@@ -351,6 +418,20 @@ Most of the time you won't need to use these tokens because it is baked into Sou
 | --border-radius-400 | 8px   |
 | --border-radius-600 | 20px  |
 
+## Z-index
+
+Use these tokens to keep stacking contexts consistent. Prefer them over hardcoded `z-index` values so overlays, modals, and tooltips layer correctly.
+
+| Token                      | Value |
+| -------------------------- | ----- |
+| --z-index-base             | 1     |
+| --z-index-nav              | 7     |
+| --z-index-modal            | 100   |
+| --z-index-dropdown         | 200   |
+| --z-index-dropdown-level-2 | 210   |
+| --z-index-tooltip          | 300   |
+| --z-index-portal           | 9999  |
+
 ## Spacing
 
 We don't have defined tokens for spacing, such as padding, margin, gap, and others. However, always use a spacing unit of `4px`, for example:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "4.4.1",
+    "version": "4.5.0",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",
@@ -21,6 +21,11 @@
         "build-tokens": "./scripts/build-tokens.sh",
         "build-colors": "./scripts/tokens/build-colors.sh",
         "build-zindexes": "./scripts/tokens/build-z-indexes.sh",
+        "build-llms": "run-s build-llms-components build-llms-icons-and-illustrations build-llms-tokens build-llms-guidelines",
+        "build-llms-components": "node ./scripts/build-llms-components.js",
+        "build-llms-icons-and-illustrations": "node ./scripts/build-llms-icons-and-illustrations.js",
+        "build-llms-tokens": "node ./scripts/build-llms-tokens.js",
+        "build-llms-guidelines": "node ./scripts/build-llms-guidelines.js",
         "link-local": "./scripts/link-local.sh",
         "unlink-local": "./scripts/unlink-local.sh",
         "test": "run-s test:unit test:lint test:build",