@7shifts/sous-chef 4.2.0 → 4.3.0

package/llms-instructions/llms-tokens.md

@@ -0,0 +1,397 @@
+# 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.
+
+**You must ONLY use tokens listed in this document, do not make up values.**
+
+Example:
+
+```tsx
+import { COLORS, ZINDEX } from '@7shifts/sous-chef';
+
+<Text color={COLORS['color-primary-color']}>Text example</Text>;
+```
+
+CSS custom properties are applied globally when you import:
+`import '@7shifts/sous-chef/dist/index.css';`
+
+Example:
+
+```css
+color: var(--color-primary-color);
+```
+
+## Colors
+
+### Primitive colors
+
+The primitive colors are documented just for reference. AVOID using them as much as you can as they are not compatible with dark mode.
+Instead, try to use a semantic color token instead.
+
+| Token Name             | Color Hash |
+| ---------------------- | ---------- |
+| --color-white          | #fff       |
+| --color-eggshell       | #fafafa    |
+| --color-coal           | #252525    |
+| --color-black          | #000       |
+| --color-tangerine-100  | #fef1ed    |
+| --color-tangerine-200  | #fdd5c8    |
+| --color-tangerine-300  | #fcab91    |
+| --color-tangerine-400  | #ff6808    |
+| --color-tangerine-500  | #cf5406    |
+| --color-tangerine-600  | #95400a    |
+| --color-eggplant-100   | #f8f3ff    |
+| --color-eggplant-200   | #ebdcff    |
+| --color-eggplant-300   | #d9bff4    |
+| --color-eggplant-400   | #c293f1    |
+| --color-eggplant-500   | #846db3    |
+| --color-eggplant-600   | #453e75    |
+| --color-mint-100       | #ecfaf8    |
+| --color-mint-200       | #c6f1eb    |
+| --color-mint-300       | #8de4d7    |
+| --color-mint-400       | #3abda9    |
+| --color-mint-500       | #35ac9a    |
+| --color-mint-600       | #1d5e54    |
+| --color-radish-100     | #fcf0f0    |
+| --color-radish-200     | #f7d1d1    |
+| --color-radish-300     | #f0a3a3    |
+| --color-radish-400     | #e76767    |
+| --color-radish-500     | #d33434    |
+| --color-radish-600     | #793133    |
+| --color-blueberry-100  | #f6fdff    |
+| --color-blueberry-200  | #ceecf5    |
+| --color-blueberry-300  | #9cd9eb    |
+| --color-blueberry-400  | #5bc0de    |
+| --color-blueberry-500  | #51acc7    |
+| --color-blueberry-600  | #2c5d6b    |
+| --color-banana-100     | #fff9ed    |
+| --color-banana-200     | #ffeec9    |
+| --color-banana-300     | #ffdd92    |
+| --color-banana-400     | #f7ba11    |
+| --color-banana-500     | #bf9436    |
+| --color-banana-600     | #765f2c    |
+| --color-grey-100       | #f3f3f3    |
+| --color-grey-200       | #d5d5d5    |
+| --color-grey-300       | #949494    |
+| --color-grey-400       | #767676    |
+| --color-grey-500       | #464646    |
+| --color-grey-600       | #323232    |
+| --color-oat-100        | #f1f0ec    |
+| --color-oat-200        | #e2ded6    |
+| --color-oat-300        | #c7c0b2    |
+| --color-oat-400        | #6e6d6c    |
+| --color-oat-500        | #4c4b49    |
+| --color-oat-600        | #383430    |
+| --color-lime-100       | #efffe0    |
+| --color-lime-200       | #c6ff94    |
+| --color-lime-300       | #81ffac    |
+| --color-lime-400       | #00feb2    |
+| --color-lime-500       | #3fb994    |
+| --color-lime-600       | #244f47    |
+| --color-blackberry-100 | #ecf0ff    |
+| --color-blackberry-200 | #d6e0ff    |
+| --color-blackberry-300 | #a0bbff    |
+| --color-blackberry-400 | #4570ff    |
+| --color-blackberry-500 | #1c5cbb    |
+| --color-blackberry-600 | #193f78    |
+
+### Transparent colors
+
+These are fixed-opacity overlays built on top of pure black or pure white.
+
+| Token Name                           | Value                  |
+| ------------------------------------ | ---------------------- |
+| --color-neutral-black-transparent-05 | rgba(0,0,0,0.05)       |
+| --color-neutral-black-transparent-10 | rgba(0,0,0,0.1)        |
+| --color-neutral-black-transparent-15 | rgba(0,0,0,0.15)       |
+| --color-neutral-black-transparent-20 | rgba(0,0,0,0.2)        |
+| --color-neutral-black-transparent-30 | rgba(0,0,0,0.3)        |
+| --color-neutral-black-transparent-40 | rgba(0,0,0,0.4)        |
+| --color-neutral-black-transparent-50 | rgba(0,0,0,0.5)        |
+| --color-neutral-black-transparent-60 | rgba(0,0,0,0.6)        |
+| --color-neutral-black-transparent-70 | rgba(0,0,0,0.7)        |
+| --color-neutral-black-transparent-80 | rgba(0,0,0,0.8)        |
+| --color-neutral-black-transparent-90 | rgba(0,0,0,0.9)        |
+| --color-neutral-white-transparent-05 | rgba(255,255,255,0.05) |
+| --color-neutral-white-transparent-10 | rgba(255,255,255,0.1)  |
+| --color-neutral-white-transparent-15 | rgba(255,255,255,0.15) |
+| --color-neutral-white-transparent-20 | rgba(255,255,255,0.2)  |
+| --color-neutral-white-transparent-30 | rgba(255,255,255,0.3)  |
+| --color-neutral-white-transparent-40 | rgba(255,255,255,0.4)  |
+| --color-neutral-white-transparent-50 | rgba(255,255,255,0.5)  |
+| --color-neutral-white-transparent-60 | rgba(255,255,255,0.6)  |
+| --color-neutral-white-transparent-70 | rgba(255,255,255,0.7)  |
+| --color-neutral-white-transparent-80 | rgba(255,255,255,0.8)  |
+| --color-neutral-white-transparent-90 | rgba(255,255,255,0.9)  |
+
+### Semantic colors
+
+Use these for status, feedback, and brand meaning. Each semantic role has color, on-color, container, and on-container variants.
+
+Here is some information about common words you'll see across our color roles:
+
+-   Primary, Secondary, & Tertiary: Accent color roles used to emphasize or de-emphasize foreground elements.
+-   On: Colours starting with this term indicate a colour for text or icons on top of its paired parent colour. For example, primary on color is used for text and icons on top of the primary color.
+-   Surface: Used for backgrounds and large, low-emphasis areas of the screen.
+-   Container: Used as a fill colour for foreground elements like buttons. They should not be used for text or icons.
+-   Variant: Roles ending with this term offer a lower emphasis alternative to its non-variant pair. For example, outline variant is a less emphasized version of the outline color.
+-   Inverse: Inverse roles are used for colours that are the reverse of those in the surrounding UI, creating a contrasting effect.
+-   Outline: Used for border or line colours.
+-   Sequential: Used for data visualization such as charts and graphs.
+
+#### Surface
+
+| 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-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                     |
+| --color-surface-container-disabled         | --color-neutral-black-transparent-05 | --color-neutral-white-transparent-10 |
+| --color-surface-container-disabled-variant | --color-neutral-black-transparent-20 | --color-neutral-white-transparent-10 |
+| --color-surface-on-container-disabled      | --color-neutral-black-transparent-40 | --color-neutral-white-transparent-50 |
+| --color-surface-inverse                    | --color-grey-600                     | --color-grey-100                     |
+| --color-surface-on-inverse                 | --color-white                        | --color-grey-600                     |
+| --color-surface-on-inverse-disabled        | --color-neutral-white-transparent-50 | --color-neutral-black-transparent-50 |
+
+#### Outline
+
+Outline color tokens are used for borders.
+
+| Token                   | Light                                | Dark                                 |
+| ----------------------- | ------------------------------------ | ------------------------------------ |
+| --color-outline         | --color-neutral-black-transparent-20 | --color-neutral-white-transparent-15 |
+| --color-outline-variant | --color-grey-200                     | --color-grey-500                     |
+| --color-outline-inverse | --color-white                        | --color-grey-600                     |
+
+#### Neutral
+
+| Token                                | Light            | Dark             |
+| ------------------------------------ | ---------------- | ---------------- |
+| --color-neutral-color                | --color-oat-400  | --color-oat-300  |
+| --color-neutral-on-color             | --color-white    | --color-grey-600 |
+| --color-neutral-container            | --color-oat-200  | --color-oat-500  |
+| --color-neutral-on-container         | --color-grey-600 | --color-white    |
+| --color-neutral-container-variant    | --color-oat-100  | --color-oat-600  |
+| --color-neutral-on-container-variant | --color-oat-600  | --color-oat-300  |
+
+#### Primary
+
+| Token                                | Light                  | Dark                   |
+| ------------------------------------ | ---------------------- | ---------------------- |
+| --color-primary-color                | --color-blackberry-400 | --color-blackberry-400 |
+| --color-primary-on-color             | --color-white          | --color-white          |
+| --color-primary-color-variant        | --color-blackberry-600 | --color-blackberry-300 |
+| --color-primary-on-color-variant     | --color-white          | --color-white          |
+| --color-primary-container            | --color-blackberry-200 | --color-blackberry-500 |
+| --color-primary-on-container         | --color-grey-600       | --color-white          |
+| --color-primary-container-variant    | --color-blackberry-100 | --color-blackberry-600 |
+| --color-primary-on-container-variant | --color-blackberry-600 | --color-blackberry-300 |
+
+#### Secondary
+
+| Token                                  | Light                 | Dark                  |
+| -------------------------------------- | --------------------- | --------------------- |
+| --color-secondary-color                | --color-tangerine-400 | --color-tangerine-400 |
+| --color-secondary-on-color             | --color-white         | --color-white         |
+| --color-secondary-container            | --color-tangerine-200 | --color-tangerine-500 |
+| --color-secondary-on-container         | --color-grey-600      | --color-white         |
+| --color-secondary-container-variant    | --color-tangerine-100 | --color-tangerine-600 |
+| --color-secondary-on-container-variant | --color-tangerine-600 | --color-tangerine-300 |
+
+#### Tertiary
+
+| Token                                 | Light            | Dark             |
+| ------------------------------------- | ---------------- | ---------------- |
+| --color-tertiary-color                | --color-lime-600 | --color-lime-600 |
+| --color-tertiary-on-color             | --color-white    | --color-white    |
+| --color-tertiary-container            | --color-lime-200 | --color-lime-200 |
+| --color-tertiary-on-container         | --color-grey-600 | --color-grey-600 |
+| --color-tertiary-container-variant    | --color-lime-400 | --color-lime-400 |
+| --color-tertiary-on-container-variant | --color-grey-600 | --color-grey-600 |
+
+#### Success
+
+| Token                                | Light            | Dark             |
+| ------------------------------------ | ---------------- | ---------------- |
+| --color-success-color                | --color-mint-400 | --color-mint-300 |
+| --color-success-on-color             | --color-white    | --color-grey-600 |
+| --color-success-container            | --color-mint-200 | --color-mint-500 |
+| --color-success-on-container         | --color-grey-600 | --color-white    |
+| --color-success-container-variant    | --color-mint-100 | --color-mint-600 |
+| --color-success-on-container-variant | --color-mint-600 | --color-mint-300 |
+
+#### Danger
+
+| Token                               | Light              | Dark               |
+| ----------------------------------- | ------------------ | ------------------ |
+| --color-danger-color                | --color-radish-400 | --color-radish-400 |
+| --color-danger-on-color             | --color-white      | --color-grey-600   |
+| --color-danger-container            | --color-radish-200 | --color-radish-500 |
+| --color-danger-on-container         | --color-grey-600   | --color-white      |
+| --color-danger-container-variant    | --color-radish-100 | --color-radish-600 |
+| --color-danger-on-container-variant | --color-radish-600 | --color-radish-300 |
+
+#### Warning
+
+| Token                                | Light              | Dark               |
+| ------------------------------------ | ------------------ | ------------------ |
+| --color-warning-color                | --color-banana-400 | --color-banana-300 |
+| --color-warning-on-color             | --color-white      | --color-grey-600   |
+| --color-warning-container            | --color-banana-200 | --color-banana-500 |
+| --color-warning-on-container         | --color-grey-600   | --color-white      |
+| --color-warning-container-variant    | --color-banana-100 | --color-banana-600 |
+| --color-warning-on-container-variant | --color-banana-600 | --color-banana-300 |
+
+#### Info
+
+| Token                             | Light                 | Dark                  |
+| --------------------------------- | --------------------- | --------------------- |
+| --color-info-color                | --color-blueberry-400 | --color-blueberry-300 |
+| --color-info-on-color             | --color-white         | --color-grey-600      |
+| --color-info-container            | --color-blueberry-200 | --color-blueberry-500 |
+| --color-info-on-container         | --color-grey-600      | --color-white         |
+| --color-info-container-variant    | --color-blueberry-100 | --color-blueberry-600 |
+| --color-info-on-container-variant | --color-blueberry-600 | --color-blueberry-300 |
+
+#### Upsell
+
+| Token                               | Light                | Dark                 |
+| ----------------------------------- | -------------------- | -------------------- |
+| --color-upsell-color                | --color-eggplant-400 | --color-eggplant-300 |
+| --color-upsell-on-color             | --color-white        | --color-grey-600     |
+| --color-upsell-color-variant        | --color-eggplant-300 | --color-eggplant-300 |
+| --color-upsell-on-color-variant     | --color-grey-600     | --color-grey-600     |
+| --color-upsell-container            | --color-eggplant-200 | --color-eggplant-500 |
+| --color-upsell-on-container         | --color-grey-600     | --color-white        |
+| --color-upsell-container-variant    | --color-eggplant-100 | --color-eggplant-600 |
+| --color-upsell-on-container-variant | --color-eggplant-600 | --color-eggplant-300 |
+
+#### Shadow
+
+| Token                  | Light                                | Dark                                 |
+| ---------------------- | ------------------------------------ | ------------------------------------ |
+| --color-shadow-overlay | --color-neutral-black-transparent-20 | --color-neutral-black-transparent-40 |
+| --color-shadow-active  | --color-blackberry-400               | --color-blackberry-400               |
+
+#### Hover
+
+| 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 |
+
+#### 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 |
+
+## Typography
+
+Ideally, you won't need to use the typography tokens, as you will be using the Sous Chef `<Text>` component in most cases. However, if there is a specific place where you need to style a component and need to set a typography token, then you can see the following values:
+
+### Font family
+
+| Token                 | Value                |
+| --------------------- | -------------------- |
+| --font-family-heading | 'SF Pro', sans-serif |
+| --font-family-body    | 'SF Pro', sans-serif |
+
+### Font size
+
+| Token           | Value    |
+| --------------- | -------- |
+| --font-size-100 | 0.75rem  |
+| --font-size-200 | 0.875rem |
+| --font-size-300 | 1rem     |
+| --font-size-400 | 1.25rem  |
+| --font-size-500 | 1.5rem   |
+| --font-size-600 | 1.75rem  |
+| --font-size-700 | 2.5rem   |
+
+### Line Height
+
+| Token                  | Value    |
+| ---------------------- | -------- |
+| --font-line-height-100 | 1rem     |
+| --font-line-height-200 | 1.125rem |
+| --font-line-height-300 | 1.25rem  |
+| --font-line-height-400 | 1.5rem   |
+| --font-line-height-500 | 1.75rem  |
+| --font-line-height-600 | 2rem     |
+| --font-line-height-700 | 2.75rem  |
+
+### Font Weight
+
+| Token                    | Value |
+| ------------------------ | ----- |
+| --p-font-weight-light    | 300   |
+| --p-font-weight-normal   | 400   |
+| --p-font-weight-semibold | 500   |
+| --p-font-weight-bold     | 600   |
+
+## Border radius
+
+Most of the time you won't need to use these tokens because it is baked into Sous Chef components (for example, Buttons, Cards, Data Tables, and others). However, if you need to create a custom experience and need to add border radius, then you can use the following tokens:
+
+| Token               | Value |
+| ------------------- | ----- |
+| --border-radius-300 | 4px   |
+| --border-radius-400 | 8px   |
+| --border-radius-600 | 20px  |
+
+## 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:
+
+```
+margin: 4px;
+```
+
+In Sous Chef, we have the `Stack` and `Inline` components that are responsible for putting elements in a stack or side by side, and they have a `space` prop. The default is `20px` if not passed. For example:
+
+```
+<Stack space={12}>
+    <Card>Card 1</Card>
+    <Card>Card 2</Card>
+<Stack>
+```
+
+In the application level, it might be available a SCSS variable for spacing:
+
+```
+// Space based on a 4px multiplier.
+$space-1x: 4px;
+$space-2x: $space-1x * 2;
+$space-3x: $space-1x * 3;
+$space-4x: $space-1x * 4;
+$space-5x: $space-1x * 5;
+$space-6x: $space-1x * 6;
+$space-7x: $space-1x * 7;
+$space-8x: $space-1x * 8;
+$space-9x: $space-1x * 9;
+$space-10x: $space-1x * 10;
+$space-11x: $space-1x * 11;
+$space-12x: $space-1x * 12;
+$space-13x: $space-1x * 13;
+$space-14x: $space-1x * 14;
+$space-15x: $space-1x * 15;
+$space-16x: $space-1x * 16;
+$space-17x: $space-1x * 17;
+$space-18x: $space-1x * 18;
+$space-19x: $space-1x * 19;
+$space-20x: $space-1x * 20;
+```
+
+If there is a spacing variable available, then prefer using it instead of a hardcoded value.

package/llms-instructions/llms.md

@@ -0,0 +1,78 @@
+# Sous Chef Design System
+
+> A comprehensive design system that provides a unified set of components, tokens, and guidelines for building consistent, accessible, and responsive user interfaces across 7shifts apps.
+
+## Design Tokens
+
+The foundational design decisions and values that ensure consistency across the design system.
+
+-   [Design Tokens Documentation](llms-tokens.md)
+-   Purpose: Single source of truth for design decisions
+-   Key features:
+    -   Color tokens (background, text, border, etc.)
+    -   Typography tokens (font size, line height, font weight)
+    -   Border radius tokens
+    -   Spacing tokens
+
+## Components
+
+Building block components made in React for creating consistent user interfaces.
+
+-   [Components Documentation](llms-components.md)
+-   Purpose: Ready-to-use UI components
+-   Categories:
+    -   Actions (Button, Link, PaginationControls, Toggle)
+    -   Controls (DateFilter, SegmentedControl, ToolbarSelect)
+    -   Empty States (EmptyState, Paywall)
+    -   Feedback (CircularProgress, InlineBanner, MicroBanner, PersistentBanner, ProgressBar, Skeleton, Spinner, Toast)
+    -   Forms (AsyncSelectField, CheckboxField, ColorField, CurrencyField, DateField, DateRangeField, SelectField, TextField, and others)
+    -   Media (Avatar, Badge, Chip, Pill)
+    -   Layout (CalloutCard, Card, Inline, Page, PageLayout, Stack)
+    -   Lists (Accordion, ActionList, DataTable)
+    -   Navigation (Breadcrumbs)
+    -   Overlay (Calendar, Dropdown, HintModal, Modal, Popover, Tooltip)
+    -   Typography (Text)
+
+## Icons and Illustrations
+
+Media components to be used alongside other components.
+
+-   [Icons and Illustrations Documentation](llms-icons-and-illustrations.md)
+-   Purpose: Dictionary of all the icons and illustrations available to use
+-   Categories:
+    -   Icons
+    -   Illustrations
+
+## Composing components
+
+Practical examples with code snippets on how to compose some common interfaces.
+
+-   [Composing components](llms-composing-components.md)
+-   Purpose: Examples of how to compose common UI
+-   Examples:
+    -   Pages
+    -   Forms
+    -   Data Tables (list of data)
+
+## Missing components
+
+There is a few missing components in the library. When you need something that does not exist in the library, first check if there is something available in the shared components in the application, if nothing was found, then you are free to create your own but, using the Sous Chef tokens.
+
+Here are the missing components:
+
+-   Tab
+-   Full screen modals
+-   File upload form field
+-   Grid system
+-   App layout structure (something with slots for top bar, left nav and content)
+
+## Constraints
+
+To ensure the generated code is consistent, follow these rules:
+
+-   Don't use hardcoded color hashes. Always use a semantic color token ([reference to color tokens](llms-tokens.md)).
+-   Not everything needs to use a Sous Chef component. If you notice something is missing in Sous Chef, you can treat that as custom UI to solve a specific problem. In this case:
+    -   Structure the component in isolation (separate folder, with its own style file, and tests)
+    -   Make sure it uses the Sous Chef design tokens
+-   For text, always try to use the props for the component, for example, the `TextField` component takes a `label` prop for the text, the same goes for other components.
+-   If there is no prop for the text, DON'T use `p`, `h1`, `h2`, `h3`, and others. Instead, use the `<Text>` component, which exposes the `as` prop, for example `<Text as="h1">Title</Text>`.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "4.2.0",
+    "version": "4.3.0",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",
@@ -105,7 +105,8 @@
         "yup": "^0.32.9"
     },
     "files": [
-        "dist"
+        "dist",
+        "llms-instructions"
     ],
     "dependencies": {
         "classnames": "^2.3.2",