chore: setup postcss and typo

packages/ui-stencil/package.json

@@ -9,7 +9,10 @@
   },
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
-  "files": ["dist/", "loader/"],
+  "files": [
+    "dist/",
+    "loader/"
+  ],
   "scripts": {
     "build": "stencil build --docs",
     "clean": "rm -rf node_modules .turbo dist .stencil loader www",
@@ -27,16 +30,24 @@
     "sse.js": "^2.5.0"
   },
   "devDependencies": {
-    "@stencil/store": "^2.0.16",
+    "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "^0.8.4",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/vue-output-target": "^0.8.8",
     "@stencil/sass": "^3.0.12",
+    "@stencil/store": "^2.0.16",
+    "@stencil/vue-output-target": "^0.8.8",
+    "@types/autoprefixer": "^10.2.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.9",
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^7.0.3",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
+    "postcss": "^8.4.39",
+    "postcss-functions": "^4.0.2",
+    "postcss-preset-env": "^9.5.15",
     "puppeteer": "^22.12.1",
+    "rucksack-css": "^1.0.2",
     "sass-loader": "^14.2.1"
   },
   "collection": "dist/collection/collection-manifest.json",

packages/ui-stencil/src/components/internal/Typography/typography.scss

@@ -2,12 +2,15 @@
   color: var(--text-color-secondary, text-color('secondary'));
   font-size: var(--font-size-md, $font-size-md);
   line-height: var(--font-line-height-m, $font-line-height-m);
+  margin: 0;
+  padding: 0;
+  transform: translate(0, 0);
 
   &--bold {
     font-weight: var(--font-weight-semibold, $font-weight-semibold);
   }
 
-  @media (--md-min) {
+  @media (--sm-min) {
     font-size: var(--font-size-sm, $font-size-sm);
   }
 }
@@ -16,6 +19,9 @@
   color:  var(--text-color-tertiary, text-color('tertiary'));
   font-size: var(--font-size-sm, $font-size-sm);
   line-height: var(--font-line-height-s, $font-line-height-s);
+  margin: 0;
+  padding: 0;
+
 
   &--bold {
     font-weight: var(--font-weight-semibold, $font-weight-semibold);
@@ -30,6 +36,8 @@
   color: var(--text-color-tertiary, text-color('tertiary'));
   font-size: var(--font-size-xs, $font-size-xs);
   line-height: var(--font-line-height-s, $font-line-height-s);
+  margin: 0;
+  padding: 0;
 
   &--bold {
     font-weight: var(--font-weight-semibold, $font-weight-semibold);

packages/ui-stencil/src/styles/_colors.scss

@@ -74,7 +74,7 @@ $paletteDark: (
 );
 
 // should be imported by the config/colors.ts file
-$theme-light: (
+$theme-colors-light: (
   '--text-color-primary': text-color('primary'),
   '--text-color-secondary': text-color('secondary'),
   '--text-color-tertiary': text-color('tertiary'),
@@ -92,7 +92,7 @@ $theme-light: (
   '--icon-color-accent': icon-color('accent')
 );
 
-$theme-dark: (
+$theme-colors-dark: (
   '--text-color-primary': text-color('primary', $paletteDark),
   '--text-color-secondary': text-color('secondary', $paletteDark),
   '--text-color-tertiary': text-color('tertiary', $paletteDark),

packages/ui-stencil/src/styles/_functions.scss

@@ -78,13 +78,13 @@
  * Credits: Rowan Manning
  */
 @function rem-value($value) {
-  $rem-base: 10 !default;
+  $rem-baseline: 10 !default;
 
   /* If value is a number, do some magic rem stuff */
   @if type-of($value) == "number" {
     /* Return rem value */
-    $val: #{calc($value / $rem-base)}rem;
-    @return #{calc($value / $rem-base)}rem;
+    $val: #{calc($value / $rem-baseline)}rem;
+    @return $val;
   }
   /* Non-numeric value, just return */
   @return $value;

packages/ui-stencil/src/styles/_mixins.scss

@@ -18,7 +18,7 @@
   * Use to set the theme skin based on user preferences
   * @include spread-map($map);
  */
-@mixin spread-map($map: ()) {
+@mixin mapToCustomProperties($map: ()) {
   @each $key, $value in $map {
     #{$key}: $value;
   }

packages/ui-stencil/src/styles/_mq.scss

@@ -1,9 +1,9 @@
 $grid-breakpoints: (
-  xs: rem-value(480),
-  sm: rem-value(768),
-  md: rem-value(1024),
-  lg: rem-value(1200), // max width
-  xl: rem-value(1400)
+  xs: 480px,
+  sm: 768px,
+  md: 1024px,
+  lg: 1200px,
+  xl: 1400px
 );
 
 // MOBILE DEVICES

packages/ui-stencil/src/styles/_radius.scss

@@ -1,6 +1,6 @@
 $base: 8;
 
-$radiusS: rem-value($base); // 8px
-$radiusM: rem-value($base * 1.5); // 12px
-$radiusL: rem-value($base * 2); // 16px
-$radius3XL: rem-value($base * 5); // 40px
+$radiusS: pxToRem($base); // 8px
+$radiusM: pxToRem($base * 1.5); // 12px
+$radiusL: pxToRem($base * 2); // 16px
+$radius3XL: pxToRem($base * 5); // 40px

packages/ui-stencil/src/styles/_typography.scss

@@ -1,10 +1,10 @@
 // FONT FAMILY
-$font-primary: var(--font-primary, 'Instrument', sans-serif); // TODO: handle Instrument
+$font-primary: var(--font-primary, 'Instrument Sans', sans-serif);
 
 // FONT SIZE
-$font-size-xs: rem-value(12);
-$font-size-sm: rem-value(14);
-$font-size-md: rem-value(16);
+$font-size-xs: pxToRem(12);
+$font-size-sm: pxToRem(14);
+$font-size-md: pxToRem(16);
 
 // FONT WEIGHT
 $font-weight-normal: 400;
@@ -13,3 +13,14 @@ $font-weight-semibold: 600;
 // LINE HEIGHT
 $font-line-height-s: 1.25;
 $font-line-height-m: 1.5;
+
+$theme-typography: (
+  '--font-primary': $font-primary,
+  '--font-size-xs': $font-size-xs,
+  '--font-size-sm': $font-size-sm,
+  '--font-size-md': $font-size-md,
+  '--font-weight-normal': $font-weight-normal,
+  '--font-weight-semibold': $font-weight-semibold,
+  '--font-line-height-s': $font-line-height-s,
+  '--font-line-height-m': $font-line-height-m
+);

packages/ui-stencil/src/styles/globals.scss

@@ -1,13 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
+
 :root {
   #orama-ui {
-    @include spread-map($theme-light);
+    @include mapToCustomProperties($theme-colors-light);
+    @include mapToCustomProperties($theme-typography);
 
     &.theme-dark {
-      @include spread-map($theme-dark);
+      @include mapToCustomProperties($theme-colors-dark);
     }
   }
 }
 
-html {
-  font-size: 62.5%;
+#orama-ui {
+  @include font-smoothing();
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-family: var(--font-primary, $font-primary);
+  vertical-align: baseline;
+  text-size-adjust: none;
+
+  *, *:before, *:after{
+    box-sizing: border-box;
+  }
 }

packages/ui-stencil/stencil.config.ts

@@ -1,5 +1,11 @@
 import type { Config } from '@stencil/core'
 import { sass } from '@stencil/sass'
+import { postcss } from '@stencil-community/postcss';
+import autoprefixer from 'autoprefixer'
+import cssnano from 'cssnano'
+import postcssPresetEnv from 'postcss-preset-env'
+import rucksack from 'rucksack-css'
+import cssfunctions from 'postcss-functions'
 import { reactOutputTarget } from '@stencil/react-output-target'
 import { angularOutputTarget } from '@stencil/angular-output-target'
 import { vueOutputTarget } from '@stencil/vue-output-target'
@@ -49,5 +55,28 @@ export const config: Config = {
         'src/styles/tokens.scss'
       ]
     }),
+    postcss({
+      plugins: [
+        autoprefixer(),
+        cssnano(),
+        rucksack(),
+        cssfunctions({
+          functions: {
+            pxToRem: (px: string) => `calc(${px}rem / var(--base-font-size, 16))`
+          }
+        }),
+        postcssPresetEnv({
+          stage: 3,
+          features: {
+            'nesting-rules': true,
+            'custom-media-queries': true,
+            'media-query-ranges': true,
+            'custom-properties': true,
+            'nested-calc': true,
+            'prefers-color-scheme-query': true,
+          }
+        }),
+      ]
+    })
   ]
 }