@kushagradhawan/kookie-ui 0.1.0

package/src/styles/tokens/colors/amber.css

@@ -0,0 +1,36 @@
+@import '@radix-ui/colors/amber.css';
+@import '@radix-ui/colors/amber-dark.css';
+@import '@radix-ui/colors/amber-alpha.css';
+@import '@radix-ui/colors/amber-dark-alpha.css';
+
+:root {
+  --amber-contrast: #21201c; /* light mode sand 12 */
+}
+
+:root,
+.light,
+.light-theme {
+  --amber-surface: #fefae4cc;
+  --amber-indicator: var(--amber-9);
+  --amber-track: var(--amber-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --amber-surface: color(display-p3 0.9922 0.9843 0.902 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --amber-surface: #271f1380;
+  --amber-indicator: var(--amber-9);
+  --amber-track: var(--amber-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --amber-surface: color(display-p3 0.1412 0.1176 0.0784 / 0.5);
+    }
+  }
+  @supports (color: color-mix(in oklab, white, black)) {
+    --amber-track: color-mix(in oklab, var(--amber-8), var(--amber-9) 75%);
+  }
+}

package/src/styles/tokens/colors/blue.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/blue.css';
+@import '@radix-ui/colors/blue-dark.css';
+@import '@radix-ui/colors/blue-alpha.css';
+@import '@radix-ui/colors/blue-dark-alpha.css';
+
+:root {
+  --blue-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --blue-surface: #f1f9ffcc;
+  --blue-indicator: var(--blue-9);
+  --blue-track: var(--blue-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --blue-surface: color(display-p3 0.9529 0.9765 0.9961 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --blue-surface: #11213d80;
+  --blue-indicator: var(--blue-9);
+  --blue-track: var(--blue-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --blue-surface: color(display-p3 0.0706 0.1255 0.2196 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/bronze.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/bronze.css';
+@import '@radix-ui/colors/bronze-dark.css';
+@import '@radix-ui/colors/bronze-alpha.css';
+@import '@radix-ui/colors/bronze-dark-alpha.css';
+
+:root {
+  --bronze-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --bronze-surface: #fdf5f3cc;
+  --bronze-indicator: var(--bronze-9);
+  --bronze-track: var(--bronze-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --bronze-surface: color(display-p3 0.9843 0.9608 0.9529 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --bronze-surface: #27211d80;
+  --bronze-indicator: var(--bronze-9);
+  --bronze-track: var(--bronze-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --bronze-surface: color(display-p3 0.1412 0.1255 0.1176 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/brown.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/brown.css';
+@import '@radix-ui/colors/brown-dark.css';
+@import '@radix-ui/colors/brown-alpha.css';
+@import '@radix-ui/colors/brown-dark-alpha.css';
+
+:root {
+  --brown-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --brown-surface: #fbf8f4cc;
+  --brown-indicator: var(--brown-9);
+  --brown-track: var(--brown-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --brown-surface: color(display-p3 0.9843 0.9725 0.9569 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --brown-surface: #271f1b80;
+  --brown-indicator: var(--brown-9);
+  --brown-track: var(--brown-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --brown-surface: color(display-p3 0.1412 0.1176 0.102 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/crimson.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/crimson.css';
+@import '@radix-ui/colors/crimson-dark.css';
+@import '@radix-ui/colors/crimson-alpha.css';
+@import '@radix-ui/colors/crimson-dark-alpha.css';
+
+:root {
+  --crimson-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --crimson-surface: #fef5f8cc;
+  --crimson-indicator: var(--crimson-9);
+  --crimson-track: var(--crimson-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --crimson-surface: color(display-p3 0.9922 0.9608 0.9725 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --crimson-surface: #2f151f80;
+  --crimson-indicator: var(--crimson-9);
+  --crimson-track: var(--crimson-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --crimson-surface: color(display-p3 0.1647 0.0863 0.1176 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/cyan.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/cyan.css';
+@import '@radix-ui/colors/cyan-dark.css';
+@import '@radix-ui/colors/cyan-alpha.css';
+@import '@radix-ui/colors/cyan-dark-alpha.css';
+
+:root {
+  --cyan-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --cyan-surface: #eff9facc;
+  --cyan-indicator: var(--cyan-9);
+  --cyan-track: var(--cyan-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --cyan-surface: color(display-p3 0.9412 0.9765 0.9804 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --cyan-surface: #11252d80;
+  --cyan-indicator: var(--cyan-9);
+  --cyan-track: var(--cyan-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --cyan-surface: color(display-p3 0.0784 0.1412 0.1725 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/gold.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/gold.css';
+@import '@radix-ui/colors/gold-dark.css';
+@import '@radix-ui/colors/gold-alpha.css';
+@import '@radix-ui/colors/gold-dark-alpha.css';
+
+:root {
+  --gold-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --gold-surface: #f9f8efcc;
+  --gold-indicator: var(--gold-9);
+  --gold-track: var(--gold-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --gold-surface: color(display-p3 0.9765 0.9725 0.9412 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --gold-surface: #25231d80;
+  --gold-indicator: var(--gold-9);
+  --gold-track: var(--gold-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --gold-surface: color(display-p3 0.1412 0.1333 0.1098 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/grass.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/grass.css';
+@import '@radix-ui/colors/grass-dark.css';
+@import '@radix-ui/colors/grass-alpha.css';
+@import '@radix-ui/colors/grass-dark-alpha.css';
+
+:root {
+  --grass-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --grass-surface: #f3faf3cc;
+  --grass-indicator: var(--grass-9);
+  --grass-track: var(--grass-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --grass-surface: color(display-p3 0.9569 0.9804 0.9569 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --grass-surface: #19231b80;
+  --grass-indicator: var(--grass-9);
+  --grass-track: var(--grass-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --grass-surface: color(display-p3 0.102 0.1333 0.102 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/gray.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/gray.css';
+@import '@radix-ui/colors/gray-dark.css';
+@import '@radix-ui/colors/gray-alpha.css';
+@import '@radix-ui/colors/gray-dark-alpha.css';
+
+:root {
+  --gray-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --gray-surface: #ffffffcc;
+  --gray-indicator: var(--gray-9);
+  --gray-track: var(--gray-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --gray-surface: color(display-p3 1 1 1 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --gray-surface: #21212180;
+  --gray-indicator: var(--gray-9);
+  --gray-track: var(--gray-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --gray-surface: color(display-p3 0.1255 0.1255 0.1255 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/green.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/green.css';
+@import '@radix-ui/colors/green-dark.css';
+@import '@radix-ui/colors/green-alpha.css';
+@import '@radix-ui/colors/green-dark-alpha.css';
+
+:root {
+  --green-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --green-surface: #f1faf4cc;
+  --green-indicator: var(--green-9);
+  --green-track: var(--green-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --green-surface: color(display-p3 0.9569 0.9804 0.9608 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --green-surface: #15251d80;
+  --green-indicator: var(--green-9);
+  --green-track: var(--green-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --green-surface: color(display-p3 0.0941 0.1412 0.1098 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/indigo.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/indigo.css';
+@import '@radix-ui/colors/indigo-dark.css';
+@import '@radix-ui/colors/indigo-alpha.css';
+@import '@radix-ui/colors/indigo-dark-alpha.css';
+
+:root {
+  --indigo-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --indigo-surface: #f5f8ffcc;
+  --indigo-indicator: var(--indigo-9);
+  --indigo-track: var(--indigo-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --indigo-surface: color(display-p3 0.9647 0.9725 0.9961 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --indigo-surface: #171d3b80;
+  --indigo-indicator: var(--indigo-9);
+  --indigo-track: var(--indigo-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --indigo-surface: color(display-p3 0.0941 0.1098 0.2196 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/iris.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/iris.css';
+@import '@radix-ui/colors/iris-dark.css';
+@import '@radix-ui/colors/iris-alpha.css';
+@import '@radix-ui/colors/iris-dark-alpha.css';
+
+:root {
+  --iris-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --iris-surface: #f6f6ffcc;
+  --iris-indicator: var(--iris-9);
+  --iris-track: var(--iris-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --iris-surface: color(display-p3 0.9647 0.9647 0.9961 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --iris-surface: #1d1b3980;
+  --iris-indicator: var(--iris-9);
+  --iris-track: var(--iris-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --iris-surface: color(display-p3 0.1098 0.102 0.2118 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/jade.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/jade.css';
+@import '@radix-ui/colors/jade-dark.css';
+@import '@radix-ui/colors/jade-alpha.css';
+@import '@radix-ui/colors/jade-dark-alpha.css';
+
+:root {
+  --jade-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --jade-surface: #f1faf5cc;
+  --jade-indicator: var(--jade-9);
+  --jade-track: var(--jade-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --jade-surface: color(display-p3 0.9529 0.9804 0.9608 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --jade-surface: #13271f80;
+  --jade-indicator: var(--jade-9);
+  --jade-track: var(--jade-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --jade-surface: color(display-p3 0.0863 0.149 0.1176 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/lime.css

@@ -0,0 +1,36 @@
+@import '@radix-ui/colors/lime.css';
+@import '@radix-ui/colors/lime-dark.css';
+@import '@radix-ui/colors/lime-alpha.css';
+@import '@radix-ui/colors/lime-dark-alpha.css';
+
+:root {
+  --lime-contrast: #1d211c; /* light mode olive 12 */
+}
+
+:root,
+.light,
+.light-theme {
+  --lime-surface: #f6f9f0cc;
+  --lime-indicator: var(--lime-9);
+  --lime-track: var(--lime-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --lime-surface: color(display-p3 0.9725 0.9765 0.9412 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --lime-surface: #1b211580;
+  --lime-indicator: var(--lime-9);
+  --lime-track: var(--lime-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --lime-surface: color(display-p3 0.1098 0.1255 0.0784 / 0.5);
+    }
+  }
+  @supports (color: color-mix(in oklab, white, black)) {
+    --lime-track: color-mix(in oklab, var(--lime-8), var(--lime-9) 65%);
+  }
+}

package/src/styles/tokens/colors/mauve.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/mauve-dark.css';
+@import '@radix-ui/colors/mauve-alpha.css';
+@import '@radix-ui/colors/mauve-dark-alpha.css';
+
+:root {
+  --mauve-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --mauve-surface: #ffffffcc;
+  --mauve-indicator: var(--mauve-9);
+  --mauve-track: var(--mauve-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --mauve-surface: color(display-p3 1 1 1 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --mauve-surface: #22212380;
+  --mauve-indicator: var(--mauve-9);
+  --mauve-track: var(--mauve-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --mauve-surface: color(display-p3 0.1333 0.1255 0.1333 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/mint.css

@@ -0,0 +1,36 @@
+@import '@radix-ui/colors/mint.css';
+@import '@radix-ui/colors/mint-dark.css';
+@import '@radix-ui/colors/mint-alpha.css';
+@import '@radix-ui/colors/mint-dark-alpha.css';
+
+:root {
+  --mint-contrast: #1a211e; /* light mode sage 12 */
+}
+
+:root,
+.light,
+.light-theme {
+  --mint-surface: #effaf8cc;
+  --mint-indicator: var(--mint-9);
+  --mint-track: var(--mint-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --mint-surface: color(display-p3 0.9451 0.9804 0.9725 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --mint-surface: #15272780;
+  --mint-indicator: var(--mint-9);
+  --mint-track: var(--mint-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --mint-surface: color(display-p3 0.0941 0.149 0.1412 / 0.5);
+    }
+  }
+  @supports (color: color-mix(in oklab, white, black)) {
+    --mint-track: color-mix(in oklab, var(--mint-8), var(--mint-9) 65%);
+  }
+}

package/src/styles/tokens/colors/olive.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/olive.css';
+@import '@radix-ui/colors/olive-dark.css';
+@import '@radix-ui/colors/olive-alpha.css';
+@import '@radix-ui/colors/olive-dark-alpha.css';
+
+:root {
+  --olive-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --olive-surface: #ffffffcc;
+  --olive-indicator: var(--olive-9);
+  --olive-track: var(--olive-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --olive-surface: color(display-p3 1 1 1 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --olive-surface: #1f201e80;
+  --olive-indicator: var(--olive-9);
+  --olive-track: var(--olive-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --olive-surface: color(display-p3 0.1176 0.1255 0.1176 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/orange.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/orange.css';
+@import '@radix-ui/colors/orange-dark.css';
+@import '@radix-ui/colors/orange-alpha.css';
+@import '@radix-ui/colors/orange-dark-alpha.css';
+
+:root {
+  --orange-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --orange-surface: #fff5e9cc;
+  --orange-indicator: var(--orange-9);
+  --orange-track: var(--orange-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --orange-surface: color(display-p3 0.9961 0.9608 0.9176 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --orange-surface: #271d1380;
+  --orange-indicator: var(--orange-9);
+  --orange-track: var(--orange-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --orange-surface: color(display-p3 0.1412 0.1098 0.0706 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/pink.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/pink.css';
+@import '@radix-ui/colors/pink-dark.css';
+@import '@radix-ui/colors/pink-alpha.css';
+@import '@radix-ui/colors/pink-dark-alpha.css';
+
+:root {
+  --pink-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --pink-surface: #fef5facc;
+  --pink-indicator: var(--pink-9);
+  --pink-track: var(--pink-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --pink-surface: color(display-p3 0.9922 0.9608 0.9804 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --pink-surface: #31132980;
+  --pink-indicator: var(--pink-9);
+  --pink-track: var(--pink-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --pink-surface: color(display-p3 0.1725 0.0784 0.149 / 0.5);
+    }
+  }
+}

package/src/styles/tokens/colors/plum.css

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/plum.css';
+@import '@radix-ui/colors/plum-dark.css';
+@import '@radix-ui/colors/plum-alpha.css';
+@import '@radix-ui/colors/plum-dark-alpha.css';
+
+:root {
+  --plum-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --plum-surface: #fdf5fdcc;
+  --plum-indicator: var(--plum-9);
+  --plum-track: var(--plum-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --plum-surface: color(display-p3 0.9843 0.9647 0.9843 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --plum-surface: #2f152f80;
+  --plum-indicator: var(--plum-9);
+  --plum-track: var(--plum-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --plum-surface: color(display-p3 0.1647 0.0863 0.1725 / 0.5);
+    }
+  }
+}