@kushagradhawan/kookie-ui 0.1.0

package/src/styles/tokens/typography.css

@@ -0,0 +1,302 @@
+.radix-themes {
+  --font-size-0: calc(10px * var(--scaling));
+  --font-size-1: calc(12px * var(--scaling));
+  --font-size-2: calc(14px * var(--scaling));
+  --font-size-3: calc(16px * var(--scaling));
+  --font-size-4: calc(18px * var(--scaling));
+  --font-size-5: calc(20px * var(--scaling));
+  --font-size-6: calc(24px * var(--scaling));
+  --font-size-7: calc(28px * var(--scaling));
+  --font-size-8: calc(35px * var(--scaling));
+  --font-size-9: calc(60px * var(--scaling));
+
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  --line-height-0: calc(12px * var(--scaling));
+  --line-height-1: calc(16px * var(--scaling));
+  --line-height-2: calc(20px * var(--scaling));
+  --line-height-3: calc(24px * var(--scaling));
+  --line-height-4: calc(26px * var(--scaling));
+  --line-height-5: calc(28px * var(--scaling));
+  --line-height-6: calc(30px * var(--scaling));
+  --line-height-7: calc(36px * var(--scaling));
+  --line-height-8: calc(40px * var(--scaling));
+  --line-height-9: calc(60px * var(--scaling));
+
+  --letter-spacing-0: 0.005em;
+  --letter-spacing-1: 0.0025em;
+  --letter-spacing-2: 0em;
+  --letter-spacing-3: 0em;
+  --letter-spacing-4: -0.0025em;
+  --letter-spacing-5: -0.005em;
+  --letter-spacing-6: -0.00625em;
+  --letter-spacing-7: -0.0075em;
+  --letter-spacing-8: -0.01em;
+  --letter-spacing-9: -0.025em;
+
+  /* default values */
+
+  --default-font-family: var(--font-geist-sans, 'Geist'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)',
+    Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --default-font-size: var(--font-size-3); /* Same size used for `<Text size="3">` */
+  --default-font-style: normal;
+  --default-font-weight: var(--font-weight-regular);
+  --default-line-height: 1.5; /* Equivalent to the line-height used for `<Text size="3">` 16px * 1.5 = 24px */
+  --default-letter-spacing: 0em;
+  --default-leading-trim-start: 0.42em;
+  --default-leading-trim-end: 0.36em;
+
+  /* Heading */
+
+  --heading-font-family: var(--default-font-family);
+  --heading-font-size-adjust: 1;
+  --heading-font-style: normal;
+  --heading-leading-trim-start: var(--default-leading-trim-start);
+  --heading-leading-trim-end: var(--default-leading-trim-end);
+  --heading-letter-spacing: 0em;
+
+  --heading-line-height-0: calc(12px * var(--scaling));
+  --heading-line-height-1: calc(16px * var(--scaling));
+  --heading-line-height-2: calc(18px * var(--scaling));
+  --heading-line-height-3: calc(22px * var(--scaling));
+  --heading-line-height-4: calc(24px * var(--scaling));
+  --heading-line-height-5: calc(26px * var(--scaling));
+  --heading-line-height-6: calc(30px * var(--scaling));
+  --heading-line-height-7: calc(36px * var(--scaling));
+  --heading-line-height-8: calc(40px * var(--scaling));
+  --heading-line-height-9: calc(60px * var(--scaling));
+
+  /* Code */
+
+  --code-font-family: var(--font-geist-mono, 'Geist Mono'), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono',
+    monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --code-font-size-adjust: 0.95;
+  --code-font-style: normal;
+  --code-font-weight: inherit;
+  --code-letter-spacing: -0.007em;
+  --code-padding-top: 0.1em;
+  --code-padding-bottom: 0.1em;
+  --code-padding-left: 0.25em;
+  --code-padding-right: 0.25em;
+
+  /* Strong */
+
+  --strong-font-family: var(--default-font-family);
+  --strong-font-size-adjust: 1;
+  --strong-font-style: inherit;
+  --strong-font-weight: var(--font-weight-bold);
+  --strong-letter-spacing: 0em;
+
+  /* Em */
+
+  --em-font-family: 'Times New Roman', 'Times', serif;
+  --em-font-size-adjust: 1.18;
+  --em-font-style: italic;
+  --em-font-weight: inherit;
+  --em-letter-spacing: -0.025em;
+
+  /* Quote */
+
+  --quote-font-family: 'Times New Roman', 'Times', serif;
+  --quote-font-size-adjust: 1.18;
+  --quote-font-style: italic;
+  --quote-font-weight: inherit;
+  --quote-letter-spacing: -0.025em;
+
+  /* Tabs */
+
+  --tab-active-letter-spacing: -0.01em;
+  --tab-active-word-spacing: 0em;
+  --tab-inactive-letter-spacing: 0em;
+  --tab-inactive-word-spacing: 0em;
+}
+
+.radix-themes {
+  overflow-wrap: break-word;
+  font-family: var(--default-font-family);
+  font-size: var(--default-font-size);
+  font-weight: var(--default-font-weight);
+  font-style: var(--default-font-style);
+  line-height: var(--default-line-height);
+  letter-spacing: var(--default-letter-spacing);
+  text-size-adjust: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 300;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semilight'), local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 300;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semilight Italic'), local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 400;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 500;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semibold'), local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 500;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semibold Italic'), local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 700;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Bold');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Bold Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 300;
+  descent-override: 35%;
+  src: local('Open Sans Light'), local('Open Sans Regular');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 300;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Light Italic'), local('Open Sans Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 400;
+  descent-override: 35%;
+  src: local('Open Sans Regular');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 500;
+  descent-override: 35%;
+  src: local('Open Sans Medium'), local('Open Sans Regular');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 500;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Medium Italic'), local('Open Sans Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 700;
+  descent-override: 35%;
+  src: local('Open Sans Bold');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Bold Italic');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 400;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Italic');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 700;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Bold');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Bold Italic');
+}

package/src/styles/utilities/align-items.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .rt-r-ai-start {
+    align-items: flex-start;
+  }
+
+  .rt-r-ai-center {
+    align-items: center;
+  }
+
+  .rt-r-ai-end {
+    align-items: flex-end;
+  }
+
+  .rt-r-ai-baseline {
+    align-items: baseline;
+  }
+
+  .rt-r-ai-stretch {
+    align-items: stretch;
+  }
+}

package/src/styles/utilities/align-self.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .rt-r-as-start {
+    align-self: flex-start;
+  }
+
+  .rt-r-as-center {
+    align-self: center;
+  }
+
+  .rt-r-as-end {
+    align-self: flex-end;
+  }
+
+  .rt-r-as-baseline {
+    align-self: baseline;
+  }
+
+  .rt-r-as-stretch {
+    align-self: stretch;
+  }
+}

package/src/styles/utilities/display.css

@@ -0,0 +1,37 @@
+@breakpoints {
+  .rt-r-display-block {
+    display: block;
+  }
+
+  .rt-r-display-inline {
+    display: inline;
+  }
+
+  .rt-r-display-inline-block {
+    display: inline-block;
+  }
+
+  .rt-r-display-flex {
+    display: flex;
+  }
+
+  .rt-r-display-inline-flex {
+    display: inline-flex;
+  }
+
+  .rt-r-display-grid {
+    display: grid;
+  }
+
+  .rt-r-display-inline-grid {
+    display: inline-grid;
+  }
+
+  .rt-r-display-none {
+    display: none;
+  }
+
+  .rt-r-display-contents {
+    display: contents;
+  }
+}

package/src/styles/utilities/flex-basis.css

@@ -0,0 +1,28 @@
+.rt-r-fb {
+  flex-basis: var(--flex-basis);
+}
+@media (--xs) {
+  .xs\:rt-r-fb {
+    flex-basis: var(--flex-basis-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-fb {
+    flex-basis: var(--flex-basis-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-fb {
+    flex-basis: var(--flex-basis-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-fb {
+    flex-basis: var(--flex-basis-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-fb {
+    flex-basis: var(--flex-basis-xl);
+  }
+}

package/src/styles/utilities/flex-direction.css

@@ -0,0 +1,17 @@
+@breakpoints {
+  .rt-r-fd-row {
+    flex-direction: row;
+  }
+
+  .rt-r-fd-column {
+    flex-direction: column;
+  }
+
+  .rt-r-fd-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .rt-r-fd-column-reverse {
+    flex-direction: column-reverse;
+  }
+}

package/src/styles/utilities/flex-grow.css

@@ -0,0 +1,40 @@
+@breakpoints {
+  .rt-r-fg {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-fg-0 {
+    flex-grow: 0;
+  }
+  .rt-r-fg-1 {
+    flex-grow: 1;
+  }
+}
+
+.rt-r-fg {
+  flex-grow: var(--flex-grow);
+}
+@media (--xs) {
+  .xs\:rt-r-fg {
+    flex-grow: var(--flex-grow-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-fg {
+    flex-grow: var(--flex-grow-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-fg {
+    flex-grow: var(--flex-grow-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-fg {
+    flex-grow: var(--flex-grow-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-fg {
+    flex-grow: var(--flex-grow-xl);
+  }
+}

package/src/styles/utilities/flex-shrink.css

@@ -0,0 +1,40 @@
+@breakpoints {
+  .rt-r-fs {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-fs-0 {
+    flex-shrink: 0;
+  }
+  .rt-r-fs-1 {
+    flex-shrink: 1;
+  }
+}
+
+.rt-r-fs {
+  flex-shrink: var(--flex-shrink);
+}
+@media (--xs) {
+  .xs\:rt-r-fs {
+    flex-shrink: var(--flex-shrink-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-fs {
+    flex-shrink: var(--flex-shrink-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-fs {
+    flex-shrink: var(--flex-shrink-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-fs {
+    flex-shrink: var(--flex-shrink-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-fs {
+    flex-shrink: var(--flex-shrink-xl);
+  }
+}

package/src/styles/utilities/flex-wrap.css

@@ -0,0 +1,13 @@
+@breakpoints {
+  .rt-r-fw-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .rt-r-fw-wrap {
+    flex-wrap: wrap;
+  }
+
+  .rt-r-fw-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+}

package/src/styles/utilities/font-weight.css

@@ -0,0 +1,17 @@
+@breakpoints {
+  .rt-r-weight-light {
+    font-weight: var(--font-weight-light);
+  }
+
+  .rt-r-weight-regular {
+    font-weight: var(--font-weight-regular);
+  }
+
+  .rt-r-weight-medium {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .rt-r-weight-bold {
+    font-weight: var(--font-weight-bold);
+  }
+}

package/src/styles/utilities/gap.css

@@ -0,0 +1,166 @@
+@breakpoints {
+  .rt-r-gap {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-gap-0 {
+    gap: 0;
+  }
+  .rt-r-gap-1 {
+    gap: var(--space-1);
+  }
+  .rt-r-gap-2 {
+    gap: var(--space-2);
+  }
+  .rt-r-gap-3 {
+    gap: var(--space-3);
+  }
+  .rt-r-gap-4 {
+    gap: var(--space-4);
+  }
+  .rt-r-gap-5 {
+    gap: var(--space-5);
+  }
+  .rt-r-gap-6 {
+    gap: var(--space-6);
+  }
+  .rt-r-gap-7 {
+    gap: var(--space-7);
+  }
+  .rt-r-gap-8 {
+    gap: var(--space-8);
+  }
+  .rt-r-gap-9 {
+    gap: var(--space-9);
+  }
+  .rt-r-cg {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-cg-0 {
+    column-gap: 0;
+  }
+  .rt-r-cg-1 {
+    column-gap: var(--space-1);
+  }
+  .rt-r-cg-2 {
+    column-gap: var(--space-2);
+  }
+  .rt-r-cg-3 {
+    column-gap: var(--space-3);
+  }
+  .rt-r-cg-4 {
+    column-gap: var(--space-4);
+  }
+  .rt-r-cg-5 {
+    column-gap: var(--space-5);
+  }
+  .rt-r-cg-6 {
+    column-gap: var(--space-6);
+  }
+  .rt-r-cg-7 {
+    column-gap: var(--space-7);
+  }
+  .rt-r-cg-8 {
+    column-gap: var(--space-8);
+  }
+  .rt-r-cg-9 {
+    column-gap: var(--space-9);
+  }
+  .rt-r-rg {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-rg-0 {
+    row-gap: 0;
+  }
+  .rt-r-rg-1 {
+    row-gap: var(--space-1);
+  }
+  .rt-r-rg-2 {
+    row-gap: var(--space-2);
+  }
+  .rt-r-rg-3 {
+    row-gap: var(--space-3);
+  }
+  .rt-r-rg-4 {
+    row-gap: var(--space-4);
+  }
+  .rt-r-rg-5 {
+    row-gap: var(--space-5);
+  }
+  .rt-r-rg-6 {
+    row-gap: var(--space-6);
+  }
+  .rt-r-rg-7 {
+    row-gap: var(--space-7);
+  }
+  .rt-r-rg-8 {
+    row-gap: var(--space-8);
+  }
+  .rt-r-rg-9 {
+    row-gap: var(--space-9);
+  }
+}
+
+.rt-r-gap {
+  gap: var(--gap);
+}
+.rt-r-cg {
+  column-gap: var(--column-gap);
+}
+.rt-r-rg {
+  row-gap: var(--row-gap);
+}
+@media (--xs) {
+  .xs\:rt-r-gap {
+    gap: var(--gap-xs);
+  }
+  .xs\:rt-r-cg {
+    column-gap: var(--column-gap-xs);
+  }
+  .xs\:rt-r-rg {
+    row-gap: var(--row-gap-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-gap {
+    gap: var(--gap-sm);
+  }
+  .sm\:rt-r-cg {
+    column-gap: var(--column-gap-sm);
+  }
+  .sm\:rt-r-rg {
+    row-gap: var(--row-gap-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-gap {
+    gap: var(--gap-md);
+  }
+  .md\:rt-r-cg {
+    column-gap: var(--column-gap-md);
+  }
+  .md\:rt-r-rg {
+    row-gap: var(--row-gap-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-gap {
+    gap: var(--gap-lg);
+  }
+  .lg\:rt-r-cg {
+    column-gap: var(--column-gap-lg);
+  }
+  .lg\:rt-r-rg {
+    row-gap: var(--row-gap-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-gap {
+    gap: var(--gap-xl);
+  }
+  .xl\:rt-r-cg {
+    column-gap: var(--column-gap-xl);
+  }
+  .xl\:rt-r-rg {
+    row-gap: var(--row-gap-xl);
+  }
+}