@seed-design/lynx-css 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/all.css +74 -46
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/badge.css +21 -14
  5. package/recipes/chip-tabs.css +12 -7
  6. package/recipes/chip.css +16 -11
  7. package/recipes/progress-circle.css +30 -7
  8. package/recipes/reaction-button.css +19 -13
package/all.css CHANGED
@@ -2069,6 +2069,10 @@ text {
2069
2069
  }
2070
2070
 
2071
2071
  .seed-badge__root {
2072
+ --seed-badge-stroke-width: 0px;
2073
+ border-width: var(--seed-badge-stroke-width);
2074
+ border-style: solid;
2075
+ border-color: #0000;
2072
2076
  flex-direction: row;
2073
2077
  flex-shrink: 1;
2074
2078
  align-items: center;
@@ -2117,10 +2121,10 @@ text {
2117
2121
 
2118
2122
  .seed-badge__root--size_medium {
2119
2123
  min-height: var(--seed-dimension-x5);
2120
- padding-left: var(--seed-dimension-x1_5);
2121
- padding-right: var(--seed-dimension-x1_5);
2122
- padding-top: var(--seed-dimension-x0_5);
2123
- padding-bottom: var(--seed-dimension-x0_5);
2124
+ padding-left: calc(var(--seed-dimension-x1_5) - var(--seed-badge-stroke-width));
2125
+ padding-right: calc(var(--seed-dimension-x1_5) - var(--seed-badge-stroke-width));
2126
+ padding-top: calc(var(--seed-dimension-x0_5) - var(--seed-badge-stroke-width));
2127
+ padding-bottom: calc(var(--seed-dimension-x0_5) - var(--seed-badge-stroke-width));
2124
2128
  border-radius: var(--seed-radius-r1);
2125
2129
  gap: var(--seed-dimension-x0_5);
2126
2130
  }
@@ -2137,10 +2141,10 @@ text {
2137
2141
 
2138
2142
  .seed-badge__root--size_large {
2139
2143
  min-height: var(--seed-dimension-x6);
2140
- padding-left: var(--seed-dimension-x2);
2141
- padding-right: var(--seed-dimension-x2);
2142
- padding-top: var(--seed-dimension-x1);
2143
- padding-bottom: var(--seed-dimension-x1);
2144
+ padding-left: calc(var(--seed-dimension-x2) - var(--seed-badge-stroke-width));
2145
+ padding-right: calc(var(--seed-dimension-x2) - var(--seed-badge-stroke-width));
2146
+ padding-top: calc(var(--seed-dimension-x1) - var(--seed-badge-stroke-width));
2147
+ padding-bottom: calc(var(--seed-dimension-x1) - var(--seed-badge-stroke-width));
2144
2148
  border-radius: var(--seed-radius-r1_5);
2145
2149
  gap: var(--seed-dimension-x0_5);
2146
2150
  }
@@ -2159,7 +2163,15 @@ text {
2159
2163
  font-weight: var(--seed-font-weight-medium);
2160
2164
  }
2161
2165
 
2162
- .seed-badge__label--variant_solid, .seed-badge__label--variant_outline {
2166
+ .seed-badge__label--variant_solid {
2167
+ font-weight: var(--seed-font-weight-bold);
2168
+ }
2169
+
2170
+ .seed-badge__root--variant_outline {
2171
+ --seed-badge-stroke-width: 1px;
2172
+ }
2173
+
2174
+ .seed-badge__label--variant_outline {
2163
2175
  font-weight: var(--seed-font-weight-bold);
2164
2176
  }
2165
2177
 
@@ -2182,7 +2194,7 @@ text {
2182
2194
  }
2183
2195
 
2184
2196
  .seed-badge__root--tone_neutral-variant_outline {
2185
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
2197
+ border-color: var(--seed-color-stroke-neutral-muted);
2186
2198
  color: var(--seed-color-fg-neutral-muted);
2187
2199
  }
2188
2200
 
@@ -2209,7 +2221,7 @@ text {
2209
2221
  }
2210
2222
 
2211
2223
  .seed-badge__root--tone_brand-variant_outline {
2212
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
2224
+ border-color: var(--seed-color-stroke-brand-weak);
2213
2225
  color: var(--seed-color-fg-brand);
2214
2226
  }
2215
2227
 
@@ -2236,7 +2248,7 @@ text {
2236
2248
  }
2237
2249
 
2238
2250
  .seed-badge__root--tone_informative-variant_outline {
2239
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
2251
+ border-color: var(--seed-color-stroke-informative-weak);
2240
2252
  color: var(--seed-color-fg-informative);
2241
2253
  }
2242
2254
 
@@ -2263,7 +2275,7 @@ text {
2263
2275
  }
2264
2276
 
2265
2277
  .seed-badge__root--tone_positive-variant_outline {
2266
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
2278
+ border-color: var(--seed-color-stroke-positive-weak);
2267
2279
  color: var(--seed-color-fg-positive);
2268
2280
  }
2269
2281
 
@@ -2290,7 +2302,7 @@ text {
2290
2302
  }
2291
2303
 
2292
2304
  .seed-badge__root--tone_warning-variant_outline {
2293
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
2305
+ border-color: var(--seed-color-stroke-warning-weak);
2294
2306
  color: var(--seed-color-fg-warning);
2295
2307
  }
2296
2308
 
@@ -2317,7 +2329,7 @@ text {
2317
2329
  }
2318
2330
 
2319
2331
  .seed-badge__root--tone_critical-variant_outline {
2320
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
2332
+ border-color: var(--seed-color-stroke-critical-weak);
2321
2333
  color: var(--seed-color-fg-critical);
2322
2334
  }
2323
2335
 
@@ -3311,9 +3323,12 @@ text {
3311
3323
  }
3312
3324
 
3313
3325
  .seed-chip__root {
3326
+ --seed-chip-stroke-width: 0px;
3327
+ border-width: var(--seed-chip-stroke-width);
3314
3328
  border-radius: var(--seed-radius-full);
3315
- 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);
3316
- border: none;
3329
+ 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);
3330
+ border-style: solid;
3331
+ border-color: #0000;
3317
3332
  flex-direction: row;
3318
3333
  flex-shrink: 0;
3319
3334
  justify-content: center;
@@ -3368,7 +3383,8 @@ text {
3368
3383
 
3369
3384
  .seed-chip__root--variant_outlineStrong {
3370
3385
  background: var(--seed-color-bg-transparent);
3371
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
3386
+ --seed-chip-stroke-width: 1px;
3387
+ border-color: var(--seed-color-stroke-neutral-muted);
3372
3388
  }
3373
3389
 
3374
3390
  .seed-chip__label--variant_outlineStrong, .seed-chip__prefixIcon--variant_outlineStrong, .seed-chip__suffixIcon--variant_outlineStrong, .seed-chip__icon--variant_outlineStrong {
@@ -3377,7 +3393,8 @@ text {
3377
3393
 
3378
3394
  .seed-chip__root--variant_outlineWeak {
3379
3395
  background: var(--seed-color-bg-transparent);
3380
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
3396
+ --seed-chip-stroke-width: 1px;
3397
+ border-color: var(--seed-color-stroke-neutral-muted);
3381
3398
  }
3382
3399
 
3383
3400
  .seed-chip__label--variant_outlineWeak, .seed-chip__prefixIcon--variant_outlineWeak, .seed-chip__suffixIcon--variant_outlineWeak, .seed-chip__icon--variant_outlineWeak {
@@ -3386,8 +3403,8 @@ text {
3386
3403
 
3387
3404
  .seed-chip__root--size_small {
3388
3405
  height: 32px;
3389
- padding-left: var(--seed-dimension-x1_5);
3390
- padding-right: var(--seed-dimension-x1_5);
3406
+ padding-left: calc(var(--seed-dimension-x1_5) - var(--seed-chip-stroke-width));
3407
+ padding-right: calc(var(--seed-dimension-x1_5) - var(--seed-chip-stroke-width));
3391
3408
  }
3392
3409
 
3393
3410
  .seed-chip__label--size_small {
@@ -3412,8 +3429,8 @@ text {
3412
3429
 
3413
3430
  .seed-chip__root--size_medium {
3414
3431
  height: 36px;
3415
- padding-left: var(--seed-dimension-x2);
3416
- padding-right: var(--seed-dimension-x2);
3432
+ padding-left: calc(var(--seed-dimension-x2) - var(--seed-chip-stroke-width));
3433
+ padding-right: calc(var(--seed-dimension-x2) - var(--seed-chip-stroke-width));
3417
3434
  }
3418
3435
 
3419
3436
  .seed-chip__label--size_medium {
@@ -3443,8 +3460,8 @@ text {
3443
3460
 
3444
3461
  .seed-chip__root--size_large {
3445
3462
  height: 40px;
3446
- padding-left: var(--seed-dimension-x2_5);
3447
- padding-right: var(--seed-dimension-x2_5);
3463
+ padding-left: calc(var(--seed-dimension-x2_5) - var(--seed-chip-stroke-width));
3464
+ padding-right: calc(var(--seed-dimension-x2_5) - var(--seed-chip-stroke-width));
3448
3465
  }
3449
3466
 
3450
3467
  .seed-chip__label--size_large {
@@ -3514,7 +3531,7 @@ text {
3514
3531
 
3515
3532
  .seed-chip__root--variant_outlineWeak-selected_true {
3516
3533
  background: var(--seed-color-bg-neutral-weak);
3517
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
3534
+ border-color: var(--seed-color-stroke-neutral-contrast);
3518
3535
  }
3519
3536
 
3520
3537
  .seed-chip__root--variant_solid-pressed_true-selected_false, .seed-chip__root--variant_solid-selected_false-disabled_false:active {
@@ -3556,8 +3573,12 @@ text {
3556
3573
  justify-content: center;
3557
3574
  align-items: center;
3558
3575
  gap: var(--seed-dimension-x1_5);
3576
+ --seed-chip-tabs-stroke-width: 0px;
3577
+ border-width: var(--seed-chip-tabs-stroke-width);
3559
3578
  border-radius: var(--seed-radius-full);
3560
- 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);
3579
+ 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);
3580
+ border-style: solid;
3581
+ border-color: #0000;
3561
3582
  flex-direction: row;
3562
3583
  flex-shrink: 0;
3563
3584
  display: flex;
@@ -3590,8 +3611,8 @@ text {
3590
3611
  .seed-chip-tabs__trigger--size_medium {
3591
3612
  min-height: 36px;
3592
3613
  min-width: var(--seed-dimension-x12);
3593
- padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
3594
- padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
3614
+ padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width));
3615
+ padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width));
3595
3616
  }
3596
3617
 
3597
3618
  .seed-chip-tabs__triggerLabel--size_medium {
@@ -3602,8 +3623,8 @@ text {
3602
3623
  .seed-chip-tabs__trigger--size_large {
3603
3624
  min-height: 40px;
3604
3625
  min-width: var(--seed-dimension-x13);
3605
- padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
3606
- padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
3626
+ padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width));
3627
+ padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width));
3607
3628
  }
3608
3629
 
3609
3630
  .seed-chip-tabs__triggerLabel--size_large {
@@ -3621,7 +3642,8 @@ text {
3621
3642
 
3622
3643
  .seed-chip-tabs__trigger--variant_neutralOutline {
3623
3644
  background-color: var(--seed-color-bg-transparent);
3624
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
3645
+ --seed-chip-tabs-stroke-width: 1px;
3646
+ border-color: var(--seed-color-stroke-neutral-muted);
3625
3647
  }
3626
3648
 
3627
3649
  .seed-chip-tabs__triggerLabel--variant_neutralOutline {
@@ -3662,7 +3684,7 @@ text {
3662
3684
 
3663
3685
  .seed-chip-tabs__trigger--variant_neutralOutline-selected_true {
3664
3686
  background-color: var(--seed-color-bg-neutral-solid);
3665
- box-shadow: inset 0 0 0 1px #0000;
3687
+ border-color: #0000;
3666
3688
  }
3667
3689
 
3668
3690
  .seed-chip-tabs__triggerLabel--variant_neutralOutline-selected_true {
@@ -5883,10 +5905,13 @@ text {
5883
5905
 
5884
5906
  .seed-reaction-button__root {
5885
5907
  background: var(--seed-color-bg-transparent);
5886
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
5908
+ border-width: var(--seed-reaction-button-stroke-width);
5909
+ --seed-reaction-button-stroke-width: 1px;
5910
+ border-style: solid;
5911
+ border-color: var(--seed-color-stroke-neutral-muted);
5887
5912
  --track-color: var(--seed-color-palette-gray-500);
5888
5913
  --range-color: var(--seed-color-fg-neutral);
5889
- 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);
5914
+ 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);
5890
5915
  flex-direction: row;
5891
5916
  flex-shrink: 0;
5892
5917
  justify-content: center;
@@ -5932,10 +5957,10 @@ text {
5932
5957
  .seed-reaction-button__root--size_xsmall {
5933
5958
  height: var(--seed-dimension-x8);
5934
5959
  border-radius: var(--seed-radius-full);
5935
- padding-left: var(--seed-dimension-x3);
5936
- padding-right: var(--seed-dimension-x3);
5937
- padding-top: var(--seed-dimension-x1_5);
5938
- padding-bottom: var(--seed-dimension-x1_5);
5960
+ padding-left: calc(var(--seed-dimension-x3) - var(--seed-reaction-button-stroke-width));
5961
+ padding-right: calc(var(--seed-dimension-x3) - var(--seed-reaction-button-stroke-width));
5962
+ padding-top: calc(var(--seed-dimension-x1_5) - var(--seed-reaction-button-stroke-width));
5963
+ padding-bottom: calc(var(--seed-dimension-x1_5) - var(--seed-reaction-button-stroke-width));
5939
5964
  }
5940
5965
 
5941
5966
  .seed-reaction-button__content--size_xsmall {
@@ -5955,10 +5980,10 @@ text {
5955
5980
  .seed-reaction-button__root--size_small {
5956
5981
  height: var(--seed-dimension-x9);
5957
5982
  border-radius: var(--seed-radius-full);
5958
- padding-left: var(--seed-dimension-x3_5);
5959
- padding-right: var(--seed-dimension-x3_5);
5960
- padding-top: var(--seed-dimension-x2);
5961
- padding-bottom: var(--seed-dimension-x2);
5983
+ padding-left: calc(var(--seed-dimension-x3_5) - var(--seed-reaction-button-stroke-width));
5984
+ padding-right: calc(var(--seed-dimension-x3_5) - var(--seed-reaction-button-stroke-width));
5985
+ padding-top: calc(var(--seed-dimension-x2) - var(--seed-reaction-button-stroke-width));
5986
+ padding-bottom: calc(var(--seed-dimension-x2) - var(--seed-reaction-button-stroke-width));
5962
5987
  }
5963
5988
 
5964
5989
  .seed-reaction-button__content--size_small {
@@ -5977,7 +6002,8 @@ text {
5977
6002
 
5978
6003
  .seed-reaction-button__root--selected_true {
5979
6004
  background: var(--seed-color-bg-transparent);
5980
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
6005
+ --seed-reaction-button-stroke-width: 1px;
6006
+ border-color: var(--seed-color-stroke-brand-weak);
5981
6007
  --track-color: var(--seed-color-palette-carrot-200);
5982
6008
  --range-color: var(--seed-color-fg-brand);
5983
6009
  }
@@ -5988,7 +6014,8 @@ text {
5988
6014
 
5989
6015
  .seed-reaction-button__root--disabled_true {
5990
6016
  background: var(--seed-color-bg-disabled);
5991
- box-shadow: inset 0 0 0 0px var(--seed-color-stroke-neutral-muted);
6017
+ --seed-reaction-button-stroke-width: 0px;
6018
+ border-color: var(--seed-color-stroke-neutral-muted);
5992
6019
  }
5993
6020
 
5994
6021
  .seed-reaction-button__label--disabled_true, .seed-reaction-button__count--disabled_true, .seed-reaction-button__prefixIcon--disabled_true {
@@ -6009,7 +6036,8 @@ text {
6009
6036
 
6010
6037
  .seed-reaction-button__root--selected_true-loading_true {
6011
6038
  background: var(--seed-color-bg-transparent-pressed);
6012
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
6039
+ --seed-reaction-button-stroke-width: 1px;
6040
+ border-color: var(--seed-color-stroke-brand-weak);
6013
6041
  --track-color: var(--seed-color-palette-carrot-200);
6014
6042
  --range-color: var(--seed-color-fg-brand);
6015
6043
  }