@seed-design/lynx-css 0.0.0-alpha-20260622094810

package/recipes/switchmark.mjs

@@ -0,0 +1,90 @@
+import './switchmark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const switchmarkSlotNames = [
+  [
+    "root",
+    "seed-switchmark__root"
+  ],
+  [
+    "thumb",
+    "seed-switchmark__thumb"
+  ]
+];
+
+const defaultVariant = {
+  "tone": "brand",
+  "size": "32",
+  "checked": false,
+  "disabled": false
+};
+
+const compoundVariants = [
+  {
+    "tone": "brand",
+    "checked": true
+  },
+  {
+    "tone": "neutral",
+    "checked": true,
+    "disabled": false
+  },
+  {
+    "tone": "neutral",
+    "checked": true,
+    "disabled": true
+  },
+  {
+    "tone": "neutral",
+    "disabled": true
+  },
+  {
+    "size": "32",
+    "checked": true
+  },
+  {
+    "size": "24",
+    "checked": true
+  },
+  {
+    "size": "16",
+    "checked": true
+  }
+];
+
+export const switchmarkVariantMap = {
+  "tone": [
+    "neutral",
+    "brand"
+  ],
+  "size": [
+    "16",
+    "24",
+    "32"
+  ],
+  "checked": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+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): switchmark

package/recipes/tag-group-item.css

@@ -0,0 +1,34 @@
+.seed-tag-group-item__root {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0
+}
+.seed-tag-group-item__label {}
+.seed-tag-group-item__label--size_t2 {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2)
+}
+.seed-tag-group-item__label--size_t3 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-tag-group-item__label--size_t4 {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-tag-group-item__label--weight_regular {
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-tag-group-item__label--weight_bold {
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-tag-group-item__label--tone_neutralSubtle {
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-tag-group-item__label--tone_neutral {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-tag-group-item__label--tone_brand {
+    color: var(--seed-color-fg-brand)
+}

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

@@ -0,0 +1,32 @@
+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 type TagGroupItemSlotName = "root" | "label";
+
+export declare const tagGroupItemVariantMap: TagGroupItemVariantMap;
+
+export declare const tagGroupItem: ((
+  props?: TagGroupItemVariantProps,
+) => Record<TagGroupItemSlotName, string>) & {
+  splitVariantProps: <T extends TagGroupItemVariantProps>(
+    props: T,
+  ) => [TagGroupItemVariantProps, Omit<T, keyof TagGroupItemVariantProps>];
+}

package/recipes/tag-group-item.mjs

@@ -0,0 +1,55 @@
+import './tag-group-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const tagGroupItemSlotNames = [
+  [
+    "root",
+    "seed-tag-group-item__root"
+  ],
+  [
+    "label",
+    "seed-tag-group-item__label"
+  ]
+];
+
+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 Object.fromEntries(
+    tagGroupItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(tagGroupItem, { splitVariantProps: (props) => splitVariantProps(props, tagGroupItemVariantMap) });
+
+// @recipe(seed): tag-group-item

package/recipes/tag-group.css

@@ -0,0 +1,32 @@
+.seed-tag-group__root {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%
+}
+.seed-tag-group__separatorWrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0
+}
+.seed-tag-group__separator {
+    color: var(--seed-color-palette-gray-600);
+    font-weight: var(--seed-font-weight-regular);
+    margin-left: var(--seed-dimension-x0_5);
+    margin-right: var(--seed-dimension-x0_5);
+    flex-shrink: 0
+}
+.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" | "separatorWrapper" | "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,48 @@
+import './tag-group.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const tagGroupSlotNames = [
+  [
+    "root",
+    "seed-tag-group__root"
+  ],
+  [
+    "separatorWrapper",
+    "seed-tag-group__separatorWrapper"
+  ],
+  [
+    "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/vars/color/banner.d.ts

@@ -0,0 +1,10 @@
+export declare const blue = "var(--seed-color-banner-blue)";
+export declare const coolGray = "var(--seed-color-banner-cool-gray)";
+export declare const green = "var(--seed-color-banner-green)";
+export declare const orange = "var(--seed-color-banner-orange)";
+export declare const pink = "var(--seed-color-banner-pink)";
+export declare const purple = "var(--seed-color-banner-purple)";
+export declare const red = "var(--seed-color-banner-red)";
+export declare const teal = "var(--seed-color-banner-teal)";
+export declare const warmGray = "var(--seed-color-banner-warm-gray)";
+export declare const yellow = "var(--seed-color-banner-yellow)";

package/vars/color/banner.mjs

@@ -0,0 +1,10 @@
+export const blue = "var(--seed-color-banner-blue)";
+export const coolGray = "var(--seed-color-banner-cool-gray)";
+export const green = "var(--seed-color-banner-green)";
+export const orange = "var(--seed-color-banner-orange)";
+export const pink = "var(--seed-color-banner-pink)";
+export const purple = "var(--seed-color-banner-purple)";
+export const red = "var(--seed-color-banner-red)";
+export const teal = "var(--seed-color-banner-teal)";
+export const warmGray = "var(--seed-color-banner-warm-gray)";
+export const yellow = "var(--seed-color-banner-yellow)";

package/vars/color/bg.d.ts

@@ -0,0 +1,76 @@
+/** 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid) */
+export declare const brandSolid = "var(--seed-color-bg-brand-solid)";
+/** 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid-pressed) */
+export declare const brandSolidPressed = "var(--seed-color-bg-brand-solid-pressed)";
+/** 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak) */
+export declare const brandWeak = "var(--seed-color-bg-brand-weak)";
+/** 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak-pressed) */
+export declare const brandWeakPressed = "var(--seed-color-bg-brand-weak-pressed)";
+/** 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid) */
+export declare const criticalSolid = "var(--seed-color-bg-critical-solid)";
+/** 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid-pressed) */
+export declare const criticalSolidPressed = "var(--seed-color-bg-critical-solid-pressed)";
+/** 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak) */
+export declare const criticalWeak = "var(--seed-color-bg-critical-weak)";
+/** 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak-pressed) */
+export declare const criticalWeakPressed = "var(--seed-color-bg-critical-weak-pressed)";
+export declare const disabled = "var(--seed-color-bg-disabled)";
+/** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid) */
+export declare const informativeSolid = "var(--seed-color-bg-informative-solid)";
+/** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid-pressed) */
+export declare const informativeSolidPressed = "var(--seed-color-bg-informative-solid-pressed)";
+/** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak) */
+export declare const informativeWeak = "var(--seed-color-bg-informative-weak)";
+/** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak-pressed) */
+export declare const informativeWeakPressed = "var(--seed-color-bg-informative-weak-pressed)";
+/** 가장 낮은 0단계의 '대지'입니다. 화면 가장 깊은 곳에 위치하는 전체 배경색입니다. */
+export declare const layerBasement = "var(--seed-color-bg-layer-basement)";
+/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. */
+export declare const layerDefault = "var(--seed-color-bg-layer-default)";
+/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed) */
+export declare const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
+/** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. */
+export declare const layerFloating = "var(--seed-color-bg-layer-floating)";
+/** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed) */
+export declare const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
+export declare const magicWeak = "var(--seed-color-bg-magic-weak)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) */
+export declare const neutralInverted = "var(--seed-color-bg-neutral-inverted)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed) */
+export declare const neutralInvertedPressed = "var(--seed-color-bg-neutral-inverted-pressed)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid) */
+export declare const neutralSolid = "var(--seed-color-bg-neutral-solid)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted) */
+export declare const neutralSolidMuted = "var(--seed-color-bg-neutral-solid-muted)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed) */
+export declare const neutralSolidMutedPressed = "var(--seed-color-bg-neutral-solid-muted-pressed)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak) */
+export declare const neutralWeak = "var(--seed-color-bg-neutral-weak)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다. */
+export declare const neutralWeakAlpha = "var(--seed-color-bg-neutral-weak-alpha)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha-pressed) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다. */
+export declare const neutralWeakAlphaPressed = "var(--seed-color-bg-neutral-weak-alpha-pressed)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-pressed) */
+export declare const neutralWeakPressed = "var(--seed-color-bg-neutral-weak-pressed)";
+export declare const overlay = "var(--seed-color-bg-overlay)";
+export declare const overlayMuted = "var(--seed-color-bg-overlay-muted)";
+/** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid) */
+export declare const positiveSolid = "var(--seed-color-bg-positive-solid)";
+/** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid-pressed) */
+export declare const positiveSolidPressed = "var(--seed-color-bg-positive-solid-pressed)";
+/** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak) */
+export declare const positiveWeak = "var(--seed-color-bg-positive-weak)";
+/** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak-pressed) */
+export declare const positiveWeakPressed = "var(--seed-color-bg-positive-weak-pressed)";
+export declare const transparent = "var(--seed-color-bg-transparent)";
+export declare const transparentPressed = "var(--seed-color-bg-transparent-pressed)";
+export declare const transparentSelected = "var(--seed-color-bg-transparent-selected)";
+export declare const transparentSelectedPressed = "var(--seed-color-bg-transparent-selected-pressed)";
+/** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid) */
+export declare const warningSolid = "var(--seed-color-bg-warning-solid)";
+/** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid-pressed) */
+export declare const warningSolidPressed = "var(--seed-color-bg-warning-solid-pressed)";
+/** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak) */
+export declare const warningWeak = "var(--seed-color-bg-warning-weak)";
+/** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak-pressed) */
+export declare const warningWeakPressed = "var(--seed-color-bg-warning-weak-pressed)";

package/vars/color/bg.mjs

@@ -0,0 +1,42 @@
+export const brandSolid = "var(--seed-color-bg-brand-solid)";
+export const brandSolidPressed = "var(--seed-color-bg-brand-solid-pressed)";
+export const brandWeak = "var(--seed-color-bg-brand-weak)";
+export const brandWeakPressed = "var(--seed-color-bg-brand-weak-pressed)";
+export const criticalSolid = "var(--seed-color-bg-critical-solid)";
+export const criticalSolidPressed = "var(--seed-color-bg-critical-solid-pressed)";
+export const criticalWeak = "var(--seed-color-bg-critical-weak)";
+export const criticalWeakPressed = "var(--seed-color-bg-critical-weak-pressed)";
+export const disabled = "var(--seed-color-bg-disabled)";
+export const informativeSolid = "var(--seed-color-bg-informative-solid)";
+export const informativeSolidPressed = "var(--seed-color-bg-informative-solid-pressed)";
+export const informativeWeak = "var(--seed-color-bg-informative-weak)";
+export const informativeWeakPressed = "var(--seed-color-bg-informative-weak-pressed)";
+export const layerBasement = "var(--seed-color-bg-layer-basement)";
+export const layerDefault = "var(--seed-color-bg-layer-default)";
+export const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
+export const layerFloating = "var(--seed-color-bg-layer-floating)";
+export const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
+export const magicWeak = "var(--seed-color-bg-magic-weak)";
+export const neutralInverted = "var(--seed-color-bg-neutral-inverted)";
+export const neutralInvertedPressed = "var(--seed-color-bg-neutral-inverted-pressed)";
+export const neutralSolid = "var(--seed-color-bg-neutral-solid)";
+export const neutralSolidMuted = "var(--seed-color-bg-neutral-solid-muted)";
+export const neutralSolidMutedPressed = "var(--seed-color-bg-neutral-solid-muted-pressed)";
+export const neutralWeak = "var(--seed-color-bg-neutral-weak)";
+export const neutralWeakAlpha = "var(--seed-color-bg-neutral-weak-alpha)";
+export const neutralWeakAlphaPressed = "var(--seed-color-bg-neutral-weak-alpha-pressed)";
+export const neutralWeakPressed = "var(--seed-color-bg-neutral-weak-pressed)";
+export const overlay = "var(--seed-color-bg-overlay)";
+export const overlayMuted = "var(--seed-color-bg-overlay-muted)";
+export const positiveSolid = "var(--seed-color-bg-positive-solid)";
+export const positiveSolidPressed = "var(--seed-color-bg-positive-solid-pressed)";
+export const positiveWeak = "var(--seed-color-bg-positive-weak)";
+export const positiveWeakPressed = "var(--seed-color-bg-positive-weak-pressed)";
+export const transparent = "var(--seed-color-bg-transparent)";
+export const transparentPressed = "var(--seed-color-bg-transparent-pressed)";
+export const transparentSelected = "var(--seed-color-bg-transparent-selected)";
+export const transparentSelectedPressed = "var(--seed-color-bg-transparent-selected-pressed)";
+export const warningSolid = "var(--seed-color-bg-warning-solid)";
+export const warningSolidPressed = "var(--seed-color-bg-warning-solid-pressed)";
+export const warningWeak = "var(--seed-color-bg-warning-weak)";
+export const warningWeakPressed = "var(--seed-color-bg-warning-weak-pressed)";

package/vars/color/fg.d.ts

@@ -0,0 +1,30 @@
+/** 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. */
+export declare const brand = "var(--seed-color-fg-brand)";
+/** 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. (contrast) */
+export declare const brandContrast = "var(--seed-color-fg-brand-contrast)";
+/** 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. */
+export declare const critical = "var(--seed-color-fg-critical)";
+/** 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (contrast) */
+export declare const criticalContrast = "var(--seed-color-fg-critical-contrast)";
+export declare const disabled = "var(--seed-color-fg-disabled)";
+/** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. */
+export declare const informative = "var(--seed-color-fg-informative)";
+/** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (contrast) */
+export declare const informativeContrast = "var(--seed-color-fg-informative-contrast)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. */
+export declare const neutral = "var(--seed-color-fg-neutral)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) */
+export declare const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted) */
+export declare const neutralMuted = "var(--seed-color-fg-neutral-muted)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle) */
+export declare const neutralSubtle = "var(--seed-color-fg-neutral-subtle)";
+export declare const placeholder = "var(--seed-color-fg-placeholder)";
+/** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. */
+export declare const positive = "var(--seed-color-fg-positive)";
+/** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (contrast) */
+export declare const positiveContrast = "var(--seed-color-fg-positive-contrast)";
+/** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. */
+export declare const warning = "var(--seed-color-fg-warning)";
+/** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (contrast) */
+export declare const warningContrast = "var(--seed-color-fg-warning-contrast)";

package/vars/color/fg.mjs

@@ -0,0 +1,16 @@
+export const brand = "var(--seed-color-fg-brand)";
+export const brandContrast = "var(--seed-color-fg-brand-contrast)";
+export const critical = "var(--seed-color-fg-critical)";
+export const criticalContrast = "var(--seed-color-fg-critical-contrast)";
+export const disabled = "var(--seed-color-fg-disabled)";
+export const informative = "var(--seed-color-fg-informative)";
+export const informativeContrast = "var(--seed-color-fg-informative-contrast)";
+export const neutral = "var(--seed-color-fg-neutral)";
+export const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
+export const neutralMuted = "var(--seed-color-fg-neutral-muted)";
+export const neutralSubtle = "var(--seed-color-fg-neutral-subtle)";
+export const placeholder = "var(--seed-color-fg-placeholder)";
+export const positive = "var(--seed-color-fg-positive)";
+export const positiveContrast = "var(--seed-color-fg-positive-contrast)";
+export const warning = "var(--seed-color-fg-warning)";
+export const warningContrast = "var(--seed-color-fg-warning-contrast)";

package/vars/color/index.d.ts

@@ -0,0 +1,6 @@
+export * as palette from "./palette";
+export * as fg from "./fg";
+export * as bg from "./bg";
+export * as stroke from "./stroke";
+export * as mannerTemp from "./manner-temp";
+export * as banner from "./banner";

package/vars/color/index.mjs

@@ -0,0 +1,6 @@
+export * as palette from "./palette.mjs";
+export * as fg from "./fg.mjs";
+export * as bg from "./bg.mjs";
+export * as stroke from "./stroke.mjs";
+export * as mannerTemp from "./manner-temp/index.mjs";
+export * as banner from "./banner.mjs";

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

@@ -0,0 +1,10 @@
+export * as l1 from "./l1";
+export * as l10 from "./l10";
+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 l7 from "./l7";
+export * as l8 from "./l8";
+export * as l9 from "./l9";

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

@@ -0,0 +1,10 @@
+export * as l1 from "./l1.mjs";
+export * as l10 from "./l10.mjs";
+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 l7 from "./l7.mjs";
+export * as l8 from "./l8.mjs";
+export * as l9 from "./l9.mjs";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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