@seed-design/css 0.2.0 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/action-button.d.ts

@@ -1,14 +1,14 @@
 declare interface ActionButtonVariant {
   /**
-  * @default brandSolid
+  * @default "brandSolid"
   */
   variant: "brandSolid" | "neutralSolid" | "neutralWeak" | "criticalSolid" | "brandOutline" | "neutralOutline" | "ghost";
 /**
-  * @default medium
+  * @default "medium"
   */
   size: "xsmall" | "small" | "medium" | "large";
 /**
-  * @default withText
+  * @default "withText"
   */
   layout: "withText" | "iconOnly";
 }

package/recipes/action-chip.d.ts

@@ -1,10 +1,10 @@
 declare interface ActionChipVariant {
   /**
-  * @default medium
+  * @default "medium"
   */
   size: "medium" | "small";
 /**
-  * @default withText
+  * @default "withText"
   */
   layout: "withText" | "iconOnly";
 }

package/recipes/action-sheet-item.d.ts

@@ -1,6 +1,6 @@
 declare interface ActionSheetItemVariant {
   /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "critical";
 }

package/recipes/app-bar-main.d.ts

@@ -1,18 +1,18 @@
 declare interface AppBarMainVariant {
   /**
-  * @default titleOnly
+  * @default "titleOnly"
   */
   layout: "titleOnly" | "withSubtitle";
 /**
-  * @default cupertino
+  * @default "cupertino"
   */
   theme: "cupertino" | "android";
 /**
-  * @default slideFromRightIOS
+  * @default "slideFromRightIOS"
   */
   transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid";
 /**
-  * @default layer
+  * @default "layer"
   */
   tone: "layer" | "transparent";
 }

package/recipes/app-bar.d.ts

@@ -1,14 +1,14 @@
 declare interface AppBarVariant {
   /**
-  * @default cupertino
+  * @default "cupertino"
   */
   theme: "cupertino" | "android";
 /**
-  * @default slideFromRightIOS
+  * @default "slideFromRightIOS"
   */
   transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid";
 /**
-  * @default layer
+  * @default "layer"
   */
   tone: "layer" | "transparent";
 /**

package/recipes/app-screen.d.ts

@@ -1,18 +1,18 @@
 declare interface AppScreenVariant {
   /**
-  * @default cupertino
+  * @default "cupertino"
   */
   theme: "cupertino" | "android";
 /**
-  * @default slideFromRightIOS
+  * @default "slideFromRightIOS"
   */
   transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid";
 /**
-  * @default appBar
+  * @default "appBar"
   */
   layerOffsetTop: "none" | "safeArea" | "appBar";
 /**
-  * @default none
+  * @default "none"
   */
   layerOffsetBottom: "none" | "safeArea";
 }

package/recipes/avatar.d.ts

@@ -4,7 +4,7 @@ declare interface AvatarVariant {
   */
   size: "20" | "24" | "36" | "42" | "48" | "64" | "80" | "96" | "108";
 /**
-  * @default none
+  * @default "none"
   */
   badgeMask: "none" | "circle" | "flower" | "shield";
 }

package/recipes/badge.d.ts

@@ -1,14 +1,14 @@
 declare interface BadgeVariant {
   /**
-  * @default medium
+  * @default "medium"
   */
   size: "medium" | "large";
 /**
-  * @default solid
+  * @default "solid"
   */
   variant: "weak" | "solid" | "outline";
 /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "brand" | "informative" | "positive" | "warning" | "critical";
 }

package/recipes/bottom-sheet.d.ts

@@ -1,6 +1,6 @@
 declare interface BottomSheetVariant {
   /**
-  * @default left
+  * @default "left"
   */
   headerAlign: "left" | "center";
 }

package/recipes/callout.d.ts

@@ -1,6 +1,6 @@
 declare interface CalloutVariant {
   /**
-  * @default neutral
+  * @default "neutral"
   */
   tone: "neutral" | "informative" | "warning" | "critical" | "magic";
 }

package/recipes/checkbox.css

@@ -11,107 +11,21 @@
 .seed-checkbox__root:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
-.seed-checkbox__control {
-    position: relative;
-    box-sizing: border-box;
-    flex-shrink: 0;
-}
-.seed-checkbox__icon {
-    display: none;
-    content: "";
-    position: absolute;
-    margin: auto;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    text-align: center;
-    overflow: initial;
-}
 .seed-checkbox__label {
     color: var(--seed-color-fg-neutral);
 }
+.seed-checkbox__label:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-checkbox__label--weight_default {
     font-weight: var(--seed-font-weight-regular);
 }
 .seed-checkbox__label--weight_stronger {
     font-weight: var(--seed-font-weight-bold);
 }
-.seed-checkbox__control--variant_square {
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--seed-color-stroke-neutral-weak);
-}
-.seed-checkbox__control--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: var(--seed-color-bg-brand-solid);
-    border-width: 0;
-}
-.seed-checkbox__control--variant_square:is(:active, [data-active]) {
-    background: var(--seed-color-bg-layer-default-pressed);
-}
-.seed-checkbox__control--variant_square:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: var(--seed-color-bg-brand-solid-pressed);
-}
-.seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]) {
-    background: var(--seed-color-bg-disabled);
-    border-color: var(--seed-color-stroke-neutral-muted);
-}
-.seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
-    background: var(--seed-color-bg-disabled);
-}
-.seed-checkbox__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    display: block;
-    color: var(--seed-color-palette-static-white);
-}
-.seed-checkbox__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    display: block;
-    color: var(--seed-color-fg-disabled);
-}
-.seed-checkbox__label--variant_square:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-checkbox__control--variant_ghost {
-    background: none;
-}
-.seed-checkbox__control--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: none;
-}
-.seed-checkbox__control--variant_ghost:is(:active, [data-active]) {
-    background: var(--seed-color-bg-layer-default-pressed);
-}
-.seed-checkbox__control--variant_ghost:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: var(--seed-color-palette-carrot-200);
-}
-.seed-checkbox__control--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: none;
-}
-.seed-checkbox__control--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
-    background: none;
-}
-.seed-checkbox__icon--variant_ghost {
-    display: block;
-    color: var(--seed-color-fg-placeholder);
-}
-.seed-checkbox__icon--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    color: var(--seed-color-fg-brand);
-}
-.seed-checkbox__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-checkbox__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-checkbox__label--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
 .seed-checkbox__root--size_large {
     min-height: var(--seed-dimension-x9);
-}
-.seed-checkbox__control--size_large {
-    border-radius: var(--seed-radius-r1);
-    width: var(--seed-dimension-x6);
-    height: var(--seed-dimension-x6);
-    margin: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2) 0;
+    --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
 }
 .seed-checkbox__label--size_large {
     font-size: var(--seed-font-size-t5);
@@ -120,31 +34,10 @@
 }
 .seed-checkbox__root--size_medium {
     min-height: var(--seed-dimension-x8);
-}
-.seed-checkbox__control--size_medium {
-    border-radius: var(--seed-radius-r1);
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
-    margin: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2) 0;
+    --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
 }
 .seed-checkbox__label--size_medium {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     margin-block-start: calc(16px - 0.59375rem);
-}
-.seed-checkbox__icon--size_medium-variant_ghost {
-    width: 14px;
-    height: 14px;
-}
-.seed-checkbox__icon--size_large-variant_ghost {
-    width: 18px;
-    height: 18px;
-}
-.seed-checkbox__icon--size_medium-variant_square {
-    width: 12px;
-    height: 12px;
-}
-.seed-checkbox__icon--size_large-variant_square {
-    width: 14px;
-    height: 14px;
 }

package/recipes/checkbox.d.ts

@@ -1,14 +1,10 @@
 declare interface CheckboxVariant {
   /**
-  * @default default
+  * @default "default"
   */
   weight: "default" | "stronger";
 /**
-  * @default square
-  */
-  variant: "square" | "ghost";
-/**
-  * @default medium
+  * @default "medium"
   */
   size: "large" | "medium";
 }
@@ -19,7 +15,7 @@ declare type CheckboxVariantMap = {
 
 export declare type CheckboxVariantProps = Partial<CheckboxVariant>;
 
-export declare type CheckboxSlotName = "root" | "control" | "icon" | "label";
+export declare type CheckboxSlotName = "root" | "label";
 
 export declare const checkboxVariantMap: CheckboxVariantMap;
 

package/recipes/checkbox.mjs

@@ -6,14 +6,6 @@ const checkboxSlotNames = [
     "root",
     "seed-checkbox__root"
   ],
-  [
-    "control",
-    "seed-checkbox__control"
-  ],
-  [
-    "icon",
-    "seed-checkbox__icon"
-  ],
   [
     "label",
     "seed-checkbox__label"
@@ -22,38 +14,16 @@ const checkboxSlotNames = [
 
 const defaultVariant = {
   "size": "medium",
-  "variant": "square",
   "weight": "default"
 };
 
-const compoundVariants = [
-  {
-    "size": "medium",
-    "variant": "ghost"
-  },
-  {
-    "size": "large",
-    "variant": "ghost"
-  },
-  {
-    "size": "medium",
-    "variant": "square"
-  },
-  {
-    "size": "large",
-    "variant": "square"
-  }
-];
+const compoundVariants = [];
 
 export const checkboxVariantMap = {
   "weight": [
     "default",
     "stronger"
   ],
-  "variant": [
-    "square",
-    "ghost"
-  ],
   "size": [
     "large",
     "medium"

package/recipes/checkmark.css

@@ -0,0 +1,105 @@
+.seed-checkmark__root {
+    position: relative;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    margin-top: var(--checkmark-margin-top, 0);
+}
+.seed-checkmark__icon {
+    display: none;
+    content: "";
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    text-align: center;
+    overflow: initial;
+}
+.seed-checkmark__root--variant_square {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--seed-color-stroke-neutral-weak);
+}
+.seed-checkmark__root--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: var(--seed-color-bg-brand-solid);
+    border-width: 0;
+}
+.seed-checkmark__root--variant_square:is(:active, [data-active]) {
+    background: var(--seed-color-bg-layer-default-pressed);
+}
+.seed-checkmark__root--variant_square:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: var(--seed-color-bg-brand-solid-pressed);
+}
+.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--seed-color-bg-disabled);
+    border-color: var(--seed-color-stroke-neutral-muted);
+}
+.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
+    background: var(--seed-color-bg-disabled);
+}
+.seed-checkmark__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    display: block;
+    color: var(--seed-color-palette-static-white);
+}
+.seed-checkmark__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    display: block;
+    color: var(--seed-color-fg-disabled);
+}
+.seed-checkmark__root--variant_ghost {
+    background: none;
+}
+.seed-checkmark__root--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: none;
+}
+.seed-checkmark__root--variant_ghost:is(:active, [data-active]) {
+    background: var(--seed-color-bg-layer-default-pressed);
+}
+.seed-checkmark__root--variant_ghost:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: var(--seed-color-palette-carrot-200);
+}
+.seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: none;
+}
+.seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
+    background: none;
+}
+.seed-checkmark__icon--variant_ghost {
+    display: block;
+    color: var(--seed-color-fg-placeholder);
+}
+.seed-checkmark__icon--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    color: var(--seed-color-fg-brand);
+}
+.seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-checkmark__root--size_large {
+    border-radius: var(--seed-radius-r1);
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+}
+.seed-checkmark__root--size_medium {
+    border-radius: var(--seed-radius-r1);
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+.seed-checkmark__icon--size_medium-variant_ghost {
+    width: 14px;
+    height: 14px;
+}
+.seed-checkmark__icon--size_large-variant_ghost {
+    width: 18px;
+    height: 18px;
+}
+.seed-checkmark__icon--size_medium-variant_square {
+    width: 12px;
+    height: 12px;
+}
+.seed-checkmark__icon--size_large-variant_square {
+    width: 14px;
+    height: 14px;
+}

package/recipes/checkmark.d.ts

@@ -0,0 +1,28 @@
+declare interface CheckmarkVariant {
+  /**
+  * @default "square"
+  */
+  variant: "square" | "ghost";
+/**
+  * @default "medium"
+  */
+  size: "large" | "medium";
+}
+
+declare type CheckmarkVariantMap = {
+  [key in keyof CheckmarkVariant]: Array<CheckmarkVariant[key]>;
+};
+
+export declare type CheckmarkVariantProps = Partial<CheckmarkVariant>;
+
+export declare type CheckmarkSlotName = "root" | "icon";
+
+export declare const checkmarkVariantMap: CheckmarkVariantMap;
+
+export declare const checkmark: ((
+  props?: CheckmarkVariantProps,
+) => Record<CheckmarkSlotName, string>) & {
+  splitVariantProps: <T extends CheckmarkVariantProps>(
+    props: T,
+  ) => [CheckmarkVariantProps, Omit<T, keyof CheckmarkVariantProps>];
+}

package/recipes/checkmark.mjs

@@ -0,0 +1,65 @@
+import './checkmark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const checkmarkSlotNames = [
+  [
+    "root",
+    "seed-checkmark__root"
+  ],
+  [
+    "icon",
+    "seed-checkmark__icon"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "variant": "square"
+};
+
+const compoundVariants = [
+  {
+    "size": "medium",
+    "variant": "ghost"
+  },
+  {
+    "size": "large",
+    "variant": "ghost"
+  },
+  {
+    "size": "medium",
+    "variant": "square"
+  },
+  {
+    "size": "large",
+    "variant": "square"
+  }
+];
+
+export const checkmarkVariantMap = {
+  "variant": [
+    "square",
+    "ghost"
+  ],
+  "size": [
+    "large",
+    "medium"
+  ]
+};
+
+export const checkmarkVariantKeys = Object.keys(checkmarkVariantMap);
+
+export function checkmark(props) {
+  return Object.fromEntries(
+    checkmarkSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(checkmark, { splitVariantProps: (props) => splitVariantProps(props, checkmarkVariantMap) });
+
+// @recipe(seed): checkmark

package/recipes/chip-tabs.css

@@ -46,18 +46,31 @@
     white-space: nowrap;
     font-family: inherit;
     border-radius: var(--seed-radius-full);
-    padding: var(--seed-dimension-x2) var(--seed-dimension-x3_5);
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    font-weight: var(--seed-font-weight-medium);
+}
+.seed-chip-tabs__list--size_medium {
+    gap: 8px;
+}
+.seed-chip-tabs__trigger--size_medium {
     min-height: 36px;
     font-size: var(--seed-font-size-t4);
-    font-weight: var(--seed-font-weight-bold);
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
 }
-.seed-chip-tabs__list--variant_neutralSolid {
-    gap: 0px;
+.seed-chip-tabs__list--size_large {
+    gap: 8px;
+}
+.seed-chip-tabs__trigger--size_large {
+    min-height: 40px;
+    font-size: var(--seed-font-size-t4);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
 }
 .seed-chip-tabs__trigger--variant_neutralSolid {
-    background-color: transparent;
+    background-color: var(--seed-color-bg-neutral-weak);
     color: var(--seed-color-fg-neutral);
-    font-weight: var(--seed-font-weight-bold);
 }
 .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]) {
     background-color: var(--seed-color-bg-neutral-inverted);
@@ -77,18 +90,37 @@
     background-color: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
 }
-.seed-chip-tabs__list--variant_brandSolid {
-    gap: 8px;
+.seed-chip-tabs__trigger--variant_neutralOutline {
+    background-color: transparent;
+    border: 1px solid var(--seed-color-stroke-neutral-muted);
+    color: var(--seed-color-fg-neutral);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]) {
+    background-color: var(--seed-color-bg-neutral-inverted);
+    border-color: transparent;
+    color: var(--seed-color-fg-neutral-inverted);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
+    background-color: var(--seed-color-bg-layer-default-pressed);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]):is(:active, [data-active]) {
+    background-color: var(--seed-color-bg-neutral-inverted-pressed);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+    color: var(--seed-color-fg-disabled);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
+    background-color: var(--seed-color-bg-disabled);
+    color: var(--seed-color-fg-disabled);
 }
 .seed-chip-tabs__trigger--variant_brandSolid {
     background-color: var(--seed-color-bg-neutral-weak);
     color: var(--seed-color-fg-neutral-muted);
-    font-weight: var(--seed-font-weight-medium);
 }
 .seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]) {
     background-color: var(--seed-color-bg-brand-solid);
     color: var(--seed-color-palette-static-white);
-    font-weight: var(--seed-font-weight-bold);
 }
 .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
     background-color: var(--seed-color-bg-neutral-weak-pressed);