@stenajs-webui/theme 17.6.0 → 17.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.d.ts +6 -6
  3. package/dist/index.es.js +4 -38
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.js +1 -43
  6. package/dist/index.js.map +1 -1
  7. package/dist/types/LhdsColor.d.ts +1 -1
  8. package/dist/types/ThemeColor.d.ts +1 -1
  9. package/dist/util/CssColor.d.ts +4 -4
  10. package/package.json +5 -6
  11. package/dist/stories/Theme.stories.d.ts +0 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v17.7.0 (Fri Jul 01 2022)
2
+
3
+ #### 🚀 Enhancement
4
+
5
+ - Build packages with vite [#475](https://github.com/StenaIT/stenajs-webui/pull/475) ([@lindskogen](https://github.com/lindskogen))
6
+
7
+ #### Authors: 1
8
+
9
+ - Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
10
+
11
+ ---
12
+
1
13
  # v17.2.0 (Tue Jun 28 2022)
2
14
 
3
15
  #### 🚀 Enhancement
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import "./styles/base.css";
2
- import "./styles/default-colors.css";
3
- import "./styles/default-theme.css";
4
- export * from "./util/CssColor";
5
- export * from "./types/ThemeColor";
6
- export * from "./types/LhdsColor";
1
+ import "./styles/base.css";
2
+ import "./styles/default-colors.css";
3
+ import "./styles/default-theme.css";
4
+ export * from "./util/CssColor";
5
+ export * from "./types/ThemeColor";
6
+ export * from "./types/LhdsColor";
package/dist/index.es.js CHANGED
@@ -1,40 +1,6 @@
1
- function styleInject(css, ref) {
2
- if ( ref === void 0 ) ref = {};
3
- var insertAt = ref.insertAt;
4
-
5
- if (!css || typeof document === 'undefined') { return; }
6
-
7
- var head = document.head || document.getElementsByTagName('head')[0];
8
- var style = document.createElement('style');
9
- style.type = 'text/css';
10
-
11
- if (insertAt === 'top') {
12
- if (head.firstChild) {
13
- head.insertBefore(style, head.firstChild);
14
- } else {
15
- head.appendChild(style);
16
- }
17
- } else {
18
- head.appendChild(style);
19
- }
20
-
21
- if (style.styleSheet) {
22
- style.styleSheet.cssText = css;
23
- } else {
24
- style.appendChild(document.createTextNode(css));
25
- }
26
- }
27
-
28
- var css_248z$2 = ":root {\n font-size: 62.5%;\n}\n";
29
- styleInject(css_248z$2);
30
-
31
- var css_248z$1 = ":root {\n /* Colors */\n --lhds-color-blue-100: #e1eefa;\n --lhds-color-blue-200: #afd0f1;\n --lhds-color-blue-300: #6ca9e6;\n --lhds-color-blue-400: #3a8cdd;\n --lhds-color-blue-50: #f2f8fd;\n --lhds-color-blue-500: #2378cd;\n --lhds-color-blue-600: #1a5a9a;\n --lhds-color-blue-700: #18518a;\n --lhds-color-blue-800: #143e62;\n --lhds-color-blue-900: #0f304d;\n\n --lhds-color-green-100: #d1efc1;\n --lhds-color-green-200: #aee492;\n --lhds-color-green-300: #8ad861;\n --lhds-color-green-400: #6cce38;\n --lhds-color-green-50: #f4fbf0;\n --lhds-color-green-500: #60bd2f;\n --lhds-color-green-600: #509e27;\n --lhds-color-green-700: #407e1f;\n --lhds-color-green-800: #305f18;\n --lhds-color-green-900: #284f14;\n\n --lhds-color-orange-100: #ffeac4;\n --lhds-color-orange-200: #ffd589;\n --lhds-color-orange-300: #ffc04e;\n --lhds-color-orange-400: #ffb633;\n --lhds-color-orange-50: #fff8eb;\n --lhds-color-orange-500: #ffa400;\n --lhds-color-orange-600: #eb9700;\n --lhds-color-orange-700: #d88b00;\n --lhds-color-orange-800: #b17200;\n --lhds-color-orange-900: #895800;\n\n --lhds-color-purple-100: #f5d6e9;\n --lhds-color-purple-200: #edb6d8;\n --lhds-color-purple-300: #e287be;\n --lhds-color-purple-400: #d758a5;\n --lhds-color-purple-50: #fdf6fa;\n --lhds-color-purple-500: #cf3894;\n --lhds-color-purple-600: #a42874;\n --lhds-color-purple-700: #85205d;\n --lhds-color-purple-800: #651847;\n --lhds-color-purple-900: #58153e;\n\n --lhds-color-red-100: #ffdde4;\n --lhds-color-red-200: #ff899f;\n --lhds-color-red-300: #ff4e70;\n --lhds-color-red-400: #f1002e;\n --lhds-color-red-50: #fff1f4;\n --lhds-color-red-500: #d70029;\n --lhds-color-red-600: #b00022;\n --lhds-color-red-700: #8a0019;\n --lhds-color-red-800: #710015;\n --lhds-color-red-900: #570010;\n\n --lhds-color-turquoise-100: #daf8f4;\n --lhds-color-turquoise-200: #b9f2e9;\n --lhds-color-turquoise-300: #87e8da;\n --lhds-color-turquoise-400: #46dcc6;\n --lhds-color-turquoise-50: #eafbf9;\n --lhds-color-turquoise-500: #28d2b9;\n --lhds-color-turquoise-600: #24bda6;\n --lhds-color-turquoise-700: #1c9280;\n --lhds-color-turquoise-800: #156f62;\n --lhds-color-turquoise-900: #125f53;\n\n --lhds-color-ui-100: #fafafb;\n --lhds-color-ui-200: #efeff2;\n --lhds-color-ui-300: #e4e5e9;\n --lhds-color-ui-400: #ced0d7;\n --lhds-color-ui-50: #ffffff;\n --lhds-color-ui-500: #989cab;\n --lhds-color-ui-600: #5c6171;\n --lhds-color-ui-700: #424551;\n --lhds-color-ui-800: #282931;\n --lhds-color-ui-900: #0d0e10;\n}\n";
32
- styleInject(css_248z$1);
33
-
34
- var css_248z = ":root {\n /* Generic colors */\n --swui-white: #fff;\n --swui-hidden: rgba(0, 0, 0, 0);\n --swui-primary-action-color: var(--lhds-color-blue-500);\n --swui-primary-action-color-hover: var(--lhds-color-blue-600);\n --swui-primary-action-color-hover-light: var(--lhds-color-blue-100);\n --swui-primary-action-color-focus: var(--lhds-color-blue-700);\n --swui-primary-action-color-focus-light: var(--lhds-color-blue-100);\n --swui-primary-action-color-active: var(--lhds-color-blue-800);\n --swui-primary-action-color-disabled: var(--lhds-color-ui-300);\n --swui-separator-color: var(--lhds-color-ui-300);\n --swui-handle-bg-enabled-color: var(--swui-white);\n --swui-handle-bg-disabled-color: var(--lhds-color-ui-400);\n --swui-modal-border-color: var(--lhds-color-ui-400);\n --swui-overlay-bg-color: rgba(13, 14, 16, 0.5);\n\n /* State colors */\n --swui-state-error-color: var(--lhds-color-red-300);\n --swui-state-error-light-color: var(--lhds-color-red-50);\n --swui-state-alert-color: var(--lhds-color-orange-400);\n --swui-state-alert-light-color: var(--lhds-color-orange-50);\n --swui-state-success-color: var(--lhds-color-green-600);\n --swui-state-success-light-color: var(--lhds-color-green-50);\n --swui-state-modified-color: var(--lhds-color-blue-500);\n --swui-state-modified-light-color: var(--lhds-color-blue-200);\n --swui-state-loading-color: var(--lhds-color-ui-400);\n --swui-state-loading-light-color: var(--lhds-color-ui-100);\n\n /* Fonts */\n --swui-font-primary: \"Stena Sans\", \"Open Sans\", Arial, sans-serif;\n --swui-font-weight-text: 400;\n --swui-font-weight-text-bold: 500;\n --swui-font-weight-link: 400;\n --swui-font-buttons: var(--swui-font-primary);\n --swui-font-input: var(--swui-font-primary);\n --swui-font-size-inputs: 1.4rem;\n --swui-font-size-large: 1.6rem;\n --swui-line-height-large: 2.4rem;\n --swui-font-size-medium: 1.4rem;\n --swui-line-height-medium: 1.6rem;\n --swui-font-size-small: 1.2rem;\n --swui-line-height-small: 1.6rem;\n --swui-font-size-smaller: 1rem;\n --swui-line-height-smaller: 1.6rem;\n --swui-font-weight-inputs: 400;\n\n /* Text */\n --swui-text-primary-color: var(--lhds-color-ui-900);\n --swui-text-action-color: var(--lhds-color-blue-600);\n --swui-text-action-color-hover: var(--lhds-color-blue-500);\n --swui-text-action-color-focus: var(--lhds-color-blue-500);\n --swui-text-action-color-active: var(--lhds-color-blue-700);\n --swui-text-primary-color-light: var(--lhds-color-ui-400);\n --swui-text-disabled-color: var(--lhds-color-ui-500);\n --swui-text-disabled-color-light: var(--lhds-color-ui-300);\n --swui-text-darkmode-primary-color: var(--lhds-color-ui-400);\n --swui-text-darkmode-disabled-color: var(--lhds-color-ui-300);\n --swui-text-letter-spacing: 0;\n\n /* Animation speeds */\n --swui-animation-time-fast: 0.1s;\n --swui-animation-time-medium: 0.25s;\n --swui-animation-time-slow: 0.5s;\n\n /* Form fields */\n --swui-field-text-color: #424551;\n --swui-field-text-color-disabled: var(--lhds-color-ui-700);\n --swui-field-text-spacing: 6px;\n --swui-field-letter-spacing: 0;\n --swui-field-text-line-height: 2rem;\n --swui-field-bg-enabled: var(--swui-white);\n --swui-field-bg-disabled: #e8e4ea;\n --swui-field-border-color: #bbc1e1;\n --swui-field-border-color-hover: #275efe;\n --swui-field-border-color-disabled: #b1b1b1;\n --swui-field-shadow-color: rgba(0, 0, 0, 0.15);\n --swui-field-box-size-large: 32px;\n --swui-field-box-size-medium: 24px;\n --swui-field-box-size-small: 16px;\n --swui-field-border-radius: 4px;\n --swui-field-icon-color: var(--swui-text-primary-color);\n --swui-field-icon-size: 13px;\n --swui-field-indicator-active-color: var(--swui-white);\n --swui-field-indicator-inactive-color: var(--swui-hidden);\n --swui-field-placeholder-color: var(--lhds-color-ui-500);\n\n /* Borders */\n --swui-border-radius: 4px;\n\n /* Shadows */\n --swui-shadow-modal: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;\n --swui-shadow-popover: 0 2px 4px -1px rgba(20, 62, 98, 0.15),\n 0 1px 10px 0 rgba(0, 0, 0, 0.12);\n --swui-shadow-box: rgba(0, 0, 0, 0.15) 0 2px 4px 0;\n --swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, 0.3);\n --swui-field-focus-shadow-inverted: inset 0px 0px 3pt 0pt\n var(--lhds-color-blue-50);\n\n /* Metrics */\n --swui-metrics-indent: 8px;\n --swui-metrics-spacing: 8px;\n --swui-metrics-space: 8px;\n}\n";
35
- styleInject(css_248z);
36
-
37
- var cssColor = function (cssPropColor) { return "var(".concat(cssPropColor, ")"); };
38
-
1
+ (function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(":root{font-size:62.5%}:root{--lhds-color-blue-100: #e1eefa;--lhds-color-blue-200: #afd0f1;--lhds-color-blue-300: #6ca9e6;--lhds-color-blue-400: #3a8cdd;--lhds-color-blue-50: #f2f8fd;--lhds-color-blue-500: #2378cd;--lhds-color-blue-600: #1a5a9a;--lhds-color-blue-700: #18518a;--lhds-color-blue-800: #143e62;--lhds-color-blue-900: #0f304d;--lhds-color-green-100: #d1efc1;--lhds-color-green-200: #aee492;--lhds-color-green-300: #8ad861;--lhds-color-green-400: #6cce38;--lhds-color-green-50: #f4fbf0;--lhds-color-green-500: #60bd2f;--lhds-color-green-600: #509e27;--lhds-color-green-700: #407e1f;--lhds-color-green-800: #305f18;--lhds-color-green-900: #284f14;--lhds-color-orange-100: #ffeac4;--lhds-color-orange-200: #ffd589;--lhds-color-orange-300: #ffc04e;--lhds-color-orange-400: #ffb633;--lhds-color-orange-50: #fff8eb;--lhds-color-orange-500: #ffa400;--lhds-color-orange-600: #eb9700;--lhds-color-orange-700: #d88b00;--lhds-color-orange-800: #b17200;--lhds-color-orange-900: #895800;--lhds-color-purple-100: #f5d6e9;--lhds-color-purple-200: #edb6d8;--lhds-color-purple-300: #e287be;--lhds-color-purple-400: #d758a5;--lhds-color-purple-50: #fdf6fa;--lhds-color-purple-500: #cf3894;--lhds-color-purple-600: #a42874;--lhds-color-purple-700: #85205d;--lhds-color-purple-800: #651847;--lhds-color-purple-900: #58153e;--lhds-color-red-100: #ffdde4;--lhds-color-red-200: #ff899f;--lhds-color-red-300: #ff4e70;--lhds-color-red-400: #f1002e;--lhds-color-red-50: #fff1f4;--lhds-color-red-500: #d70029;--lhds-color-red-600: #b00022;--lhds-color-red-700: #8a0019;--lhds-color-red-800: #710015;--lhds-color-red-900: #570010;--lhds-color-turquoise-100: #daf8f4;--lhds-color-turquoise-200: #b9f2e9;--lhds-color-turquoise-300: #87e8da;--lhds-color-turquoise-400: #46dcc6;--lhds-color-turquoise-50: #eafbf9;--lhds-color-turquoise-500: #28d2b9;--lhds-color-turquoise-600: #24bda6;--lhds-color-turquoise-700: #1c9280;--lhds-color-turquoise-800: #156f62;--lhds-color-turquoise-900: #125f53;--lhds-color-ui-100: #fafafb;--lhds-color-ui-200: #efeff2;--lhds-color-ui-300: #e4e5e9;--lhds-color-ui-400: #ced0d7;--lhds-color-ui-50: #ffffff;--lhds-color-ui-500: #989cab;--lhds-color-ui-600: #5c6171;--lhds-color-ui-700: #424551;--lhds-color-ui-800: #282931;--lhds-color-ui-900: #0d0e10}:root{--swui-white: #fff;--swui-hidden: rgba(0, 0, 0, 0);--swui-primary-action-color: var(--lhds-color-blue-500);--swui-primary-action-color-hover: var(--lhds-color-blue-600);--swui-primary-action-color-hover-light: var(--lhds-color-blue-100);--swui-primary-action-color-focus: var(--lhds-color-blue-700);--swui-primary-action-color-focus-light: var(--lhds-color-blue-100);--swui-primary-action-color-active: var(--lhds-color-blue-800);--swui-primary-action-color-disabled: var(--lhds-color-ui-300);--swui-separator-color: var(--lhds-color-ui-300);--swui-handle-bg-enabled-color: var(--swui-white);--swui-handle-bg-disabled-color: var(--lhds-color-ui-400);--swui-modal-border-color: var(--lhds-color-ui-400);--swui-overlay-bg-color: rgba(13, 14, 16, .5);--swui-state-error-color: var(--lhds-color-red-300);--swui-state-error-light-color: var(--lhds-color-red-50);--swui-state-alert-color: var(--lhds-color-orange-400);--swui-state-alert-light-color: var(--lhds-color-orange-50);--swui-state-success-color: var(--lhds-color-green-600);--swui-state-success-light-color: var(--lhds-color-green-50);--swui-state-modified-color: var(--lhds-color-blue-500);--swui-state-modified-light-color: var(--lhds-color-blue-200);--swui-state-loading-color: var(--lhds-color-ui-400);--swui-state-loading-light-color: var(--lhds-color-ui-100);--swui-font-primary: \"Stena Sans\", \"Open Sans\", Arial, sans-serif;--swui-font-weight-text: 400;--swui-font-weight-text-bold: 500;--swui-font-weight-link: 400;--swui-font-buttons: var(--swui-font-primary);--swui-font-input: var(--swui-font-primary);--swui-font-size-inputs: 1.4rem;--swui-font-size-large: 1.6rem;--swui-line-height-large: 2.4rem;--swui-font-size-medium: 1.4rem;--swui-line-height-medium: 1.6rem;--swui-font-size-small: 1.2rem;--swui-line-height-small: 1.6rem;--swui-font-size-smaller: 1rem;--swui-line-height-smaller: 1.6rem;--swui-font-weight-inputs: 400;--swui-text-primary-color: var(--lhds-color-ui-900);--swui-text-action-color: var(--lhds-color-blue-600);--swui-text-action-color-hover: var(--lhds-color-blue-500);--swui-text-action-color-focus: var(--lhds-color-blue-500);--swui-text-action-color-active: var(--lhds-color-blue-700);--swui-text-primary-color-light: var(--lhds-color-ui-400);--swui-text-disabled-color: var(--lhds-color-ui-500);--swui-text-disabled-color-light: var(--lhds-color-ui-300);--swui-text-darkmode-primary-color: var(--lhds-color-ui-400);--swui-text-darkmode-disabled-color: var(--lhds-color-ui-300);--swui-text-letter-spacing: 0;--swui-animation-time-fast: .1s;--swui-animation-time-medium: .25s;--swui-animation-time-slow: .5s;--swui-field-text-color: #424551;--swui-field-text-color-disabled: var(--lhds-color-ui-700);--swui-field-text-spacing: 6px;--swui-field-letter-spacing: 0;--swui-field-text-line-height: 2rem;--swui-field-bg-enabled: var(--swui-white);--swui-field-bg-disabled: #e8e4ea;--swui-field-border-color: #bbc1e1;--swui-field-border-color-hover: #275efe;--swui-field-border-color-disabled: #b1b1b1;--swui-field-shadow-color: rgba(0, 0, 0, .15);--swui-field-box-size-large: 32px;--swui-field-box-size-medium: 24px;--swui-field-box-size-small: 16px;--swui-field-border-radius: 4px;--swui-field-icon-color: var(--swui-text-primary-color);--swui-field-icon-size: 13px;--swui-field-indicator-active-color: var(--swui-white);--swui-field-indicator-inactive-color: var(--swui-hidden);--swui-field-placeholder-color: var(--lhds-color-ui-500);--swui-border-radius: 4px;--swui-shadow-modal: rgba(0, 0, 0, .2) 0px 0px 10px 4px;--swui-shadow-popover: 0 2px 4px -1px rgba(20, 62, 98, .15), 0 1px 10px 0 rgba(0, 0, 0, .12);--swui-shadow-box: rgba(0, 0, 0, .15) 0 2px 4px 0;--swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, .3);--swui-field-focus-shadow-inverted: inset 0px 0px 3pt 0pt var(--lhds-color-blue-50);--swui-metrics-indent: 8px;--swui-metrics-spacing: 8px;--swui-metrics-space: 8px}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var base = /* @__PURE__ */ (() => ":root{font-size:62.5%}\n")();
2
+ var defaultColors = /* @__PURE__ */ (() => ":root{--lhds-color-blue-100: #e1eefa;--lhds-color-blue-200: #afd0f1;--lhds-color-blue-300: #6ca9e6;--lhds-color-blue-400: #3a8cdd;--lhds-color-blue-50: #f2f8fd;--lhds-color-blue-500: #2378cd;--lhds-color-blue-600: #1a5a9a;--lhds-color-blue-700: #18518a;--lhds-color-blue-800: #143e62;--lhds-color-blue-900: #0f304d;--lhds-color-green-100: #d1efc1;--lhds-color-green-200: #aee492;--lhds-color-green-300: #8ad861;--lhds-color-green-400: #6cce38;--lhds-color-green-50: #f4fbf0;--lhds-color-green-500: #60bd2f;--lhds-color-green-600: #509e27;--lhds-color-green-700: #407e1f;--lhds-color-green-800: #305f18;--lhds-color-green-900: #284f14;--lhds-color-orange-100: #ffeac4;--lhds-color-orange-200: #ffd589;--lhds-color-orange-300: #ffc04e;--lhds-color-orange-400: #ffb633;--lhds-color-orange-50: #fff8eb;--lhds-color-orange-500: #ffa400;--lhds-color-orange-600: #eb9700;--lhds-color-orange-700: #d88b00;--lhds-color-orange-800: #b17200;--lhds-color-orange-900: #895800;--lhds-color-purple-100: #f5d6e9;--lhds-color-purple-200: #edb6d8;--lhds-color-purple-300: #e287be;--lhds-color-purple-400: #d758a5;--lhds-color-purple-50: #fdf6fa;--lhds-color-purple-500: #cf3894;--lhds-color-purple-600: #a42874;--lhds-color-purple-700: #85205d;--lhds-color-purple-800: #651847;--lhds-color-purple-900: #58153e;--lhds-color-red-100: #ffdde4;--lhds-color-red-200: #ff899f;--lhds-color-red-300: #ff4e70;--lhds-color-red-400: #f1002e;--lhds-color-red-50: #fff1f4;--lhds-color-red-500: #d70029;--lhds-color-red-600: #b00022;--lhds-color-red-700: #8a0019;--lhds-color-red-800: #710015;--lhds-color-red-900: #570010;--lhds-color-turquoise-100: #daf8f4;--lhds-color-turquoise-200: #b9f2e9;--lhds-color-turquoise-300: #87e8da;--lhds-color-turquoise-400: #46dcc6;--lhds-color-turquoise-50: #eafbf9;--lhds-color-turquoise-500: #28d2b9;--lhds-color-turquoise-600: #24bda6;--lhds-color-turquoise-700: #1c9280;--lhds-color-turquoise-800: #156f62;--lhds-color-turquoise-900: #125f53;--lhds-color-ui-100: #fafafb;--lhds-color-ui-200: #efeff2;--lhds-color-ui-300: #e4e5e9;--lhds-color-ui-400: #ced0d7;--lhds-color-ui-50: #ffffff;--lhds-color-ui-500: #989cab;--lhds-color-ui-600: #5c6171;--lhds-color-ui-700: #424551;--lhds-color-ui-800: #282931;--lhds-color-ui-900: #0d0e10}\n")();
3
+ var defaultTheme = /* @__PURE__ */ (() => ':root{--swui-white: #fff;--swui-hidden: rgba(0, 0, 0, 0);--swui-primary-action-color: var(--lhds-color-blue-500);--swui-primary-action-color-hover: var(--lhds-color-blue-600);--swui-primary-action-color-hover-light: var(--lhds-color-blue-100);--swui-primary-action-color-focus: var(--lhds-color-blue-700);--swui-primary-action-color-focus-light: var(--lhds-color-blue-100);--swui-primary-action-color-active: var(--lhds-color-blue-800);--swui-primary-action-color-disabled: var(--lhds-color-ui-300);--swui-separator-color: var(--lhds-color-ui-300);--swui-handle-bg-enabled-color: var(--swui-white);--swui-handle-bg-disabled-color: var(--lhds-color-ui-400);--swui-modal-border-color: var(--lhds-color-ui-400);--swui-overlay-bg-color: rgba(13, 14, 16, .5);--swui-state-error-color: var(--lhds-color-red-300);--swui-state-error-light-color: var(--lhds-color-red-50);--swui-state-alert-color: var(--lhds-color-orange-400);--swui-state-alert-light-color: var(--lhds-color-orange-50);--swui-state-success-color: var(--lhds-color-green-600);--swui-state-success-light-color: var(--lhds-color-green-50);--swui-state-modified-color: var(--lhds-color-blue-500);--swui-state-modified-light-color: var(--lhds-color-blue-200);--swui-state-loading-color: var(--lhds-color-ui-400);--swui-state-loading-light-color: var(--lhds-color-ui-100);--swui-font-primary: "Stena Sans", "Open Sans", Arial, sans-serif;--swui-font-weight-text: 400;--swui-font-weight-text-bold: 500;--swui-font-weight-link: 400;--swui-font-buttons: var(--swui-font-primary);--swui-font-input: var(--swui-font-primary);--swui-font-size-inputs: 1.4rem;--swui-font-size-large: 1.6rem;--swui-line-height-large: 2.4rem;--swui-font-size-medium: 1.4rem;--swui-line-height-medium: 1.6rem;--swui-font-size-small: 1.2rem;--swui-line-height-small: 1.6rem;--swui-font-size-smaller: 1rem;--swui-line-height-smaller: 1.6rem;--swui-font-weight-inputs: 400;--swui-text-primary-color: var(--lhds-color-ui-900);--swui-text-action-color: var(--lhds-color-blue-600);--swui-text-action-color-hover: var(--lhds-color-blue-500);--swui-text-action-color-focus: var(--lhds-color-blue-500);--swui-text-action-color-active: var(--lhds-color-blue-700);--swui-text-primary-color-light: var(--lhds-color-ui-400);--swui-text-disabled-color: var(--lhds-color-ui-500);--swui-text-disabled-color-light: var(--lhds-color-ui-300);--swui-text-darkmode-primary-color: var(--lhds-color-ui-400);--swui-text-darkmode-disabled-color: var(--lhds-color-ui-300);--swui-text-letter-spacing: 0;--swui-animation-time-fast: .1s;--swui-animation-time-medium: .25s;--swui-animation-time-slow: .5s;--swui-field-text-color: #424551;--swui-field-text-color-disabled: var(--lhds-color-ui-700);--swui-field-text-spacing: 6px;--swui-field-letter-spacing: 0;--swui-field-text-line-height: 2rem;--swui-field-bg-enabled: var(--swui-white);--swui-field-bg-disabled: #e8e4ea;--swui-field-border-color: #bbc1e1;--swui-field-border-color-hover: #275efe;--swui-field-border-color-disabled: #b1b1b1;--swui-field-shadow-color: rgba(0, 0, 0, .15);--swui-field-box-size-large: 32px;--swui-field-box-size-medium: 24px;--swui-field-box-size-small: 16px;--swui-field-border-radius: 4px;--swui-field-icon-color: var(--swui-text-primary-color);--swui-field-icon-size: 13px;--swui-field-indicator-active-color: var(--swui-white);--swui-field-indicator-inactive-color: var(--swui-hidden);--swui-field-placeholder-color: var(--lhds-color-ui-500);--swui-border-radius: 4px;--swui-shadow-modal: rgba(0, 0, 0, .2) 0px 0px 10px 4px;--swui-shadow-popover: 0 2px 4px -1px rgba(20, 62, 98, .15), 0 1px 10px 0 rgba(0, 0, 0, .12);--swui-shadow-box: rgba(0, 0, 0, .15) 0 2px 4px 0;--swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, .3);--swui-field-focus-shadow-inverted: inset 0px 0px 3pt 0pt var(--lhds-color-blue-50);--swui-metrics-indent: 8px;--swui-metrics-spacing: 8px;--swui-metrics-space: 8px}\n')();
4
+ const cssColor = (cssPropColor) => `var(${cssPropColor})`;
39
5
  export { cssColor };
40
6
  //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../node_modules/style-inject/dist/style-inject.es.js","../src/util/CssColor.ts"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { LhdsColor } from \"../types/LhdsColor\";\nimport { ThemeColor } from \"../types/ThemeColor\";\n\nexport type CssPropColor = LhdsColor | ThemeColor;\n\nexport const cssColor = (cssPropColor: CssPropColor) => `var(${cssPropColor})`;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;ICpBa,QAAQ,GAAG,UAAC,YAA0B,IAAK,OAAA,cAAO,YAAY,MAAG;;;;"}
1
+ {"version":3,"file":"index.es.js","sources":["../src/util/CssColor.ts"],"sourcesContent":["import { LhdsColor } from \"../types/LhdsColor\";\nimport { ThemeColor } from \"../types/ThemeColor\";\n\nexport type CssPropColor = LhdsColor | ThemeColor;\n\nexport const cssColor = (cssPropColor: CssPropColor) => `var(${cssPropColor})`;\n"],"names":[],"mappings":";;;AAKa,MAAA,WAAW,CAAC,iBAA+B,OAAO;;"}
package/dist/index.js CHANGED
@@ -1,44 +1,2 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- function styleInject(css, ref) {
6
- if ( ref === void 0 ) ref = {};
7
- var insertAt = ref.insertAt;
8
-
9
- if (!css || typeof document === 'undefined') { return; }
10
-
11
- var head = document.head || document.getElementsByTagName('head')[0];
12
- var style = document.createElement('style');
13
- style.type = 'text/css';
14
-
15
- if (insertAt === 'top') {
16
- if (head.firstChild) {
17
- head.insertBefore(style, head.firstChild);
18
- } else {
19
- head.appendChild(style);
20
- }
21
- } else {
22
- head.appendChild(style);
23
- }
24
-
25
- if (style.styleSheet) {
26
- style.styleSheet.cssText = css;
27
- } else {
28
- style.appendChild(document.createTextNode(css));
29
- }
30
- }
31
-
32
- var css_248z$2 = ":root {\n font-size: 62.5%;\n}\n";
33
- styleInject(css_248z$2);
34
-
35
- var css_248z$1 = ":root {\n /* Colors */\n --lhds-color-blue-100: #e1eefa;\n --lhds-color-blue-200: #afd0f1;\n --lhds-color-blue-300: #6ca9e6;\n --lhds-color-blue-400: #3a8cdd;\n --lhds-color-blue-50: #f2f8fd;\n --lhds-color-blue-500: #2378cd;\n --lhds-color-blue-600: #1a5a9a;\n --lhds-color-blue-700: #18518a;\n --lhds-color-blue-800: #143e62;\n --lhds-color-blue-900: #0f304d;\n\n --lhds-color-green-100: #d1efc1;\n --lhds-color-green-200: #aee492;\n --lhds-color-green-300: #8ad861;\n --lhds-color-green-400: #6cce38;\n --lhds-color-green-50: #f4fbf0;\n --lhds-color-green-500: #60bd2f;\n --lhds-color-green-600: #509e27;\n --lhds-color-green-700: #407e1f;\n --lhds-color-green-800: #305f18;\n --lhds-color-green-900: #284f14;\n\n --lhds-color-orange-100: #ffeac4;\n --lhds-color-orange-200: #ffd589;\n --lhds-color-orange-300: #ffc04e;\n --lhds-color-orange-400: #ffb633;\n --lhds-color-orange-50: #fff8eb;\n --lhds-color-orange-500: #ffa400;\n --lhds-color-orange-600: #eb9700;\n --lhds-color-orange-700: #d88b00;\n --lhds-color-orange-800: #b17200;\n --lhds-color-orange-900: #895800;\n\n --lhds-color-purple-100: #f5d6e9;\n --lhds-color-purple-200: #edb6d8;\n --lhds-color-purple-300: #e287be;\n --lhds-color-purple-400: #d758a5;\n --lhds-color-purple-50: #fdf6fa;\n --lhds-color-purple-500: #cf3894;\n --lhds-color-purple-600: #a42874;\n --lhds-color-purple-700: #85205d;\n --lhds-color-purple-800: #651847;\n --lhds-color-purple-900: #58153e;\n\n --lhds-color-red-100: #ffdde4;\n --lhds-color-red-200: #ff899f;\n --lhds-color-red-300: #ff4e70;\n --lhds-color-red-400: #f1002e;\n --lhds-color-red-50: #fff1f4;\n --lhds-color-red-500: #d70029;\n --lhds-color-red-600: #b00022;\n --lhds-color-red-700: #8a0019;\n --lhds-color-red-800: #710015;\n --lhds-color-red-900: #570010;\n\n --lhds-color-turquoise-100: #daf8f4;\n --lhds-color-turquoise-200: #b9f2e9;\n --lhds-color-turquoise-300: #87e8da;\n --lhds-color-turquoise-400: #46dcc6;\n --lhds-color-turquoise-50: #eafbf9;\n --lhds-color-turquoise-500: #28d2b9;\n --lhds-color-turquoise-600: #24bda6;\n --lhds-color-turquoise-700: #1c9280;\n --lhds-color-turquoise-800: #156f62;\n --lhds-color-turquoise-900: #125f53;\n\n --lhds-color-ui-100: #fafafb;\n --lhds-color-ui-200: #efeff2;\n --lhds-color-ui-300: #e4e5e9;\n --lhds-color-ui-400: #ced0d7;\n --lhds-color-ui-50: #ffffff;\n --lhds-color-ui-500: #989cab;\n --lhds-color-ui-600: #5c6171;\n --lhds-color-ui-700: #424551;\n --lhds-color-ui-800: #282931;\n --lhds-color-ui-900: #0d0e10;\n}\n";
36
- styleInject(css_248z$1);
37
-
38
- var css_248z = ":root {\n /* Generic colors */\n --swui-white: #fff;\n --swui-hidden: rgba(0, 0, 0, 0);\n --swui-primary-action-color: var(--lhds-color-blue-500);\n --swui-primary-action-color-hover: var(--lhds-color-blue-600);\n --swui-primary-action-color-hover-light: var(--lhds-color-blue-100);\n --swui-primary-action-color-focus: var(--lhds-color-blue-700);\n --swui-primary-action-color-focus-light: var(--lhds-color-blue-100);\n --swui-primary-action-color-active: var(--lhds-color-blue-800);\n --swui-primary-action-color-disabled: var(--lhds-color-ui-300);\n --swui-separator-color: var(--lhds-color-ui-300);\n --swui-handle-bg-enabled-color: var(--swui-white);\n --swui-handle-bg-disabled-color: var(--lhds-color-ui-400);\n --swui-modal-border-color: var(--lhds-color-ui-400);\n --swui-overlay-bg-color: rgba(13, 14, 16, 0.5);\n\n /* State colors */\n --swui-state-error-color: var(--lhds-color-red-300);\n --swui-state-error-light-color: var(--lhds-color-red-50);\n --swui-state-alert-color: var(--lhds-color-orange-400);\n --swui-state-alert-light-color: var(--lhds-color-orange-50);\n --swui-state-success-color: var(--lhds-color-green-600);\n --swui-state-success-light-color: var(--lhds-color-green-50);\n --swui-state-modified-color: var(--lhds-color-blue-500);\n --swui-state-modified-light-color: var(--lhds-color-blue-200);\n --swui-state-loading-color: var(--lhds-color-ui-400);\n --swui-state-loading-light-color: var(--lhds-color-ui-100);\n\n /* Fonts */\n --swui-font-primary: \"Stena Sans\", \"Open Sans\", Arial, sans-serif;\n --swui-font-weight-text: 400;\n --swui-font-weight-text-bold: 500;\n --swui-font-weight-link: 400;\n --swui-font-buttons: var(--swui-font-primary);\n --swui-font-input: var(--swui-font-primary);\n --swui-font-size-inputs: 1.4rem;\n --swui-font-size-large: 1.6rem;\n --swui-line-height-large: 2.4rem;\n --swui-font-size-medium: 1.4rem;\n --swui-line-height-medium: 1.6rem;\n --swui-font-size-small: 1.2rem;\n --swui-line-height-small: 1.6rem;\n --swui-font-size-smaller: 1rem;\n --swui-line-height-smaller: 1.6rem;\n --swui-font-weight-inputs: 400;\n\n /* Text */\n --swui-text-primary-color: var(--lhds-color-ui-900);\n --swui-text-action-color: var(--lhds-color-blue-600);\n --swui-text-action-color-hover: var(--lhds-color-blue-500);\n --swui-text-action-color-focus: var(--lhds-color-blue-500);\n --swui-text-action-color-active: var(--lhds-color-blue-700);\n --swui-text-primary-color-light: var(--lhds-color-ui-400);\n --swui-text-disabled-color: var(--lhds-color-ui-500);\n --swui-text-disabled-color-light: var(--lhds-color-ui-300);\n --swui-text-darkmode-primary-color: var(--lhds-color-ui-400);\n --swui-text-darkmode-disabled-color: var(--lhds-color-ui-300);\n --swui-text-letter-spacing: 0;\n\n /* Animation speeds */\n --swui-animation-time-fast: 0.1s;\n --swui-animation-time-medium: 0.25s;\n --swui-animation-time-slow: 0.5s;\n\n /* Form fields */\n --swui-field-text-color: #424551;\n --swui-field-text-color-disabled: var(--lhds-color-ui-700);\n --swui-field-text-spacing: 6px;\n --swui-field-letter-spacing: 0;\n --swui-field-text-line-height: 2rem;\n --swui-field-bg-enabled: var(--swui-white);\n --swui-field-bg-disabled: #e8e4ea;\n --swui-field-border-color: #bbc1e1;\n --swui-field-border-color-hover: #275efe;\n --swui-field-border-color-disabled: #b1b1b1;\n --swui-field-shadow-color: rgba(0, 0, 0, 0.15);\n --swui-field-box-size-large: 32px;\n --swui-field-box-size-medium: 24px;\n --swui-field-box-size-small: 16px;\n --swui-field-border-radius: 4px;\n --swui-field-icon-color: var(--swui-text-primary-color);\n --swui-field-icon-size: 13px;\n --swui-field-indicator-active-color: var(--swui-white);\n --swui-field-indicator-inactive-color: var(--swui-hidden);\n --swui-field-placeholder-color: var(--lhds-color-ui-500);\n\n /* Borders */\n --swui-border-radius: 4px;\n\n /* Shadows */\n --swui-shadow-modal: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;\n --swui-shadow-popover: 0 2px 4px -1px rgba(20, 62, 98, 0.15),\n 0 1px 10px 0 rgba(0, 0, 0, 0.12);\n --swui-shadow-box: rgba(0, 0, 0, 0.15) 0 2px 4px 0;\n --swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, 0.3);\n --swui-field-focus-shadow-inverted: inset 0px 0px 3pt 0pt\n var(--lhds-color-blue-50);\n\n /* Metrics */\n --swui-metrics-indent: 8px;\n --swui-metrics-spacing: 8px;\n --swui-metrics-space: 8px;\n}\n";
39
- styleInject(css_248z);
40
-
41
- var cssColor = function (cssPropColor) { return "var(".concat(cssPropColor, ")"); };
42
-
43
- exports.cssColor = cssColor;
1
+ (function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(":root{font-size:62.5%}:root{--lhds-color-blue-100: #e1eefa;--lhds-color-blue-200: #afd0f1;--lhds-color-blue-300: #6ca9e6;--lhds-color-blue-400: #3a8cdd;--lhds-color-blue-50: #f2f8fd;--lhds-color-blue-500: #2378cd;--lhds-color-blue-600: #1a5a9a;--lhds-color-blue-700: #18518a;--lhds-color-blue-800: #143e62;--lhds-color-blue-900: #0f304d;--lhds-color-green-100: #d1efc1;--lhds-color-green-200: #aee492;--lhds-color-green-300: #8ad861;--lhds-color-green-400: #6cce38;--lhds-color-green-50: #f4fbf0;--lhds-color-green-500: #60bd2f;--lhds-color-green-600: #509e27;--lhds-color-green-700: #407e1f;--lhds-color-green-800: #305f18;--lhds-color-green-900: #284f14;--lhds-color-orange-100: #ffeac4;--lhds-color-orange-200: #ffd589;--lhds-color-orange-300: #ffc04e;--lhds-color-orange-400: #ffb633;--lhds-color-orange-50: #fff8eb;--lhds-color-orange-500: #ffa400;--lhds-color-orange-600: #eb9700;--lhds-color-orange-700: #d88b00;--lhds-color-orange-800: #b17200;--lhds-color-orange-900: #895800;--lhds-color-purple-100: #f5d6e9;--lhds-color-purple-200: #edb6d8;--lhds-color-purple-300: #e287be;--lhds-color-purple-400: #d758a5;--lhds-color-purple-50: #fdf6fa;--lhds-color-purple-500: #cf3894;--lhds-color-purple-600: #a42874;--lhds-color-purple-700: #85205d;--lhds-color-purple-800: #651847;--lhds-color-purple-900: #58153e;--lhds-color-red-100: #ffdde4;--lhds-color-red-200: #ff899f;--lhds-color-red-300: #ff4e70;--lhds-color-red-400: #f1002e;--lhds-color-red-50: #fff1f4;--lhds-color-red-500: #d70029;--lhds-color-red-600: #b00022;--lhds-color-red-700: #8a0019;--lhds-color-red-800: #710015;--lhds-color-red-900: #570010;--lhds-color-turquoise-100: #daf8f4;--lhds-color-turquoise-200: #b9f2e9;--lhds-color-turquoise-300: #87e8da;--lhds-color-turquoise-400: #46dcc6;--lhds-color-turquoise-50: #eafbf9;--lhds-color-turquoise-500: #28d2b9;--lhds-color-turquoise-600: #24bda6;--lhds-color-turquoise-700: #1c9280;--lhds-color-turquoise-800: #156f62;--lhds-color-turquoise-900: #125f53;--lhds-color-ui-100: #fafafb;--lhds-color-ui-200: #efeff2;--lhds-color-ui-300: #e4e5e9;--lhds-color-ui-400: #ced0d7;--lhds-color-ui-50: #ffffff;--lhds-color-ui-500: #989cab;--lhds-color-ui-600: #5c6171;--lhds-color-ui-700: #424551;--lhds-color-ui-800: #282931;--lhds-color-ui-900: #0d0e10}:root{--swui-white: #fff;--swui-hidden: rgba(0, 0, 0, 0);--swui-primary-action-color: var(--lhds-color-blue-500);--swui-primary-action-color-hover: var(--lhds-color-blue-600);--swui-primary-action-color-hover-light: var(--lhds-color-blue-100);--swui-primary-action-color-focus: var(--lhds-color-blue-700);--swui-primary-action-color-focus-light: var(--lhds-color-blue-100);--swui-primary-action-color-active: var(--lhds-color-blue-800);--swui-primary-action-color-disabled: var(--lhds-color-ui-300);--swui-separator-color: var(--lhds-color-ui-300);--swui-handle-bg-enabled-color: var(--swui-white);--swui-handle-bg-disabled-color: var(--lhds-color-ui-400);--swui-modal-border-color: var(--lhds-color-ui-400);--swui-overlay-bg-color: rgba(13, 14, 16, .5);--swui-state-error-color: var(--lhds-color-red-300);--swui-state-error-light-color: var(--lhds-color-red-50);--swui-state-alert-color: var(--lhds-color-orange-400);--swui-state-alert-light-color: var(--lhds-color-orange-50);--swui-state-success-color: var(--lhds-color-green-600);--swui-state-success-light-color: var(--lhds-color-green-50);--swui-state-modified-color: var(--lhds-color-blue-500);--swui-state-modified-light-color: var(--lhds-color-blue-200);--swui-state-loading-color: var(--lhds-color-ui-400);--swui-state-loading-light-color: var(--lhds-color-ui-100);--swui-font-primary: \"Stena Sans\", \"Open Sans\", Arial, sans-serif;--swui-font-weight-text: 400;--swui-font-weight-text-bold: 500;--swui-font-weight-link: 400;--swui-font-buttons: var(--swui-font-primary);--swui-font-input: var(--swui-font-primary);--swui-font-size-inputs: 1.4rem;--swui-font-size-large: 1.6rem;--swui-line-height-large: 2.4rem;--swui-font-size-medium: 1.4rem;--swui-line-height-medium: 1.6rem;--swui-font-size-small: 1.2rem;--swui-line-height-small: 1.6rem;--swui-font-size-smaller: 1rem;--swui-line-height-smaller: 1.6rem;--swui-font-weight-inputs: 400;--swui-text-primary-color: var(--lhds-color-ui-900);--swui-text-action-color: var(--lhds-color-blue-600);--swui-text-action-color-hover: var(--lhds-color-blue-500);--swui-text-action-color-focus: var(--lhds-color-blue-500);--swui-text-action-color-active: var(--lhds-color-blue-700);--swui-text-primary-color-light: var(--lhds-color-ui-400);--swui-text-disabled-color: var(--lhds-color-ui-500);--swui-text-disabled-color-light: var(--lhds-color-ui-300);--swui-text-darkmode-primary-color: var(--lhds-color-ui-400);--swui-text-darkmode-disabled-color: var(--lhds-color-ui-300);--swui-text-letter-spacing: 0;--swui-animation-time-fast: .1s;--swui-animation-time-medium: .25s;--swui-animation-time-slow: .5s;--swui-field-text-color: #424551;--swui-field-text-color-disabled: var(--lhds-color-ui-700);--swui-field-text-spacing: 6px;--swui-field-letter-spacing: 0;--swui-field-text-line-height: 2rem;--swui-field-bg-enabled: var(--swui-white);--swui-field-bg-disabled: #e8e4ea;--swui-field-border-color: #bbc1e1;--swui-field-border-color-hover: #275efe;--swui-field-border-color-disabled: #b1b1b1;--swui-field-shadow-color: rgba(0, 0, 0, .15);--swui-field-box-size-large: 32px;--swui-field-box-size-medium: 24px;--swui-field-box-size-small: 16px;--swui-field-border-radius: 4px;--swui-field-icon-color: var(--swui-text-primary-color);--swui-field-icon-size: 13px;--swui-field-indicator-active-color: var(--swui-white);--swui-field-indicator-inactive-color: var(--swui-hidden);--swui-field-placeholder-color: var(--lhds-color-ui-500);--swui-border-radius: 4px;--swui-shadow-modal: rgba(0, 0, 0, .2) 0px 0px 10px 4px;--swui-shadow-popover: 0 2px 4px -1px rgba(20, 62, 98, .15), 0 1px 10px 0 rgba(0, 0, 0, .12);--swui-shadow-box: rgba(0, 0, 0, .15) 0 2px 4px 0;--swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, .3);--swui-field-focus-shadow-inverted: inset 0px 0px 3pt 0pt var(--lhds-color-blue-50);--swui-metrics-indent: 8px;--swui-metrics-spacing: 8px;--swui-metrics-space: 8px}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=o=>`var(${o})`;exports.cssColor=l;
44
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../node_modules/style-inject/dist/style-inject.es.js","../src/util/CssColor.ts"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { LhdsColor } from \"../types/LhdsColor\";\nimport { ThemeColor } from \"../types/ThemeColor\";\n\nexport type CssPropColor = LhdsColor | ThemeColor;\n\nexport const cssColor = (cssPropColor: CssPropColor) => `var(${cssPropColor})`;\n"],"names":[],"mappings":";;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;ICpBa,QAAQ,GAAG,UAAC,YAA0B,IAAK,OAAA,cAAO,YAAY,MAAG;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../src/util/CssColor.ts"],"sourcesContent":["import { LhdsColor } from \"../types/LhdsColor\";\nimport { ThemeColor } from \"../types/ThemeColor\";\n\nexport type CssPropColor = LhdsColor | ThemeColor;\n\nexport const cssColor = (cssPropColor: CssPropColor) => `var(${cssPropColor})`;\n"],"names":[],"mappings":"4GAKa,KAAA,GAAW,AAAC,GAA+B,OAAO"}
package/dist/types/LhdsColor.d.ts CHANGED
@@ -1 +1 @@
1
- export declare type LhdsColor = "--lhds-color-blue-100" | "--lhds-color-blue-200" | "--lhds-color-blue-300" | "--lhds-color-blue-400" | "--lhds-color-blue-50" | "--lhds-color-blue-500" | "--lhds-color-blue-600" | "--lhds-color-blue-700" | "--lhds-color-blue-800" | "--lhds-color-blue-900" | "--lhds-color-green-100" | "--lhds-color-green-200" | "--lhds-color-green-300" | "--lhds-color-green-400" | "--lhds-color-green-50" | "--lhds-color-green-500" | "--lhds-color-green-600" | "--lhds-color-green-700" | "--lhds-color-green-800" | "--lhds-color-green-900" | "--lhds-color-orange-100" | "--lhds-color-orange-200" | "--lhds-color-orange-300" | "--lhds-color-orange-400" | "--lhds-color-orange-50" | "--lhds-color-orange-500" | "--lhds-color-orange-600" | "--lhds-color-orange-700" | "--lhds-color-orange-800" | "--lhds-color-orange-900" | "--lhds-color-purple-100" | "--lhds-color-purple-200" | "--lhds-color-purple-300" | "--lhds-color-purple-400" | "--lhds-color-purple-50" | "--lhds-color-purple-500" | "--lhds-color-purple-600" | "--lhds-color-purple-700" | "--lhds-color-purple-800" | "--lhds-color-purple-900" | "--lhds-color-red-100" | "--lhds-color-red-200" | "--lhds-color-red-300" | "--lhds-color-red-400" | "--lhds-color-red-50" | "--lhds-color-red-500" | "--lhds-color-red-600" | "--lhds-color-red-700" | "--lhds-color-red-800" | "--lhds-color-red-900" | "--lhds-color-turquoise-100" | "--lhds-color-turquoise-200" | "--lhds-color-turquoise-300" | "--lhds-color-turquoise-400" | "--lhds-color-turquoise-50" | "--lhds-color-turquoise-500" | "--lhds-color-turquoise-600" | "--lhds-color-turquoise-700" | "--lhds-color-turquoise-800" | "--lhds-color-turquoise-900" | "--lhds-color-ui-100" | "--lhds-color-ui-200" | "--lhds-color-ui-300" | "--lhds-color-ui-400" | "--lhds-color-ui-50" | "--lhds-color-ui-500" | "--lhds-color-ui-600" | "--lhds-color-ui-700" | "--lhds-color-ui-800" | "--lhds-color-ui-900";
1
+ export declare type LhdsColor = "--lhds-color-blue-100" | "--lhds-color-blue-200" | "--lhds-color-blue-300" | "--lhds-color-blue-400" | "--lhds-color-blue-50" | "--lhds-color-blue-500" | "--lhds-color-blue-600" | "--lhds-color-blue-700" | "--lhds-color-blue-800" | "--lhds-color-blue-900" | "--lhds-color-green-100" | "--lhds-color-green-200" | "--lhds-color-green-300" | "--lhds-color-green-400" | "--lhds-color-green-50" | "--lhds-color-green-500" | "--lhds-color-green-600" | "--lhds-color-green-700" | "--lhds-color-green-800" | "--lhds-color-green-900" | "--lhds-color-orange-100" | "--lhds-color-orange-200" | "--lhds-color-orange-300" | "--lhds-color-orange-400" | "--lhds-color-orange-50" | "--lhds-color-orange-500" | "--lhds-color-orange-600" | "--lhds-color-orange-700" | "--lhds-color-orange-800" | "--lhds-color-orange-900" | "--lhds-color-purple-100" | "--lhds-color-purple-200" | "--lhds-color-purple-300" | "--lhds-color-purple-400" | "--lhds-color-purple-50" | "--lhds-color-purple-500" | "--lhds-color-purple-600" | "--lhds-color-purple-700" | "--lhds-color-purple-800" | "--lhds-color-purple-900" | "--lhds-color-red-100" | "--lhds-color-red-200" | "--lhds-color-red-300" | "--lhds-color-red-400" | "--lhds-color-red-50" | "--lhds-color-red-500" | "--lhds-color-red-600" | "--lhds-color-red-700" | "--lhds-color-red-800" | "--lhds-color-red-900" | "--lhds-color-turquoise-100" | "--lhds-color-turquoise-200" | "--lhds-color-turquoise-300" | "--lhds-color-turquoise-400" | "--lhds-color-turquoise-50" | "--lhds-color-turquoise-500" | "--lhds-color-turquoise-600" | "--lhds-color-turquoise-700" | "--lhds-color-turquoise-800" | "--lhds-color-turquoise-900" | "--lhds-color-ui-100" | "--lhds-color-ui-200" | "--lhds-color-ui-300" | "--lhds-color-ui-400" | "--lhds-color-ui-50" | "--lhds-color-ui-500" | "--lhds-color-ui-600" | "--lhds-color-ui-700" | "--lhds-color-ui-800" | "--lhds-color-ui-900";
package/dist/types/ThemeColor.d.ts CHANGED
@@ -1 +1 @@
1
- export declare type ThemeColor = "--swui-text-primary-color" | "--swui-text-primary-color-light" | "--swui-text-disabled-color" | "--swui-text-disabled-color-light" | "--swui-text-darkmode-primary-color" | "--swui-text-darkmode-disabled-color" | "--swui-state-error-color" | "--swui-state-error-light-color" | "--swui-state-alert-color" | "--swui-state-alert-light-color" | "--swui-state-success-color" | "--swui-state-success-light-color" | "--swui-state-modified-color" | "--swui-state-modified-light-color" | "--swui-state-loading-color" | "--swui-state-loading-light-color" | "--swui-primary-action-color" | "--swui-primary-action-color-active" | "--swui-primary-action-color-focus" | "--swui-primary-action-color-hover" | "--swui-primary-action-color-disabled" | "--swui-font-weight-text" | "--swui-font-weight-text-bold";
1
+ export declare type ThemeColor = "--swui-text-primary-color" | "--swui-text-primary-color-light" | "--swui-text-disabled-color" | "--swui-text-disabled-color-light" | "--swui-text-darkmode-primary-color" | "--swui-text-darkmode-disabled-color" | "--swui-state-error-color" | "--swui-state-error-light-color" | "--swui-state-alert-color" | "--swui-state-alert-light-color" | "--swui-state-success-color" | "--swui-state-success-light-color" | "--swui-state-modified-color" | "--swui-state-modified-light-color" | "--swui-state-loading-color" | "--swui-state-loading-light-color" | "--swui-primary-action-color" | "--swui-primary-action-color-active" | "--swui-primary-action-color-focus" | "--swui-primary-action-color-hover" | "--swui-primary-action-color-disabled" | "--swui-font-weight-text" | "--swui-font-weight-text-bold";
package/dist/util/CssColor.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LhdsColor } from "../types/LhdsColor";
2
- import { ThemeColor } from "../types/ThemeColor";
3
- export declare type CssPropColor = LhdsColor | ThemeColor;
4
- export declare const cssColor: (cssPropColor: CssPropColor) => string;
1
+ import { LhdsColor } from "../types/LhdsColor";
2
+ import { ThemeColor } from "../types/ThemeColor";
3
+ export declare type CssPropColor = LhdsColor | ThemeColor;
4
+ export declare const cssColor: (cssPropColor: CssPropColor) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stenajs-webui/theme",
3
- "version": "17.6.0",
3
+ "version": "17.7.0",
4
4
  "description": "",
5
5
  "author": "mattias800",
6
6
  "license": "MIT",
@@ -18,10 +18,9 @@
18
18
  "npm": ">=5"
19
19
  },
20
20
  "scripts": {
21
- "test": "jest",
22
- "build": "rollup -c",
23
- "start": "rollup -c -w",
24
- "clean": "rm -rf dist",
21
+ "build": "yarn tsc -p tsconfig.build.json && yarn vite build",
22
+ "start": "yarn tsc -p tsconfig.build.json && yarn vite build --watch",
23
+ "clean": "rimraf dist",
25
24
  "prepare": "yarn clean && yarn run build",
26
25
  "predeploy": "cd example && yarn install && yarn run build",
27
26
  "deploy": "gh-pages -d example/build"
@@ -42,5 +41,5 @@
42
41
  "files": [
43
42
  "dist"
44
43
  ],
45
- "gitHead": "2312d798dfd8af052a6340d9ee78c5bc30acbec1"
44
+ "gitHead": "50351c75fc34696ce2006e9f6ce15713d249d949"
46
45
  }
package/dist/stories/Theme.stories.d.ts DELETED
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- };
5
- export default _default;
6
- export declare const Overview: () => JSX.Element;