@seed-design/tailwind4-theme 0.1.3 → 0.1.14

package/index.css

@@ -97,30 +97,34 @@
   --color-palette-yellow-800: var(--seed-color-palette-yellow-800);
   --color-palette-yellow-900: var(--seed-color-palette-yellow-900);
   --color-palette-yellow-1000: var(--seed-color-palette-yellow-1000);
+  --color-fg-neutral: var(--seed-color-fg-neutral);
   --color-fg-brand: var(--seed-color-fg-brand);
   --color-fg-critical: var(--seed-color-fg-critical);
-  --color-fg-disabled: var(--seed-color-fg-disabled);
+  --color-fg-positive: var(--seed-color-fg-positive);
+  --color-fg-warning: var(--seed-color-fg-warning);
   --color-fg-informative: var(--seed-color-fg-informative);
-  --color-fg-neutral: var(--seed-color-fg-neutral);
   --color-fg-placeholder: var(--seed-color-fg-placeholder);
-  --color-fg-positive: var(--seed-color-fg-positive);
+  --color-fg-disabled: var(--seed-color-fg-disabled);
+  --color-fg-brand-contrast: var(--seed-color-fg-brand-contrast);
   --color-fg-critical-contrast: var(--seed-color-fg-critical-contrast);
   --color-fg-informative-contrast: var(--seed-color-fg-informative-contrast);
-  --color-fg-neutral-inverted: var(--seed-color-fg-neutral-inverted);
   --color-fg-neutral-muted: var(--seed-color-fg-neutral-muted);
   --color-fg-neutral-subtle: var(--seed-color-fg-neutral-subtle);
+  --color-fg-neutral-inverted: var(--seed-color-fg-neutral-inverted);
   --color-fg-positive-contrast: var(--seed-color-fg-positive-contrast);
   --color-fg-warning-contrast: var(--seed-color-fg-warning-contrast);
-  --color-bg-disabled: var(--seed-color-bg-disabled);
   --color-bg-overlay: var(--seed-color-bg-overlay);
+  --color-bg-disabled: var(--seed-color-bg-disabled);
+  --color-bg-brand-weak: var(--seed-color-bg-brand-weak);
   --color-bg-brand-solid: var(--seed-color-bg-brand-solid);
   --color-bg-brand-solid-pressed: var(--seed-color-bg-brand-solid-pressed);
-  --color-bg-critical-solid: var(--seed-color-bg-critical-solid);
+  --color-bg-brand-weak-pressed: var(--seed-color-bg-brand-weak-pressed);
   --color-bg-critical-weak: var(--seed-color-bg-critical-weak);
+  --color-bg-critical-solid: var(--seed-color-bg-critical-solid);
   --color-bg-critical-solid-pressed: var(--seed-color-bg-critical-solid-pressed);
   --color-bg-critical-weak-pressed: var(--seed-color-bg-critical-weak-pressed);
-  --color-bg-informative-solid: var(--seed-color-bg-informative-solid);
   --color-bg-informative-weak: var(--seed-color-bg-informative-weak);
+  --color-bg-informative-solid: var(--seed-color-bg-informative-solid);
   --color-bg-informative-solid-pressed: var(--seed-color-bg-informative-solid-pressed);
   --color-bg-informative-weak-pressed: var(--seed-color-bg-informative-weak-pressed);
   --color-bg-layer-basement: var(--seed-color-bg-layer-basement);
@@ -130,43 +134,45 @@
   --color-bg-layer-default-pressed: var(--seed-color-bg-layer-default-pressed);
   --color-bg-layer-floating-pressed: var(--seed-color-bg-layer-floating-pressed);
   --color-bg-magic-weak: var(--seed-color-bg-magic-weak);
+  --color-bg-neutral-weak: var(--seed-color-bg-neutral-weak);
   --color-bg-neutral-inverted: var(--seed-color-bg-neutral-inverted);
   --color-bg-neutral-solid: var(--seed-color-bg-neutral-solid);
-  --color-bg-neutral-weak: var(--seed-color-bg-neutral-weak);
   --color-bg-neutral-inverted-pressed: var(--seed-color-bg-neutral-inverted-pressed);
   --color-bg-neutral-solid-muted: var(--seed-color-bg-neutral-solid-muted);
   --color-bg-neutral-solid-muted-pressed: var(--seed-color-bg-neutral-solid-muted-pressed);
   --color-bg-neutral-weak-pressed: var(--seed-color-bg-neutral-weak-pressed);
   --color-bg-overlay-muted: var(--seed-color-bg-overlay-muted);
-  --color-bg-positive-solid: var(--seed-color-bg-positive-solid);
   --color-bg-positive-weak: var(--seed-color-bg-positive-weak);
+  --color-bg-positive-solid: var(--seed-color-bg-positive-solid);
   --color-bg-positive-solid-pressed: var(--seed-color-bg-positive-solid-pressed);
   --color-bg-positive-weak-pressed: var(--seed-color-bg-positive-weak-pressed);
-  --color-bg-warning-solid: var(--seed-color-bg-warning-solid);
   --color-bg-warning-weak: var(--seed-color-bg-warning-weak);
+  --color-bg-warning-solid: var(--seed-color-bg-warning-solid);
+  --color-bg-warning-solid-pressed: var(--seed-color-bg-warning-solid-pressed);
   --color-bg-warning-weak-pressed: var(--seed-color-bg-warning-weak-pressed);
+  --color-stroke-neutral: var(--seed-color-stroke-neutral);
   --color-stroke-brand: var(--seed-color-stroke-brand);
-  --color-stroke-control: var(--seed-color-stroke-control);
+  --color-stroke-positive: var(--seed-color-stroke-positive);
+  --color-stroke-informative: var(--seed-color-stroke-informative);
+  --color-stroke-warning: var(--seed-color-stroke-warning);
   --color-stroke-critical: var(--seed-color-stroke-critical);
   --color-stroke-field: var(--seed-color-stroke-field);
-  --color-stroke-informative: var(--seed-color-stroke-informative);
-  --color-stroke-neutral: var(--seed-color-stroke-neutral);
-  --color-stroke-positive: var(--seed-color-stroke-positive);
+  --color-stroke-control: var(--seed-color-stroke-control);
   --color-stroke-field-focused: var(--seed-color-stroke-field-focused);
   --color-stroke-neutral-muted: var(--seed-color-stroke-neutral-muted);
   --color-stroke-on-image: var(--seed-color-stroke-on-image);
-  --color-manner-temp-l1-bg: var(--seed-color-manner-temp-l1-bg);
   --color-manner-temp-l1-text: var(--seed-color-manner-temp-l1-text);
-  --color-manner-temp-l2-bg: var(--seed-color-manner-temp-l2-bg);
   --color-manner-temp-l2-text: var(--seed-color-manner-temp-l2-text);
-  --color-manner-temp-l3-bg: var(--seed-color-manner-temp-l3-bg);
   --color-manner-temp-l3-text: var(--seed-color-manner-temp-l3-text);
-  --color-manner-temp-l4-bg: var(--seed-color-manner-temp-l4-bg);
   --color-manner-temp-l4-text: var(--seed-color-manner-temp-l4-text);
-  --color-manner-temp-l5-bg: var(--seed-color-manner-temp-l5-bg);
+  --color-manner-temp-l4-bg: var(--seed-color-manner-temp-l4-bg);
   --color-manner-temp-l5-text: var(--seed-color-manner-temp-l5-text);
-  --color-manner-temp-l6-bg: var(--seed-color-manner-temp-l6-bg);
   --color-manner-temp-l6-text: var(--seed-color-manner-temp-l6-text);
+  --color-manner-temp-l1-bg: var(--seed-color-manner-temp-l1-bg);
+  --color-manner-temp-l2-bg: var(--seed-color-manner-temp-l2-bg);
+  --color-manner-temp-l3-bg: var(--seed-color-manner-temp-l3-bg);
+  --color-manner-temp-l5-bg: var(--seed-color-manner-temp-l5-bg);
+  --color-manner-temp-l6-bg: var(--seed-color-manner-temp-l6-bg);
   --dimension-x0_5: var(--seed-dimension-x0_5);
   --dimension-x1: var(--seed-dimension-x1);
   --dimension-x1_5: var(--seed-dimension-x1_5);
@@ -217,9 +223,10 @@
   --gradient-fade-layer-floating: var(--seed-gradient-fade-layer-floating);
   --gradient-fade-layer-default: var(--seed-gradient-fade-layer-default);
   --gradient-glow-magic: var(--seed-gradient-glow-magic);
-  --gradient-shimmer-magic: var(--seed-gradient-shimmer-magic);
   --gradient-glow-magic-pressed: var(--seed-gradient-glow-magic-pressed);
   --gradient-shimmer-neutral: var(--seed-gradient-shimmer-neutral);
+  --gradient-shimmer-magic: var(--seed-gradient-shimmer-magic);
+  --gradient-highlight-magic-pressed: var(--seed-gradient-highlight-magic-pressed);
   --gradient-highlight-magic: var(--seed-gradient-highlight-magic);
   --line-height-t1: var(--seed-line-height-t1);
   --line-height-t2: var(--seed-line-height-t2);
@@ -249,11 +256,12 @@
   --timing-function-enter-expressive: var(--seed-timing-function-enter-expressive);
   --timing-function-exit-expressive: var(--seed-timing-function-exit-expressive);
   --gradient-stops-fade-layer-floating: #ffffff00 0.00%, #000000 100.00%;
-  --gradient-stops-fade-layer-default: #ffffff00 0.00%, #000000 100.00%;
+  --gradient-stops-fade-layer-default: #000000 0.00%, #ffffff00 100.00%;
   --gradient-stops-glow-magic: #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%;
-  --gradient-stops-shimmer-magic: #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%;
   --gradient-stops-glow-magic-pressed: #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%;
   --gradient-stops-shimmer-neutral: #ffffff00 0.00%, #ffffff66 46.00%, #ffffff66 54.00%, #ffffff00 100.00%;
+  --gradient-stops-shimmer-magic: #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%;
+  --gradient-stops-highlight-magic-pressed: #e14f00 20.00%, #ae58bf 100.00%;
   --gradient-stops-highlight-magic: #ff6600 20.00%, #d25aca 100.00%;
   --gradient-fade-layer-floating-to-t: linear-gradient(to top, #ffffff00 0.00%, #000000 100.00%);
   --gradient-fade-layer-floating-to-tr: linear-gradient(to top right, #ffffff00 0.00%, #000000 100.00%);
@@ -263,14 +271,14 @@
   --gradient-fade-layer-floating-to-bl: linear-gradient(to bottom left, #ffffff00 0.00%, #000000 100.00%);
   --gradient-fade-layer-floating-to-l: linear-gradient(to left, #ffffff00 0.00%, #000000 100.00%);
   --gradient-fade-layer-floating-to-tl: linear-gradient(to top left, #ffffff00 0.00%, #000000 100.00%);
-  --gradient-fade-layer-default-to-t: linear-gradient(to top, #ffffff00 0.00%, #000000 100.00%);
-  --gradient-fade-layer-default-to-tr: linear-gradient(to top right, #ffffff00 0.00%, #000000 100.00%);
-  --gradient-fade-layer-default-to-r: linear-gradient(to right, #ffffff00 0.00%, #000000 100.00%);
-  --gradient-fade-layer-default-to-br: linear-gradient(to bottom right, #ffffff00 0.00%, #000000 100.00%);
-  --gradient-fade-layer-default-to-b: linear-gradient(to bottom, #ffffff00 0.00%, #000000 100.00%);
-  --gradient-fade-layer-default-to-bl: linear-gradient(to bottom left, #ffffff00 0.00%, #000000 100.00%);
-  --gradient-fade-layer-default-to-l: linear-gradient(to left, #ffffff00 0.00%, #000000 100.00%);
-  --gradient-fade-layer-default-to-tl: linear-gradient(to top left, #ffffff00 0.00%, #000000 100.00%);
+  --gradient-fade-layer-default-to-t: linear-gradient(to top, #000000 0.00%, #ffffff00 100.00%);
+  --gradient-fade-layer-default-to-tr: linear-gradient(to top right, #000000 0.00%, #ffffff00 100.00%);
+  --gradient-fade-layer-default-to-r: linear-gradient(to right, #000000 0.00%, #ffffff00 100.00%);
+  --gradient-fade-layer-default-to-br: linear-gradient(to bottom right, #000000 0.00%, #ffffff00 100.00%);
+  --gradient-fade-layer-default-to-b: linear-gradient(to bottom, #000000 0.00%, #ffffff00 100.00%);
+  --gradient-fade-layer-default-to-bl: linear-gradient(to bottom left, #000000 0.00%, #ffffff00 100.00%);
+  --gradient-fade-layer-default-to-l: linear-gradient(to left, #000000 0.00%, #ffffff00 100.00%);
+  --gradient-fade-layer-default-to-tl: linear-gradient(to top left, #000000 0.00%, #ffffff00 100.00%);
   --gradient-glow-magic-to-t: linear-gradient(to top, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
   --gradient-glow-magic-to-tr: linear-gradient(to top right, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
   --gradient-glow-magic-to-r: linear-gradient(to right, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
@@ -279,14 +287,6 @@
   --gradient-glow-magic-to-bl: linear-gradient(to bottom left, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
   --gradient-glow-magic-to-l: linear-gradient(to left, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
   --gradient-glow-magic-to-tl: linear-gradient(to top left, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
-  --gradient-shimmer-magic-to-t: linear-gradient(to top, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
-  --gradient-shimmer-magic-to-tr: linear-gradient(to top right, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
-  --gradient-shimmer-magic-to-r: linear-gradient(to right, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
-  --gradient-shimmer-magic-to-br: linear-gradient(to bottom right, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
-  --gradient-shimmer-magic-to-b: linear-gradient(to bottom, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
-  --gradient-shimmer-magic-to-bl: linear-gradient(to bottom left, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
-  --gradient-shimmer-magic-to-l: linear-gradient(to left, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
-  --gradient-shimmer-magic-to-tl: linear-gradient(to top left, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
   --gradient-glow-magic-pressed-to-t: linear-gradient(to top, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
   --gradient-glow-magic-pressed-to-tr: linear-gradient(to top right, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
   --gradient-glow-magic-pressed-to-r: linear-gradient(to right, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
@@ -303,6 +303,22 @@
   --gradient-shimmer-neutral-to-bl: linear-gradient(to bottom left, #ffffff00 0.00%, #ffffff66 46.00%, #ffffff66 54.00%, #ffffff00 100.00%);
   --gradient-shimmer-neutral-to-l: linear-gradient(to left, #ffffff00 0.00%, #ffffff66 46.00%, #ffffff66 54.00%, #ffffff00 100.00%);
   --gradient-shimmer-neutral-to-tl: linear-gradient(to top left, #ffffff00 0.00%, #ffffff66 46.00%, #ffffff66 54.00%, #ffffff00 100.00%);
+  --gradient-shimmer-magic-to-t: linear-gradient(to top, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
+  --gradient-shimmer-magic-to-tr: linear-gradient(to top right, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
+  --gradient-shimmer-magic-to-r: linear-gradient(to right, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
+  --gradient-shimmer-magic-to-br: linear-gradient(to bottom right, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
+  --gradient-shimmer-magic-to-b: linear-gradient(to bottom, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
+  --gradient-shimmer-magic-to-bl: linear-gradient(to bottom left, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
+  --gradient-shimmer-magic-to-l: linear-gradient(to left, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
+  --gradient-shimmer-magic-to-tl: linear-gradient(to top left, #fff9f500 0.00%, #fff9f58a 46.00%, #fff9f58a 54.00%, #fff9f500 100.00%);
+  --gradient-highlight-magic-pressed-to-t: linear-gradient(to top, #e14f00 20.00%, #ae58bf 100.00%);
+  --gradient-highlight-magic-pressed-to-tr: linear-gradient(to top right, #e14f00 20.00%, #ae58bf 100.00%);
+  --gradient-highlight-magic-pressed-to-r: linear-gradient(to right, #e14f00 20.00%, #ae58bf 100.00%);
+  --gradient-highlight-magic-pressed-to-br: linear-gradient(to bottom right, #e14f00 20.00%, #ae58bf 100.00%);
+  --gradient-highlight-magic-pressed-to-b: linear-gradient(to bottom, #e14f00 20.00%, #ae58bf 100.00%);
+  --gradient-highlight-magic-pressed-to-bl: linear-gradient(to bottom left, #e14f00 20.00%, #ae58bf 100.00%);
+  --gradient-highlight-magic-pressed-to-l: linear-gradient(to left, #e14f00 20.00%, #ae58bf 100.00%);
+  --gradient-highlight-magic-pressed-to-tl: linear-gradient(to top left, #e14f00 20.00%, #ae58bf 100.00%);
   --gradient-highlight-magic-to-t: linear-gradient(to top, #ff6600 20.00%, #d25aca 100.00%);
   --gradient-highlight-magic-to-tr: linear-gradient(to top right, #ff6600 20.00%, #d25aca 100.00%);
   --gradient-highlight-magic-to-r: linear-gradient(to right, #ff6600 20.00%, #d25aca 100.00%);
@@ -590,10 +606,6 @@
   background-image: linear-gradient(--value([angle]), var(--gradient-stops-glow-magic));
 }
 
-@utility bg-gradient-shimmer-magic-* {
-  background-image: linear-gradient(--value([angle]), var(--gradient-stops-shimmer-magic));
-}
-
 @utility bg-gradient-glow-magic-pressed-* {
   background-image: linear-gradient(--value([angle]), var(--gradient-stops-glow-magic-pressed));
 }
@@ -602,6 +614,14 @@
   background-image: linear-gradient(--value([angle]), var(--gradient-stops-shimmer-neutral));
 }
 
+@utility bg-gradient-shimmer-magic-* {
+  background-image: linear-gradient(--value([angle]), var(--gradient-stops-shimmer-magic));
+}
+
+@utility bg-gradient-highlight-magic-pressed-* {
+  background-image: linear-gradient(--value([angle]), var(--gradient-stops-highlight-magic-pressed));
+}
+
 @utility bg-gradient-highlight-magic-* {
   background-image: linear-gradient(--value([angle]), var(--gradient-stops-highlight-magic));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/tailwind4-theme",
-  "version": "0.1.3",
+  "version": "0.1.14",
   "description": "SEED 디자인 토큰을 Tailwind CSS 4.0에서 사용하기 위한 플러그인",
   "main": "index.css",
   "files": [