Introduce static color palette using Leonardo, update button variants and appearances, add Docs

packages/craftcms-cp/scripts/generate-color-palette.js

@@ -1,7 +1,12 @@
 import {writeFileSync} from 'fs';
 import {dirname, resolve} from 'path';
 import {fileURLToPath} from 'url';
-import {stops, lightTheme, darkTheme} from '../src/styles/color-definitions.js';
+import {
+  stops,
+  lightTheme,
+  darkTheme,
+  staticTheme,
+} from '../src/styles/color-definitions.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = resolve(__dirname, '..');
@@ -35,7 +40,7 @@ function printStyles() {
   const lightColors = colorsToCssVariables(lightTheme.contrastColors);
   const darkColors = colorsToCssVariables(darkTheme.contrastColors);
   const staticColors = colorsToCssVariables(
-    lightTheme.contrastColors,
+    staticTheme.contrastColors,
     'color-static'
   );
 

packages/craftcms-cp/scripts/generate-colors.js

@@ -39,7 +39,7 @@ const semanticColors = {
   accent: 'blue',
   info: 'blue',
   success: 'emerald',
-  warning: 'orange',
+  warning: 'yellow',
   danger: 'red',
 };
 

packages/craftcms-cp/src/components/action-item/action-item.ts

@@ -13,7 +13,7 @@ export default class CraftActionItem extends LitElement {
   @property() icon: string | null = null;
   @property() href: string | null = null;
   @property({type: Boolean}) disabled: boolean = false;
-  @property({reflect: true}) variant: VariantKey = Variant.Default;
+  @property({reflect: true}) variant: VariantKey = Variant.Neutral;
   @property({type: Boolean}) checked: boolean = false;
   @property({type: Boolean}) active: boolean = false;
   @property() type: 'normal' | 'checkbox' = 'normal';

packages/craftcms-cp/src/components/button/Docs.mdx

@@ -0,0 +1,46 @@
+import {Canvas, Meta} from '@storybook/addon-docs/blocks';
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+A button represents a clickable element that performs an action when activated.
+
+<Canvas of={ButtonStories.Default} />
+
+## Appearance
+
+`appearance` controls how visually prominent the button is. Use it to signal importance relative to other buttons on the page.
+
+- `solid` — Solid colored background. The highest-emphasis style. Use for the single most important action in a given context.
+- `outline` — Transparent background with a colored border. Medium emphasis. Use for secondary actions alongside a solid button.
+- `plain` — No background or border. Lowest emphasis. Use for tertiary or destructive actions that shouldn't draw attention on their own.
+
+## Variant
+
+`variant` controls the button's color, which communicates the _intent_ of the action — not how prominent it is. Appearance and variant are independent: any appearance can be combined with any variant.
+
+- `accent` — Blue. Use for the primary action on a page, such as Save or Confirm.
+- `neutral` — Gray. The default. Use for everyday actions that don't carry a strong positive or negative meaning.
+- `danger` — Red. Use for actions that delete, remove, or permanently change data.
+
+<Canvas of={ButtonStories.Accent} />
+
+### Inherit
+
+`variant="inherit"` is a special case for buttons placed inside [Colorable](?path=/docs/concepts-colorable--docs) containers. Instead of applying its own color, the button picks up the color from its parent container.
+
+Avoid using the standard color variants (`accent`, `neutral`, `danger`) inside Colorable components — the two color systems can conflict and produce unexpected results.
+
+## Sizes
+
+<Canvas of={ButtonStories.Sizes} />
+
+## Icon buttons
+
+<Canvas of={ButtonStories.Icon} />
+
+## Loading state
+
+<Canvas of={ButtonStories.Loading} />

packages/craftcms-cp/src/components/button/button.stories.ts

@@ -5,6 +5,10 @@ import {html} from 'lit';
 import './button.js';
 import '../icon/icon.js';
 import '../chip/chip.js';
+import {ButtonAppearance, ButtonVariant} from '@src/types';
+
+const buttonVariants = Object.values(ButtonVariant);
+const appearance = Object.values(ButtonAppearance);
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
@@ -13,20 +17,31 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  argTypes: {},
+  args: {
+    label: 'Button',
+    appearance: 'solid',
+    loading: false,
+    variant: 'neutral',
+  },
+  argTypes: {
+    appearance: {
+      control: {type: 'select'},
+      options: appearance,
+    },
+    loading: {
+      control: {type: 'boolean'},
+    },
+  },
   render: (args) => html`
     <div class="grid gap-4">
-      ${['primary', 'default', 'danger'].map(
+      ${buttonVariants.map(
         (variant) => html`
           <div class="flex gap-2">
             <craft-button variant="${variant}"
-              >${variant ?? 'None'}</craft-button
-            >
-            <craft-button appearance="filled" variant="${variant}"
-              >${variant} filled</craft-button
+              >${variant ?? 'None'} solid</craft-button
             >
-            <craft-button appearance="dashed" variant="${variant}"
-              >${variant} dashed</craft-button
+            <craft-button appearance="outline" variant="${variant}"
+              >${variant} outline</craft-button
             >
             <craft-button appearance="plain" variant="${variant}"
               >${variant} plain</craft-button
@@ -37,15 +52,12 @@ const meta = {
 
       <craft-chip data-color="violet">
         <div class="flex gap-2">
-          <craft-button variant="inherit">Chip buttons</craft-button>
-          <craft-button appearance="filled" variant="inherit"
-            >Filled</craft-button
-          >
-          <craft-button appearance="dashed" variant="inherit"
-            >Dashed</craft-button
+          <craft-button variant="inherit">Chip Buttons</craft-button>
+          <craft-button appearance="outline" variant="inherit"
+            >Outline</craft-button
           >
           <craft-button appearance="plain" variant="inherit"
-            >plain</craft-button
+            >Plain</craft-button
           >
         </div>
       </craft-chip>
@@ -61,6 +73,21 @@ export const Default: Story = {
   args: {},
 };
 
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+  },
+  argTypes: {
+    variant: {
+      control: {type: 'select'},
+      options: buttonVariants,
+    },
+  },
+  render: (args) => html`
+    <craft-button variant="${args.variant}">${args.label}</craft-button>
+  `,
+};
+
 export const Sizes: Story = {
   args: {},
   render: (args) => html`
@@ -87,6 +114,10 @@ export const Icon: Story = {
 };
 
 export const Loading: Story = {
-  args: {},
-  render: (args) => html` <craft-button loading> Submit </craft-button> `,
+  args: {
+    loading: true,
+  },
+  render: (args) => html`
+    <craft-button ?loading="${args.loading}"> Submit </craft-button>
+  `,
 };

packages/craftcms-cp/src/components/button/button.styles.ts

@@ -17,11 +17,11 @@ export default css`
     min-height: var(--c-button-height, var(--c-size-control-md));
     min-width: var(--c-button-width, var(--c-size-control-md));
     white-space: nowrap;
+    border-width: var(--c-button-border-width, 1px);
+    border-style: var(--c-button-border-style, solid);
 
     /* Colorable styles */
     color: var(--c-color-on-loud, var(--c-color-neutral-on-loud));
-    border-width: var(--c-button-border-width, 1px);
-    border-style: var(--c-button-border-style, solid);
     border-color: var(
       --c-color-border-loud,
       var(--c-color-neutral-border-loud)
@@ -34,22 +34,17 @@ export default css`
 
   @media (hover: hover) {
     :host(:hover) {
-      background-color: color-mix(
-        in oklab,
-        var(--c-color-fill-loud, var(--c-button-default-fill)),
-        var(--c-color-mix-hover)
+      background-color: hsl(
+        from var(--c-color-fill-loud, var(--c-button-default-fill)) h s
+          calc(l - 5)
       );
       color: var(--c-color-on-loud);
     }
   }
 
   :host(:not(:disabled):not(.loading):active) {
-    color: var(--c-color-on-loud);
-    background-color: color-mix(
-      in oklab,
-      var(--c-color-fill-loud, var(--c-color-neutral-fill-normal)),
-      var(--c-color-mix-active)
-    );
+    color: var(--_active-color);
+    background-color: var(--_active-background-color);
   }
 
   /*
@@ -113,101 +108,82 @@ export default css`
   Appearances 
    */
 
-  /* Plain */
-  :host([appearance~='plain']) {
+  /* Plain & Outline (Shared) */
+  :host([appearance~='plain']),
+  :host([appearance~='outline']) {
     background-color: transparent;
-    border-color: transparent;
-    color: inherit;
+    color: var(--c-color-on-quiet);
   }
 
-  :host([appearance~='plain']:hover) {
-    background-color: color-mix(
-      in oklab,
-      var(--c-color-fill-quiet, var(--c-button-default-fill)),
-      var(--c-color-mix-hover)
+  :host([appearance~='plain']:hover),
+  :host([appearance~='outline']:hover) {
+    background-color: hsl(
+      from var(--c-color-fill-quiet, var(--c-color-neutral-fill-quiet)) h s
+        calc(l - 5)
     );
-    color: var(--c-color-on-quiet);
   }
 
-  :host([appearance~='plain']:active) {
-    color: var(--c-color-on-quiet, var(--c-color-neutral-on-quiet));
-    background-color: color-mix(
-      in oklab,
-      var(--c-color-fill-quiet, var(--c-color-neutral-fill-quiet)),
-      var(--c-color-mix-active)
+  :host([appearance~='plain']:active),
+  :host([appearance~='outline']:active) {
+    --_active-background-color: hsl(
+      from var(--c-color-fill-quiet, var(--c-color-neutral-fill-quiet)) h s
+        calc(l - 8)
     );
+    --_active-color: var(--c-color-on-quiet, var(--c-color-neutral-on-quiet));
   }
 
-  /* Filled */
-  :host([appearance~='filled']) {
-    background-color: var(
-      --c-color-fill-normal,
-      var(--c-color-neutral-fill-normal)
-    );
+  /* Plain */
+  :host([appearance~='plain']) {
     border-color: transparent;
-    color: var(--c-color-on-normal, var(--c-color-neutral-on-normal));
   }
 
-  :host([appearance~='filled']:hover) {
-    background-color: color-mix(
-      in oklab,
-      var(--c-color-fill-normal, var(--c-color-neutral-fill-normal)),
-      var(--c-color-mix-hover)
+  /* Solid */
+  :host([appearance~='solid']) {
+    background-color: var(
+      --c-color-fill-loud,
+      var(--c-color-neutral-fill-loud)
     );
-    color: var(--c-color-on-normal, var(--c-color-neutral-on-normal));
+    border-color: transparent;
+    color: var(--c-color-on-loud, var(--c-color-neutral-on-loud));
   }
 
-  :host([appearance~='filled']:active) {
-    color: var(--c-color-on-quiet, var(--c-color-neutral-on-quiet));
-    background-color: color-mix(
-      in oklab,
-      var(--c-color-fill-quiet, var(--c-color-neutral-fill-quiet)),
-      var(--c-color-mix-active)
+  :host([appearance~='solid']:hover) {
+    background-color: hsl(
+      from var(--c-color-fill-loud, var(--c-color-neutral-fill-loud)) h s
+        calc(l - 5)
     );
+    color: var(--c-color-on-loud, var(--c-color-neutral-on-loud));
   }
 
-  /* Dashed */
-  :host([appearance~='dashed']) {
-    background-color: transparent;
-    border-color: var(--c-color-border-normal);
-    border-style: dashed;
-    color: var(--c-color-on-quiet);
-  }
-
-  :host([appearance~='dashed']:hover) {
-    background-color: color-mix(
-      in oklab,
-      var(--c-color-fill-quiet, var(--c-button-default-fill)),
-      var(--c-color-mix-hover)
+  :host([appearance~='solid']:active) {
+    --_active-background-color: hsl(
+      from var(--c-color-fill-loud, var(--c-color-neutral-fill-loud)) h s
+        calc(l - 10)
     );
-    color: var(--c-color-on-quiet);
+    --_active-color: var(--c-color-on-loud, var(--c-color-neutral-on-loud));
   }
 
-  :host([appearance~='dashed']:active) {
-    color: var(--c-color-on-quiet, var(--c-color-neutral-on-quiet));
-    background-color: color-mix(
-      in oklab,
-      var(--c-color-fill-quiet, var(--c-color-neutral-fill-quiet)),
-      var(--c-color-mix-active)
-    );
+  /* Outline */
+  :host([appearance~='outline']) {
+    border-color: var(--c-color-border-loud);
   }
 
   /*
   Variants (aka fill colors) 
    */
-  :host([variant~='primary']) {
-    --c-color-fill-loud: var(--c-color-brand-fill-loud);
-    --c-color-fill-normal: var(--c-color-brand-fill-normal);
-    --c-color-fill-quiet: var(--c-color-brand-fill-quiet);
-    --c-color-border-loud: var(--c-color-brand-border-loud);
-    --c-color-border-normal: var(--c-color-brand-border-normal);
-    --c-color-border-quiet: var(--c-color-brand-border-quiet);
-    --c-color-on-loud: var(--c-color-brand-on-loud);
-    --c-color-on-normal: var(--c-color-brand-on-normal);
-    --c-color-on-quiet: var(--c-color-brand-on-quiet);
+  :host([variant~='accent']) {
+    --c-color-fill-loud: var(--c-color-accent-fill-loud);
+    --c-color-fill-normal: var(--c-color-accent-fill-normal);
+    --c-color-fill-quiet: var(--c-color-accent-fill-quiet);
+    --c-color-border-loud: var(--c-color-accent-border-loud);
+    --c-color-border-normal: var(--c-color-accent-border-normal);
+    --c-color-border-quiet: var(--c-color-accent-border-quiet);
+    --c-color-on-loud: var(--c-color-accent-on-loud);
+    --c-color-on-normal: var(--c-color-accent-on-normal);
+    --c-color-on-quiet: var(--c-color-accent-on-quiet);
   }
 
-  :host([variant='default']) {
+  :host([variant='neutral']) {
     --c-color-fill-loud: var(--c-color-neutral-fill-loud);
     --c-color-fill-normal: var(--c-color-neutral-fill-normal);
     --c-color-fill-quiet: var(--c-color-neutral-fill-quiet);