From 7d384cddb9c9686ec4b77d8ef327bf4cb2a2002e Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Fri, 26 Jul 2024 18:06:23 +0200 Subject: [PATCH] chore: convert scss variables to ts file and add story for colors --- apps/storybook/stories/design/colors.css | 23 +++ .../stories/design/colors.stories.tsx | 120 ++++++++++++++++ package.json | 3 +- packages/ui-stencil/extract-scss-vars.js | 76 ++++++++++ packages/ui-stencil/package.json | 3 + .../orama-button/orama-button.css.json | 1 + .../internal/orama-button/orama-button.scss | 4 +- .../orama-chat-assistent-message.css.json | 1 + .../orama-markdown/orama-markdown.css.json | 1 + .../orama-chat-messages-container.css.json | 1 + .../orama-chat-user-message.css.json | 1 + .../orama-chat-suggestions.css.json | 1 + .../internal/orama-chat/orama-chat.css.json | 1 + .../orama-dots-loader.css.json | 1 + .../orama-facets/orama-facets.css.json | 1 + .../internal/orama-input/orama-input.css.json | 1 + .../orama-logo-icon/orama-logo-icon.css.json | 1 + .../orama-navigation-bar.css.json | 1 + .../orama-search-results.css.json | 1 + .../orama-search/orama-search.css.json | 1 + .../internal/orama-text/orama-text.css.json | 1 + .../orama-textarea/orama-textarea.css.json | 1 + .../orama-textarea/orama-textarea.scss | 2 +- .../orama-toggler/orama-toggler.css.json | 1 + .../src/components/internal/readme.md | 10 ++ .../orama-chat-box/orama-chat-box.css.json | 1 + .../orama-search-box.css.json | 1 + .../src/components/orama-search-box/readme.md | 16 +-- .../orama-search-button.css.json | 1 + packages/ui-stencil/src/config/colors.ts | 134 +++++++++--------- packages/ui-stencil/src/styles/_colors.scss | 109 +++++++------- .../ui-stencil/src/styles/_functions.scss | 15 ++ packages/ui-stencil/src/styles/_themes.scss | 57 ++++++++ .../ui-stencil/src/styles/_variables.scss | 1 + packages/ui-stencil/stencil.config.ts | 1 + pnpm-lock.yaml | 70 ++++++++- 36 files changed, 528 insertions(+), 136 deletions(-) create mode 100644 apps/storybook/stories/design/colors.css create mode 100644 apps/storybook/stories/design/colors.stories.tsx create mode 100644 packages/ui-stencil/extract-scss-vars.js create mode 100644 packages/ui-stencil/src/components/internal/orama-button/orama-button.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-chat/orama-chat.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-facets/orama-facets.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-input/orama-input.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-logo-icon/orama-logo-icon.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-search/orama-search.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-text/orama-text.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.css.json create mode 100644 packages/ui-stencil/src/components/internal/orama-toggler/orama-toggler.css.json create mode 100644 packages/ui-stencil/src/components/internal/readme.md create mode 100644 packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.css.json create mode 100644 packages/ui-stencil/src/components/orama-search-box/orama-search-box.css.json create mode 100644 packages/ui-stencil/src/components/orama-search-button/orama-search-button.css.json create mode 100644 packages/ui-stencil/src/styles/_themes.scss diff --git a/apps/storybook/stories/design/colors.css b/apps/storybook/stories/design/colors.css new file mode 100644 index 00000000..cd76207f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/apps/storybook/stories/design/colors.stories.tsx b/apps/storybook/stories/design/colors.stories.tsx new file mode 100644 index 00000000..b78d5b9e --- /dev/null +++ b/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` +
+
${label}
+
${color}
+
+` + +const ColorsStory = () => html` +
+
+

Primitive Colors

+
+ ${Object.keys(primitiveColors).map((key) => renderColorBlock(primitiveColors[key], key))} +
+
+
+

Semantic Colors

+

Light Theme

+
+ ${Object.keys(semanticColorsLight).map((key) => renderColorBlock(semanticColorsLight[key], key))} +
+

Dark Theme

+
+ ${Object.keys(semanticColorsDark).map((key) => renderColorBlock(semanticColorsDark[key], key))} +
+
+
+

Element Colors

+

Light Theme

+
+ ${Object.keys(elementColorsLight).map((key) => renderColorBlock(elementColorsLight[key], key))} +
+

Dark Theme

+
+ ${Object.keys(elementColorsDark).map((key) => renderColorBlock(elementColorsDark[key], key))} +
+
+
+

How to Use and Add Tokens

+

+ Primitive Colors: These are the basic colors used throughout the design system. + They serve as the foundation for creating more complex color schemes. +

+

+ Semantic Colors: 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. +

+

+ Element Colors: 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. +

+

+ Adding Tokens: 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. +

+
+
+` + +export default { + title: 'Design Tokens/Colors', + component: 'colors-story', +} as Meta + +export const Colors: StoryObj = ColorsStory.bind({}) diff --git a/package.json b/package.json index c2413b01..7d5ff7d5 100644 --- a/package.json +++ b/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", diff --git a/packages/ui-stencil/extract-scss-vars.js b/packages/ui-stencil/extract-scss-vars.js new file mode 100644 index 00000000..d9c69e5d --- /dev/null +++ b/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) + } +})() diff --git a/packages/ui-stencil/package.json b/packages/ui-stencil/package.json index b5df9bf6..a691a69d 100644 --- a/packages/ui-stencil/package.json +++ b/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", diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.css.json b/packages/ui-stencil/src/components/internal/orama-button/orama-button.css.json new file mode 100644 index 00000000..92661a2b --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss index 9f99aaa4..4bcea4fd 100644 --- a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss +++ b/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')); diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.css.json b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.css.json new file mode 100644 index 00000000..627d262b --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.css.json b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.css.json new file mode 100644 index 00000000..9c541f81 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.css.json b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.css.json new file mode 100644 index 00000000..b415d052 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.css.json b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.css.json new file mode 100644 index 00000000..3077d0f2 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.css.json b/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.css.json new file mode 100644 index 00000000..c617c378 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.css.json b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.css.json new file mode 100644 index 00000000..f1050788 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.css.json b/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.css.json new file mode 100644 index 00000000..77189d5d --- /dev/null +++ b/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-"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.css.json b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.css.json new file mode 100644 index 00000000..57ca079d --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-input/orama-input.css.json b/packages/ui-stencil/src/components/internal/orama-input/orama-input.css.json new file mode 100644 index 00000000..465cc762 --- /dev/null +++ b/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-"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-logo-icon/orama-logo-icon.css.json b/packages/ui-stencil/src/components/internal/orama-logo-icon/orama-logo-icon.css.json new file mode 100644 index 00000000..166342f7 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.css.json b/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.css.json new file mode 100644 index 00000000..44dbe8d8 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.css.json b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.css.json new file mode 100644 index 00000000..05b7c3fd --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.css.json b/packages/ui-stencil/src/components/internal/orama-search/orama-search.css.json new file mode 100644 index 00000000..bd92e740 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-text/orama-text.css.json b/packages/ui-stencil/src/components/internal/orama-text/orama-text.css.json new file mode 100644 index 00000000..9bbfa1bb --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.css.json b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.css.json new file mode 100644 index 00000000..166342f7 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss index f987939f..e0143da2 100644 --- a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss +++ b/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) { diff --git a/packages/ui-stencil/src/components/internal/orama-toggler/orama-toggler.css.json b/packages/ui-stencil/src/components/internal/orama-toggler/orama-toggler.css.json new file mode 100644 index 00000000..72258deb --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/internal/readme.md b/packages/ui-stencil/src/components/internal/readme.md new file mode 100644 index 00000000..90392637 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/readme.md @@ -0,0 +1,10 @@ +# color-display + + + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.css.json b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.css.json new file mode 100644 index 00000000..4dc3bdb5 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.css.json b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.css.json new file mode 100644 index 00000000..a232f69e --- /dev/null +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-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","orama-container":"orama-search-box__orama-container___JCc5l","hidden":"orama-search-box__hidden___gVjqm","main":"orama-search-box__main___-2jKE"} \ No newline at end of file diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index 880149c3..a06f3362 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -5,14 +5,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -| `cloudIndex` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | -| `facetProperty` | `facet-property` | | `string` | `undefined` | -| `open` | `open` | | `boolean` | `false` | -| `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{}` | -| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ light: { '--text-color-primary': string; '--text-color-secondary': string; '--text-color-teriary': string; '--text-color-inactive': string; '--background-color-primary': string; '--background-color-secondary': string; '--background-color-tertiary': string; '--background-color-fourth': string; '--border-color-primary': string; '--border-color-secondary': string; '--border-color-inactive': string; '--icon-color-primary': string; '--icon-color-secondary': string; '--icon-color-tertiary': string; '--icon-color-inactive': string; '--icon-color-accent': string; }; dark: { '--text-color-primary': string; '--text-color-secondary': string; '--text-color-teriary': string; '--text-color-inactive': string; '--background-color-primary': string; '--background-color-secondary': string; '--background-color-tertiary': string; '--background-color-fourth': string; '--border-color-primary': string; '--border-color-secondary': string; '--border-color-inactive': string; '--icon-color-primary': string; '--icon-color-secondary': string; '--icon-color-tertiary': string; '--icon-color-inactive': string; '--icon-color-accent': string; }; system: {}; }>; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `cloudIndex` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | +| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | +| `facetProperty` | `facet-property` | | `string` | `undefined` | +| `open` | `open` | | `boolean` | `false` | +| `resultMap` | -- | | `{ section?: string; title?: string; path?: string; description?: string; }` | `{}` | +| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-background-color-primary": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-background-color-primary": string; }; }>; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/orama-search-button/orama-search-button.css.json b/packages/ui-stencil/src/components/orama-search-button/orama-search-button.css.json new file mode 100644 index 00000000..166342f7 --- /dev/null +++ b/packages/ui-stencil/src/components/orama-search-button/orama-search-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"} \ No newline at end of file diff --git a/packages/ui-stencil/src/config/colors.ts b/packages/ui-stencil/src/config/colors.ts index bd56021d..93740885 100644 --- a/packages/ui-stencil/src/config/colors.ts +++ b/packages/ui-stencil/src/config/colors.ts @@ -1,69 +1,67 @@ -// import * as variables from '../styles/_colors.scss' - -// TODO: these values should come from the sass file as unique source of truth, importing the sass file (colors.scss) directly -export const primitive = { - gray50: '#FBFBFB', - gray100: '#EFEFEF', - gray200: '#DADADA', - gray300: '#C6C6C6', - gray400: '#AFAFB1', - gray500: '#99989D', - gray600: '#838289', - gray700: '#2E2E2E', - gray800: '#212121', - gray900: '#151515', - gray950: '#050505', - purple500: '#8152EE', - purple700: '#6A4BB2', -} - -export const sassVariables = {} - -const semanticColors = { - light: { - // TODO: placheholder primitives to be replaced - '--text-color-primary': primitive.gray50, - '--text-color-secondary': primitive.gray200, - '--text-color-teriary': primitive.gray600, - '--text-color-inactive': primitive.gray500, - - '--background-color-primary': primitive.gray950, - '--background-color-secondary': primitive.gray900, - '--background-color-tertiary': primitive.gray800, - '--background-color-fourth': primitive.gray500, - - '--border-color-primary': primitive.gray700, - '--border-color-secondary': primitive.gray900, - '--border-color-inactive': primitive.gray400, - - '--icon-color-primary': primitive.gray50, - '--icon-color-secondary': primitive.gray200, - '--icon-color-tertiary': primitive.gray600, - '--icon-color-inactive': primitive.gray500, - '--icon-color-accent': primitive.purple500, +// * IMPORTANT! This file is generated from _colors.scss. Do not modify this file directly. +export default { + "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", + "light": { + "--text-color-primary": "#151515", + "--text-color-secondary": "#838289", + "--text-color-tertiary": "#99989d", + "--text-color-inactive": "#99989d", + "--text-color-reverse": "white", + "--background-color-primary": "#fbfbfb", + "--background-color-secondary": "white", + "--background-color-tertiary": "#eee9f6", + "--background-color-fourth": "#efefef", + "--background-color-reverse": "black", + "--border-color-primary": "#dadada", + "--border-color-secondary": "#efefef", + "--border-color-tertiary": "#151515", + "--border-color-accent": "#ae8ff7", + "--icon-color-primary": "#151515", + "--icon-color-secondary": "#dadada", + "--icon-color-tertiary": "#838289", + "--icon-color-inactive": "#99989d", + "--icon-color-accent": "#8152ee", + "--shadow-color-primary": "white", + "--button-text-color-primary": "#f7f6f9", + "--button-background-color-primary": "#8152ee" }, - dark: { - '--text-color-primary': primitive.gray50, - '--text-color-secondary': primitive.gray200, - '--text-color-teriary': primitive.gray600, - '--text-color-inactive': primitive.gray500, - - '--background-color-primary': primitive.gray950, - '--background-color-secondary': primitive.gray900, - '--background-color-tertiary': primitive.gray800, - '--background-color-fourth': primitive.gray500, - - '--border-color-primary': primitive.gray700, - '--border-color-secondary': primitive.gray900, - '--border-color-inactive': primitive.gray400, - - '--icon-color-primary': primitive.gray50, - '--icon-color-secondary': primitive.gray200, - '--icon-color-tertiary': primitive.gray600, - '--icon-color-inactive': primitive.gray500, - '--icon-color-accent': primitive.purple500, - }, - system: {}, -} - -export default semanticColors + "dark": { + "--text-color-primary": "#fbfbfb", + "--text-color-secondary": "#dadada", + "--text-color-tertiary": "#838289", + "--text-color-inactive": "#99989d", + "--text-color-reverse": "black", + "--background-color-primary": "#050505", + "--background-color-secondary": "#151515", + "--background-color-tertiary": "#212121", + "--background-color-fourth": "#2e2e2e", + "--background-color-reverse": "white", + "--border-color-primary": "#2e2e2e", + "--border-color-secondary": "#151515", + "--border-color-tertiary": "#afafb1", + "--border-color-accent": "#8152ee", + "--icon-color-primary": "#fbfbfb", + "--icon-color-secondary": "#dadada", + "--icon-color-tertiary": "#838289", + "--icon-color-inactive": "#99989d", + "--icon-color-accent": "#8152ee", + "--shadow-color-primary": "black", + "--button-text-color-primary": "#efefef", + "--button-background-color-primary": "#432d77" + } +}; \ No newline at end of file diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss index 3d44c768..bb22586c 100644 --- a/packages/ui-stencil/src/styles/_colors.scss +++ b/packages/ui-stencil/src/styles/_colors.scss @@ -1,4 +1,6 @@ -// Primitive colors +/** +* * PRIMITIVE COLORS +*/ $gray50: #fbfbfb; $gray100: #efefef; $gray200: #dadada; @@ -17,6 +19,7 @@ $purple500: #8152ee; $purple700: #432d77; /** +* * SEMANTIC AND ELEMENT COLOR MAP FOR LIGHT THEME * in order to use one of the colors included in the palette map; * use the functions text-color(key), background-color(key), border-color(key) * ie: text-color('primary') @@ -52,8 +55,20 @@ $palette: ( inactive: $gray500, accent: $purple500, ), + shadow: ( + primary: white, + ), + 'button-text': ( + primary: $purple100, + ), + 'button-background': ( + primary: $purple500, + ), ); +/** +* * SEMANTIC AND ELEMENT COLOR MAP FOR DARK THEME +*/ $paletteDark: ( text: ( primary: $gray50, @@ -82,60 +97,44 @@ $paletteDark: ( inactive: $gray500, accent: $purple500, ), + shadow: ( + primary: black, + ), + 'button-text': ( + primary: $gray100, + ), + 'button-background': ( + primary: $purple700, + ), ); -// TODO: should be imported by the config/colors.ts file -// TODO: review --background-ai-gradient-one and --background-ai-gradient-two with Angela -$theme-colors-light: ( - '--text-color-primary': text-color('primary'), - '--text-color-secondary': text-color('secondary'), - '--text-color-tertiary': text-color('tertiary'), - '--text-color-inactive': text-color('inactive'), - '--text-color-reverse': text-color('reverse'), - '--background-color-primary': background-color('primary'), - '--background-color-secondary': background-color('secondary'), - '--background-color-tertiary': background-color('tertiary'), - '--background-color-fourth': background-color('fourth'), - '--background-ai-gradient-one': background-color('primary'), - '--background-ai-gradient-two': #ece7f5, - '--background-color-reverse': background-color('reverse'), - '--border-color-primary': border-color('primary'), - '--border-color-secondary': border-color('secondary'), - '--border-color-tertiary': border-color('tertiary'), - '--border-color-accent': border-color('accent'), - '--icon-color-primary': icon-color('primary'), - '--icon-color-secondary': icon-color('secondary'), - '--icon-color-tertiary': icon-color('tertiary'), - '--icon-color-inactive': icon-color('inactive'), - '--icon-color-accent': icon-color('accent'), - '--textarea-shadow-color': white, - '--button-primary-background-color': $purple500, - '--button-primary-text-color': $purple100, -); +:export { + gray50: $gray50; + gray100: $gray100; + gray200: $gray200; + gray300: $gray300; + gray400: $gray400; + gray500: $gray500; + gray600: $gray600; + gray700: $gray700; + gray800: $gray800; + gray900: $gray900; + gray950: $gray950; + purple100: $purple100; + purple200: $purple200; + purple300: $purple300; + purple500: $purple500; + purple700: $purple700; -$theme-colors-dark: ( - '--text-color-primary': text-color('primary', $paletteDark), - '--text-color-secondary': text-color('secondary', $paletteDark), - '--text-color-tertiary': text-color('tertiary', $paletteDark), - '--text-color-inactive': text-color('inactive', $paletteDark), - '--text-color-reverse': text-color('reverse', $paletteDark), - '--background-color-primary': background-color('primary', $paletteDark), - '--background-color-secondary': background-color('secondary', $paletteDark), - '--background-color-tertiary': background-color('tertiary', $paletteDark), - '--background-color-fourth': background-color('fourth', $paletteDark), - '--background-color-reverse': background-color('reverse', $paletteDark), - '--background-ai-gradient-one': background-color('primary', $paletteDark), - '--background-ai-gradient-two': #251e37, - '--border-color-primary': border-color('primary', $paletteDark), - '--border-color-secondary': border-color('secondary', $paletteDark), - '--border-color-tertiary': border-color('tertiary', $paletteDark), - '--border-color-accent': border-color('accent', $paletteDark), - '--icon-color-primary': icon-color('primary', $paletteDark), - '--icon-color-secondary': icon-color('secondary', $paletteDark), - '--icon-color-tertiary': icon-color('tertiary', $paletteDark), - '--icon-color-inactive': icon-color('inactive', $paletteDark), - '--icon-color-accent': icon-color('accent', $paletteDark), - '--textarea-shadow-color': black, - '--button-primary-background-color': $purple700, - '--button-primary-text-color': $gray100, -); + @each $key, $value in $palette { + @each $subkey, $subvalue in $value { + --#{$key}-color-#{$subkey}-light: #{$subvalue}; + } + } + + @each $key, $value in $paletteDark { + @each $subkey, $subvalue in $value { + --#{$key}-color-#{$subkey}-dark: #{$subvalue}; + } + } +} diff --git a/packages/ui-stencil/src/styles/_functions.scss b/packages/ui-stencil/src/styles/_functions.scss index a4e6a3ea..17254ca8 100644 --- a/packages/ui-stencil/src/styles/_functions.scss +++ b/packages/ui-stencil/src/styles/_functions.scss @@ -39,6 +39,21 @@ @return palette('icon', $role, $palette); } +/* ===BUTTON TEXT COLOR FUNCTION=== */ +@function button-text-color($role: 'primary', $palette: $palette) { + @return palette('button-text', $role, $palette); +} + +// ===BUTTON BACKGROUND COLOR FUNCTION=== +@function button-background-color($role: 'primary', $palette: $palette) { + @return palette('button-background', $role, $palette); +} + +/* ===TEXTAREA SHAODW COLOR FUNCTION=== */ +@function shadow-color($role: 'primary', $palette: $palette) { + @return palette('shadow', $role, $palette); +} + /* ===GETTING BREAKPOINT VALUE FROM MAP=== */ @function breakpoint($size) { @if map-has-key($breakpoints, $size) { diff --git a/packages/ui-stencil/src/styles/_themes.scss b/packages/ui-stencil/src/styles/_themes.scss new file mode 100644 index 00000000..12e3d761 --- /dev/null +++ b/packages/ui-stencil/src/styles/_themes.scss @@ -0,0 +1,57 @@ +@import 'colors'; + +// TODO: should be imported by the config/colors.ts file +// TODO: review --background-ai-gradient-one and --background-ai-gradient-two with Angela +$theme-colors-light: ( + '--text-color-primary': text-color('primary'), + '--text-color-secondary': text-color('secondary'), + '--text-color-tertiary': text-color('tertiary'), + '--text-color-inactive': text-color('inactive'), + '--text-color-reverse': text-color('reverse'), + '--background-color-primary': background-color('primary'), + '--background-color-secondary': background-color('secondary'), + '--background-color-tertiary': background-color('tertiary'), + '--background-color-fourth': background-color('fourth'), + '--background-ai-gradient-one': background-color('primary'), + '--background-ai-gradient-two': #ece7f5, + '--background-color-reverse': background-color('reverse'), + '--border-color-primary': border-color('primary'), + '--border-color-secondary': border-color('secondary'), + '--border-color-tertiary': border-color('tertiary'), + '--border-color-accent': border-color('accent'), + '--icon-color-primary': icon-color('primary'), + '--icon-color-secondary': icon-color('secondary'), + '--icon-color-tertiary': icon-color('tertiary'), + '--icon-color-inactive': icon-color('inactive'), + '--shadow-color-primary': shadow-color('primary'), + '--icon-color-accent': icon-color('accent'), + '--button-text-color-primary': button-text-color('primary'), + '--button-background-color-primary': button-background-color('primary'), +); + +$theme-colors-dark: ( + '--text-color-primary': text-color('primary', $paletteDark), + '--text-color-secondary': text-color('secondary', $paletteDark), + '--text-color-tertiary': text-color('tertiary', $paletteDark), + '--text-color-inactive': text-color('inactive', $paletteDark), + '--text-color-reverse': text-color('reverse', $paletteDark), + '--background-color-primary': background-color('primary', $paletteDark), + '--background-color-secondary': background-color('secondary', $paletteDark), + '--background-color-tertiary': background-color('tertiary', $paletteDark), + '--background-color-fourth': background-color('fourth', $paletteDark), + '--background-color-reverse': background-color('reverse', $paletteDark), + '--background-ai-gradient-one': background-color('primary', $paletteDark), + '--background-ai-gradient-two': #251e37, + '--border-color-primary': border-color('primary', $paletteDark), + '--border-color-secondary': border-color('secondary', $paletteDark), + '--border-color-tertiary': border-color('tertiary', $paletteDark), + '--border-color-accent': border-color('accent', $paletteDark), + '--icon-color-primary': icon-color('primary', $paletteDark), + '--icon-color-secondary': icon-color('secondary', $paletteDark), + '--icon-color-tertiary': icon-color('tertiary', $paletteDark), + '--icon-color-inactive': icon-color('inactive', $paletteDark), + '--icon-color-accent': icon-color('accent', $paletteDark), + '--shadow-color-primary': shadow-color('primary', $paletteDark), + '--button-text-color-primary': button-text-color('primary', $paletteDark), + '--button-background-color-primary': button-background-color('primary', $paletteDark), +); diff --git a/packages/ui-stencil/src/styles/_variables.scss b/packages/ui-stencil/src/styles/_variables.scss index 117b4f76..65f92b7f 100644 --- a/packages/ui-stencil/src/styles/_variables.scss +++ b/packages/ui-stencil/src/styles/_variables.scss @@ -1,4 +1,5 @@ @import 'colors'; +@import 'themes'; @import 'mq'; @import 'typography'; @import 'spacing'; diff --git a/packages/ui-stencil/stencil.config.ts b/packages/ui-stencil/stencil.config.ts index 1877ae9d..1b2b99ff 100644 --- a/packages/ui-stencil/stencil.config.ts +++ b/packages/ui-stencil/stencil.config.ts @@ -51,6 +51,7 @@ export const config: Config = { plugins: [ sass({ injectGlobalPaths: ['src/styles/abstracts.scss'], + includePaths: ['src/styles'], }), postcss({ plugins: [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c01eca0d..53361e02 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -348,18 +348,27 @@ importers: postcss-functions: specifier: ^4.0.2 version: 4.0.2(postcss@8.4.39) + postcss-js: + specifier: ^4.0.1 + version: 4.0.1(postcss@8.4.39) postcss-preset-env: specifier: ^9.5.15 version: 9.5.15(postcss@8.4.39) + postcss-scss: + specifier: ^4.0.9 + version: 4.0.9(postcss@8.4.39) puppeteer: specifier: ^22.12.1 version: 22.12.1(typescript@5.5.2) rucksack-css: specifier: ^1.0.2 version: 1.0.2 + sass: + specifier: ^1.77.8 + version: 1.77.8 sass-loader: specifier: ^14.2.1 - version: 14.2.1(sass@1.77.2)(webpack@5.91.0) + version: 14.2.1(sass@1.77.8) packages/ui-stencil-angular: dependencies: @@ -9124,6 +9133,11 @@ packages: tslib: 2.6.3 dev: true + /camelcase-css@2.0.1: + resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} + engines: {node: '>= 6'} + dev: true + /camelcase@5.3.1: resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==} engines: {node: '>=6'} @@ -16008,6 +16022,16 @@ packages: postcss: 6.0.23 dev: true + /postcss-js@4.0.1(postcss@8.4.39): + resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} + engines: {node: ^12 || ^14 || >= 16} + peerDependencies: + postcss: ^8.4.21 + dependencies: + camelcase-css: 2.0.1 + postcss: 8.4.39 + dev: true + /postcss-lab-function@6.0.17(postcss@8.4.39): resolution: {integrity: sha512-QzjC6/3J6XKZzHGuUKhWNvlDMfWo+08dQOfQj4vWQdpZFdOxCh9QCR4w4XbV68EkdzywJie1mcm81jwFyV0+kg==} engines: {node: ^14 || ^16 || >=18} @@ -16489,6 +16513,15 @@ packages: postcss: 6.0.23 dev: true + /postcss-scss@4.0.9(postcss@8.4.39): + resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.4.29 + dependencies: + postcss: 8.4.39 + dev: true + /postcss-selector-not@7.0.2(postcss@8.4.39): resolution: {integrity: sha512-/SSxf/90Obye49VZIfc0ls4H0P6i6V1iHv0pzZH8SdgvZOPFkF37ef1r5cyWcMflJSFJ5bfuoluTnFnBBFiuSA==} engines: {node: ^14 || ^16 || >=18} @@ -17466,6 +17499,31 @@ packages: webpack: 5.91.0(esbuild@0.21.3) dev: true + /sass-loader@14.2.1(sass@1.77.8): + resolution: {integrity: sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==} + engines: {node: '>= 18.12.0'} + peerDependencies: + '@rspack/core': 0.x || 1.x + node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 + sass: ^1.3.0 + sass-embedded: '*' + webpack: ^5.0.0 + peerDependenciesMeta: + '@rspack/core': + optional: true + node-sass: + optional: true + sass: + optional: true + sass-embedded: + optional: true + webpack: + optional: true + dependencies: + neo-async: 2.6.2 + sass: 1.77.8 + dev: true + /sass@1.77.2: resolution: {integrity: sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==} engines: {node: '>=14.0.0'} @@ -17486,6 +17544,16 @@ packages: source-map-js: 1.2.0 dev: true + /sass@1.77.8: + resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 3.6.0 + immutable: 4.3.6 + source-map-js: 1.2.0 + dev: true + /sax@1.4.1: resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==} requiresBuild: true