feat: create scalar tailwind preset (#1842)

* chore: pre merge tailwind config * feat: create scalar tailwind preset * feat: switch to preset for non color configs * feat: migrate colors to use scalar preset * fix: add back px * fix: update listbox classes
scalar · May 31, 2024 · 0727585 · 0727585
1 parent db7864a
commit 0727585
Show file tree

Hide file tree

Showing 24 changed files with 235 additions and 221 deletions.
diff --git a/packages/components/.storybook/preview.css b/packages/components/.storybook/preview.css
@@ -3,62 +3,62 @@ html {
 }
 
 body.sb-show-main,
-#storybook-docs .sbdocs-wrapper {
+:where(#storybook-docs) .sbdocs-wrapper {
   background: var(--scalar-background-1);
 }
 
-#storybook-docs tbody {
+:where(#storybook-docs) tbody {
   border-radius: var(--scalar-radius);
 }
 
-#storybook-docs tbody tr > * {
+:where(#storybook-docs) tbody tr > * {
   background: var(--scalar-background-2);
   border-color: var(--scalar-border-color) !important;
 }
 
-#storybook-docs th {
+:where(#storybook-docs) th {
   color: var(--scalar-color-2);
 }
 
-#storybook-docs .docblock-argstable {
+:where(#storybook-docs) .docblock-argstable {
   color: var(--scalar-color-1);
 }
-#storybook-docs tr[title] > *,
-#storybook-docs tr[title] svg {
+:where(#storybook-docs) tr[title] > *,
+:where(#storybook-docs) tr[title] svg {
   background: var(--scalar-background-3) !important;
   color: var(--scalar-color-2);
 }
 
-#storybook-docs tr [title='Required'] {
+:where(#storybook-docs) tr [title='Required'] {
   color: var(--scalar-text-color-1);
 }
 
-#storybook-docs h1 {
+:where(#storybook-docs) h1 {
   color: var(--scalar-color-1);
 }
-#storybook-docs h2 {
+:where(#storybook-docs) h2 {
   color: var(--scalar-color-1);
 }
 
-#storybook-docs h3 {
+:where(#storybook-docs) h3 {
   color: var(--scalar-color-3);
 }
 
-#storybook-docs p,
-#storybook-docs li {
+:where(#storybook-docs) p,
+:where(#storybook-docs) li {
   color: var(--scalar-color-2);
 }
 
-#storybook-docs .sbdocs-preview {
+:where(#storybook-docs) .sbdocs-preview {
   color: var(--scalar-color-2);
   border-color: var(--scalar-border-color);
   background: var(--scalar-background-2);
 }
-#storybook-docs .sbdocs-preview > div:first-of-type:not(.docs-story) {
+:where(#storybook-docs) .sbdocs-preview > div:first-of-type:not(.docs-story) {
   background: var(--scalar-background-3);
 }
 
-#storybook-docs td > div > div > span {
+:where(#storybook-docs) td > div > div > span {
   background: var(--scalar-background-3);
   color: var(--scalar-color-2);
   border-color: var(--scalar-border-color);

diff --git a/packages/components/README.md b/packages/components/README.md
@@ -13,8 +13,8 @@ pnpm i @scalar/theme @scalar/components
 In your main setup file (main.ts etc)
 
 ```ts
-import '@scalar/themes/fonts.css'
 import '@scalar/themes/base.css'
+import '@scalar/themes/fonts.css'
 ```
 
 Then to use the components
@@ -27,7 +27,7 @@ import { ScalarButton, ScalarTextField } from '@scalar/components'
 <template>
   <main class="col-1 items-center justify-center">
     <div
-      class="col w-full max-w-md items-center gap-4 rounded-lg bg-back-3 p-8 shadow">
+      class="col w-full max-w-md items-center gap-4 rounded-lg bg-b-3 p-8 shadow">
       <h1 className="text-lg font-bold">Sign in to your account</h1>
 
       <ScalarTextField
@@ -39,80 +39,6 @@ import { ScalarButton, ScalarTextField } from '@scalar/components'
 </template>
 ```
 
-## Theme variables
-
-To override the theme, feel free to set the `--scalar-x` versions of these variables.
-
-```ts
-export const theme = {
-  boxShadow: {
-    label:
-      '0 0 2px 2px var(--scalar-background-1)',
-    DEFAULT: 'var(--scalar-shadow-1)',
-    md: 'var(--scalar-shadow-2)',
-    sm: 'rgba(0, 0, 0, 0.09) 0px 1px 4px',
-    none: '0 0 #0000',
-  },
-  colors: {
-    'fore-1': 'var(--scalar-color-1)',
-    'fore-2': 'var(--scalar-color-2)',
-    'fore-3': 'var(--scalar-color-3)',
-    'accent': 'var(--scalar-color-accent)',
-    'back-1': 'var(--scalar-background-1)',
-    'back-2': 'var(--scalar-background-2)',
-    'back-3': 'var(--scalar-background-3)',
-    'back-accent':
-      'var(--scalar-background-accent)',
-
-    'backdrop': 'rgba(0, 0, 0, 0.44)',
-    'border': 'var(--scalar-border-color)',
-
-    'back-btn-1': 'var(--scalar-button-1)',
-    'fore-btn-1':
-      'var(--scalar-button-1-color)',
-    'hover-btn-1':
-      'var(--scalar-button-1-hover)',
-
-    'white': '#FFF',
-    'green': 'var(--scalar-color-green)',
-    'red': 'var(--scalar-color-red)',
-    'yellow': 'var(--scalar-color-yellow)',
-    'blue': 'var(--scalar-color-blue)',
-    'orange': 'var(--scalar-color-orange)',
-    'purple': 'var(--scalar-color-purple)',
-    'error': 'var(--scalar-error-color)',
-    'ghost': 'var(--scalar-color-ghost)',
-    'transparent': 'transparent',
-  },
-  fontSize: {
-    xxs: 'var(--scalar-micro, var(--scalar-font-size-5))',
-    xs: 'var(--scalar-mini, var(--scalar-font-size-4))',
-    sm: 'var(--scalar-small, var(--scalar-font-size-3))',
-    base: 'var(--scalar-paragraph, var(--scalar-font-size-2))',
-    lg: 'var(--scalar-font-size-1)',
-  },
-} as const
-
-export const extend = {
-  borderRadius: {
-    DEFAULT: 'var(--scalar-radius)',
-    md: 'var(--scalar-radius)',
-    lg: 'var(--scalar-radius-lg)',
-    xl: 'var(--scalar-radius-xl)',
-  },
-  fontWeight: {
-    medium: 'var(--scalar-font-medium)',
-    bold: 'var(-scalar-font-bold)',
-  },
-  maxWidth: {
-    'screen-xs': '480px',
-    'screen-sm': '540px',
-    'screen-md': '640px',
-    'screen-lg': '800px',
-  },
-} as const
-```
-
 ## CSS Layers
 
 This package exports its' tailwind styles in the following CSS cascade layers to make them easy to overwrite.

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -58,6 +58,7 @@
     "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
+    "@headlessui/tailwindcss": "^0.2.0",
     "@rise8/tailwind-pixel-perfect-preset": "^1.0.1",
     "@scalar/themes": "workspace:*",
     "@storybook/addon-essentials": "^8.0.8",
@@ -83,6 +84,7 @@
     "storybook-dark-mode": "^4.0.1",
     "svglint": "^2.7.1",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-color-mix": "^0.0.8",
     "ts-node": "^10.9.1",
     "typescript": "^5.4.3",
     "vite": "^5.2.10",

diff --git a/packages/components/src/components/ScalarButton/variants.ts b/packages/components/src/components/ScalarButton/variants.ts
@@ -5,15 +5,15 @@ import { cva } from '../../cva'
 export const styles: Record<string, Record<string, any>> = {
   solid: [
     'scalar-button-solid',
-    'bg-back-btn-1 text-fore-btn-1 shadow-sm active:bg-back-btn-1 active:shadow-none hocus:bg-hover-btn-1',
+    'bg-b-btn text-c-btn shadow-sm active:bg-b-btn active:shadow-none hocus:bg-h-btn',
   ],
   outlined: [
     'scalar-button-outlined',
-    'active:bg-btn-1 border border-solid border-border bg-transparent text-fore-1 hocus:bg-border',
+    'active:bg-btn-1 border border-solid border-border bg-transparent text-c-1 hocus:bg-border',
   ],
   ghost: [
     'scalar-button-ghost',
-    'bg-transparent text-fore-3 transition-colors active:text-fore-1 hocus:text-fore-1',
+    'bg-transparent text-c-3 transition-colors active:text-c-1 hocus:text-c-1',
   ],
   danger: [
     'scalar-button-danger',
@@ -35,7 +35,7 @@ export const variants = cva({
     {
       disabled: true,
       variant: 'ghost',
-      class: 'bg-transparent text-ghost',
+      class: 'text-ghost bg-transparent',
     },
   ],
 })

diff --git a/packages/components/src/components/ScalarDropdown/ScalarDropdown.vue b/packages/components/src/components/ScalarDropdown/ScalarDropdown.vue
@@ -22,7 +22,7 @@ defineOptions({ inheritAttrs: false })
           v-bind="$attrs">
           <slot name="items" />
           <div
-            class="absolute inset-0 -z-1 rounded bg-back-1 shadow-md brightness-lifted" />
+            class="absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" />
         </MenuItems>
       </template>
     </ScalarFloating>

diff --git a/packages/components/src/components/ScalarDropdown/ScalarDropdownItem.vue b/packages/components/src/components/ScalarDropdown/ScalarDropdownItem.vue
@@ -17,13 +17,13 @@ const variants = cva({
     'min-w-0 items-center gap-3 rounded px-2.5 py-1.5 text-left',
     'first-of-type:mt-0.75 last-of-type:mb-0.75',
     // Text / background style
-    'truncate bg-transparent text-xs font-medium text-fore-2',
+    'truncate bg-transparent text-xs font-medium text-c-2',
     // Interaction
-    'cursor-pointer hover:bg-back-2 hover:text-fore-1',
+    'cursor-pointer hover:bg-b-2 hover:text-c-1',
   ],
   variants: {
-    disabled: { true: 'pointer-events-none text-fore-3' },
-    active: { true: 'bg-back-2 text-fore-1' },
+    disabled: { true: 'pointer-events-none text-c-3' },
+    active: { true: 'bg-b-2 text-c-1' },
   },
 })
 </script>

diff --git a/packages/components/src/components/ScalarFloating/ScalarFloating.stories.ts b/packages/components/src/components/ScalarFloating/ScalarFloating.stories.ts
@@ -20,10 +20,10 @@ const meta: Meta = {
     template: `
 <div class="flex items-center justify-center w-full h-screen">
   <ScalarFloating v-bind="args">
-    <div class="rounded border bg-back-2 p-2">Target for #floating</div>
+    <div class="rounded border bg-b-2 p-2">Target for #floating</div>
     <template #floating="{ width, height }">
       <div 
-        class="flex items-center justify-center rounded border shadow bg-back-2 p-1" 
+        class="flex items-center justify-center rounded border shadow bg-b-2 p-1" 
         :style="{ width, height }">
         Floating
       </div>

diff --git a/packages/components/src/components/ScalarIcon/IconList.vue b/packages/components/src/components/ScalarIcon/IconList.vue
@@ -14,18 +14,18 @@ const selected = ref('')
 const copied = ref(false)
 </script>
 <template>
-  <div class="flex flex-col divide-y rounded border bg-back-1">
+  <div class="flex flex-col divide-y rounded border bg-b-1">
     <div class="flex flex-wrap gap-2 p-0.5">
       <ScalarIconButton
         v-for="icon in ICONS"
         :key="icon"
-        class="hover:bg-back-2"
+        class="hover:bg-b-2"
         :icon="icon"
         :label="icon"
         @click="copyToClipboard(icon)"
         @mouseenter="selected = icon" />
     </div>
-    <div class="flex justify-between p-2 text-xs text-fore-2">
+    <div class="flex justify-between p-2 text-xs text-c-2">
       <span v-if="copied">Copied to clipboard!</span>
       <span v-else>Select an icon to copy</span>
       <code class="font-code">

diff --git a/packages/components/src/components/ScalarIcon/ScalarIcon.stories.ts b/packages/components/src/components/ScalarIcon/ScalarIcon.stories.ts
@@ -46,7 +46,7 @@ export const AllSizes: Story = {
       return { args }
     },
     template: `
-<div class="flex items-center gap-2 text-fore-2">
+<div class="flex items-center gap-2 text-c-2">
   <ScalarIcon size="xs" v-bind="args"/>
   <ScalarIcon size="sm" v-bind="args"/>
   <ScalarIcon size="md" v-bind="args"/>

diff --git a/packages/components/src/components/ScalarListbox/ScalarListbox.stories.ts b/packages/components/src/components/ScalarListbox/ScalarListbox.stories.ts
@@ -45,7 +45,7 @@ export const Base: Story = {
     template: `
 <div class="flex items-center justify-center w-full h-screen">
   <ScalarListbox v-model="selected" v-bind="args">
-    <ScalarButton class="w-48" variant="outlined">
+    <ScalarButton class="w-48 px-3" variant="outlined">
       <div class="flex flex-1 items-center min-w-0">
         <span class="inline-block truncate flex-1 min-w-0 text-left">
         {{ selected?.label ?? 'Select an option' }}

diff --git a/packages/components/src/components/ScalarListbox/ScalarListbox.vue b/packages/components/src/components/ScalarListbox/ScalarListbox.vue
@@ -30,13 +30,13 @@ const variants = cva({
     'flex min-w-0 items-center gap-2 rounded px-2.5 py-1.5 text-left',
     'first-of-type:mt-0.75 last-of-type:mb-0.75',
     // Text / background style
-    'truncate bg-transparent text-xs font-medium text-fore-2',
+    'truncate bg-transparent text-xs font-medium text-c-2',
     // Interaction
-    'cursor-pointer hover:bg-back-2 hover:text-fore-1',
+    'cursor-pointer hover:bg-b-2 hover:text-c-1',
   ],
   variants: {
-    selected: { true: 'text-fore-1' },
-    active: { true: 'bg-back-2 text-fore-1' },
+    selected: { true: 'text-f-1' },
+    active: { true: 'text-f-1 bg-back-2' },
     disabled: { true: 'pointer-events-none opacity-50' },
   },
 })
@@ -54,7 +54,7 @@ const variants = cva({
       </ListboxButton>
       <template #floating="{ width }">
         <ListboxOptions
-          class="scalar-component relative flex w-40 flex-col p-0.75"
+          class="relative flex w-40 flex-col p-0.75"
           :style="{ width }"
           v-bind="$attrs">
           <ListboxOption
@@ -78,7 +78,7 @@ const variants = cva({
             </li>
           </ListboxOption>
           <div
-            class="absolute inset-0 -z-1 rounded bg-back-1 shadow-md brightness-lifted" />
+            class="absolute inset-0 -z-1 rounded bg-b-1 shadow-md brightness-lifted" />
         </ListboxOptions>
       </template>
     </ScalarFloating>

diff --git a/packages/components/src/components/ScalarModal/ScalarModal.vue b/packages/components/src/components/ScalarModal/ScalarModal.vue
@@ -29,7 +29,7 @@ withDefaults(
 const modal = cva({
   base: [
     'scalar-modal',
-    'col leading-snug relative mx-auto mb-0 mt-20 w-full rounded-lg bg-back-2 text-left text-fore-1 opacity-0',
+    'col relative mx-auto mb-0 mt-20 w-full rounded-lg bg-b-2 text-left leading-snug text-c-1 opacity-0',
   ].join(' '),
   variants: {
     size: {
@@ -39,7 +39,7 @@ const modal = cva({
       lg: 'max-w-screen-lg',
     },
     variant: {
-      history: 'scalar-modal-history bg-back-1',
+      history: 'scalar-modal-history bg-b-1',
       search: 'scalar-modal-search',
     },
   },
@@ -76,12 +76,12 @@ export const useModal = () =>
         :style="{ maxWidth }">
         <DialogTitle
           v-if="title"
-          class="scalar-modal-header font-semiBold m-0 rounded-lg px-6 py-3 text-left text-xs text-fore-1"
+          class="scalar-modal-header font-semiBold m-0 rounded-lg px-6 py-3 text-left text-xs text-c-1"
           :class="{ 'pb-0 pt-6': variant === 'history' }">
           {{ title }}
         </DialogTitle>
         <DialogDescription
-          class="scalar-modal-body relative max-h-[calc(100dvh-240px)] overflow-y-auto rounded-lg bg-back-1 px-6 pb-4 pt-6"
+          class="scalar-modal-body relative max-h-[calc(100dvh-240px)] overflow-y-auto rounded-lg bg-b-1 px-6 pb-4 pt-6"
           :class="
             cx(
               bodyClass,

diff --git a/packages/components/src/components/ScalarPopover/ScalarPopover.vue b/packages/components/src/components/ScalarPopover/ScalarPopover.vue
@@ -21,7 +21,7 @@ defineOptions({ inheritAttrs: false })
           v-bind="$attrs">
           <slot name="popover" />
           <div
-            class="absolute inset-0 -z-1 rounded bg-back-1 shadow-md brightness-lifted" />
+            class="absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" />
         </PopoverPanel>
       </template>
     </ScalarFloating>

diff --git a/packages/components/src/components/ScalarSearchInput/ScalarSearchInput.vue b/packages/components/src/components/ScalarSearchInput/ScalarSearchInput.vue
@@ -31,7 +31,7 @@ const attrs = computed(() => {
     v-bind="attrs.rest"
     :class="
       cx(
-        'flex rounded border bg-back-1 text-sm font-medium focus-within:border-fore-1',
+        'flex rounded border bg-b-1 text-sm font-medium focus-within:border-c-1',
         attrs.className,
       )
     ">