@plexui/ui 0.19.0 → 0.20.0

package/dist/es/styles/variables-primitive.css

@@ -1,327 +1 @@
-@layer theme {
-  :root,
-  :where([data-theme]) {
-    /* =============================================
-      Gray
-    ============================================= */
-    --gray-500: #5d5d5d;
-
-    /* =============================================
-      Alpha transparency
-    ============================================= */
-    --alpha-0: color-mix(in oklab, var(--alpha-base) 0%, transparent);
-    --alpha-02: color-mix(in oklab, var(--alpha-base) 2%, transparent);
-    --alpha-04: color-mix(in oklab, var(--alpha-base) 4%, transparent);
-    --alpha-05: color-mix(in oklab, var(--alpha-base) 5%, transparent);
-    --alpha-06: color-mix(in oklab, var(--alpha-base) 6%, transparent);
-    --alpha-08: color-mix(in oklab, var(--alpha-base) 8%, transparent);
-    --alpha-10: color-mix(in oklab, var(--alpha-base) 10%, transparent);
-    --alpha-12: color-mix(in oklab, var(--alpha-base) 12%, transparent);
-    --alpha-15: color-mix(in oklab, var(--alpha-base) 15%, transparent);
-    --alpha-16: color-mix(in oklab, var(--alpha-base) 16%, transparent);
-    --alpha-20: color-mix(in oklab, var(--alpha-base) 20%, transparent);
-    --alpha-25: color-mix(in oklab, var(--alpha-base) 25%, transparent);
-    --alpha-30: color-mix(in oklab, var(--alpha-base) 30%, transparent);
-    --alpha-35: color-mix(in oklab, var(--alpha-base) 35%, transparent);
-    --alpha-40: color-mix(in oklab, var(--alpha-base) 40%, transparent);
-    --alpha-50: color-mix(in oklab, var(--alpha-base) 50%, transparent);
-    --alpha-60: color-mix(in oklab, var(--alpha-base) 60%, transparent);
-    --alpha-70: color-mix(in oklab, var(--alpha-base) 70%, transparent);
-
-    /* =============================================
-      Consistent contrast
-    ============================================= */
-    --white: #ffffff;
-    --black: #000000;
-
-    /* =============================================
-      Green
-    ============================================= */
-    --green-25: #edfaf2;
-    --green-50: #d9f4e4;
-    --green-75: #b8ebcc;
-    --green-100: #8cdfad;
-    --green-200: #66d492;
-    --green-300: #40c977;
-    --green-400: #04b84c;
-    --green-500: #00a240;
-    --green-600: #008635;
-    --green-700: #00692a;
-    --green-800: #004f1f;
-    --green-900: #003716;
-    --green-950: #011c0b;
-    --green-1000: #001207;
-    --green-a25: color-mix(in oklab, var(--green-400) 8%, transparent);
-    --green-a50: color-mix(in oklab, var(--green-400) 15%, transparent);
-    --green-a75: color-mix(in oklab, var(--green-400) 29%, transparent);
-    --green-a100: color-mix(in oklab, var(--green-400) 45%, transparent);
-    --green-a200: color-mix(in oklab, var(--green-400) 60%, transparent);
-    --green-a300: color-mix(in oklab, var(--green-400) 75%, transparent);
-
-    /* =============================================
-      Red
-    ============================================= */
-    --red-25: #fff0f0;
-    --red-50: #ffd9d9;
-    --red-75: #ffc6c5;
-    --red-100: #ffa4a2;
-    --red-200: #ff8583;
-    --red-300: #ff6764;
-    --red-400: #fa423e;
-    --red-500: #e02e2a;
-    --red-600: #ba2623;
-    --red-700: #911e1b;
-    --red-800: #6e1615;
-    --red-900: #4d100e;
-    --red-950: #280b0a;
-    --red-1000: #1f0909;
-    --red-a25: color-mix(in oklab, var(--red-400) 8%, transparent);
-    --red-a50: color-mix(in oklab, var(--red-400) 16%, transparent);
-    --red-a75: color-mix(in oklab, var(--red-400) 30%, transparent);
-    --red-a100: color-mix(in oklab, var(--red-400) 48%, transparent);
-    --red-a200: color-mix(in oklab, var(--red-400) 64%, transparent);
-    --red-a300: color-mix(in oklab, var(--red-400) 79%, transparent);
-
-    /* =============================================
-      Pink
-    ============================================= */
-    --pink-25: #fff4f9;
-    --pink-50: #ffe8f3;
-    --pink-75: #ffd4e8;
-    --pink-100: #ffbada;
-    --pink-200: #ffa3ce;
-    --pink-300: #ff8cc1;
-    --pink-400: #ff66ad;
-    --pink-500: #e04c91;
-    --pink-600: #ba437a;
-    --pink-700: #963c67;
-    --pink-800: #6e2c4a;
-    --pink-900: #4d1f34;
-    --pink-950: #29101c;
-    --pink-1000: #1a0a11;
-    --pink-a25: color-mix(in oklab, var(--pink-400) 8%, transparent);
-    --pink-a50: color-mix(in oklab, var(--pink-400) 16%, transparent);
-    --pink-a75: color-mix(in oklab, var(--pink-400) 28%, transparent);
-    --pink-a100: color-mix(in oklab, var(--pink-400) 45%, transparent);
-    --pink-a200: color-mix(in oklab, var(--pink-400) 60%, transparent);
-    --pink-a300: color-mix(in oklab, var(--pink-400) 76%, transparent);
-
-    /* =============================================
-      Orange
-    ============================================= */
-    --orange-25: #fff5f0;
-    --orange-50: #ffe7d9;
-    --orange-75: #ffcfb4;
-    --orange-100: #ffb790;
-    --orange-200: #ff9e6c;
-    --orange-300: #ff8549;
-    --orange-400: #fb6a22;
-    --orange-500: #e25507;
-    --orange-600: #b9480d;
-    --orange-700: #923b0f;
-    --orange-800: #6d2e0f;
-    --orange-900: #4a2206;
-    --orange-950: #281105;
-    --orange-1000: #211107;
-    --orange-a25: color-mix(in oklab, var(--orange-400) 7%, transparent);
-    --orange-a50: color-mix(in oklab, var(--orange-400) 16%, transparent);
-    --orange-a75: color-mix(in oklab, var(--orange-400) 33%, transparent);
-    --orange-a100: color-mix(in oklab, var(--orange-400) 48%, transparent);
-    --orange-a200: color-mix(in oklab, var(--orange-400) 65%, transparent);
-    --orange-a300: color-mix(in oklab, var(--orange-400) 81%, transparent);
-
-    /* =============================================
-      Yellow
-    ============================================= */
-    --yellow-25: #fffbed;
-    --yellow-50: #fff6d9;
-    --yellow-75: #ffeeb8;
-    --yellow-100: #ffe48c;
-    --yellow-200: #ffdb66;
-    --yellow-300: #ffd240;
-    --yellow-400: #ffc300;
-    --yellow-500: #e0ac00;
-    --yellow-600: #ba8e00;
-    --yellow-700: #916f00;
-    --yellow-800: #6e5400;
-    --yellow-900: #4d3b00;
-    --yellow-950: #261d00;
-    --yellow-1000: #1a1400;
-    --yellow-a25: color-mix(in oklab, var(--yellow-400) 8%, transparent);
-    --yellow-a50: color-mix(in oklab, var(--yellow-400) 15%, transparent);
-    --yellow-a75: color-mix(in oklab, var(--yellow-400) 27%, transparent);
-    --yellow-a100: color-mix(in oklab, var(--yellow-400) 45%, transparent);
-    --yellow-a200: color-mix(in oklab, var(--yellow-400) 59%, transparent);
-    --yellow-a300: color-mix(in oklab, var(--yellow-400) 74%, transparent);
-
-    /* =============================================
-      Purple
-    ============================================= */
-    --purple-25: #f9f5fe;
-    --purple-50: #efe5fe;
-    --purple-75: #e0cefd;
-    --purple-100: #ceb0fb;
-    --purple-200: #be95fa;
-    --purple-300: #ad7bf9;
-    --purple-400: #924ff7;
-    --purple-500: #8046d9;
-    --purple-600: #6b3ab4;
-    --purple-700: #532d8d;
-    --purple-800: #3f226a;
-    --purple-900: #2c184a;
-    --purple-950: #160c25;
-    --purple-1000: #100a19;
-    --purple-a25: color-mix(in oklab, var(--purple-400) 6%, transparent);
-    --purple-a50: color-mix(in oklab, var(--purple-400) 15%, transparent);
-    --purple-a75: color-mix(in oklab, var(--purple-400) 28%, transparent);
-    --purple-a100: color-mix(in oklab, var(--purple-400) 45%, transparent);
-    --purple-a200: color-mix(in oklab, var(--purple-400) 60%, transparent);
-    --purple-a300: color-mix(in oklab, var(--purple-400) 75%, transparent);
-
-    /* =============================================
-      Blue
-    ============================================= */
-    --blue-25: #f5faff;
-    --blue-50: #e5f3ff;
-    --blue-75: #cce6ff;
-    --blue-100: #99ceff;
-    --blue-200: #66b5ff;
-    --blue-300: #339cff;
-    --blue-400: #0285ff;
-    --blue-500: #0169cc;
-    --blue-600: #004f99;
-    --blue-700: #003f7a;
-    --blue-800: #013566;
-    --blue-900: #00284d;
-    --blue-950: #000e1a;
-    --blue-1000: #000d19;
-    --blue-a25: color-mix(in oklab, var(--blue-400) 4%, transparent);
-    --blue-a50: color-mix(in oklab, var(--blue-400) 13%, transparent);
-    --blue-a75: color-mix(in oklab, var(--blue-400) 25%, transparent);
-    --blue-a100: color-mix(in oklab, var(--blue-400) 40%, transparent);
-    --blue-a200: color-mix(in oklab, var(--blue-400) 60%, transparent);
-    --blue-a300: color-mix(in oklab, var(--blue-400) 80%, transparent);
-
-    /* =============================================
-    Sizes
-    ============================================= */
-    --hairline: 1px;
-
-    /* =============================================
-    Shadows
-    ============================================= */
-    /* Color */
-    /* Geometry – x | y | blur | spread */
-  }
-  :where(:root), :where([data-theme="light"]) {
-    --gray-0: #ffffff;
-    --gray-25: #fcfcfc;
-    --gray-50: #f9f9f9;
-    --gray-75: #f3f3f3;
-    --gray-100: #ededed;
-    --gray-150: #dfdfdf;
-    --gray-200: #cdcdcd;
-    --gray-250: #b9b9b9;
-    --gray-300: #afafaf;
-    --gray-350: #9f9f9f;
-    --gray-400: #8f8f8f;
-    --gray-450: #767676;
-    --gray-550: #4f4f4f;
-    --gray-600: #414141;
-    --gray-650: #393939;
-    --gray-700: #303030;
-    --gray-750: #282828;
-    --gray-800: #212121;
-    --gray-850: #1c1c1c;
-    --gray-900: #181818;
-    --gray-925: #161616;
-    --gray-950: #131313;
-    --gray-975: #101010;
-    --gray-1000: #0d0d0d;
-    --alpha-base: #0d0d0d;
-  }
-  :where([data-theme="dark"]) {
-    --gray-0: #0d0d0d;
-    --gray-25: #101010;
-    --gray-50: #131313;
-    --gray-75: #161616;
-    --gray-100: #181818;
-    --gray-150: #1c1c1c;
-    --gray-200: #212121;
-    --gray-250: #282828;
-    --gray-300: #303030;
-    --gray-350: #393939;
-    --gray-400: #414141;
-    --gray-450: #4f4f4f;
-    --gray-550: #767676;
-    --gray-600: #8f8f8f;
-    --gray-650: #9f9f9f;
-    --gray-700: #afafaf;
-    --gray-750: #b9b9b9;
-    --gray-800: #cdcdcd;
-    --gray-850: #dcdcdc;
-    --gray-900: #ededed;
-    --gray-925: #f3f3f3;
-    --gray-950: #f3f3f3;
-    --gray-975: #f9f9f9;
-    --gray-1000: #ffffff;
-    --alpha-base: #ffffff;
-  }
-
-    @media (resolution >= 150dpi), (resolution >= 1.5dppx) {
-  :root,
-  :where([data-theme]) {
-      --hairline: 0.5px;
-  }
-    }
-
-    :root,
-  :where([data-theme]) {
-    --shadow-color: 0 0 0;
-    --elevation-100-geo: 0 1px 2px -1px;
-    --elevation-200-geo: 0 2px 4px -1px;
-    --elevation-300-geo: 0 4px 8px -2px;
-    --elevation-400-geo: 0 8px 16px -4px;
-  }
-
-  :where(:root),
-  :where([data-theme="light"]) {
-    /* Alpha */
-    --shadow-alpha-100: 0.08;
-    --shadow-alpha-200: 0.08;
-    --shadow-alpha-300: 0.1;
-    --shadow-alpha-400: 0.12;
-    --shadow-hairline-width: 1px;
-    --shadow-hairline-color: rgb(0 0 0 / 8%);
-  }
-
-    @media (resolution >= 150dpi), (resolution >= 1.5dppx) {
-
-  :where(:root),
-  :where([data-theme="light"]) {
-      --shadow-hairline-width: 0.5px;
-      --shadow-hairline-color: rgb(0 0 0 / 10%)
-  }
-    }
-
-  :where([data-theme="dark"]) {
-    --shadow-alpha-100: 0.2;
-    --shadow-alpha-200: 0.2;
-    --shadow-alpha-300: 0.36;
-    --shadow-alpha-400: 0.3;
-    --shadow-hairline-width: 1px;
-    --shadow-hairline-color: rgb(255 255 255 / 10%);
-  }
-
-    @media (resolution >= 150dpi), (resolution >= 1.5dppx) {
-
-  :where([data-theme="dark"]) {
-      --shadow-hairline-width: 0.5px;
-      --shadow-hairline-color: rgb(255 255 255 / 12%)
-  }
-    }
-
-    :where([data-theme="dark"]) [data-surface="elevated"] {
-      --shadow-hairline: 0 0 rgb(0 0 0 / 0%); /* no edge on lighter gray */
-    }
-}
+@import "@plexui/styles/styles/variables-primitive.css";