@stenajs-webui/theme 16.0.0 → 17.1.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.
- package/CHANGELOG.md +24 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +5 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +5 -2
- package/dist/index.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v17.0.0 (Fri Jun 17 2022)
|
|
2
|
+
|
|
3
|
+
#### 🔩 Dependency Updates
|
|
4
|
+
|
|
5
|
+
- Update Typescript, React, Jest, etc. [#466](https://github.com/StenaIT/stenajs-webui/pull/466) ([@mattias800](https://github.com/mattias800))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Mattias Andersson ([@mattias800](https://github.com/mattias800))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v16.1.0 (Fri Jun 17 2022)
|
|
14
|
+
|
|
15
|
+
#### 🚀 Enhancement
|
|
16
|
+
|
|
17
|
+
- Accessible font-sizes using `rem` instead of `px` [#458](https://github.com/StenaIT/stenajs-webui/pull/458) ([@mattias800](https://github.com/mattias800))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Mattias Andersson ([@mattias800](https://github.com/mattias800))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v16.0.0 (Wed Jun 15 2022)
|
|
2
26
|
|
|
3
27
|
#### 💥 Breaking Change
|
package/dist/index.d.ts
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -25,13 +25,16 @@ function styleInject(css, ref) {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
+
var css_248z$2 = ":root {\n font-size: 62.5%;\n}\n";
|
|
29
|
+
styleInject(css_248z$2);
|
|
30
|
+
|
|
28
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: #1d64ab;\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";
|
|
29
32
|
styleInject(css_248z$1);
|
|
30
33
|
|
|
31
|
-
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:
|
|
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";
|
|
32
35
|
styleInject(css_248z);
|
|
33
36
|
|
|
34
|
-
var cssColor = function (cssPropColor) { return "var("
|
|
37
|
+
var cssColor = function (cssPropColor) { return "var(".concat(cssPropColor, ")"); };
|
|
35
38
|
|
|
36
39
|
export { cssColor };
|
|
37
40
|
//# 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
|
|
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;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -29,13 +29,16 @@ function styleInject(css, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
var css_248z$2 = ":root {\n font-size: 62.5%;\n}\n";
|
|
33
|
+
styleInject(css_248z$2);
|
|
34
|
+
|
|
32
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: #1d64ab;\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";
|
|
33
36
|
styleInject(css_248z$1);
|
|
34
37
|
|
|
35
|
-
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:
|
|
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";
|
|
36
39
|
styleInject(css_248z);
|
|
37
40
|
|
|
38
|
-
var cssColor = function (cssPropColor) { return "var("
|
|
41
|
+
var cssColor = function (cssPropColor) { return "var(".concat(cssPropColor, ")"); };
|
|
39
42
|
|
|
40
43
|
exports.cssColor = cssColor;
|
|
41
44
|
//# 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
|
|
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;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stenajs-webui/theme",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "17.1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "mattias800",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,19 +28,19 @@
|
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"prop-types": ">=15.5.4",
|
|
31
|
-
"react": ">=
|
|
32
|
-
"react-dom": ">=
|
|
31
|
+
"react": ">=18.2.0",
|
|
32
|
+
"react-dom": ">=18.2.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/jest": "^23.1.5",
|
|
36
|
-
"@types/react": "^
|
|
37
|
-
"@types/react-dom": "^
|
|
36
|
+
"@types/react": "^18.0.14",
|
|
37
|
+
"@types/react-dom": "^18.0.5",
|
|
38
38
|
"prop-types": "^15.5.4",
|
|
39
|
-
"react": "^
|
|
40
|
-
"react-dom": "^
|
|
39
|
+
"react": "^18.2.0",
|
|
40
|
+
"react-dom": "^18.2.0"
|
|
41
41
|
},
|
|
42
42
|
"files": [
|
|
43
43
|
"dist"
|
|
44
44
|
],
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "0bef18c3b696b9e60cffb1fb24adff3c03fb5edc"
|
|
46
46
|
}
|