@seed-design/css 0.2.4 → 1.0.0

package/recipes/switch-mark.css

@@ -0,0 +1,66 @@
+.seed-switch-mark__root {
+    box-sizing: border-box;
+    display: block;
+    position: relative;
+    border-radius: var(--seed-radius-full);
+    background: var(--seed-color-palette-gray-600);
+    margin: var(--switch-mark-margin-top, 0) 0;
+    transition: background-color 50ms cubic-bezier(0.35, 0, 0.35, 1) 20ms;
+}
+.seed-switch-mark__root:is(:disabled, [disabled], [data-disabled]) {
+    opacity: 0.38;
+}
+.seed-switch-mark__thumb {
+    border-radius: var(--seed-radius-full);
+    transition: transform 150ms cubic-bezier(0.35, 0, 0.35, 1);
+}
+.seed-switch-mark__root--tone_neutral:is(:checked, [data-checked]) {
+    background: var(--seed-color-bg-neutral-inverted);
+}
+.seed-switch-mark__thumb--tone_neutral {
+    background: var(--seed-color-fg-neutral-inverted);
+}
+.seed-switch-mark__root--tone_brand:is(:checked, [data-checked]) {
+    background: var(--seed-color-bg-brand-solid);
+}
+.seed-switch-mark__thumb--tone_brand {
+    background: var(--seed-color-palette-static-white);
+}
+.seed-switch-mark__root--size_16 {
+    min-inline-size: 26px;
+    min-block-size: 16px;
+    padding: 2px 2px;
+}
+.seed-switch-mark__thumb--size_16 {
+    width: 12px;
+    height: 12px;
+}
+.seed-switch-mark__thumb--size_16:is(:checked, [data-checked]) {
+    transform: translateX(calc(26px - 16px));
+}
+.seed-switch-mark__root--size_24 {
+    min-inline-size: 38px;
+    min-block-size: 24px;
+    padding: 2px 2px;
+}
+.seed-switch-mark__thumb--size_24 {
+    width: 20px;
+    height: 20px;
+    box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
+}
+.seed-switch-mark__thumb--size_24:is(:checked, [data-checked]) {
+    transform: translateX(calc(38px - 24px));
+}
+.seed-switch-mark__root--size_32 {
+    min-inline-size: 52px;
+    min-block-size: 32px;
+    padding: 3px 3px;
+}
+.seed-switch-mark__thumb--size_32 {
+    width: 26px;
+    height: 26px;
+    box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
+}
+.seed-switch-mark__thumb--size_32:is(:checked, [data-checked]) {
+    transform: translateX(calc(52px - 32px));
+}

package/recipes/switch-mark.d.ts

@@ -0,0 +1,28 @@
+declare interface SwitchMarkVariant {
+  /**
+  * @default "brand"
+  */
+  tone: "neutral" | "brand";
+/**
+  * @default 32
+  */
+  size: "16" | "24" | "32";
+}
+
+declare type SwitchMarkVariantMap = {
+  [key in keyof SwitchMarkVariant]: Array<SwitchMarkVariant[key]>;
+};
+
+export declare type SwitchMarkVariantProps = Partial<SwitchMarkVariant>;
+
+export declare type SwitchMarkSlotName = "root" | "thumb";
+
+export declare const switchMarkVariantMap: SwitchMarkVariantMap;
+
+export declare const switchMark: ((
+  props?: SwitchMarkVariantProps,
+) => Record<SwitchMarkSlotName, string>) & {
+  splitVariantProps: <T extends SwitchMarkVariantProps>(
+    props: T,
+  ) => [SwitchMarkVariantProps, Omit<T, keyof SwitchMarkVariantProps>];
+}

package/recipes/switch-mark.mjs

@@ -0,0 +1,49 @@
+import './switch-mark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const switchMarkSlotNames = [
+  [
+    "root",
+    "seed-switch-mark__root"
+  ],
+  [
+    "thumb",
+    "seed-switch-mark__thumb"
+  ]
+];
+
+const defaultVariant = {
+  "tone": "brand",
+  "size": 32
+};
+
+const compoundVariants = [];
+
+export const switchMarkVariantMap = {
+  "tone": [
+    "neutral",
+    "brand"
+  ],
+  "size": [
+    "16",
+    "24",
+    "32"
+  ]
+};
+
+export const switchMarkVariantKeys = Object.keys(switchMarkVariantMap);
+
+export function switchMark(props) {
+  return Object.fromEntries(
+    switchMarkSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(switchMark, { splitVariantProps: (props) => splitVariantProps(props, switchMarkVariantMap) });
+
+// @recipe(seed): switch-mark

package/recipes/switch.css

@@ -11,21 +11,6 @@
 .seed-switch__root:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
-.seed-switch__control {
-    box-sizing: border-box;
-    display: block;
-    position: relative;
-    border-radius: var(--seed-radius-full);
-    background: var(--seed-color-palette-gray-600);
-    transition: background-color 50ms cubic-bezier(0.35, 0, 0.35, 1) 20ms;
-}
-.seed-switch__control:is(:disabled, [disabled], [data-disabled]) {
-    opacity: 0.38;
-}
-.seed-switch__thumb {
-    border-radius: var(--seed-radius-full);
-    transition: transform 150ms cubic-bezier(0.35, 0, 0.35, 1);
-}
 .seed-switch__label {
     font-weight: var(--seed-font-weight-medium);
     color: var(--seed-color-fg-neutral);
@@ -33,34 +18,10 @@
 .seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-color-fg-disabled);
 }
-.seed-switch__control--tone_neutral:is(:checked, [data-checked]) {
-    background: var(--seed-color-bg-neutral-inverted);
-}
-.seed-switch__thumb--tone_neutral {
-    background: var(--seed-color-fg-neutral-inverted);
-}
-.seed-switch__control--tone_brand:is(:checked, [data-checked]) {
-    background: var(--seed-color-bg-brand-solid);
-}
-.seed-switch__thumb--tone_brand {
-    background: var(--seed-color-palette-static-white);
-}
 .seed-switch__root--size_16 {
-    min-height: 24px;
+    min-height: var(--seed-dimension-x6);
     gap: var(--seed-dimension-x1_5);
-}
-.seed-switch__control--size_16 {
-    min-inline-size: 26px;
-    min-block-size: 16px;
-    padding: 2px 2px;
-    margin: calc((24px - 16px) / 2) 0;
-}
-.seed-switch__thumb--size_16 {
-    width: 12px;
-    height: 12px;
-}
-.seed-switch__thumb--size_16:is(:checked, [data-checked]) {
-    transform: translateX(calc(26px - 16px));
+    --switch-mark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
 }
 .seed-switch__label--size_16 {
     font-size: var(--seed-font-size-t3);
@@ -68,22 +29,9 @@
     margin-top: calc(12px - 0.5625rem);
 }
 .seed-switch__root--size_24 {
-    min-height: 24px;
+    min-height: var(--seed-dimension-x6);
     gap: var(--seed-dimension-x2);
-}
-.seed-switch__control--size_24 {
-    min-inline-size: 38px;
-    min-block-size: 24px;
-    padding: 2px 2px;
-    margin: calc((24px - 24px) / 2) 0;
-}
-.seed-switch__thumb--size_24 {
-    width: 20px;
-    height: 20px;
-    box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
-}
-.seed-switch__thumb--size_24:is(:checked, [data-checked]) {
-    transform: translateX(calc(38px - 24px));
+    --switch-mark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
 }
 .seed-switch__label--size_24 {
     font-size: var(--seed-font-size-t4);
@@ -91,22 +39,9 @@
     margin-top: calc(12px - 0.59375rem);
 }
 .seed-switch__root--size_32 {
-    min-height: 32px;
+    min-height: var(--seed-dimension-x8);
     gap: var(--seed-dimension-x2_5);
-}
-.seed-switch__control--size_32 {
-    min-inline-size: 52px;
-    min-block-size: 32px;
-    padding: 3px 3px;
-    margin: calc((32px - 32px) / 2) 0;
-}
-.seed-switch__thumb--size_32 {
-    width: 26px;
-    height: 26px;
-    box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
-}
-.seed-switch__thumb--size_32:is(:checked, [data-checked]) {
-    transform: translateX(calc(52px - 32px));
+    --switch-mark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
 }
 .seed-switch__label--size_32 {
     font-size: var(--seed-font-size-t5);

package/recipes/switch.d.ts

@@ -1,9 +1,5 @@
 declare interface SwitchVariant {
   /**
-  * @default "brand"
-  */
-  tone: "neutral" | "brand";
-/**
   * @default 32
   */
   size: "16" | "24" | "32";
@@ -15,7 +11,7 @@ declare type SwitchVariantMap = {
 
 export declare type SwitchVariantProps = Partial<SwitchVariant>;
 
-export declare type SwitchSlotName = "root" | "control" | "thumb" | "label";
+export declare type SwitchSlotName = "root" | "label";
 
 export declare const switchVariantMap: SwitchVariantMap;
 

package/recipes/switch.mjs

@@ -6,14 +6,6 @@ const switchSlotNames = [
     "root",
     "seed-switch__root"
   ],
-  [
-    "control",
-    "seed-switch__control"
-  ],
-  [
-    "thumb",
-    "seed-switch__thumb"
-  ],
   [
     "label",
     "seed-switch__label"
@@ -21,17 +13,12 @@ const switchSlotNames = [
 ];
 
 const defaultVariant = {
-  "tone": "brand",
   "size": 32
 };
 
 const compoundVariants = [];
 
 export const switchVariantMap = {
-  "tone": [
-    "neutral",
-    "brand"
-  ],
   "size": [
     "16",
     "24",

package/vars/color/manner-temp/index.d.ts

@@ -3,4 +3,8 @@ export * as l2 from "./l2";
 export * as l3 from "./l3";
 export * as l4 from "./l4";
 export * as l5 from "./l5";
-export * as l6 from "./l6";
+export * as l6 from "./l6";
+export * as l7 from "./l7";
+export * as l8 from "./l8";
+export * as l9 from "./l9";
+export * as l10 from "./l10";

package/vars/color/manner-temp/index.mjs

@@ -3,4 +3,8 @@ export * as l2 from "./l2.mjs";
 export * as l3 from "./l3.mjs";
 export * as l4 from "./l4.mjs";
 export * as l5 from "./l5.mjs";
-export * as l6 from "./l6.mjs";
+export * as l6 from "./l6.mjs";
+export * as l7 from "./l7.mjs";
+export * as l8 from "./l8.mjs";
+export * as l9 from "./l9.mjs";
+export * as l10 from "./l10.mjs";

package/vars/color/manner-temp/l10.d.ts

@@ -0,0 +1,2 @@
+export declare const text = "var(--seed-color-manner-temp-l10-text)";
+export declare const bg = "var(--seed-color-manner-temp-l10-bg)";

package/vars/color/manner-temp/l10.mjs

@@ -0,0 +1,2 @@
+export const text = "var(--seed-color-manner-temp-l10-text)";
+export const bg = "var(--seed-color-manner-temp-l10-bg)";

package/vars/color/manner-temp/l7.d.ts

@@ -0,0 +1,2 @@
+export declare const text = "var(--seed-color-manner-temp-l7-text)";
+export declare const bg = "var(--seed-color-manner-temp-l7-bg)";

package/vars/color/manner-temp/l7.mjs

@@ -0,0 +1,2 @@
+export const text = "var(--seed-color-manner-temp-l7-text)";
+export const bg = "var(--seed-color-manner-temp-l7-bg)";

package/vars/color/manner-temp/l8.d.ts

@@ -0,0 +1,2 @@
+export declare const text = "var(--seed-color-manner-temp-l8-text)";
+export declare const bg = "var(--seed-color-manner-temp-l8-bg)";

package/vars/color/manner-temp/l8.mjs

@@ -0,0 +1,2 @@
+export const text = "var(--seed-color-manner-temp-l8-text)";
+export const bg = "var(--seed-color-manner-temp-l8-bg)";

package/vars/color/manner-temp/l9.d.ts

@@ -0,0 +1,2 @@
+export declare const text = "var(--seed-color-manner-temp-l9-text)";
+export declare const bg = "var(--seed-color-manner-temp-l9-bg)";

package/vars/color/manner-temp/l9.mjs

@@ -0,0 +1,2 @@
+export const text = "var(--seed-color-manner-temp-l9-text)";
+export const bg = "var(--seed-color-manner-temp-l9-bg)";

package/vars/component/help-bubble.d.ts

@@ -2,11 +2,10 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-solid)",
+        "color": "var(--seed-color-bg-neutral-inverted)",
         "cornerRadius": "var(--seed-radius-r3)",
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
-        "shadow": "0px 8px 24px 0px #00000029",
         "enterScale": "0.9",
         "enterOpacity": "0",
         "enterDuration": "var(--seed-duration-d4)",
@@ -17,7 +16,7 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-easing)"
       },
       "arrow": {
-        "color": "var(--seed-color-bg-neutral-solid)",
+        "color": "var(--seed-color-bg-neutral-inverted)",
         "width": "12px",
         "height": "8px",
         "cornerRadius": "2px",
@@ -25,19 +24,19 @@ export declare const vars: {
         "padding": "14px"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-neutral-inverted)",
         "fontSize": "var(--seed-font-size-t3)",
         "fontWeight": "var(--seed-font-weight-bold)",
         "lineHeight": "var(--seed-line-height-t3)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-neutral-inverted)",
         "fontSize": "var(--seed-font-size-t3)",
         "fontWeight": "var(--seed-font-weight-regular)",
         "lineHeight": "var(--seed-line-height-t3)"
       },
       "closeButton": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-neutral-inverted)",
         "fromRight": "12px",
         "fromTop": "12px",
         "size": "14px",

package/vars/component/help-bubble.mjs

@@ -2,11 +2,10 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-solid)",
+        "color": "var(--seed-color-bg-neutral-inverted)",
         "cornerRadius": "var(--seed-radius-r3)",
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
-        "shadow": "0px 8px 24px 0px #00000029",
         "enterScale": "0.9",
         "enterOpacity": "0",
         "enterDuration": "var(--seed-duration-d4)",
@@ -17,7 +16,7 @@ export const vars = {
         "exitTimingFunction": "var(--seed-timing-function-easing)"
       },
       "arrow": {
-        "color": "var(--seed-color-bg-neutral-solid)",
+        "color": "var(--seed-color-bg-neutral-inverted)",
         "width": "12px",
         "height": "8px",
         "cornerRadius": "2px",
@@ -25,19 +24,19 @@ export const vars = {
         "padding": "14px"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-neutral-inverted)",
         "fontSize": "var(--seed-font-size-t3)",
         "fontWeight": "var(--seed-font-weight-bold)",
         "lineHeight": "var(--seed-line-height-t3)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-neutral-inverted)",
         "fontSize": "var(--seed-font-size-t3)",
         "fontWeight": "var(--seed-font-weight-regular)",
         "lineHeight": "var(--seed-line-height-t3)"
       },
       "closeButton": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-neutral-inverted)",
         "fromRight": "12px",
         "fromTop": "12px",
         "size": "14px",

package/vars/component/index.d.ts

@@ -28,6 +28,7 @@ export { vars as helpBubble } from "./help-bubble";
 export { vars as identityPlaceholder } from "./identity-placeholder";
 export { vars as inlineBanner } from "./inline-banner";
 export { vars as linkContent } from "./link-content";
+export { vars as listHeader } from "./list-header";
 export { vars as listItem } from "./list-item";
 export { vars as mannerTempBadge } from "./manner-temp-badge";
 export { vars as mannerTemp } from "./manner-temp";
@@ -45,6 +46,7 @@ export { vars as segmentedControl } from "./segmented-control";
 export { vars as selectBox } from "./select-box";
 export { vars as skeleton } from "./skeleton";
 export { vars as snackbar } from "./snackbar";
+export { vars as switchMark } from "./switch-mark";
 export { vars as switch } from "./switch";
 export { vars as tab } from "./tab";
 export { vars as tablist } from "./tablist";

package/vars/component/index.mjs

@@ -28,6 +28,7 @@ export { vars as helpBubble } from "./help-bubble.mjs";
 export { vars as identityPlaceholder } from "./identity-placeholder.mjs";
 export { vars as inlineBanner } from "./inline-banner.mjs";
 export { vars as linkContent } from "./link-content.mjs";
+export { vars as listHeader } from "./list-header.mjs";
 export { vars as listItem } from "./list-item.mjs";
 export { vars as mannerTempBadge } from "./manner-temp-badge.mjs";
 export { vars as mannerTemp } from "./manner-temp.mjs";
@@ -45,6 +46,7 @@ export { vars as segmentedControl } from "./segmented-control.mjs";
 export { vars as selectBox } from "./select-box.mjs";
 export { vars as skeleton } from "./skeleton.mjs";
 export { vars as snackbar } from "./snackbar.mjs";
+export { vars as switchMark } from "./switch-mark.mjs";
 export { vars as switch } from "./switch.mjs";
 export { vars as tab } from "./tab.mjs";
 export { vars as tablist } from "./tablist.mjs";

package/vars/component/list-header.d.ts

@@ -0,0 +1,29 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x2)",
+        "gap": "var(--seed-dimension-x2_5)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "variantMediumWeak": {
+    "enabled": {
+      "root": {
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    }
+  },
+  "variantBoldSolid": {
+    "enabled": {
+      "root": {
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/list-header.mjs

@@ -0,0 +1,29 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x2)",
+        "gap": "var(--seed-dimension-x2_5)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "variantMediumWeak": {
+    "enabled": {
+      "root": {
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    }
+  },
+  "variantBoldSolid": {
+    "enabled": {
+      "root": {
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/manner-temp-badge.d.ts

@@ -2,7 +2,7 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "minHeight": "20px",
+        "minHeight": "var(--seed-dimension-x5)",
         "paddingY": "var(--seed-dimension-x0_5)",
         "paddingX": "var(--seed-dimension-x1_5)",
         "cornerRadius": "var(--seed-radius-full)"
@@ -73,5 +73,45 @@ export declare const vars: {
         "color": "var(--seed-color-manner-temp-l6-text)"
       }
     }
+  },
+  "levelL7": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-manner-temp-l7-bg)"
+      },
+      "label": {
+        "color": "var(--seed-color-manner-temp-l7-text)"
+      }
+    }
+  },
+  "levelL8": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-manner-temp-l8-bg)"
+      },
+      "label": {
+        "color": "var(--seed-color-manner-temp-l8-text)"
+      }
+    }
+  },
+  "levelL9": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-manner-temp-l9-bg)"
+      },
+      "label": {
+        "color": "var(--seed-color-manner-temp-l9-text)"
+      }
+    }
+  },
+  "levelL10": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-manner-temp-l10-bg)"
+      },
+      "label": {
+        "color": "var(--seed-color-manner-temp-l10-text)"
+      }
+    }
   }
 }

package/vars/component/manner-temp-badge.mjs

@@ -2,7 +2,7 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "minHeight": "20px",
+        "minHeight": "var(--seed-dimension-x5)",
         "paddingY": "var(--seed-dimension-x0_5)",
         "paddingX": "var(--seed-dimension-x1_5)",
         "cornerRadius": "var(--seed-radius-full)"
@@ -73,5 +73,45 @@ export const vars = {
         "color": "var(--seed-color-manner-temp-l6-text)"
       }
     }
+  },
+  "levelL7": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-manner-temp-l7-bg)"
+      },
+      "label": {
+        "color": "var(--seed-color-manner-temp-l7-text)"
+      }
+    }
+  },
+  "levelL8": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-manner-temp-l8-bg)"
+      },
+      "label": {
+        "color": "var(--seed-color-manner-temp-l8-text)"
+      }
+    }
+  },
+  "levelL9": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-manner-temp-l9-bg)"
+      },
+      "label": {
+        "color": "var(--seed-color-manner-temp-l9-text)"
+      }
+    }
+  },
+  "levelL10": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-manner-temp-l10-bg)"
+      },
+      "label": {
+        "color": "var(--seed-color-manner-temp-l10-text)"
+      }
+    }
   }
 }