@kushagradhawan/kookie-ui 0.1.0

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

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/purple.css';
+@import '@radix-ui/colors/purple-dark.css';
+@import '@radix-ui/colors/purple-alpha.css';
+@import '@radix-ui/colors/purple-dark-alpha.css';
+
+:root {
+  --purple-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --purple-surface: #faf5fecc;
+  --purple-indicator: var(--purple-9);
+  --purple-track: var(--purple-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --purple-surface: color(display-p3 0.9804 0.9647 0.9922 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --purple-surface: #2b173580;
+  --purple-indicator: var(--purple-9);
+  --purple-track: var(--purple-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --purple-surface: color(display-p3 0.149 0.0941 0.1961 / 0.5);
+    }
+  }
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+@import '@radix-ui/colors/sky.css';
+@import '@radix-ui/colors/sky-dark.css';
+@import '@radix-ui/colors/sky-alpha.css';
+@import '@radix-ui/colors/sky-dark-alpha.css';
+
+:root {
+  --sky-contrast: #1c2024; /* light mode slate 12 */
+}
+
+:root,
+.light,
+.light-theme {
+  --sky-surface: #eef9fdcc;
+  --sky-indicator: var(--sky-9);
+  --sky-track: var(--sky-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --sky-surface: color(display-p3 0.9412 0.9765 0.9843 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --sky-surface: #13233b80;
+  --sky-indicator: var(--sky-9);
+  --sky-track: var(--sky-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --sky-surface: color(display-p3 0.0863 0.1333 0.2196 / 0.5);
+    }
+  }
+  @supports (color: color-mix(in oklab, white, black)) {
+    --sky-track: color-mix(in oklab, var(--sky-8), var(--sky-9) 65%);
+  }
+}

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

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

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

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/teal.css';
+@import '@radix-ui/colors/teal-dark.css';
+@import '@radix-ui/colors/teal-alpha.css';
+@import '@radix-ui/colors/teal-dark-alpha.css';
+
+:root {
+  --teal-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --teal-surface: #f0faf8cc;
+  --teal-indicator: var(--teal-9);
+  --teal-track: var(--teal-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --teal-surface: color(display-p3 0.9451 0.9804 0.9725 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --teal-surface: #13272580;
+  --teal-indicator: var(--teal-9);
+  --teal-track: var(--teal-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --teal-surface: color(display-p3 0.0863 0.149 0.1412 / 0.5);
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+@import '@radix-ui/colors/tomato.css';
+@import '@radix-ui/colors/tomato-dark.css';
+@import '@radix-ui/colors/tomato-alpha.css';
+@import '@radix-ui/colors/tomato-dark-alpha.css';
+
+:root {
+  --tomato-contrast: white;
+}
+
+:root,
+.light,
+.light-theme {
+  --tomato-surface: #fff6f5cc;
+  --tomato-indicator: var(--tomato-9);
+  --tomato-track: var(--tomato-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --tomato-surface: color(display-p3 0.9922 0.9647 0.9608 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --tomato-surface: #2d191580;
+  --tomato-indicator: var(--tomato-9);
+  --tomato-track: var(--tomato-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --tomato-surface: color(display-p3 0.1569 0.0941 0.0784 / 0.5);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,36 @@
+@import '@radix-ui/colors/yellow.css';
+@import '@radix-ui/colors/yellow-dark.css';
+@import '@radix-ui/colors/yellow-alpha.css';
+@import '@radix-ui/colors/yellow-dark-alpha.css';
+
+:root {
+  --yellow-contrast: #21201c; /* light mode sand 12 */
+}
+
+:root,
+.light,
+.light-theme {
+  --yellow-surface: #fefbe4cc;
+  --yellow-indicator: var(--yellow-10);
+  --yellow-track: var(--yellow-10);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --yellow-surface: color(display-p3 0.9961 0.9922 0.902 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --yellow-surface: #231f1380;
+  --yellow-indicator: var(--yellow-9);
+  --yellow-track: var(--yellow-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --yellow-surface: color(display-p3 0.1333 0.1176 0.0706 / 0.5);
+    }
+  }
+  @supports (color: color-mix(in oklab, white, black)) {
+    --yellow-track: color-mix(in oklab, var(--yellow-8), var(--yellow-9) 65%);
+  }
+}

package/src/styles/tokens/cursor.css

@@ -0,0 +1,11 @@
+.radix-themes {
+  --cursor-button: default;
+  --cursor-checkbox: default;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+  --cursor-menu-item: default;
+  --cursor-radio: default;
+  --cursor-slider-thumb: default;
+  --cursor-slider-thumb-active: default;
+  --cursor-switch: default;
+}

package/src/styles/tokens/index.css

@@ -0,0 +1,34 @@
+@import './colors/gray.css';
+@import './colors/mauve.css';
+@import './colors/slate.css';
+@import './colors/sage.css';
+@import './colors/olive.css';
+@import './colors/sand.css';
+
+@import './colors/amber.css';
+@import './colors/blue.css';
+@import './colors/bronze.css';
+@import './colors/brown.css';
+@import './colors/crimson.css';
+@import './colors/cyan.css';
+@import './colors/gold.css';
+@import './colors/grass.css';
+@import './colors/green.css';
+@import './colors/indigo.css';
+@import './colors/iris.css';
+@import './colors/jade.css';
+@import './colors/lime.css';
+@import './colors/mint.css';
+@import './colors/orange.css';
+@import './colors/pink.css';
+@import './colors/plum.css';
+@import './colors/purple.css';
+@import './colors/red.css';
+@import './colors/ruby.css';
+@import './colors/sky.css';
+@import './colors/teal.css';
+@import './colors/tomato.css';
+@import './colors/violet.css';
+@import './colors/yellow.css';
+
+@import './base.css';

package/src/styles/tokens/layout.css

@@ -0,0 +1,2 @@
+@import './scaling.css';
+@import './space.css';

package/src/styles/tokens/radius.css

@@ -0,0 +1,38 @@
+[data-radius] {
+  --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
+  --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
+  --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
+  --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
+  --radius-5: calc(14px * var(--scaling) * var(--radius-factor));
+  --radius-6: calc(18px * var(--scaling) * var(--radius-factor));
+}
+
+[data-radius='none'] {
+  --radius-factor: 0;
+  --radius-full: 0px;
+  --radius-thumb: 0.5px;
+}
+
+[data-radius='small'] {
+  --radius-factor: 0.75;
+  --radius-full: 0px;
+  --radius-thumb: 0.5px;
+}
+
+[data-radius='medium'] {
+  --radius-factor: 1;
+  --radius-full: 0px;
+  --radius-thumb: 9999px;
+}
+
+[data-radius='large'] {
+  --radius-factor: 1.5;
+  --radius-full: 0px;
+  --radius-thumb: 9999px;
+}
+
+[data-radius='full'] {
+  --radius-factor: 1.5;
+  --radius-full: 9999px;
+  --radius-thumb: 9999px;
+}

package/src/styles/tokens/scaling.css

@@ -0,0 +1,17 @@
+.radix-themes {
+  &:where([data-scaling='90%']) {
+    --scaling: 0.9;
+  }
+  &:where([data-scaling='95%']) {
+    --scaling: 0.95;
+  }
+  &:where([data-scaling='100%']) {
+    --scaling: 1;
+  }
+  &:where([data-scaling='105%']) {
+    --scaling: 1.05;
+  }
+  &:where([data-scaling='110%']) {
+    --scaling: 1.1;
+  }
+}

package/src/styles/tokens/shadow.css

@@ -0,0 +1,155 @@
+/* prettier-ignore */
+:where(.radix-themes) {
+  --shadow-1:
+    inset 0 0 0 1px var(--gray-a5),
+    inset 0 1.5px 2px 0 var(--gray-a2),
+    inset 0 1.5px 2px 0 var(--black-a2);
+
+  --shadow-2:
+    0 0 0 1px var(--gray-a3),
+    0 0 0 0.5px var(--black-a1),
+    0 1px 1px 0 var(--gray-a2),
+    0 2px 1px -1px var(--black-a1),
+    0 1px 3px 0 var(--black-a1);
+
+  --shadow-3:
+    0 0 0 1px var(--gray-a3),
+    0 2px 3px -2px var(--gray-a3),
+    0 3px 12px -4px var(--black-a2),
+    0 4px 16px -8px var(--black-a2);
+
+  --shadow-4:
+    0 0 0 1px var(--gray-a3),
+    0 8px 40px var(--black-a1),
+    0 12px 32px -16px var(--gray-a3);
+
+  --shadow-5:
+    0 0 0 1px var(--gray-a3),
+    0 12px 60px var(--black-a3),
+    0 12px 32px -16px var(--gray-a5);
+
+  --shadow-6:
+    0 0 0 1px var(--gray-a3),
+    0 12px 60px var(--black-a3),
+    0 16px 64px var(--gray-a2),
+    0 16px 36px -20px var(--gray-a7);
+}
+
+/* prettier-ignore */
+@supports (color: color-mix(in oklab, white, black)) {
+  :where(.radix-themes) {
+    --shadow-1:
+      inset 0 0 0 1px var(--gray-a5),
+      inset 0 1.5px 2px 0 var(--gray-a2),
+      inset 0 1.5px 2px 0 var(--black-a2);
+
+    --shadow-2:
+      0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 0 0 0.5px var(--black-a1),
+      0 1px 1px 0 var(--gray-a2),
+      0 2px 1px -1px var(--black-a1),
+      0 1px 3px 0 var(--black-a1);
+
+    --shadow-3:
+      0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 2px 3px -2px var(--gray-a3),
+      0 3px 12px -4px var(--black-a2),
+      0 4px 16px -8px var(--black-a2);
+
+    --shadow-4:
+      0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 8px 40px var(--black-a1),
+      0 12px 32px -16px var(--gray-a3);
+
+    --shadow-5:
+      0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 12px 60px var(--black-a3),
+      0 12px 32px -16px var(--gray-a5);
+
+    --shadow-6:
+      0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 12px 60px var(--black-a3),
+      0 16px 64px var(--gray-a2),
+      0 16px 36px -20px var(--gray-a7);
+  }
+}
+
+/* prettier-ignore */
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --shadow-1:
+    inset 0 -1px 1px 0 var(--gray-a3),
+    inset 0 0 0 1px var(--gray-a3),
+    inset 0 3px 4px 0 var(--black-a5),
+    inset 0 0 0 1px var(--gray-a4);
+
+  --shadow-2:
+    0 0 0 1px var(--gray-a6),
+    0 0 0 0.5px var(--black-a3),
+    0 1px 1px 0 var(--black-a6),
+    0 2px 1px -1px var(--black-a6),
+    0 1px 3px 0 var(--black-a5);
+
+  --shadow-3:
+    0 0 0 1px var(--gray-a6),
+    0 2px 3px -2px var(--black-a3),
+    0 3px 8px -2px var(--black-a6),
+    0 4px 12px -4px var(--black-a7);
+
+  --shadow-4:
+    0 0 0 1px var(--gray-a6),
+    0 8px 40px var(--black-a3),
+    0 12px 32px -16px var(--black-a5);
+
+  --shadow-5:
+    0 0 0 1px var(--gray-a6),
+    0 12px 60px var(--black-a5),
+    0 12px 32px -16px var(--black-a7);
+
+  --shadow-6:
+    0 0 0 1px var(--gray-a6),
+    0 12px 60px var(--black-a4),
+    0 16px 64px var(--black-a6),
+    0 16px 36px -20px var(--black-a11);
+}
+
+/* prettier-ignore */
+@supports (color: color-mix(in oklab, white, black)) {
+  :is(.dark, .dark-theme),
+  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+    --shadow-1:
+      inset 0 -1px 1px 0 var(--gray-a3),
+      inset 0 0 0 1px var(--gray-a3),
+      inset 0 3px 4px 0 var(--black-a5),
+      inset 0 0 0 1px var(--gray-a4);
+
+    --shadow-2:
+      0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 0 0 0.5px var(--black-a3),
+      0 1px 1px 0 var(--black-a6),
+      0 2px 1px -1px var(--black-a6),
+      0 1px 3px 0 var(--black-a5);
+
+    --shadow-3:
+      0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 2px 3px -2px var(--black-a3),
+      0 3px 8px -2px var(--black-a6),
+      0 4px 12px -4px var(--black-a7);
+
+    --shadow-4:
+      0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 8px 40px var(--black-a3),
+      0 12px 32px -16px var(--black-a5);
+
+    --shadow-5:
+      0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 12px 60px var(--black-a5),
+      0 12px 32px -16px var(--black-a7);
+
+    --shadow-6:
+      0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 12px 60px var(--black-a4),
+      0 16px 64px var(--black-a6),
+      0 16px 36px -20px var(--black-a11);
+  }
+}

package/src/styles/tokens/space.css

@@ -0,0 +1,11 @@
+.radix-themes {
+  --space-1: calc(4px * var(--scaling));
+  --space-2: calc(8px * var(--scaling));
+  --space-3: calc(12px * var(--scaling));
+  --space-4: calc(16px * var(--scaling));
+  --space-5: calc(24px * var(--scaling));
+  --space-6: calc(32px * var(--scaling));
+  --space-7: calc(40px * var(--scaling));
+  --space-8: calc(48px * var(--scaling));
+  --space-9: calc(64px * var(--scaling));
+}