@seed-design/lynx-css 1.0.0 → 1.0.1

package/package.json

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

package/recipes/badge.css

@@ -2,6 +2,10 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    --seed-badge-stroke-width: 0px;
+    border-width: var(--seed-badge-stroke-width);
+    border-style: solid;
+    border-color: transparent;
     min-width: 0;
     flex-shrink: 1;
     overflow: hidden;
@@ -36,10 +40,10 @@
 }
 .seed-badge__root--size_medium {
     min-height: var(--seed-dimension-x5);
-    padding-left: var(--seed-dimension-x1_5);
-    padding-right: var(--seed-dimension-x1_5);
-    padding-top: var(--seed-dimension-x0_5);
-    padding-bottom: var(--seed-dimension-x0_5);
+    padding-left: calc(var(--seed-dimension-x1_5) - var(--seed-badge-stroke-width));
+    padding-right: calc(var(--seed-dimension-x1_5) - var(--seed-badge-stroke-width));
+    padding-top: calc(var(--seed-dimension-x0_5) - var(--seed-badge-stroke-width));
+    padding-bottom: calc(var(--seed-dimension-x0_5) - var(--seed-badge-stroke-width));
     border-radius: var(--seed-radius-r1);
     gap: var(--seed-dimension-x0_5)
 }
@@ -57,10 +61,10 @@
 }
 .seed-badge__root--size_large {
     min-height: var(--seed-dimension-x6);
-    padding-left: var(--seed-dimension-x2);
-    padding-right: var(--seed-dimension-x2);
-    padding-top: var(--seed-dimension-x1);
-    padding-bottom: var(--seed-dimension-x1);
+    padding-left: calc(var(--seed-dimension-x2) - var(--seed-badge-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2) - var(--seed-badge-stroke-width));
+    padding-top: calc(var(--seed-dimension-x1) - var(--seed-badge-stroke-width));
+    padding-bottom: calc(var(--seed-dimension-x1) - var(--seed-badge-stroke-width));
     border-radius: var(--seed-radius-r1_5);
     gap: var(--seed-dimension-x0_5)
 }
@@ -82,6 +86,9 @@
 .seed-badge__label--variant_solid {
     font-weight: var(--seed-font-weight-bold)
 }
+.seed-badge__root--variant_outline {
+    --seed-badge-stroke-width: 1px
+}
 .seed-badge__label--variant_outline {
     font-weight: var(--seed-font-weight-bold)
 }
@@ -100,7 +107,7 @@
     color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-badge__root--tone_neutral-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    border-color: var(--seed-color-stroke-neutral-muted);
     color: var(--seed-color-fg-neutral-muted)
 }
 .seed-badge__label--tone_neutral-variant_outline {
@@ -121,7 +128,7 @@
     color: var(--seed-color-fg-on-brand-solid)
 }
 .seed-badge__root--tone_brand-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    border-color: var(--seed-color-stroke-brand-weak);
     color: var(--seed-color-fg-brand)
 }
 .seed-badge__label--tone_brand-variant_outline {
@@ -142,7 +149,7 @@
     color: var(--seed-color-fg-on-informative-solid)
 }
 .seed-badge__root--tone_informative-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
+    border-color: var(--seed-color-stroke-informative-weak);
     color: var(--seed-color-fg-informative)
 }
 .seed-badge__label--tone_informative-variant_outline {
@@ -163,7 +170,7 @@
     color: var(--seed-color-fg-on-positive-solid)
 }
 .seed-badge__root--tone_positive-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
+    border-color: var(--seed-color-stroke-positive-weak);
     color: var(--seed-color-fg-positive)
 }
 .seed-badge__label--tone_positive-variant_outline {
@@ -184,7 +191,7 @@
     color: var(--seed-color-fg-on-warning-solid)
 }
 .seed-badge__root--tone_warning-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
+    border-color: var(--seed-color-stroke-warning-weak);
     color: var(--seed-color-fg-warning)
 }
 .seed-badge__label--tone_warning-variant_outline {
@@ -205,7 +212,7 @@
     color: var(--seed-color-fg-on-critical-solid)
 }
 .seed-badge__root--tone_critical-variant_outline {
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
+    border-color: var(--seed-color-stroke-critical-weak);
     color: var(--seed-color-fg-critical)
 }
 .seed-badge__label--tone_critical-variant_outline {

package/recipes/chip-tabs.css

@@ -22,8 +22,12 @@
     align-items: center;
     flex-shrink: 0;
     gap: var(--seed-dimension-x1_5);
+    --seed-chip-tabs-stroke-width: 0px;
+    border-width: var(--seed-chip-tabs-stroke-width);
+    border-style: solid;
+    border-color: transparent;
     border-radius: var(--seed-radius-full);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-chip-tabs__triggerLabel {
     display: flex;
@@ -48,8 +52,8 @@
 .seed-chip-tabs__trigger--size_medium {
     min-height: 36px;
     min-width: var(--seed-dimension-x12);
-    padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
-    padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5))
+    padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width))
 }
 .seed-chip-tabs__triggerLabel--size_medium {
     font-size: var(--seed-font-size-t4);
@@ -58,8 +62,8 @@
 .seed-chip-tabs__trigger--size_large {
     min-height: 40px;
     min-width: var(--seed-dimension-x13);
-    padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
-    padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5))
+    padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width))
 }
 .seed-chip-tabs__triggerLabel--size_large {
     font-size: var(--seed-font-size-t4);
@@ -73,7 +77,8 @@
 }
 .seed-chip-tabs__trigger--variant_neutralOutline {
     background-color: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
+    --seed-chip-tabs-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-muted)
 }
 .seed-chip-tabs__triggerLabel--variant_neutralOutline {
     color: var(--seed-color-fg-neutral)
@@ -108,7 +113,7 @@
 }
 .seed-chip-tabs__trigger--variant_neutralOutline-selected_true {
     background-color: var(--seed-color-bg-neutral-solid);
-    box-shadow: inset 0 0 0 1px transparent
+    border-color: transparent
 }
 .seed-chip-tabs__triggerLabel--variant_neutralOutline-selected_true {
     color: var(--seed-color-fg-on-neutral-solid)

package/recipes/chip.css

@@ -5,9 +5,12 @@
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
-    border: none;
+    --seed-chip-stroke-width: 0px;
+    border-width: var(--seed-chip-stroke-width);
+    border-style: solid;
+    border-color: transparent;
     border-radius: var(--seed-radius-full);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-chip__label {
     display: flex;
@@ -57,7 +60,8 @@
 }
 .seed-chip__root--variant_outlineStrong {
     background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
+    --seed-chip-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-muted)
 }
 .seed-chip__label--variant_outlineStrong {
     color: var(--seed-color-fg-neutral)
@@ -73,7 +77,8 @@
 }
 .seed-chip__root--variant_outlineWeak {
     background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
+    --seed-chip-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-muted)
 }
 .seed-chip__label--variant_outlineWeak {
     color: var(--seed-color-fg-neutral)
@@ -89,8 +94,8 @@
 }
 .seed-chip__root--size_small {
     height: 32px;
-    padding-left: var(--seed-dimension-x1_5);
-    padding-right: var(--seed-dimension-x1_5)
+    padding-left: calc(var(--seed-dimension-x1_5) - var(--seed-chip-stroke-width));
+    padding-right: calc(var(--seed-dimension-x1_5) - var(--seed-chip-stroke-width))
 }
 .seed-chip__label--size_small {
     font-size: var(--seed-font-size-t4);
@@ -114,8 +119,8 @@
 }
 .seed-chip__root--size_medium {
     height: 36px;
-    padding-left: var(--seed-dimension-x2);
-    padding-right: var(--seed-dimension-x2)
+    padding-left: calc(var(--seed-dimension-x2) - var(--seed-chip-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2) - var(--seed-chip-stroke-width))
 }
 .seed-chip__label--size_medium {
     font-size: var(--seed-font-size-t4);
@@ -139,8 +144,8 @@
 }
 .seed-chip__root--size_large {
     height: 40px;
-    padding-left: var(--seed-dimension-x2_5);
-    padding-right: var(--seed-dimension-x2_5)
+    padding-left: calc(var(--seed-dimension-x2_5) - var(--seed-chip-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2_5) - var(--seed-chip-stroke-width))
 }
 .seed-chip__label--size_large {
     font-size: var(--seed-font-size-t4);
@@ -216,7 +221,7 @@
 }
 .seed-chip__root--variant_outlineWeak-selected_true {
     background: var(--seed-color-bg-neutral-weak);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast)
+    border-color: var(--seed-color-stroke-neutral-contrast)
 }
 .seed-chip__root--variant_solid-pressed_true-selected_false {
     background: var(--seed-color-bg-neutral-weak-alpha-pressed)

package/recipes/progress-circle.css

@@ -51,10 +51,7 @@
 }
 
 .seed-progress-circle__spinner,
-.seed-progress-circle__indeterminate-range,
-.seed-progress-circle__half,
-.seed-progress-circle__semicircle--first,
-.seed-progress-circle__semicircle--second {
+.seed-progress-circle__indeterminate-range {
   position: absolute;
   top: 0;
   left: 0;
@@ -66,16 +63,42 @@
   background-color: transparent;
 }
 
-.seed-progress-circle__half--first,
+/* Android는 clip-path를 가진 부모가 transform 애니메이션 중인 자식을 자르지 않는다.
+   반쪽 영역은 폭 50% 박스의 overflow로 자르고, 반원은 그 안에서 링 크기로 둔다. */
+.seed-progress-circle__half {
+  position: absolute;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.seed-progress-circle__half--first {
+  left: 50%;
+}
+
+.seed-progress-circle__half--second {
+  left: 0;
+}
+
+.seed-progress-circle__semicircle--first,
 .seed-progress-circle__semicircle--second {
-  clip-path: inset(0 0 0 50%);
+  position: absolute;
+  top: 0;
+  width: 200%;
+  height: 100%;
 }
 
-.seed-progress-circle__half--second,
 .seed-progress-circle__semicircle--first {
+  left: -100%;
   clip-path: inset(0 50% 0 0);
 }
 
+.seed-progress-circle__semicircle--second {
+  left: 0;
+  clip-path: inset(0 0 0 50%);
+}
+
 .seed-progress-circle__track--tone_neutral {
   background-color: var(--seed-color-palette-gray-200);
 }

package/recipes/reaction-button.css

@@ -6,10 +6,13 @@
     justify-content: center;
     flex-shrink: 0;
     background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    border-width: var(--seed-reaction-button-stroke-width);
+    border-style: solid;
+    --seed-reaction-button-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-muted);
     --track-color: var(--seed-color-palette-gray-500);
     --range-color: var(--seed-color-fg-neutral);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-reaction-button__content {
     display: flex;
@@ -43,10 +46,10 @@
 .seed-reaction-button__root--size_xsmall {
     height: var(--seed-dimension-x8);
     border-radius: var(--seed-radius-full);
-    padding-left: var(--seed-dimension-x3);
-    padding-right: var(--seed-dimension-x3);
-    padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5)
+    padding-left: calc(var(--seed-dimension-x3) - var(--seed-reaction-button-stroke-width));
+    padding-right: calc(var(--seed-dimension-x3) - var(--seed-reaction-button-stroke-width));
+    padding-top: calc(var(--seed-dimension-x1_5) - var(--seed-reaction-button-stroke-width));
+    padding-bottom: calc(var(--seed-dimension-x1_5) - var(--seed-reaction-button-stroke-width))
 }
 .seed-reaction-button__content--size_xsmall {
     gap: var(--seed-dimension-x1)
@@ -66,10 +69,10 @@
 .seed-reaction-button__root--size_small {
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-full);
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2)
+    padding-left: calc(var(--seed-dimension-x3_5) - var(--seed-reaction-button-stroke-width));
+    padding-right: calc(var(--seed-dimension-x3_5) - var(--seed-reaction-button-stroke-width));
+    padding-top: calc(var(--seed-dimension-x2) - var(--seed-reaction-button-stroke-width));
+    padding-bottom: calc(var(--seed-dimension-x2) - var(--seed-reaction-button-stroke-width))
 }
 .seed-reaction-button__content--size_small {
     gap: var(--seed-dimension-x1)
@@ -88,7 +91,8 @@
 }
 .seed-reaction-button__root--selected_true {
     background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    --seed-reaction-button-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-brand-weak);
     --track-color: var(--seed-color-palette-carrot-200);
     --range-color: var(--seed-color-fg-brand)
 }
@@ -103,7 +107,8 @@
 }
 .seed-reaction-button__root--disabled_true {
     background: var(--seed-color-bg-disabled);
-    box-shadow: inset 0 0 0 0px var(--seed-color-stroke-neutral-muted)
+    --seed-reaction-button-stroke-width: 0px;
+    border-color: var(--seed-color-stroke-neutral-muted)
 }
 .seed-reaction-button__label--disabled_true {
     color: var(--seed-color-fg-disabled)
@@ -128,7 +133,8 @@
 }
 .seed-reaction-button__root--selected_true-loading_true {
     background: var(--seed-color-bg-transparent-pressed);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    --seed-reaction-button-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-brand-weak);
     --track-color: var(--seed-color-palette-carrot-200);
     --range-color: var(--seed-color-fg-brand)
 }