@seed-design/css 0.2.0 → 0.2.3

package/recipes/radio.mjs

@@ -7,18 +7,23 @@ const radioSlotNames = [
     "seed-radio__root"
   ],
   [
-    "icon",
-    "seed-radio__icon"
+    "label",
+    "seed-radio__label"
   ]
 ];
 
 const defaultVariant = {
-  "size": "medium"
+  "size": "medium",
+  "weight": "default"
 };
 
 const compoundVariants = [];
 
 export const radioVariantMap = {
+  "weight": [
+    "default",
+    "stronger"
+  ],
   "size": [
     "large",
     "medium"

package/recipes/radiomark.css

@@ -0,0 +1,68 @@
+.seed-radiomark__root {
+    border-style: solid;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    background-color: var(--seed-color-bg-layer-default);
+    border-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-weak);
+    border-radius: var(--seed-radius-full);
+    margin-top: var(--radiomark-margin-top, 0);
+}
+.seed-radiomark__root:is(:active, [data-active]) {
+    background-color: var(--seed-color-bg-layer-default-pressed);
+}
+.seed-radiomark__root:is(:checked, [data-checked]) {
+    background-color: var(--seed-color-bg-brand-solid);
+    border-width: 0px;
+}
+.seed-radiomark__root:is(:active, [data-active]):is(:checked, [data-checked]) {
+    background-color: var(--seed-color-bg-brand-solid-pressed);
+}
+.seed-radiomark__root:is(:disabled, [disabled], [data-disabled]) {
+    background-color: var(--seed-color-palette-gray-300);
+}
+.seed-radiomark__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
+    background: none;
+    border-width: 1px;
+    border-color: var(--seed-color-palette-gray-300);
+}
+.seed-radiomark__icon {
+    display: none;
+    border-radius: var(--seed-radius-full);
+}
+.seed-radiomark__icon:is(:checked, [data-checked]) {
+    display: block;
+    color: var(--seed-color-palette-static-white);
+}
+.seed-radiomark__icon:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
+    color: var(--seed-color-palette-gray-300);
+}
+.seed-radiomark__root--size_large {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+}
+.seed-radiomark__icon--size_large {
+    width: var(--seed-dimension-x2_5);
+    height: var(--seed-dimension-x2_5);
+}
+.seed-radiomark__icon--size_large:is(:disabled, [disabled], [data-disabled]) {
+    width: var(--seed-dimension-x3);
+    height: var(--seed-dimension-x3);
+}
+.seed-radiomark__root--size_medium {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+.seed-radiomark__icon--size_medium {
+    width: var(--seed-dimension-x2);
+    height: var(--seed-dimension-x2);
+}
+.seed-radiomark__icon--size_medium:is(:disabled, [disabled], [data-disabled]) {
+    width: var(--seed-dimension-x2_5);
+    height: var(--seed-dimension-x2_5);
+}

package/recipes/radiomark.d.ts

@@ -0,0 +1,24 @@
+declare interface RadiomarkVariant {
+  /**
+  * @default "medium"
+  */
+  size: "large" | "medium";
+}
+
+declare type RadiomarkVariantMap = {
+  [key in keyof RadiomarkVariant]: Array<RadiomarkVariant[key]>;
+};
+
+export declare type RadiomarkVariantProps = Partial<RadiomarkVariant>;
+
+export declare type RadiomarkSlotName = "root" | "icon";
+
+export declare const radiomarkVariantMap: RadiomarkVariantMap;
+
+export declare const radiomark: ((
+  props?: RadiomarkVariantProps,
+) => Record<RadiomarkSlotName, string>) & {
+  splitVariantProps: <T extends RadiomarkVariantProps>(
+    props: T,
+  ) => [RadiomarkVariantProps, Omit<T, keyof RadiomarkVariantProps>];
+}

package/recipes/radiomark.mjs

@@ -0,0 +1,43 @@
+import './radiomark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const radiomarkSlotNames = [
+  [
+    "root",
+    "seed-radiomark__root"
+  ],
+  [
+    "icon",
+    "seed-radiomark__icon"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const radiomarkVariantMap = {
+  "size": [
+    "large",
+    "medium"
+  ]
+};
+
+export const radiomarkVariantKeys = Object.keys(radiomarkVariantMap);
+
+export function radiomark(props) {
+  return Object.fromEntries(
+    radiomarkSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(radiomark, { splitVariantProps: (props) => splitVariantProps(props, radiomarkVariantMap) });
+
+// @recipe(seed): radiomark

package/recipes/reaction-button.d.ts

@@ -1,6 +1,6 @@
 declare interface ReactionButtonVariant {
   /**
-  * @default small
+  * @default "small"
   */
   size: "xsmall" | "small";
 }

package/recipes/select-box.css

@@ -25,74 +25,6 @@
     flex-grow: 1;
     gap: var(--seed-dimension-x0_5);
 }
-.seed-select-box__checkboxControl {
-    flex: none;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--seed-dimension-x6);
-    height: var(--seed-dimension-x6);
-    background-color: var(--seed-color-bg-layer-default);
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--seed-color-stroke-neutral-weak);
-    border-radius: var(--seed-radius-r1);
-}
-.seed-select-box__checkboxControl:is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-layer-default-pressed);
-}
-.seed-select-box__checkboxControl:is(:checked, [data-checked]) {
-    background-color: var(--seed-color-bg-brand-solid);
-    border-width: 0;
-}
-.seed-select-box__checkboxControl:is(:checked, [data-checked]):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-brand-solid-pressed);
-}
-.seed-select-box__checkboxIcon {
-    width: var(--seed-dimension-x3_5);
-    height: var(--seed-dimension-x3_5);
-    display: none;
-}
-.seed-select-box__checkboxIcon:is(:checked, [data-checked]) {
-    display: block;
-    color: var(--seed-color-palette-static-white);
-}
-.seed-select-box__radioControl {
-    flex: none;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--seed-dimension-x6);
-    height: var(--seed-dimension-x6);
-    background-color: var(--seed-color-bg-layer-default);
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--seed-color-stroke-neutral-weak);
-    border-radius: var(--seed-radius-full);
-}
-.seed-select-box__radioControl:is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-layer-default-pressed);
-}
-.seed-select-box__radioControl:is(:checked, [data-checked]) {
-    background-color: var(--seed-color-bg-brand-solid);
-    border-width: 0;
-}
-.seed-select-box__radioControl:is(:checked, [data-checked]):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-brand-solid-pressed);
-}
-.seed-select-box__radioIcon {
-    width: var(--seed-dimension-x2_5);
-    height: var(--seed-dimension-x2_5);
-    border-radius: var(--seed-radius-full);
-    display: none;
-}
-.seed-select-box__radioIcon:is(:checked, [data-checked]) {
-    display: block;
-    background-color: var(--seed-color-palette-static-white);
-    color: var(--seed-color-palette-static-white);
-}
 .seed-select-box__label {
     color: var(--seed-color-fg-neutral);
     font-weight: var(--seed-font-weight-bold);

package/recipes/select-box.d.ts

@@ -8,7 +8,7 @@ declare type SelectBoxVariantMap = {
 
 export declare type SelectBoxVariantProps = Partial<SelectBoxVariant>;
 
-export declare type SelectBoxSlotName = "root" | "content" | "label" | "description" | "checkboxControl" | "checkboxIcon" | "radioControl" | "radioIcon";
+export declare type SelectBoxSlotName = "root" | "content" | "label" | "description";
 
 export declare const selectBoxVariantMap: SelectBoxVariantMap;
 

package/recipes/select-box.mjs

@@ -17,22 +17,6 @@ const selectBoxSlotNames = [
   [
     "description",
     "seed-select-box__description"
-  ],
-  [
-    "checkboxControl",
-    "seed-select-box__checkboxControl"
-  ],
-  [
-    "checkboxIcon",
-    "seed-select-box__checkboxIcon"
-  ],
-  [
-    "radioControl",
-    "seed-select-box__radioControl"
-  ],
-  [
-    "radioIcon",
-    "seed-select-box__radioIcon"
   ]
 ];
 

package/recipes/skeleton.d.ts

@@ -4,7 +4,7 @@ declare interface SkeletonVariant {
   */
   radius: "0" | "8" | "16" | "full";
 /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "magic";
 }

package/recipes/snackbar.d.ts

@@ -1,6 +1,6 @@
 declare interface SnackbarVariant {
   /**
-  * @default default
+  * @default "default"
   */
   variant: "default" | "positive" | "critical";
 }

package/recipes/tabs.d.ts

@@ -1,14 +1,14 @@
 declare interface TabsVariant {
   /**
-  * @default fill
+  * @default "fill"
   */
   triggerLayout: "fill" | "hug";
 /**
-  * @default hug
+  * @default "hug"
   */
   contentLayout: "fill" | "hug";
 /**
-  * @default small
+  * @default "small"
   */
   size: "small" | "medium";
 /**

package/recipes/text-field.css

@@ -66,24 +66,23 @@
 .seed-text-field__value {
     box-sizing: border-box;
     font: inherit;
+    background: none;
+    border: none;
+    outline: none;
+    resize: none;
+    height: 100%;
+    flex-grow: 1;
+    color: var(--seed-color-fg-neutral);
 }
 .seed-text-field__value:is(input) {
     padding-inline: 0;
+    width: 0;
 }
 .seed-text-field__value:is(textarea) {
     padding-inline: 0;
     min-height: 90px;
     width: 100%;
 }
-.seed-text-field__value {
-    background: none;
-    border: none;
-    outline: none;
-    resize: none;
-    flex-grow: 1;
-    height: 100%;
-    color: var(--seed-color-fg-neutral);
-}
 .seed-text-field__value::placeholder {
     color: var(--seed-color-fg-placeholder);
 }

package/recipes/text-field.d.ts

@@ -1,6 +1,6 @@
 declare interface TextFieldVariant {
   /**
-  * @default medium
+  * @default "medium"
   */
   size: "xlarge" | "large" | "medium";
 }

package/recipes/text.d.ts

@@ -1,14 +1,14 @@
 declare interface TextVariant {
   /**
-  * @default t5Regular
+  * @default "t5Regular"
   */
   textStyle: "screenTitle" | "articleBody" | "t1Regular" | "t1Medium" | "t1Bold" | "t2Regular" | "t2Medium" | "t2Bold" | "t3Regular" | "t3Medium" | "t3Bold" | "t4Regular" | "t4Medium" | "t4Bold" | "t5Regular" | "t5Medium" | "t5Bold" | "t6Regular" | "t6Medium" | "t6Bold" | "t7Regular" | "t7Medium" | "t7Bold" | "t8Bold" | "t9Bold" | "t10Bold";
 /**
-  * @default none
+  * @default "none"
   */
   maxLines: "none" | "single" | "multi";
 /**
-  * @default none
+  * @default "none"
   */
   textDecorationLine: "none" | "line-through";
 }

package/recipes/toggle-button.d.ts

@@ -1,10 +1,10 @@
 declare interface ToggleButtonVariant {
   /**
-  * @default brandSolid
+  * @default "brandSolid"
   */
   variant: "brandSolid" | "neutralWeak";
 /**
-  * @default small
+  * @default "small"
   */
   size: "xsmall" | "small";
 }

package/vars/component/checkbox.d.ts

@@ -7,6 +7,11 @@ export declare const vars: {
       "root": {
         "gap": "var(--seed-dimension-x2)"
       }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
     }
   },
   "weightDefault": {
@@ -23,93 +28,6 @@ export declare const vars: {
       }
     }
   },
-  "variantSquare": {
-    "enabled": {
-      "control": {
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        "strokeWidth": "1px"
-      }
-    },
-    "enabledSelected": {
-      "control": {
-        "color": "var(--seed-color-bg-brand-solid)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "pressed": {
-      "control": {
-        "color": "var(--seed-color-bg-layer-default-pressed)"
-      }
-    },
-    "pressedSelected": {
-      "control": {
-        "color": "var(--seed-color-bg-brand-solid-pressed)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "disabled": {
-      "control": {
-        "color": "var(--seed-color-bg-disabled)",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "disabledSelected": {
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  },
-  "variantGhost": {
-    "enabled": {
-      "icon": {
-        "color": "var(--seed-color-fg-placeholder)"
-      }
-    },
-    "enabledSelected": {
-      "icon": {
-        "color": "var(--seed-color-fg-brand)"
-      }
-    },
-    "pressed": {
-      "control": {
-        "color": "var(--seed-color-bg-layer-default-pressed)"
-      }
-    },
-    "pressedSelected": {
-      "control": {
-        "color": "var(--seed-color-palette-carrot-200)"
-      }
-    },
-    "disabled": {
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "disabledSelected": {
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  },
   "sizeMedium": {
     "enabled": {
       "root": {
@@ -118,10 +36,6 @@ export declare const vars: {
       "label": {
         "fontSize": "var(--seed-font-size-t4)",
         "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "control": {
-        "size": "var(--seed-dimension-x5)",
-        "cornerRadius": "var(--seed-radius-r1)"
       }
     }
   },
@@ -133,38 +47,6 @@ export declare const vars: {
       "label": {
         "fontSize": "var(--seed-font-size-t5)",
         "lineHeight": "var(--seed-line-height-t5)"
-      },
-      "control": {
-        "size": "var(--seed-dimension-x6)",
-        "cornerRadius": "var(--seed-radius-r1)"
-      }
-    }
-  },
-  "variantSquareSizeMedium": {
-    "enabled": {
-      "icon": {
-        "size": "12px"
-      }
-    }
-  },
-  "variantSquareSizeLarge": {
-    "enabled": {
-      "icon": {
-        "size": "14px"
-      }
-    }
-  },
-  "variantGhostSizeMedium": {
-    "enabled": {
-      "icon": {
-        "size": "14px"
-      }
-    }
-  },
-  "variantGhostSizeLarge": {
-    "enabled": {
-      "icon": {
-        "size": "18px"
       }
     }
   }