@descope/web-components-ui 1.0.420 → 1.0.421

package/README.md

@@ -23,3 +23,4 @@ To update snapshot for a component, run the following command:
 # e.g. npm run test:ci:updateSnapshots -- descope-notp-image
 npm run test:ci:updateSnapshots -- <component-folder-name>
 ```
+

package/node_modules/theme-globals/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "theme-globals",
+  "version": "0.0.1",
+  "main": "./src/index.js",
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  },
+  "dependencies": {
+    "common": "0.0.1"
+  },
+  "private": true,
+  "publishConfig": {
+    "link-workspace-packages": false
+  }
+}

package/node_modules/theme-globals/project.json

@@ -0,0 +1,7 @@
+{
+  "name": "theme-globals",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/theme-globals/src",
+  "projectType": "library",
+  "tags": []
+}

package/node_modules/theme-globals/src/index.js

@@ -0,0 +1,180 @@
+import { getThemeRefs, getThemeVars, genColors } from 'common/theme-helpers';
+
+const direction = 'ltr';
+
+export const colors = genColors({
+  surface: {
+    main: '#ffffff',
+    dark: '#636c74',
+    light: '#cfd3d7',
+    highlight: '#f4f5f6',
+    contrast: '#181a1c',
+  },
+  primary: {
+    main: '#006af5',
+    dark: '#004094',
+    light: '#71aeff',
+    highlight: '#f0f6ff',
+    contrast: '#ffffff',
+  },
+  secondary: {
+    main: '#802ed6',
+    dark: '#6410bc',
+    light: '#be89f5',
+    highlight: '#ede7f6',
+    contrast: '#ffffff',
+  },
+  success: {
+    main: '#008000',
+    dark: '#005700',
+    light: '#8bc38b',
+    highlight: '#f5faf5',
+    contrast: '#ffffff',
+  },
+  error: {
+    main: '#e21d12',
+    dark: '#b3170f',
+    light: '#f4807a',
+    highlight: '#fef1f1',
+    contrast: '#ffffff',
+  },
+});
+
+const fonts = {
+  font1: {
+    family: [
+      'Roboto',
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Roboto',
+    url: 'https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900',
+  },
+  font2: {
+    family: [
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Sans Serif',
+  },
+};
+
+const fontsRef = getThemeRefs({ fonts }).fonts;
+
+const typography = {
+  h1: {
+    font: fontsRef.font1.family,
+    weight: '900',
+    size: '48px',
+  },
+  h2: {
+    font: fontsRef.font1.family,
+    weight: '800',
+    size: '38px',
+  },
+  h3: {
+    font: fontsRef.font1.family,
+    weight: '600',
+    size: '28px',
+  },
+  subtitle1: {
+    font: fontsRef.font2.family,
+    weight: '500',
+    size: '22px',
+  },
+  subtitle2: {
+    font: fontsRef.font2.family,
+    weight: '400',
+    size: '20px',
+  },
+  body1: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '16px',
+  },
+  body2: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '14px',
+  },
+};
+
+const spacing = {
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  xl: '32px',
+};
+
+const border = {
+  xs: '1px',
+  sm: '2px',
+  md: '3px',
+  lg: '4px',
+  xl: '5px',
+};
+
+const radius = {
+  xs: '5px',
+  sm: '10px',
+  md: '15px',
+  lg: '20px',
+  xl: '25px',
+  '2xl': '30px',
+  '3xl': '35px',
+};
+
+const shadow = {
+  wide: {
+    sm: '0 2px 3px -0.5px',
+    md: '0 4px 6px -1px',
+    lg: '0 10px 15px -3px',
+    xl: '0 20px 25px -5px',
+    '2xl': '0 25px 50px -12px',
+  },
+  narrow: {
+    sm: '0 1px 2px -1px',
+    md: '0 2px 4px -2px',
+    lg: '0 4px 6px -4px',
+    xl: '0 8px 10px -6px',
+    '2xl': '0 16px 16px -8px',
+  },
+};
+
+const globals = {
+  colors,
+  typography,
+  spacing,
+  border,
+  radius,
+  shadow,
+  fonts,
+  direction,
+};
+
+export default globals;
+export const vars = getThemeVars(globals);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.420",
+  "version": "1.0.421",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -60,9 +60,10 @@
     "webpack-replace-plugin": "0.0.1"
   },
   "bundledDependencies": [
+    "common",
+    "theme-globals",
     "descope-text",
-    "descope-avatar",
-    "common"
+    "descope-avatar"
   ],
   "dependencies": {
     "@vaadin/button": "24.3.4",
@@ -90,9 +91,10 @@
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
     "markdown-it": "14.1.0",
-    "descope-avatar": "0.0.1",
+    "common": "0.0.1",
     "descope-text": "0.0.1",
-    "common": "0.0.1"
+    "descope-avatar": "0.0.1",
+    "theme-globals": "0.0.1"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",