chore: convert scss variables to ts file and add story for colors

apps/storybook/stories/design/colors.css

@@ -0,0 +1,23 @@
+.color-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.color-block {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+}
+.color-label {
+  font-size: 12px;
+  margin-bottom: 5px;
+}
+.color-value {
+  font-size: 10px;
+}

apps/storybook/stories/design/colors.stories.tsx

@@ -0,0 +1,120 @@
+import { html } from 'lit-html'
+import type { Meta, StoryObj } from '@storybook/web-components'
+import './colors.css'
+import colors from '@orama/wc-components/src/config/colors'
+
+const primitiveColors = Object.keys(colors).reduce((acc, key) => {
+  if (typeof colors[key] === 'string') {
+    acc[key] = colors[key]
+  }
+  return acc
+}, {})
+
+const semanticColorKeys = ['--text', '--background', '--border', '--shadow', '--icon']
+
+const getSemanticColors = (theme) => {
+  return Object.keys(colors).reduce((acc, key) => {
+    if (typeof colors[key] !== 'object') {
+      return acc
+    }
+    if (key === theme) {
+      for (const colorKey of Object.keys(colors[key])) {
+        if (semanticColorKeys.some((semanticColorKey) => colorKey.startsWith(semanticColorKey))) {
+          acc[colorKey] = colors[key][colorKey]
+        }
+      }
+    }
+    return acc
+  }, {})
+}
+
+const semanticColorsLight = getSemanticColors('light')
+const semanticColorsDark = getSemanticColors('dark')
+
+// element colors are all the colors under light and dark that are not semantic colors
+const getElementsColors = (theme) => {
+  return Object.keys(colors).reduce((acc, key) => {
+    if (typeof colors[key] !== 'object') {
+      return acc
+    }
+    if (key === theme) {
+      for (const colorKey of Object.keys(colors[key])) {
+        // include only the colors that don't start with the semantic color keys
+        if (!semanticColorKeys.some((semanticColorKey) => colorKey.startsWith(semanticColorKey))) {
+          acc[colorKey] = colors[key][colorKey]
+        }
+      }
+    }
+    return acc
+  }, {})
+}
+
+const elementColorsLight = getElementsColors('light')
+const elementColorsDark = getElementsColors('dark')
+
+const renderColorBlock = (color, label) => html`
+  <div class="color-block" style="background-color: ${color}">
+    <div class="color-label">${label}</div>
+    <div class="color-value">${color}</div>
+  </div>
+`
+
+const ColorsStory = () => html`
+  <div style="padding: 20px; max-width: 1200px; margin: 0 auto;">
+    <section>
+      <h2>Primitive Colors</h2>
+      <div class="color-container">
+        ${Object.keys(primitiveColors).map((key) => renderColorBlock(primitiveColors[key], key))}
+      </div>
+    </section>
+    <section>
+      <h2>Semantic Colors</h2>
+      <h3>Light Theme</h3> 
+      <div class="color-container">
+        ${Object.keys(semanticColorsLight).map((key) => renderColorBlock(semanticColorsLight[key], key))}
+      </div>
+      <h3>Dark Theme</h3>
+      <div class="color-container">
+        ${Object.keys(semanticColorsDark).map((key) => renderColorBlock(semanticColorsDark[key], key))}
+      </div>
+    </section>
+    <section>
+      <h2>Element Colors</h2>
+      <h3>Light Theme</h3>
+      <div class="color-container">
+        ${Object.keys(elementColorsLight).map((key) => renderColorBlock(elementColorsLight[key], key))}
+      </div>
+      <h3>Dark Theme</h3>
+      <div class="color-container">
+        ${Object.keys(elementColorsDark).map((key) => renderColorBlock(elementColorsDark[key], key))}
+      </div>
+    </section>
+    <section>
+      <h2>How to Use and Add Tokens</h2>
+      <p>
+        <strong>Primitive Colors:</strong> These are the basic colors used throughout the design system.
+        They serve as the foundation for creating more complex color schemes.
+      </p>
+      <p>
+        <strong>Semantic Colors:</strong> These colors convey specific meanings and are used to enhance
+        user experience by providing visual cues. For example, the background, text colors, borders, and shadows.
+      </p>
+      <p>
+        <strong>Element Colors:</strong> These colors are specific to UI elements like buttons, alerts, and other
+        components. They are derived from the primitive colors and ensure consistency across the application.
+      </p>
+      <p>
+        <strong>Adding Tokens:</strong> To add a new color token, update the respective color object in the codebase.
+        Ensure to follow the naming conventions and maintain consistency. Once added, these tokens can be used in
+        your stylesheets or inline styles.
+      </p>
+    </section>
+  </div>
+`
+
+export default {
+  title: 'Design Tokens/Colors',
+  component: 'colors-story',
+} as Meta
+
+export const Colors: StoryObj = ColorsStory.bind({})

package.json

@@ -12,7 +12,8 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "lint": "turbo run lint",
     "maintenance": "turbo run maintenance",
-    "publish:packages": "node scripts/release.mjs"
+    "publish:packages": "node scripts/release.mjs",
+    "convert-scss-to-js": "cd packages/ui-stencil && node extract-scss-vars.js"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",

packages/ui-stencil/extract-scss-vars.js

@@ -0,0 +1,76 @@
+const fs = require('fs')
+const sass = require('sass')
+const postcss = require('postcss')
+const postcssScss = require('postcss-scss')
+
+// Path to your SCSS file
+const scssFilePath = './src/styles/_colors.scss'
+
+// Function to compile SCSS to CSS
+function compileScss(filePath) {
+  const result = sass.renderSync({ file: filePath })
+  return result.css.toString()
+}
+
+// Function to extract :export block
+async function extractExportVariables(css) {
+  const root = postcss.parse(css, { syntax: postcssScss })
+  const variables = {}
+
+  let isExportBlock = false
+  let isFirstLight = false
+  let isFirstDark = false
+
+  root.walkRules((rule) => {
+    if (rule.selector === ':export') {
+      isExportBlock = true
+
+      rule.walkDecls((decl) => {
+        if (decl.prop.includes('-light')) {
+          if (!isFirstLight) {
+            isFirstLight = true
+            variables.light = {}
+          }
+          decl.prop = decl.prop.replace('-light', '')
+          variables.light[decl.prop] = decl.value
+          return
+        }
+
+        if (decl.prop.includes('-dark')) {
+          if (!isFirstDark) {
+            isFirstDark = true
+            variables.dark = {}
+          }
+          decl.prop = decl.prop.replace('-dark', '')
+          variables.dark[decl.prop] = decl.value
+          return
+        }
+
+        variables[decl.prop] = decl.value
+      })
+    } else if (isExportBlock && rule.selector === '') {
+      return
+    }
+  })
+
+  return variables
+}
+// Main function
+;(async () => {
+  try {
+    const css = compileScss(scssFilePath)
+    const variables = await extractExportVariables(css)
+
+    // Convert the variables to a JavaScript object
+    const jsContent = `export default ${JSON.stringify(variables, null, 2)};`
+
+    // add a comment to the top of the file to specify that it is generated
+    const comment = '// * IMPORTANT! This file is generated from _colors.scss. Do not modify this file directly.'
+
+    // Write the JavaScript file
+    fs.writeFileSync('./src/config/colors.ts', `${comment}\n${jsContent}`, 'utf-8')
+    console.log('SCSS :export variables have been extracted to _colors.js')
+  } catch (error) {
+    console.error('Error extracting SCSS :export variables:', error)
+  }
+})()

packages/ui-stencil/package.json

@@ -52,9 +52,12 @@
     "jest-cli": "^29.7.0",
     "postcss": "^8.4.39",
     "postcss-functions": "^4.0.2",
+    "postcss-js": "^4.0.1",
     "postcss-preset-env": "^9.5.15",
+    "postcss-scss": "^4.0.9",
     "puppeteer": "^22.12.1",
     "rucksack-css": "^1.0.2",
+    "sass": "^1.77.8",
     "sass-loader": "^14.2.1"
   },
   "collection": "dist/collection/collection-manifest.json",

packages/ui-stencil/src/components/internal/orama-button/orama-button.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","button":"orama-button__button___3aLvF","button__tooltip":"orama-button__button__tooltip___E9uuA","fadeInOut":"orama-button__fadeInOut___TQHKk","button--primary":"orama-button__button--primary___HBpL6","button--secondary":"orama-button__button--secondary___nl9db","button--icon":"orama-button__button--icon___ABKID"}

packages/ui-stencil/src/components/internal/orama-button/orama-button.scss

@@ -28,8 +28,8 @@
 }
 
 .button--primary {
-  background-color: var(--button-primary-background-color);
-  color: var(--button-primary-text-color);
+  background-color: var(--button-background-color-primary, button-background-color('primary'));
+  color: var(--button-text-color-primary, button-text-color('primary'));
 
   &:disabled {
     background-color: var(--background-color-tertiary, background-color('tertiary'));

packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","message-wrapper":"orama-chat-assistent-message__message-wrapper___qbZxw","message-error":"orama-chat-assistent-message__message-error___COrJf","message-actions":"orama-chat-assistent-message__message-actions___9Azbe","hidden":"orama-chat-assistent-message__hidden___e8uNN","sources-wrapper":"orama-chat-assistent-message__sources-wrapper___RxjjT","source":"orama-chat-assistent-message__source___rD1tD","source-title":"orama-chat-assistent-message__source-title___aHWyI","source-subtitle":"orama-chat-assistent-message__source-subtitle___BRWvf","sr-only":"orama-chat-assistent-message__sr-only___CnUut","rotate360":"orama-chat-assistent-message__rotate360___ER-Ci"}

packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","orama-markdown-code":"orama-markdown__orama-markdown-code___wes4N","orama-markdown-code-title":"orama-markdown__orama-markdown-code-title___-AMYk"}

packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","messages-container":"orama-chat-messages-container__messages-container___N81Jb","message-wrapper":"orama-chat-messages-container__message-wrapper___eMuhz","suggestions-wrapper":"orama-chat-messages-container__suggestions-wrapper___oO3gs"}

packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","message-wrapper":"orama-chat-user-message__message-wrapper___51K3X","chat-question":"orama-chat-user-message__chat-question___lKRiY"}

packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","suggestions-list":"orama-chat-suggestions__suggestions-list___Wdyh3","suggestion-button":"orama-chat-suggestions__suggestion-button___umuvX"}

packages/ui-stencil/src/components/internal/orama-chat/orama-chat.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","messages-container-wrapper":"orama-chat__messages-container-wrapper___bXZ9e","messages-container-wrapper-non-scrollable":"orama-chat__messages-container-wrapper-non-scrollable___trLpa","lock-scroll-on-bottom-button-wrapper":"orama-chat__lock-scroll-on-bottom-button-wrapper___akMPe","chat-form-wrapper":"orama-chat__chat-form-wrapper___VFIHk","chat-input":"orama-chat__chat-input___lnGqz"}

packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","dots-loader":"orama-dots-loader__dots-loader___0sldX","dot":"orama-dots-loader__dot___Rv7cu","dot-slide-up":"orama-dots-loader__dot-slide-up___-vcK-"}

packages/ui-stencil/src/components/internal/orama-facets/orama-facets.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","facets-list":"orama-facets__facets-list___hjwOU","facet-button":"orama-facets__facet-button___d9u0h","facet-button--selected":"orama-facets__facet-button--selected___V8QgX","facet-count":"orama-facets__facet-count___TTxmB"}

packages/ui-stencil/src/components/internal/orama-input/orama-input.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","wrapper":"orama-input__wrapper___rKsHR","input-wrapper":"orama-input__input-wrapper___-QuSk","input":"orama-input__input___ohdU7","input--small":"orama-input__input--small___fzr4y","input--medium":"orama-input__input--medium___eT1p3","input--large":"orama-input__input--large___-p4eF","label":"orama-input__label___cBJrJ","reset-button":"orama-input__reset-button___CvR53","search-icon":"orama-input__search-icon___jUU-l","sr-only":"orama-input__sr-only___404G-"}

packages/ui-stencil/src/components/internal/orama-logo-icon/orama-logo-icon.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77"}

packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","corner-section":"orama-navigation-bar__corner-section___Ni4nG","start":"orama-navigation-bar__start___RiayN","center":"orama-navigation-bar__center___3sz2p","end":"orama-navigation-bar__end___y25ZD"}

packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","list":"orama-search-results__list___EQalc","section-list":"orama-search-results__section-list___FXaNN","section-item-list":"orama-search-results__section-item-list___mDB5t","section-title-wrapper":"orama-search-results__section-title-wrapper___hP-fl","list-item":"orama-search-results__list-item___tcdyP","list-item-button":"orama-search-results__list-item-button___E2xjd","collapsed":"orama-search-results__collapsed___4-Wyb","results-empty":"orama-search-results__results-empty___CXeeh"}

packages/ui-stencil/src/components/internal/orama-search/orama-search.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","result-wrapper":"orama-search__result-wrapper___XNc1A"}

packages/ui-stencil/src/components/internal/orama-text/orama-text.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","p":"orama-text__p___XsnX8","p--bold":"orama-text__p--bold___YYndB","span":"orama-text__span___yRLGL","span--bold":"orama-text__span--bold___Tg9TI","small":"orama-text__small___OFii0","small--bold":"orama-text__small--bold___egA2Q","text-left":"orama-text__text-left___TKMDV","text-right":"orama-text__text-right___9sPz5","text-center":"orama-text__text-center___I-AuJ","text-inactive":"orama-text__text-inactive___FVJw3"}

packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77"}

packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss

@@ -5,7 +5,7 @@ orama-textarea {
   border-radius: var(--radius-l, $radius-l);
   border: 1px solid var(--border-color-primary, border-color('primary'));
   background: var(--background-color-secondary, background-color('secondary'));
-  box-shadow: 0px 4px 24px 0px var(--textarea-shadow-color, white);
+  box-shadow: 0px 4px 24px 0px var(--shadow-color-primary, shadow-color('primary'));
   padding: var(--spacing-xs, $spacing-xs) var(--spacing-xs, $spacing-xs) var(--spacing-xs, $spacing-xs) var(--spacing-m, $spacing-m);
 
   @media (--sm-min) {

packages/ui-stencil/src/components/internal/orama-toggler/orama-toggler.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","selected":"orama-toggler__selected___JyRWM","animate":"orama-toggler__animate___blhcj","slideToLeft":"orama-toggler__slideToLeft___DZGb9","slideToRight":"orama-toggler__slideToRight___Pn-2e"}

packages/ui-stencil/src/components/internal/readme.md

@@ -0,0 +1,10 @@
+# color-display
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.css.json

@@ -0,0 +1 @@
+{"gray50":"#fbfbfb","gray100":"#efefef","gray200":"#dadada","gray300":"#c6c6c6","gray400":"#afafb1","gray500":"#99989d","gray600":"#838289","gray700":"#2e2e2e","gray800":"#212121","gray900":"#151515","gray950":"#050505","purple100":"#f7f6f9","purple200":"#eee9f6","purple300":"#ae8ff7","purple500":"#8152ee","purple700":"#432d77","header":"orama-chat-box__header___jDTZM","hidden":"orama-chat-box__hidden___xygv3"}