@seed-design/lynx-css 0.1.1-alpha.0

package/recipes/toggle-button.css

@@ -0,0 +1,167 @@
+.seed-toggle-button {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    flex-shrink: 0;
+}.seed-toggle-button__text {
+    font-family: inherit;
+}
+.seed-toggle-button {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+}
+.seed-toggle-button__text {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+    font-weight: var(--seed-font-weight-bold);
+}
+.seed-toggle-button--variant_brandSolid {
+    background: var(--seed-color-bg-brand-solid);
+    --track-color: var(--seed-color-palette-static-white-alpha-300);
+    --range-color: var(--seed-color-palette-static-white);
+}
+.seed-toggle-button__text--variant_brandSolid {
+    --track-color: var(--seed-color-palette-static-white-alpha-300);
+    --range-color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-palette-static-white);
+}
+.seed-toggle-button--variant_brandSolid:active {
+    background: var(--seed-color-bg-brand-solid-pressed);
+}
+.seed-toggle-button--variant_brandSolid[aria-pressed=true], .seed-toggle-button--variant_brandSolid.seed-toggle-button--pressed_true {
+    background: var(--seed-color-bg-neutral-weak);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-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-toggle-button__text--variant_brandSolid[aria-pressed=true], .seed-toggle-button__text--variant_brandSolid.seed-toggle-button__text--pressed_true {
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+    color: var(--seed-color-fg-neutral);
+}
+.seed-toggle-button--variant_brandSolid[aria-pressed=true]:active, .seed-toggle-button--variant_brandSolid.seed-toggle-button--pressed_true:active {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-toggle-button--variant_brandSolid.seed-toggle-button--disabled_true {
+    background: var(--seed-color-bg-disabled);
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+}
+.seed-toggle-button__text--variant_brandSolid.seed-toggle-button__text--disabled_true {
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+    color: var(--seed-color-fg-disabled);
+}
+.seed-toggle-button--variant_brandSolid.seed-toggle-button--loading_true {
+    background: var(--seed-color-bg-brand-solid-pressed);
+}
+.seed-toggle-button--variant_brandSolid[aria-pressed=true][data-loading], .seed-toggle-button--variant_brandSolid.seed-toggle-button--pressed_true[data-loading] {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-toggle-button--variant_brandSolid {
+    --seed-prefix-icon-color: var(--seed-color-palette-static-white);
+    --seed-suffix-icon-color: var(--seed-color-palette-static-white);
+}
+.seed-toggle-button__text--variant_brandSolid {
+    --seed-prefix-icon-color: var(--seed-color-palette-static-white);
+    --seed-suffix-icon-color: var(--seed-color-palette-static-white);
+}
+.seed-toggle-button--variant_neutralWeak {
+    background: var(--seed-color-bg-neutral-weak);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+}
+.seed-toggle-button__text--variant_neutralWeak {
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    color: var(--seed-color-fg-neutral);
+}
+.seed-toggle-button--variant_neutralWeak:active {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-toggle-button--variant_neutralWeak[aria-pressed=true], .seed-toggle-button--variant_neutralWeak.seed-toggle-button--pressed_true {
+    background: var(--seed-color-bg-neutral-weak);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-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-toggle-button__text--variant_neutralWeak[aria-pressed=true], .seed-toggle-button__text--variant_neutralWeak.seed-toggle-button__text--pressed_true {
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+    color: var(--seed-color-fg-neutral);
+}
+.seed-toggle-button--variant_neutralWeak[aria-pressed=true]:active, .seed-toggle-button--variant_neutralWeak.seed-toggle-button--pressed_true:active {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-toggle-button--variant_neutralWeak.seed-toggle-button--disabled_true {
+    background: var(--seed-color-bg-disabled);
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+}
+.seed-toggle-button__text--variant_neutralWeak.seed-toggle-button__text--disabled_true {
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+    color: var(--seed-color-fg-disabled);
+}
+.seed-toggle-button--variant_neutralWeak.seed-toggle-button--loading_true {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-toggle-button--variant_neutralWeak[aria-pressed=true][data-loading], .seed-toggle-button--variant_neutralWeak.seed-toggle-button--pressed_true[data-loading] {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-toggle-button--variant_neutralWeak {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+}
+.seed-toggle-button__text--variant_neutralWeak {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+}
+.seed-toggle-button--size_xsmall {
+    height: var(--seed-dimension-x8);
+    border-radius: var(--seed-radius-full);
+    gap: var(--seed-dimension-x1);
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
+    padding-top: var(--seed-dimension-x1_5);
+    padding-bottom: var(--seed-dimension-x1_5);
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+}
+.seed-toggle-button__text--size_xsmall {
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+}
+.seed-toggle-button--size_small {
+    height: var(--seed-dimension-x9);
+    border-radius: var(--seed-radius-full);
+    gap: var(--seed-dimension-x1);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+}
+.seed-toggle-button__text--size_small {
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+}

package/recipes/toggle-button.d.ts

@@ -0,0 +1,29 @@
+declare interface ToggleButtonVariant {
+  /**
+  * @default "brandSolid"
+  */
+  variant: "brandSolid" | "neutralWeak";
+/**
+  * @default "small"
+  */
+  size: "xsmall" | "small";
+  disabled?: boolean;
+  loading?: boolean;}
+
+declare type ToggleButtonVariantMap = {
+  [key in keyof ToggleButtonVariant]: Array<ToggleButtonVariant[key]>;
+};
+
+export declare type ToggleButtonVariantProps = Partial<ToggleButtonVariant>;
+
+export declare type ToggleButtonSlotName = "root" | "text";
+
+export declare const toggleButtonVariantMap: ToggleButtonVariantMap;
+
+export declare const toggleButton: ((
+  props?: ToggleButtonVariantProps,
+) => Record<ToggleButtonSlotName, string>) & {
+  splitVariantProps: <T extends ToggleButtonVariantProps>(
+    props: T,
+  ) => [ToggleButtonVariantProps, Omit<T, keyof ToggleButtonVariantProps>];
+}

package/recipes/toggle-button.layered.css

@@ -0,0 +1,239 @@
+@layer seed-components {
+  .seed-toggle-button {
+    border: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .seed-toggle-button__text {
+    font-family: inherit;
+  }
+
+  .seed-toggle-button {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+  }
+
+  .seed-toggle-button__text {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+  }
+
+  .seed-toggle-button__text {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+    font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-toggle-button--variant_brandSolid {
+    background: var(--seed-color-bg-brand-solid);
+    --track-color: var(--seed-color-palette-static-white-alpha-300);
+    --range-color: var(--seed-color-palette-static-white);
+  }
+
+  .seed-toggle-button__text--variant_brandSolid {
+    --track-color: var(--seed-color-palette-static-white-alpha-300);
+    --range-color: var(--seed-color-palette-static-white);
+  }
+
+  .seed-toggle-button__text--variant_brandSolid {
+    --track-color: var(--seed-color-palette-static-white-alpha-300);
+    --range-color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-palette-static-white);
+  }
+
+  .seed-toggle-button--variant_brandSolid:active {
+    background: var(--seed-color-bg-brand-solid-pressed);
+  }
+
+  .seed-toggle-button--variant_brandSolid[aria-pressed="true"], .seed-toggle-button--variant_brandSolid.seed-toggle-button--pressed_true {
+    background: var(--seed-color-bg-neutral-weak);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-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-toggle-button__text--variant_brandSolid[aria-pressed="true"], .seed-toggle-button__text--variant_brandSolid.seed-toggle-button__text--pressed_true {
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-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-toggle-button__text--variant_brandSolid[aria-pressed="true"], .seed-toggle-button__text--variant_brandSolid.seed-toggle-button__text--pressed_true {
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-toggle-button--variant_brandSolid[aria-pressed="true"]:active, .seed-toggle-button--variant_brandSolid.seed-toggle-button--pressed_true:active {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+  }
+
+  .seed-toggle-button--variant_brandSolid.seed-toggle-button--disabled_true {
+    background: var(--seed-color-bg-disabled);
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-toggle-button__text--variant_brandSolid.seed-toggle-button__text--disabled_true {
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-toggle-button__text--variant_brandSolid.seed-toggle-button__text--disabled_true {
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-toggle-button--variant_brandSolid.seed-toggle-button--loading_true {
+    background: var(--seed-color-bg-brand-solid-pressed);
+  }
+
+  .seed-toggle-button--variant_brandSolid[aria-pressed="true"][data-loading], .seed-toggle-button--variant_brandSolid.seed-toggle-button--pressed_true.seed-toggle-button--loading_true {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+  }
+
+  .seed-toggle-button--variant_brandSolid, .seed-toggle-button__text--variant_brandSolid {
+    --seed-prefix-icon-color: var(--seed-color-palette-static-white);
+    --seed-suffix-icon-color: var(--seed-color-palette-static-white);
+  }
+
+  .seed-toggle-button--variant_neutralWeak {
+    background: var(--seed-color-bg-neutral-weak);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-toggle-button__text--variant_neutralWeak {
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-toggle-button__text--variant_neutralWeak {
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-toggle-button--variant_neutralWeak:active {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+  }
+
+  .seed-toggle-button--variant_neutralWeak[aria-pressed="true"], .seed-toggle-button--variant_neutralWeak.seed-toggle-button--pressed_true {
+    background: var(--seed-color-bg-neutral-weak);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-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-toggle-button__text--variant_neutralWeak[aria-pressed="true"], .seed-toggle-button__text--variant_neutralWeak.seed-toggle-button__text--pressed_true {
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-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-toggle-button__text--variant_neutralWeak[aria-pressed="true"], .seed-toggle-button__text--variant_neutralWeak.seed-toggle-button__text--pressed_true {
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-toggle-button--variant_neutralWeak[aria-pressed="true"]:active, .seed-toggle-button--variant_neutralWeak.seed-toggle-button--pressed_true:active {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+  }
+
+  .seed-toggle-button--variant_neutralWeak.seed-toggle-button--disabled_true {
+    background: var(--seed-color-bg-disabled);
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-toggle-button__text--variant_neutralWeak.seed-toggle-button__text--disabled_true {
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-toggle-button__text--variant_neutralWeak.seed-toggle-button__text--disabled_true {
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-toggle-button--variant_neutralWeak.seed-toggle-button--loading_true, .seed-toggle-button--variant_neutralWeak[aria-pressed="true"][data-loading], .seed-toggle-button--variant_neutralWeak.seed-toggle-button--pressed_true.seed-toggle-button--loading_true {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+  }
+
+  .seed-toggle-button--variant_neutralWeak, .seed-toggle-button__text--variant_neutralWeak {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-toggle-button--size_xsmall {
+    height: var(--seed-dimension-x8);
+    border-radius: var(--seed-radius-full);
+    gap: var(--seed-dimension-x1);
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
+    padding-top: var(--seed-dimension-x1_5);
+    padding-bottom: var(--seed-dimension-x1_5);
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+  }
+
+  .seed-toggle-button__text--size_xsmall {
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+  }
+
+  .seed-toggle-button__text--size_xsmall {
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+  }
+
+  .seed-toggle-button--size_small {
+    height: var(--seed-dimension-x9);
+    border-radius: var(--seed-radius-full);
+    gap: var(--seed-dimension-x1);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+  }
+
+  .seed-toggle-button__text--size_small {
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+  }
+
+  .seed-toggle-button__text--size_small {
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+  }
+}

package/recipes/toggle-button.layered.mjs

@@ -0,0 +1,54 @@
+import './toggle-button.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const toggleButtonSlotNames = [
+  [
+    "root",
+    "seed-toggle-button"
+  ],
+  [
+    "text",
+    "seed-toggle-button__text"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "brandSolid",
+  "size": "small"
+};
+
+const compoundVariants = [];
+
+export const toggleButtonVariantMap = {
+  "variant": [
+    "brandSolid",
+    "neutralWeak"
+  ],
+  "size": [
+    "xsmall",
+    "small"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const toggleButtonVariantKeys = Object.keys(toggleButtonVariantMap);
+
+export function toggleButton(props) {
+  return Object.fromEntries(
+    toggleButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(toggleButton, { splitVariantProps: (props) => splitVariantProps(props, toggleButtonVariantMap) });
+
+// @recipe(seed): toggle-button

package/recipes/toggle-button.mjs

@@ -0,0 +1,54 @@
+import './toggle-button.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const toggleButtonSlotNames = [
+  [
+    "root",
+    "seed-toggle-button"
+  ],
+  [
+    "text",
+    "seed-toggle-button__text"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "brandSolid",
+  "size": "small"
+};
+
+const compoundVariants = [];
+
+export const toggleButtonVariantMap = {
+  "variant": [
+    "brandSolid",
+    "neutralWeak"
+  ],
+  "size": [
+    "xsmall",
+    "small"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const toggleButtonVariantKeys = Object.keys(toggleButtonVariantMap);
+
+export function toggleButton(props) {
+  return Object.fromEntries(
+    toggleButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(toggleButton, { splitVariantProps: (props) => splitVariantProps(props, toggleButtonVariantMap) });
+
+// @recipe(seed): toggle-button

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)";
+/** @deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다. */
+export declare const layerFill = "var(--seed-color-bg-layer-fill)";
+/** 화면의 모든 콘텐츠 위를 덮으며(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)";
+/** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (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)";