@react-spectrum/s2 0.5.0 → 0.6.0

package/dist/Button.css

@@ -1,9 +1,9 @@
 @layer _.a {
-  ._La {
+  ._Ma {
     outline-style: none;
   }
 
-  ._Lb {
+  ._Mb {
     outline-style: solid;
   }
 
@@ -11,39 +11,43 @@
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .dc {
-    outline-color: #fff;
+  .d_____G {
+    outline-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  .db {
-    outline-color: #000;
-  }
-
-  ._Nc {
+  ._Oc {
     outline-width: 2px;
   }
 
-  ._M-3t1z {
+  ._N-3t1z {
     outline-offset: 2px;
   }
 
-  .Uc {
+  .-_1de2x0q_b-c {
+    --s2-container-bg: white;
+  }
+
+  .-_1de2x0q_b-b {
+    --s2-container-bg: black;
+  }
+
+  .Vc {
     position: relative;
   }
 
-  ._Zd {
+  ._0d {
     display: flex;
   }
 
-  ._1d {
+  ._2d {
     align-items: baseline;
   }
 
-  ._2d {
+  ._3d {
     justify-content: center;
   }
 
-  ._ja {
+  ._ka {
     text-align: start;
   }
 
@@ -51,37 +55,37 @@
     column-gap: .428571em;
   }
 
-  ._ca {
+  ._da {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._de {
+  ._ee {
     font-size: .875rem;
   }
 
-  ._da {
+  ._ea {
     font-size: .6875rem;
   }
 
-  ._dc {
+  ._ec {
     font-size: .75rem;
   }
 
-  ._dg {
+  ._eg {
     font-size: 1rem;
   }
 
-  ._di {
+  ._ei {
     font-size: 1.125rem;
   }
 
-  ._ed {
+  ._fd {
     font-variation-settings: "wght" 700;
     font-synthesis-weight: none;
     font-weight: 700;
   }
 
-  ._fa {
+  ._ga {
     line-height: 1.3;
   }
 
@@ -101,39 +105,27 @@
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  .ab {
-    color: #000;
-  }
-
-  .a_____e {
-    color: #ffffffd9;
-  }
-
-  .a_____f {
-    color: #fffffff0;
-  }
-
-  .a_____a {
-    color: #ffffff36;
+  .a_____R {
+    color: lch(from var(--b, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
   .ac {
     color: #fff;
   }
 
-  .a_____r {
-    color: #000000d6;
+  .a_____E {
+    color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .85);
   }
 
-  .a_____s {
-    color: #000000ed;
+  .a_____F {
+    color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .a_____n {
-    color: #00000038;
+  .a_____A {
+    color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
   }
 
-  .__Da {
+  .__Ea {
     -webkit-user-select: none;
     user-select: none;
   }
@@ -142,23 +134,23 @@
     min-height: var(--o);
   }
 
-  ._vg {
+  ._wg {
     border-start-start-radius: calc(var(--k, var(--o, 9999px)) / 2);
   }
 
-  ._wg {
+  ._xg {
     border-start-end-radius: calc(var(--k, var(--o, 9999px)) / 2);
   }
 
-  ._xg {
+  ._yg {
     border-end-start-radius: calc(var(--k, var(--o, 9999px)) / 2);
   }
 
-  ._yg {
+  ._zg {
     border-end-end-radius: calc(var(--k, var(--o, 9999px)) / 2);
   }
 
-  .__na {
+  .__oa {
     box-sizing: border-box;
   }
 
@@ -166,7 +158,7 @@
     width: fit-content;
   }
 
-  ._ld {
+  ._md {
     text-decoration: none;
   }
 
@@ -186,18 +178,6 @@
     padding-bottom: 0;
   }
 
-  ._Oa {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-  }
-
-  ._Q-375x7f {
-    transition-duration: .15s;
-  }
-
-  ._Ra {
-    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
-  }
-
   .wa {
     border-style: solid;
   }
@@ -210,22 +190,22 @@
     border-bottom-width: var(--v);
   }
 
-  .sa {
-    border-inline-start-width: 0;
-  }
-
   .sc {
     border-inline-start-width: 2px;
   }
 
-  .ta {
-    border-inline-end-width: 0;
+  .sa {
+    border-inline-start-width: 0;
   }
 
   .tc {
     border-inline-end-width: 2px;
   }
 
+  .ta {
+    border-inline-end-width: 0;
+  }
+
   .-_1gogtue_E--1dbqcch {
     --labelPadding: calc((var(--o)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
   }
@@ -250,175 +230,246 @@
     border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .c_____e {
-    border-color: #ffffffd9;
+  .c_____E {
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .85);
+  }
+
+  .c_____F {
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
+  }
+
+  .c_____A {
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
+  }
+
+  .c_____z {
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .17);
+  }
+
+  .b-375toh {
+    background-color: var(--b);
+  }
+
+  .-rwx0fg_e-b {
+    --iconPrimary: currentColor;
+  }
+
+  ._Ab {
+    forced-color-adjust: none;
+  }
+
+  .__S-yksgrp {
+    -webkit-tap-highlight-color: #0000;
+  }
+
+  .-_375tou_o-f {
+    --o: calc(2rem * var(--s2-scale));
   }
 
-  .c_____f {
-    border-color: #fffffff0;
+  .-_375tou_o-g {
+    --o: calc(1.25rem * var(--s2-scale));
   }
 
-  .c_____a {
-    border-color: #ffffff36;
+  .-_375tou_o-h {
+    --o: calc(1.5rem * var(--s2-scale));
   }
 
-  .c____9 {
-    border-color: #ffffff2b;
+  .-_375tou_o-i {
+    --o: calc(2.5rem * var(--s2-scale));
   }
 
-  .c_____r {
-    border-color: #000000d6;
+  .-_375tou_o-j {
+    --o: calc(3rem * var(--s2-scale));
   }
 
-  .c_____s {
-    border-color: #000000ed;
+  .-_375tp0_u-c {
+    --u: 2px;
   }
 
-  .c_____n {
-    border-color: #00000038;
+  .-_375tp0_u-a {
+    --u: 0px;
   }
 
-  .c_____m {
-    border-color: #00000026;
+  .-_375tp1_v-c {
+    --v: 2px;
   }
 
-  .bn {
-    background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  .-_375tp1_v-a {
+    --v: 0px;
   }
 
-  .bo {
-    background-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  .-_375toh_b-n {
+    --b: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .bh {
-    background-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
+  .-_375toh_b-o {
+    --b: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .b_____E {
-    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
+  .-_375toh_b-h {
+    --b: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
   }
 
-  .b_____F {
-    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
+  .-_375toh_b-_____R {
+    --b: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .b_____K {
-    background-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
+  .-_375toh_b-_____S {
+    --b: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
   }
 
-  .b_____L {
-    background-color: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #cd2e1d);
+  .-_375toh_b-_____X {
+    --b: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
   }
 
-  .bg {
-    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  .-_375toh_b-_____Y {
+    --b: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #cd2e1d);
   }
 
-  .b_____e {
-    background-color: #ffffffd9;
+  .-_375toh_b-g {
+    --b: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .b_____f {
-    background-color: #fffffff0;
+  .-_375toh_b-_____E {
+    --b: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .85);
   }
 
-  .b____8 {
-    background-color: #ffffff24;
+  .-_375toh_b-_____F {
+    --b: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .b____7 {
-    background-color: #ffffff1c;
+  .-_375toh_b-_____y {
+    --b: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .14);
   }
 
-  .b_____r {
-    background-color: #000000d6;
+  .-_375toh_b-a {
+    --b: transparent;
   }
 
-  .b_____s {
-    background-color: #000000ed;
+  .-_375toh_b-_____x {
+    --b: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .11);
   }
 
-  .b_____l {
-    background-color: #0000001f;
+  .Ya {
+    top: 0;
   }
 
-  .b_____k {
-    background-color: #00000017;
+  ._aa {
+    bottom: 0;
   }
 
-  .ba {
-    background-color: #0000;
+  .Wa {
+    inset-inline-start: 0;
   }
 
-  .-rwx0fg_e-b {
-    --iconPrimary: currentColor;
+  .Xa {
+    inset-inline-end: 0;
   }
 
-  ._zb {
-    forced-color-adjust: none;
+  .__R-3hmpv {
+    z-index: -1;
   }
 
-  .__R-yksgrp {
-    -webkit-tap-highlight-color: #0000;
+  ._Pa {
+    transition-property: color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   }
 
-  .-_375tou_o-f {
-    --o: calc(2rem * var(--s2-scale));
+  ._R-375x7f {
+    transition-duration: .15s;
   }
 
-  .-_375tou_o-g {
-    --o: calc(1.25rem * var(--s2-scale));
+  ._Sa {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .-_375tou_o-h {
-    --o: calc(1.5rem * var(--s2-scale));
+  ._w-17zqamw {
+    border-start-start-radius: inherit;
   }
 
-  .-_375tou_o-i {
-    --o: calc(2.5rem * var(--s2-scale));
+  ._x-17zqamw {
+    border-start-end-radius: inherit;
   }
 
-  .-_375tou_o-j {
-    --o: calc(3rem * var(--s2-scale));
+  ._y-17zqamw {
+    border-end-start-radius: inherit;
   }
 
-  .-_375tp0_u-a {
-    --u: 0px;
+  ._z-17zqamw {
+    border-end-end-radius: inherit;
   }
 
-  .-_375tp0_u-c {
-    --u: 2px;
+  ._C-1bwg29 {
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 66%, var(--g2) 100%);
+    --g0: var(--lightningcss-light, #b539c8) var(--lightningcss-dark, #d549eb);
+    --g1: var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #8077fe);
+    --g2: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff);
+    --gp: --g0, --g1, --g2;
   }
 
-  .-_375tp1_v-a {
-    --v: 0px;
+  ._C-zh0yy1 {
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 66%, var(--g2) 100%);
+    --g0: var(--lightningcss-light, #9c28af) var(--lightningcss-dark, #e85bfd);
+    --g1: var(--lightningcss-light, #6338ee) var(--lightningcss-dark, #8b8dfe);
+    --g2: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #6995fe);
+    --gp: --g0, --g1, --g2;
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 66%, var(--g2) 100%);
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 66%, var(--g2) 100%);
   }
 
-  .-_375tp1_v-c {
-    --v: 2px;
+  ._C-17z6g7s {
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 33%, var(--g2) 100%);
+    --g0: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #fc432e);
+    --g1: var(--lightningcss-light, #d92361) var(--lightningcss-dark, #f37);
+    --g2: var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #8077fe);
+    --gp: --g0, --g1, --g2;
+  }
+
+  ._C-x40uwg {
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 33%, var(--g2) 100%);
+    --g0: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #ff6756);
+    --g1: var(--lightningcss-light, #ba1650) var(--lightningcss-dark, #ff6095);
+    --g2: var(--lightningcss-light, #6338ee) var(--lightningcss-dark, #8b8dfe);
+    --gp: --g0, --g1, --g2;
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 33%, var(--g2) 100%);
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 33%, var(--g2) 100%);
+  }
+
+  ._C-qey189 {
+    background-image: none;
+  }
+
+  ._Ba {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+    color-scheme: light;
   }
 
-  .Ua {
+  .Va {
     position: absolute;
   }
 
-  .X-3760fj {
+  .Y-3760fj {
     top: 50%;
   }
 
-  .Y-3760fj {
+  .Z-3760fj {
     left: 50%;
   }
 
-  .T-1tktoou {
+  .U-1uu3e5e {
     transform: translate(-50%, -50%);
   }
 
-  ._K-3t1x {
+  ._L-3t1x {
     opacity: 0;
   }
 
-  ._K-3t1y {
+  ._L-3t1y {
     opacity: 1;
   }
 
@@ -462,11 +513,11 @@
     padding-bottom: var(--labelPadding);
   }
 
-  .__A-3t1y {
+  .__B-3t1y {
     order: 1;
   }
 
-  .__A-3t1x {
+  .__B-3t1x {
     order: 0;
   }
 
@@ -482,21 +533,21 @@
     margin-inline-start: var(--iconMargin);
   }
 
-  ._8-3t1x {
+  ._9-3t1x {
     flex-shrink: 0;
   }
 }
 
 @layer _.b {
-  ._1-soocicc:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
+  ._2-soocicc:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
     align-items: center;
   }
 
-  ._c-enzrfpb:lang(ar) {
+  ._d-enzrfpb:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 
@@ -528,7 +579,7 @@
     padding-inline-end: 0;
   }
 
-  ._b-soocicb:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
+  ._c-soocicb:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
     aspect-ratio: 1;
   }
 
@@ -538,37 +589,37 @@
 }
 
 @layer _.c {
-  ._c-enzwzjc:lang(he) {
+  ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._c-enzykdd:lang(ja) {
+  ._d-enzykdd:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  ._c-enzzrge:lang(ko) {
+  ._d-enzzrge:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._c-eo0c6sf:lang(zh) {
+  ._d-eo0c6sf:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._c-1uotwbwg:lang(zh-hant) {
+  ._d-1uotwbwg:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._d-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
@@ -577,52 +628,56 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
 
-    .aa_____w {
+    .aa_____J {
       color: buttonface;
     }
 
-    .aa_____A {
+    .aa_____N {
       color: highlighttext;
     }
 
-    .aa_____x {
+    .aa_____K {
       color: buttontext;
     }
 
-    .aa_____B {
+    .aa_____O {
       color: graytext;
     }
 
-    .ca_____v {
+    .ca_____I {
       border-color: buttonborder;
     }
 
-    .ca_____z {
+    .ca_____M {
       border-color: highlight;
     }
 
-    .ca_____B {
+    .ca_____O {
       border-color: graytext;
     }
 
-    .ba_____x {
-      background-color: buttontext;
+    .-_375toh_b-a_____K {
+      --b: ButtonText;
     }
 
-    .ba_____z {
-      background-color: highlight;
+    .-_375toh_b-a_____M {
+      --b: Highlight;
     }
 
-    .ba_____B {
-      background-color: graytext;
+    .-_375toh_b-a_____O {
+      --b: GrayText;
     }
 
-    .ba_____w {
-      background-color: buttonface;
+    .-_375toh_b-a_____J {
+      --b: ButtonFace;
+    }
+
+    ._Ca-qey189 {
+      background-image: none;
     }
   }
 }
@@ -633,28 +688,46 @@
       column-gap: .470588em;
     }
 
-    ._dbf {
+    ._ebf {
       font-size: 1.0625rem;
     }
 
-    ._dbb {
+    ._ebb {
       font-size: .8125rem;
     }
 
-    ._dbd {
+    ._ebd {
       font-size: .9375rem;
     }
 
-    ._dbh {
+    ._ebh {
       font-size: 1.1875rem;
     }
 
-    ._dbj {
+    ._ebj {
       font-size: 1.375rem;
     }
   }
 }
 
+@property --g0 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --g1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --g2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
 .\.:not(#a#b) {
   all: revert-layer;
 }