@plexui/styles 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,327 @@
+@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 */
+    }
+}