feat: finish tests on theme/style/vue; begin work on runtime; arch up…

…dates
Tahul · Aug 31, 2023 · 619781f · 619781f
1 parent 2ca80e3
commit 619781f
Show file tree

Hide file tree

Showing 158 changed files with 4,373 additions and 2,668 deletions.
diff --git a/docs/content/0.get-started/0.what-is-pinceau.md b/docs/content/0.get-started/0.what-is-pinceau.md
@@ -78,7 +78,7 @@ button {
 ```
 
 ```ts [main.ts]
-const green500 = $dt('color.green.500');
+const green500 = $theme('color.green.5');
 ```
 
 - Or even better, using the `css()`{lang="ts"} function in your `<style lang="ts">`{lang="vue"} blocks:
@@ -102,7 +102,7 @@ css({
   '.my-button': {
     px: '{space.4}',
     color: 'white',
-    backgroundColor: (props) => `{color.${props.color}.4}`,
+    backgroundColor: (props) => `$color.${props.color}.4`,
   },
   variants: {
     size: {
@@ -140,7 +140,7 @@ It starts with a [configuration file](/configuration), that supports:
 Once you are all setup with your theme, you're all set to use the **styling features**:
 
 - [The `css()` function](/styling/css-function) will provide you autocomplete on all your tokens.
-- [The tokens helper](/styling/tokens-helper) will help you use your tokens in any context.
+- [The `$theme()` helper](/styling/theme-helper) will help you use your tokens in any context.
 - [Computed styles](/styling/computed-styles) can help you build style-based props supporting tokens.
 - [Variants](/styling/variants) can help you build advanced and reusable responsive style props.
 
diff --git a/docs/content/1.configuration/0.tokens-config.md b/docs/content/1.configuration/0.tokens-config.md
@@ -130,7 +130,7 @@ export const theme = {
 
 export type GeneratedPinceauTheme = typeof theme
 
-export type GeneratedPinceauPaths = "media.tablet" | "media.desktop" | "color.white" | "color.black" | "color.primary" | "color.secondary" | "color.tertiary" | "space.1" | "space.2" | "space.3" | "space.4";
+export type GeneratedPinceauThemePaths = "media.tablet" | "media.desktop" | "color.white" | "color.black" | "color.primary" | "color.secondary" | "color.tertiary" | "space.1" | "space.2" | "space.3" | "space.4";
 
 export default theme
 ```
@@ -150,18 +150,18 @@ Let's create a `primary` color from another color in our configuration.
 
 ```ts
 defineTheme({
-    primary: '{color.blue.500}',
+    primary: '$color.blue.5',
     blue: {
-      50: '#C5CDE8',
-      100: '#B6C1E2',
-      200: '#99A8D7',
-      300: '#7B8FCB',
-      400: '#5E77C0',
-      500: '#4560B0',
-      600: '#354A88',
-      700: '#25345F',
-      800: '#161E37',
-      900: '#06080F',
+      0: '#C5CDE8',
+      1: '#B6C1E2',
+      2: '#99A8D7',
+      3: '#7B8FCB',
+      4: '#5E77C0',
+      5: '#4560B0',
+      6: '#354A88',
+      7: '#25345F',
+      8: '#161E37',
+      9: '#06080F',
     },
 })
 ```

diff --git a/docs/content/1.configuration/2.media-queries.md b/docs/content/1.configuration/2.media-queries.md
@@ -33,7 +33,7 @@ In this example you can see:
 These media queries will then be usable through all your app and reused across all Pinceau features.
 
 - [`css()`](/styling/css-function)
-- [`.css`-like files](/styling/tokens-helper)
+- [`.css`-like files](/styling/theme-helper)
 - [`Variants`](/styling/variants)
 - [`Computed Styles`](/styling/computed-styles)
 - [`CSS Prop`](/styling/css-prop)

diff --git a/docs/content/1.configuration/3.responsive-tokens.md b/docs/content/1.configuration/3.responsive-tokens.md
@@ -10,20 +10,20 @@ Let's create a responsive token that use a light color in dark mode and a dark c
 ```ts
 export default defineTheme({
     primary: {
-      initial: '{color.blue.900}',
-      dark: '{color.blue.50}'
+      initial: '$color.blue.9',
+      dark: '$color.blue.0'
     },
     blue: {
-      50: '#C5CDE8',
-      100: '#B6C1E2',
-      200: '#99A8D7',
-      300: '#7B8FCB',
-      400: '#5E77C0',
-      500: '#4560B0',
-      600: '#354A88',
-      700: '#25345F',
-      800: '#161E37',
-      900: '#06080F',
+      0: '#C5CDE8',
+      1: '#B6C1E2',
+      2: '#99A8D7',
+      3: '#7B8FCB',
+      4: '#5E77C0',
+      5: '#4560B0',
+      6: '#354A88',
+      7: '#25345F',
+      8: '#161E37',
+      9: '#06080F',
     },
 })
 ```

diff --git a/docs/package.json b/docs/package.json
@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "@nuxt-themes/docus": "^1.14.6",
-    "@types/node": "^20.5.0",
+    "@types/node": "^20.5.7",
     "@vueuse/motion": "^2.0.0"
   }
 }
diff --git a/examples/nuxt/app.vue b/examples/nuxt/app.vue
@@ -1,15 +1,57 @@
 <template>
   <main>
-    Hello World
+    <p>
+      {{ color }}
+    </p>
+    <MyButton />
   </main>
 </template>
 
-<style lang="postcss">
-@lg {
-  div {
-    color: red;
-    background-color: red;
-    
+<script setup lang="ts">
+import theme from '$pinceau/theme'
+
+const color = ref('blue')
+
+const colors = Object.keys(theme.color)
+
+const rand = array => array[Math.floor(Math.random() * array.length)];
+
+let interval: NodeJS.Timeout
+onMounted(() => {
+  if (interval) clearInterval(interval)
+  interval = setInterval(
+    () => {
+      color.value = rand(colors)
+    },
+    1000
+  )
+})
+</script>
+
+<style lang="ts">
+css({
+  'html, body, #__nuxt': {
+    minHeight: '100vh',
+    minWidth: '100vw'
+  }
+})
+</style>
+
+<style scoped lang="ts">
+css({
+  main: {
+    color: '$color.blue.1',
+    backgroundColor: '$color.blue.9',
+    minHeight: '100vh',
+    minWidth: '100vw',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    padding: '$space.16'
+  },
+  p: {
+    marginBottom: 24
   }
-}
+})
 </style>
diff --git a/examples/nuxt/components/MyButton.vue b/examples/nuxt/components/MyButton.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    color?: StyleProp<keyof PinceauTheme['color']>
+  }>(),
+  {
+    color: 'blue'
+  }
+)
+</script>
+
+<template>
+  <button class="my-button">
+    <span v-if="!$slots?.default">
+      Hello Pinceau 1.0
+    </span>
+    <span v-else>
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.my-button': {
+    '--button-primary': (props) => `$color.${props.color}.600`,
+    '--button-secondary': (props) => `$color.${props.color}.500`,
+    display: 'inline-block',
+    borderRadius: '$radii.xl',
+    transition: '$transition.all',
+    color: '$color.white',
+    boxShadow: `0 5px 0 $button.primary, 0 12px 16px $color.dimmed`,
+    span: {
+      display: 'inline-block',
+      fontFamily: '$font.sans',
+      borderRadius: '$radii.lg',
+      fontSize: '$fontSize.xl',
+      lineHeight: '$lead.none',
+      transition: '$transition.all',
+      backgroundColor: '$button.primary',
+      boxShadow: 'inset 0 -1px 1px $color.dark',
+    },
+    '&:hover': {
+      span: {
+        backgroundColor: `$button.secondary`,
+      }
+    },
+    '&:active': {
+      span: {
+        transform: 'translateY($space.4)'
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        span: {
+          padding: '$space.6 $space.12',
+        },
+      },
+      md: {
+        span: {
+          padding: '$space.12 $space.16'
+        },
+      },
+      lg: {
+        span: {
+          padding: '$space.16 $space.24'
+        },
+      },
+      xl: {
+        span: {
+          padding: '$space.32 $space.48'
+        },
+      },
+      options: {
+        default: 'sm',
+      },
+    },
+  },
+})
+</style>
diff --git a/examples/nuxt/package.json b/examples/nuxt/package.json
@@ -17,7 +17,7 @@
     "pinceau": "workspace:*"
   },
   "devDependencies": {
-    "nuxt": "^3.6.5"
+    "nuxt": "^3.7.0"
   },
   "stackblitz": {
     "installDependencies": false,

diff --git a/examples/vite-lib/lib/main.css b/examples/vite-lib/lib/main.css
@@ -1,5 +1,5 @@
 @lg {
   .test {
-    background-color: $theme('color.blue.100');
+    background-color: $theme('color.blue.1');
   }
 }
diff --git a/examples/vite-lib/package.json b/examples/vite-lib/package.json
@@ -17,7 +17,7 @@
     "pinceau": "workspace:*"
   },
   "devDependencies": {
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.0",
     "vite": "^4.4.9"
   }
 }
diff --git a/examples/vite-vue/app.vue b/examples/vite-vue/app.vue
@@ -1,18 +1,28 @@
 <template>
-  <main>
+  <main class="main">
     <Navigation />
 
     <RouterView />
   </main>
 </template>
 
+
+<style lang="ts">
+css({
+  'html, body, #app': {
+    height: '100vh',
+    width: '100vw',
+    backgroundColor: '$color.blue.2'
+  },
+})
+</style>
+
 <style scoped lang="ts">
 css({
-  main: {
-    padding: '{space.16}',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '2rem'
+  '.main': {
+    width: '100%',
+    height: '100%',
+    padding: '$space.8',
   }
 })
 </style>
diff --git a/examples/vite-vue/components/Navigation.vue b/examples/vite-vue/components/Navigation.vue
@@ -12,16 +12,17 @@ import { routes } from '../main'
   </ul>
 </template>
 
-<style lang="postcss" scoped>
-ul {
-  list-style-type: circle;
-  display: flex;
-  flex-direction: column;
-  gap: $theme('space.2');
-}
-
-a {
-  text-transform: capitalize;
-  text-decoration: underline;
-}
+<style scoped lang="ts">
+css({
+  ul: {
+    listStyleType: 'count',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '$space.2',
+  },
+  a: {
+    textTransform: 'capitalize',
+    textDecoration: 'underline',
+  }
+})
 </style>
diff --git a/examples/vite-vue/features/core.vue b/examples/vite-vue/features/core.vue
@@ -4,6 +4,6 @@
 
 <style scoped lang="postcss">
 div {
-  background-color: $theme('color.yellow.100');
+  background-color: $theme('color.yellow.1');
 }
 </style>
diff --git a/examples/vite-vue/features/index.vue b/examples/vite-vue/features/index.vue
@@ -4,6 +4,6 @@
 
 <style scoped lang="postcss">
 div {
-  background-color: $theme('color.green.100');
+  background-color: $theme('color.green.1');
 }
 </style>
diff --git a/examples/vite-vue/features/runtime.vue b/examples/vite-vue/features/runtime.vue
@@ -4,6 +4,6 @@
 
 <style scoped lang="postcss">
 div {
-  background-color: $theme('color.violet.100');
+  background-color: $theme('color.violet.1');
 }
 </style>
diff --git a/examples/vite-vue/features/theme.vue b/examples/vite-vue/features/theme.vue
@@ -4,6 +4,6 @@
 
 <style scoped lang="postcss">
 div {
-  background-color: $theme('color.red.100');
+  background-color: $theme('color.red.1');
 }
 </style>