@seed-design/css 1.0.5 → 1.0.6

package/package.json

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

package/recipes/app-bar-main.css

@@ -13,15 +13,18 @@
 }
 .seed-app-bar-main__title--layout_titleOnly {
     font-size: var(--seed-font-size-t6-static);
-    font-weight: var(--seed-font-weight-bold)
+    font-weight: var(--seed-font-weight-bold);
+    line-height: var(--seed-line-height-t6-static)
 }
 .seed-app-bar-main__title--layout_withSubtitle {
     font-size: var(--seed-font-size-t5-static);
-    font-weight: var(--seed-font-weight-bold)
+    font-weight: var(--seed-font-weight-bold);
+    line-height: var(--seed-line-height-t5-static)
 }
 .seed-app-bar-main__subtitle--layout_withSubtitle {
     font-size: var(--seed-font-size-t2-static);
-    font-weight: var(--seed-font-weight-regular)
+    font-weight: var(--seed-font-weight-regular);
+    line-height: var(--seed-line-height-t2-static)
 }
 .seed-app-bar-main__root--theme_cupertino {
     position: absolute;

package/recipes/app-bar.css

@@ -50,8 +50,8 @@
     margin-right: calc(-1 * (44px - 24px) / 2);
 }
 .seed-app-bar__icon--theme_cupertino {
-    width: 24px;
-    height: 24px;
+    width: var(--seed-icon-size, 24px);
+    height: var(--seed-icon-size, 24px);
 }
 .seed-app-bar__root--theme_android {
     height: calc(56px + var(--seed-safe-area-top));
@@ -69,8 +69,8 @@
     margin-right: calc(-1 * (44px - 24px) / 2);
 }
 .seed-app-bar__icon--theme_android {
-    width: 24px;
-    height: 24px;
+    width: var(--seed-icon-size, 24px);
+    height: var(--seed-icon-size, 24px);
 }
 .seed-app-bar__left--theme_android {
     padding-right: 16px;
@@ -240,13 +240,13 @@
     background-color: var(--seed-color-bg-layer-default);
 }
 .seed-app-bar__icon--tone_layer {
-    color: var(--seed-color-fg-neutral);
+    color: var(--seed-icon-color, var(--seed-color-fg-neutral));
 }
 .seed-app-bar__root--tone_transparent:before {
     background-color: #00000000;
 }
 .seed-app-bar__icon--tone_transparent {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-icon-color, var(--seed-color-palette-static-white));
 }
 .seed-app-bar__root--divider_true:before {
     box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);

package/recipes/article.css

@@ -0,0 +1,12 @@
+.seed-article {
+    user-select: text;
+    word-break: normal;
+    overflow-wrap: break-word;
+    line-break: strict;
+}
+.seed-article:lang(ko) {
+    word-break: keep-all;
+}
+.seed-article::selection {
+    background-color: var(--seed-color-palette-carrot-300);
+}

package/recipes/article.d.ts

@@ -0,0 +1,19 @@
+declare interface ArticleVariant {
+  
+}
+
+declare type ArticleVariantMap = {
+  [key in keyof ArticleVariant]: Array<ArticleVariant[key]>;
+};
+
+export declare type ArticleVariantProps = Partial<ArticleVariant>;
+
+export declare const articleVariantMap: ArticleVariantMap;
+
+export declare const article: ((
+  props?: ArticleVariantProps,
+) => string) & {
+  splitVariantProps: <T extends ArticleVariantProps>(
+    props: T,
+  ) => [ArticleVariantProps, Omit<T, keyof ArticleVariantProps>];
+}

package/recipes/article.mjs

@@ -0,0 +1,22 @@
+import './article.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const articleVariantMap = {};
+
+export const articleVariantKeys = Object.keys(articleVariantMap);
+
+export function article(props) {
+  return createClassName(
+    "seed-article",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(article, { splitVariantProps: (props) => splitVariantProps(props, articleVariantMap) });
+
+// @recipe(seed): article

package/recipes/switch-mark.css

@@ -5,14 +5,15 @@
     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;
+    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
 }
 .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);
+    transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
+    transform: scale(0.8);
 }
 .seed-switch-mark__root--tone_neutral:is(:checked, [data-checked]) {
     background: var(--seed-color-bg-neutral-inverted);
@@ -42,7 +43,7 @@
     height: 12px;
 }
 .seed-switch-mark__thumb--size_16:is(:checked, [data-checked]) {
-    transform: translateX(calc(26px - 16px));
+    transform: scale(1) translateX(calc(26px - 16px));
 }
 .seed-switch-mark__root--size_24 {
     min-inline-size: 38px;
@@ -52,10 +53,9 @@
 .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));
+    transform: scale(1) translateX(calc(38px - 24px));
 }
 .seed-switch-mark__root--size_32 {
     min-inline-size: 52px;
@@ -65,8 +65,7 @@
 .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));
+    transform: scale(1) translateX(calc(52px - 32px));
 }

package/recipes/switch.css

@@ -14,6 +14,7 @@
 .seed-switch__label {
     font-weight: var(--seed-font-weight-medium);
     color: var(--seed-color-fg-neutral);
+    transition: opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
 }
 .seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
     opacity: 0.58;

package/recipes/tag-group-item.css

@@ -0,0 +1,50 @@
+.seed-tag-group-item {
+    display: flex;
+    align-items: center;
+    gap: var(--seed-dimension-x0_5)
+}
+.seed-tag-group-item--size_t2 {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    --seed-icon-size: var(--seed-dimension-x3);
+    --seed-prefix-icon-size: var(--seed-dimension-x3);
+    --seed-suffix-icon-size: var(--seed-dimension-x3)
+}
+.seed-tag-group-item--size_t3 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    --seed-icon-size: 13px;
+    --seed-prefix-icon-size: 13px;
+    --seed-suffix-icon-size: 13px
+}
+.seed-tag-group-item--size_t4 {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    --seed-icon-size: var(--seed-dimension-x3_5);
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5)
+}
+.seed-tag-group-item--weight_regular {
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-tag-group-item--weight_bold {
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-tag-group-item--tone_neutralSubtle {
+    color: var(--seed-color-fg-neutral-subtle);
+    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-tag-group-item--tone_neutral {
+    color: var(--seed-color-fg-neutral);
+    --seed-icon-color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral)
+}
+.seed-tag-group-item--tone_brand {
+    color: var(--seed-color-fg-brand);
+    --seed-icon-color: var(--seed-color-fg-brand);
+    --seed-prefix-icon-color: var(--seed-color-fg-brand);
+    --seed-suffix-icon-color: var(--seed-color-fg-brand)
+}

package/recipes/tag-group-item.d.ts

@@ -0,0 +1,30 @@
+declare interface TagGroupItemVariant {
+  /**
+  * @default "t2"
+  */
+  size: "t2" | "t3" | "t4";
+/**
+  * @default "regular"
+  */
+  weight: "regular" | "bold";
+/**
+  * @default "neutralSubtle"
+  */
+  tone: "neutralSubtle" | "neutral" | "brand";
+}
+
+declare type TagGroupItemVariantMap = {
+  [key in keyof TagGroupItemVariant]: Array<TagGroupItemVariant[key]>;
+};
+
+export declare type TagGroupItemVariantProps = Partial<TagGroupItemVariant>;
+
+export declare const tagGroupItemVariantMap: TagGroupItemVariantMap;
+
+export declare const tagGroupItem: ((
+  props?: TagGroupItemVariantProps,
+) => string) & {
+  splitVariantProps: <T extends TagGroupItemVariantProps>(
+    props: T,
+  ) => [TagGroupItemVariantProps, Omit<T, keyof TagGroupItemVariantProps>];
+}

package/recipes/tag-group-item.mjs

@@ -0,0 +1,41 @@
+import './tag-group-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "size": "t2",
+  "weight": "regular",
+  "tone": "neutralSubtle"
+};
+
+const compoundVariants = [];
+
+export const tagGroupItemVariantMap = {
+  "size": [
+    "t2",
+    "t3",
+    "t4"
+  ],
+  "weight": [
+    "regular",
+    "bold"
+  ],
+  "tone": [
+    "neutralSubtle",
+    "neutral",
+    "brand"
+  ]
+};
+
+export const tagGroupItemVariantKeys = Object.keys(tagGroupItemVariantMap);
+
+export function tagGroupItem(props) {
+  return createClassName(
+    "seed-tag-group-item",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(tagGroupItem, { splitVariantProps: (props) => splitVariantProps(props, tagGroupItemVariantMap) });
+
+// @recipe(seed): tag-group-item

package/recipes/tag-group-tag.css

@@ -0,0 +1,44 @@
+.seed-tag-group-tag {
+    display: flex;
+    align-items: center;
+    gap: var(--seed-dimension-x0_5)
+}
+.seed-tag-group-tag--size_t2 {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    --seed-prefix-icon-size: var(--seed-dimension-x3);
+    --seed-suffix-icon-size: var(--seed-dimension-x3)
+}
+.seed-tag-group-tag--size_t3 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    --seed-prefix-icon-size: 13px;
+    --seed-suffix-icon-size: 13px
+}
+.seed-tag-group-tag--size_t4 {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5)
+}
+.seed-tag-group-tag--weight_regular {
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-tag-group-tag--weight_bold {
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-tag-group-tag--tone_neutralSubtle {
+    color: var(--seed-color-fg-neutral-subtle);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-tag-group-tag--tone_neutral {
+    color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral)
+}
+.seed-tag-group-tag--tone_brand {
+    color: var(--seed-color-fg-brand);
+    --seed-prefix-icon-color: var(--seed-color-fg-brand);
+    --seed-suffix-icon-color: var(--seed-color-fg-brand)
+}

package/recipes/tag-group-tag.d.ts

@@ -0,0 +1,30 @@
+declare interface TagGroupTagVariant {
+  /**
+  * @default "t2"
+  */
+  size: "t2" | "t3" | "t4";
+/**
+  * @default "regular"
+  */
+  weight: "regular" | "bold";
+/**
+  * @default "neutralSubtle"
+  */
+  tone: "neutralSubtle" | "neutral" | "brand";
+}
+
+declare type TagGroupTagVariantMap = {
+  [key in keyof TagGroupTagVariant]: Array<TagGroupTagVariant[key]>;
+};
+
+export declare type TagGroupTagVariantProps = Partial<TagGroupTagVariant>;
+
+export declare const tagGroupTagVariantMap: TagGroupTagVariantMap;
+
+export declare const tagGroupTag: ((
+  props?: TagGroupTagVariantProps,
+) => string) & {
+  splitVariantProps: <T extends TagGroupTagVariantProps>(
+    props: T,
+  ) => [TagGroupTagVariantProps, Omit<T, keyof TagGroupTagVariantProps>];
+}

package/recipes/tag-group-tag.mjs

@@ -0,0 +1,41 @@
+import './tag-group-tag.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "size": "t2",
+  "weight": "regular",
+  "tone": "neutralSubtle"
+};
+
+const compoundVariants = [];
+
+export const tagGroupTagVariantMap = {
+  "size": [
+    "t2",
+    "t3",
+    "t4"
+  ],
+  "weight": [
+    "regular",
+    "bold"
+  ],
+  "tone": [
+    "neutralSubtle",
+    "neutral",
+    "brand"
+  ]
+};
+
+export const tagGroupTagVariantKeys = Object.keys(tagGroupTagVariantMap);
+
+export function tagGroupTag(props) {
+  return createClassName(
+    "seed-tag-group-tag",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(tagGroupTag, { splitVariantProps: (props) => splitVariantProps(props, tagGroupTagVariantMap) });
+
+// @recipe(seed): tag-group-tag

package/recipes/tag-group.css

@@ -0,0 +1,23 @@
+.seed-tag-group__root {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap
+}
+.seed-tag-group__separator {
+    color: var(--seed-color-palette-gray-600);
+    font-weight: var(--seed-font-weight-regular);
+    white-space: pre;
+    user-select: none
+}
+.seed-tag-group__separator--size_t2 {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2)
+}
+.seed-tag-group__separator--size_t3 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-tag-group__separator--size_t4 {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}

package/recipes/tag-group.d.ts

@@ -0,0 +1,24 @@
+declare interface TagGroupVariant {
+  /**
+  * @default "t2"
+  */
+  size: "t2" | "t3" | "t4";
+}
+
+declare type TagGroupVariantMap = {
+  [key in keyof TagGroupVariant]: Array<TagGroupVariant[key]>;
+};
+
+export declare type TagGroupVariantProps = Partial<TagGroupVariant>;
+
+export declare type TagGroupSlotName = "root" | "separator";
+
+export declare const tagGroupVariantMap: TagGroupVariantMap;
+
+export declare const tagGroup: ((
+  props?: TagGroupVariantProps,
+) => Record<TagGroupSlotName, string>) & {
+  splitVariantProps: <T extends TagGroupVariantProps>(
+    props: T,
+  ) => [TagGroupVariantProps, Omit<T, keyof TagGroupVariantProps>];
+}

package/recipes/tag-group.mjs

@@ -0,0 +1,44 @@
+import './tag-group.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const tagGroupSlotNames = [
+  [
+    "root",
+    "seed-tag-group__root"
+  ],
+  [
+    "separator",
+    "seed-tag-group__separator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "t2"
+};
+
+const compoundVariants = [];
+
+export const tagGroupVariantMap = {
+  "size": [
+    "t2",
+    "t3",
+    "t4"
+  ]
+};
+
+export const tagGroupVariantKeys = Object.keys(tagGroupVariantMap);
+
+export function tagGroup(props) {
+  return Object.fromEntries(
+    tagGroupSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(tagGroup, { splitVariantProps: (props) => splitVariantProps(props, tagGroupVariantMap) });
+
+// @recipe(seed): tag-group

package/recipes/text.css

@@ -1,15 +1,18 @@
 .seed-text {
     margin: 0;
-    text-align: var(--seed-text-align);
     color: var(--seed-text-color);
     font-size: var(--seed-font-size);
-    line-height: var(--seed-line-height);
     font-weight: var(--seed-font-weight);
+    line-height: var(--seed-line-height);
+    text-align: var(--seed-text-align);
+    user-select: var(--seed-user-select);
     --seed-text-color: inherit;
     --seed-font-size: inherit;
-    --seed-line-height: inherit;
     --seed-font-weight: inherit;
+    --seed-line-height: inherit;
     --seed-text-align: inherit;
+    --seed-user-select: inherit;
+    --seed-white-space: inherit;
     --seed-max-lines: initial
 }
 .seed-text--textStyle_screenTitle {
@@ -146,7 +149,7 @@
     overflow: unset;
     min-width: unset;
     text-overflow: unset;
-    white-space: unset;
+    white-space: var(--seed-white-space);
     -webkit-line-clamp: unset
 }
 .seed-text--maxLines_single {
@@ -171,4 +174,7 @@
 }
 .seed-text--textDecorationLine_line-through {
     text-decoration-line: line-through
+}
+.seed-text--textDecorationLine_underline {
+    text-decoration-line: underline
 }

package/recipes/text.d.ts

@@ -10,7 +10,7 @@ declare interface TextVariant {
 /**
   * @default "none"
   */
-  textDecorationLine: "none" | "line-through";
+  textDecorationLine: "none" | "line-through" | "underline";
 }
 
 declare type TextVariantMap = {

package/recipes/text.mjs

@@ -45,7 +45,8 @@ export const textVariantMap = {
   ],
   "textDecorationLine": [
     "none",
-    "line-through"
+    "line-through",
+    "underline"
   ]
 };
 

package/vars/component/index.d.ts

@@ -50,6 +50,8 @@ 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";
+export { vars as tagGroupItem } from "./tag-group-item";
+export { vars as tagGroup } from "./tag-group";
 export { vars as textButton } from "./text-button";
 export { vars as textField } from "./text-field";
 export { vars as toggleButton } from "./toggle-button";

package/vars/component/index.mjs

@@ -50,6 +50,8 @@ 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";
+export { vars as tagGroupItem } from "./tag-group-item.mjs";
+export { vars as tagGroup } from "./tag-group.mjs";
 export { vars as textButton } from "./text-button.mjs";
 export { vars as textField } from "./text-field.mjs";
 export { vars as toggleButton } from "./toggle-button.mjs";

package/vars/component/switch-mark.d.ts

@@ -2,16 +2,34 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
+        "cornerRadius": "var(--seed-radius-full)",
         "color": "var(--seed-color-palette-gray-600)",
-        "cornerRadius": "var(--seed-radius-full)"
+        "colorDuration": "var(--seed-duration-d1)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "colorDelay": "20ms"
       },
       "thumb": {
-        "cornerRadius": "var(--seed-radius-full)"
+        "cornerRadius": "var(--seed-radius-full)",
+        "scale": "0.8",
+        "scaleDuration": "var(--seed-duration-d3)",
+        "scaleTimingFunction": "var(--seed-timing-function-easing)",
+        "translateDuration": "var(--seed-duration-d3)",
+        "translateTimingFunction": "var(--seed-timing-function-easing)",
+        "colorDuration": "var(--seed-duration-d1)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "colorDelay": "20ms"
       }
     },
     "disabled": {
       "root": {
-        "opacity": "0.38"
+        "opacity": "0.38",
+        "opacityDuration": "var(--seed-duration-d1)",
+        "opacityTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "selected": {
+      "thumb": {
+        "scale": "1"
       }
     }
   },
@@ -59,8 +77,7 @@ export declare const vars: {
       },
       "thumb": {
         "height": "26px",
-        "width": "26px",
-        "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
+        "width": "26px"
       }
     }
   },
@@ -74,8 +91,7 @@ export declare const vars: {
       },
       "thumb": {
         "height": "20px",
-        "width": "20px",
-        "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
+        "width": "20px"
       }
     }
   },