@stenajs-webui/elements 15.7.0 → 17.0.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 +28 -0
- package/dist/components/ui/action-menu/ActionMenu.d.ts +1 -0
- package/dist/components/ui/badge/WithBadge.d.ts +2 -0
- package/dist/components/ui/banners/banner/Banner.d.ts +1 -0
- package/dist/components/ui/bread-crumbs/BreadCrumbs.d.ts +2 -0
- package/dist/components/ui/button-group/ButtonGroup.d.ts +2 -0
- package/dist/components/ui/result-list/ResultList.d.ts +4 -3
- package/dist/components/ui/tabs/TabMenu.d.ts +2 -0
- package/dist/components/ui/value-table/ValueTable.d.ts +2 -0
- package/dist/index.es.js +6 -6
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
# v17.0.0 (Fri Jun 17 2022)
|
|
2
|
+
|
|
3
|
+
#### 💥 Breaking Change
|
|
4
|
+
|
|
5
|
+
- Upgrade and apply prettier. [#467](https://github.com/StenaIT/stenajs-webui/pull/467) ([@mattias800](https://github.com/mattias800))
|
|
6
|
+
|
|
7
|
+
#### 🔩 Dependency Updates
|
|
8
|
+
|
|
9
|
+
- Update Typescript, React, Jest, etc. [#466](https://github.com/StenaIT/stenajs-webui/pull/466) ([@mattias800](https://github.com/mattias800))
|
|
10
|
+
|
|
11
|
+
#### Authors: 1
|
|
12
|
+
|
|
13
|
+
- Mattias Andersson ([@mattias800](https://github.com/mattias800))
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
# v16.1.0 (Fri Jun 17 2022)
|
|
18
|
+
|
|
19
|
+
#### 🚀 Enhancement
|
|
20
|
+
|
|
21
|
+
- Accessible font-sizes using `rem` instead of `px` [#458](https://github.com/StenaIT/stenajs-webui/pull/458) ([@mattias800](https://github.com/mattias800))
|
|
22
|
+
|
|
23
|
+
#### Authors: 1
|
|
24
|
+
|
|
25
|
+
- Mattias Andersson ([@mattias800](https://github.com/mattias800))
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
1
29
|
# v15.5.10 (Thu Jun 02 2022)
|
|
2
30
|
|
|
3
31
|
#### 🐛 Bug Fix
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { BadgeProps } from "./Badge";
|
|
3
|
+
import { ReactNode } from "react";
|
|
3
4
|
export interface WithBadgeProps extends BadgeProps {
|
|
4
5
|
top?: string;
|
|
5
6
|
left?: string;
|
|
6
7
|
hideBadge?: boolean;
|
|
8
|
+
children?: ReactNode;
|
|
7
9
|
}
|
|
8
10
|
export declare const WithBadge: React.FC<WithBadgeProps>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
export interface ResultListProps {
|
|
4
|
+
children?: ReactNode;
|
|
3
5
|
}
|
|
4
|
-
export declare const ResultList: React.FC<
|
|
5
|
-
export {};
|
|
6
|
+
export declare const ResultList: React.FC<ResultListProps>;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { ReactNode } from "react";
|
|
2
3
|
export declare type ValueTableVariant = "relaxed" | "standard" | "condensed" | "compact";
|
|
3
4
|
export interface ValueTableProps {
|
|
4
5
|
header?: string;
|
|
5
6
|
footer?: string;
|
|
6
7
|
variant?: ValueTableVariant;
|
|
8
|
+
children?: ReactNode;
|
|
7
9
|
}
|
|
8
10
|
export declare const ValueTable: React.FC<ValueTableProps>;
|
package/dist/index.es.js
CHANGED
|
@@ -201,7 +201,7 @@ var Banner = function (_a) {
|
|
|
201
201
|
children))))));
|
|
202
202
|
};
|
|
203
203
|
|
|
204
|
-
var css_248z$k = ".Link-module_link__2PdX5 {\n /* Theme vars */\n --swui-link-font-family: var(--swui-font-primary);\n --swui-link-font-weight: var(--swui-font-weight-link);\n --swui-link-text-decoration: underline;\n --swui-link-letter-spacing: var(--swui-text-letter-spacing);\n --swui-link-color: var(--swui-text-action-color);\n --swui-link-color-hover: var(--swui-text-action-color-focus);\n --swui-link-color-active: var(--swui-text-action-color-active);\n --swui-link-color-focus: var(--swui-text-action-color-focus);\n --swui-link-color-disabled: var(--lhds-color-ui-600);\n --swui-link-focus-highlight-color: var(--lhds-color-blue-300);\n --swui-link-focus-highlight-color-disabled: var(--swui-link-color-disabled);\n\n /* Current */\n --current-color: var(--swui-link-color);\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n --current-letter-spacing: var(--swui-link-letter-spacing);\n --current-font-weight: var(--swui-link-font-weight);\n\n /* Styling */\n font-size: var(--current-font-size);\n line-height: var(--current-line-height);\n color: var(--current-color);\n letter-spacing: var(--current-letter-spacing);\n font-family: var(--swui-link-font-family);\n font-weight: var(--current-font-weight);\n\n box-sizing: border-box;\n outline: 1px dashed var(--current-focus-highlight-color);\n -webkit-text-decoration: var(--swui-link-text-decoration);\n text-decoration: var(--swui-link-text-decoration);\n}\n\n .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus:not(:active) {\n --current-focus-highlight-color: var(--swui-link-focus-highlight-color);\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus.Link-module_disabled__1OQi7 {\n --current-focus-highlight-color: var(\n --swui-link-focus-highlight-color-disabled\n );\n cursor: default;\n }\n\n .Link-module_link__2PdX5:hover {\n --current-color: var(--swui-link-color-hover);\n }\n\n .Link-module_link__2PdX5:active {\n --current-color: var(--swui-link-color-active);\n }\n\n .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n --current-color: var(--swui-link-color-disabled);\n }\n\n .Link-module_link__2PdX5.Link-module_standard__14Aap {\n }\n\n .Link-module_link__2PdX5.Link-module_bold__3-ezF {\n --current-font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Link-module_link__2PdX5.Link-module_caption__3pD2O {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n font-style: italic;\n }\n\n .Link-module_link__2PdX5.Link-module_overline__1Dwj2 {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing:
|
|
204
|
+
var css_248z$k = ".Link-module_link__2PdX5 {\n /* Theme vars */\n --swui-link-font-family: var(--swui-font-primary);\n --swui-link-font-weight: var(--swui-font-weight-link);\n --swui-link-text-decoration: underline;\n --swui-link-letter-spacing: var(--swui-text-letter-spacing);\n --swui-link-color: var(--swui-text-action-color);\n --swui-link-color-hover: var(--swui-text-action-color-focus);\n --swui-link-color-active: var(--swui-text-action-color-active);\n --swui-link-color-focus: var(--swui-text-action-color-focus);\n --swui-link-color-disabled: var(--lhds-color-ui-600);\n --swui-link-focus-highlight-color: var(--lhds-color-blue-300);\n --swui-link-focus-highlight-color-disabled: var(--swui-link-color-disabled);\n\n /* Current */\n --current-color: var(--swui-link-color);\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n --current-letter-spacing: var(--swui-link-letter-spacing);\n --current-font-weight: var(--swui-link-font-weight);\n\n /* Styling */\n font-size: var(--current-font-size);\n line-height: var(--current-line-height);\n color: var(--current-color);\n letter-spacing: var(--current-letter-spacing);\n font-family: var(--swui-link-font-family);\n font-weight: var(--current-font-weight);\n\n box-sizing: border-box;\n outline: 1px dashed var(--current-focus-highlight-color);\n -webkit-text-decoration: var(--swui-link-text-decoration);\n text-decoration: var(--swui-link-text-decoration);\n}\n\n .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus:not(:active) {\n --current-focus-highlight-color: var(--swui-link-focus-highlight-color);\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus.Link-module_disabled__1OQi7 {\n --current-focus-highlight-color: var(\n --swui-link-focus-highlight-color-disabled\n );\n cursor: default;\n }\n\n .Link-module_link__2PdX5:hover {\n --current-color: var(--swui-link-color-hover);\n }\n\n .Link-module_link__2PdX5:active {\n --current-color: var(--swui-link-color-active);\n }\n\n .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n --current-color: var(--swui-link-color-disabled);\n }\n\n .Link-module_link__2PdX5.Link-module_standard__14Aap {\n }\n\n .Link-module_link__2PdX5.Link-module_bold__3-ezF {\n --current-font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Link-module_link__2PdX5.Link-module_caption__3pD2O {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n font-style: italic;\n }\n\n .Link-module_link__2PdX5.Link-module_overline__1Dwj2 {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n\n .Link-module_link__2PdX5.Link-module_large__2-rhd {\n --current-font-size: var(--swui-font-size-large);\n --current-line-height: var(--swui-line-height-large);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_medium__1zXqA {\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n }\n\n .Link-module_link__2PdX5.Link-module_small__u0ZvN {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_smaller__1hvj_ {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 0;\n }\n";
|
|
205
205
|
var styles$i = {"link":"Link-module_link__2PdX5","disabled":"Link-module_disabled__1OQi7","standard":"Link-module_standard__14Aap","bold":"Link-module_bold__3-ezF","caption":"Link-module_caption__3pD2O","overline":"Link-module_overline__1Dwj2","large":"Link-module_large__2-rhd","medium":"Link-module_medium__1zXqA","small":"Link-module_small__u0ZvN","smaller":"Link-module_smaller__1hvj_"};
|
|
206
206
|
styleInject(css_248z$k);
|
|
207
207
|
|
|
@@ -296,7 +296,7 @@ var BreadCrumbs = function (_a) {
|
|
|
296
296
|
child)))); })));
|
|
297
297
|
};
|
|
298
298
|
|
|
299
|
-
var css_248z$h = ".Crumb-module_crumb__1qiJN {\n color: var(--swui-text-action-color);\n font-size:
|
|
299
|
+
var css_248z$h = ".Crumb-module_crumb__1qiJN {\n color: var(--swui-text-action-color);\n font-size: 1rem;\n font-family: var(--swui-font-primary);\n font-weight: var(--swui-font-weight-text-bold);\n letter-spacing: 0.1rem;\n text-decoration: none;\n cursor: pointer;\n}\n\n.Crumb-module_crumb__1qiJN:hover {\n text-decoration: underline;\n color: var(--swui-text-action-color-hover);\n}\n\n.Crumb-module_crumb__1qiJN:focus {\n color: var(--swui-text-action-color-focus);\n}\n\n.Crumb-module_crumb__1qiJN:active {\n text-decoration: underline;\n color: var(--swui-text-action-color-active);\n}\n";
|
|
300
300
|
var styles$f = {"crumb":"Crumb-module_crumb__1qiJN"};
|
|
301
301
|
styleInject(css_248z$h);
|
|
302
302
|
|
|
@@ -309,7 +309,7 @@ var Crumb = function (_a) {
|
|
|
309
309
|
return React.createElement("span", { className: styles$f.crumb }, label.toUpperCase());
|
|
310
310
|
};
|
|
311
311
|
|
|
312
|
-
var css_248z$g = ".Button-module_button__qBMg_ {\n /* Theme vars */\n --swui-button-line-height: 16px;\n --swui-button-font-weight: 400;\n --swui-button-icon-color: var(--swui-white);\n --swui-button-text-size: var(--swui-font-size-medium);\n --swui-button-text-color: var(--swui-white);\n --swui-button-text-decoration: none;\n --swui-button-letter-spacing: var(--swui-field-letter-spacing);\n --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);\n\n /* Text */\n --swui-button-text-color-focus: var(--swui-button-text-color);\n --swui-button-text-color-hover: var(--swui-button-text-color);\n --swui-button-text-color-active: var(--swui-button-text-color);\n --swui-button-text-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-text-color: var(--swui-button-text-color);\n --swui-button-danger-text-color-focus: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-hover: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-active: var(--swui-button-danger-text-color);\n\n --swui-button-success-text-color: var(--swui-button-text-color);\n --swui-button-success-text-color-focus: var(--swui-button-success-text-color);\n --swui-button-success-text-color-hover: var(--swui-button-success-text-color);\n --swui-button-success-text-color-active: var(\n --swui-button-success-text-color\n );\n\n /* Icon */\n --swui-button-icon-color-focus: var(--swui-button-icon-color);\n --swui-button-icon-color-hover: var(--swui-button-icon-color);\n --swui-button-icon-color-active: var(--swui-button-icon-color);\n --swui-button-icon-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-icon-color: var(--swui-button-icon-color);\n --swui-button-danger-icon-color-focus: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-hover: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-active: var(--swui-button-danger-icon-color);\n\n --swui-button-success-icon-color: var(--swui-button-icon-color);\n --swui-button-success-icon-color-focus: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-hover: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-active: var(\n --swui-button-success-icon-color\n );\n\n /* Background */\n --swui-button-background-color: var(--swui-primary-action-color);\n --swui-button-background-color-active: var(\n --swui-primary-action-color-active\n );\n --swui-button-background-color-focus: var(--swui-primary-action-color-focus);\n --swui-button-background-color-hover: var(--swui-primary-action-color-hover);\n --swui-button-background-color-disabled: var(\n --swui-primary-action-color-disabled\n );\n\n --swui-button-danger-background-color: var(--lhds-color-red-500);\n --swui-button-danger-background-color-active: var(--lhds-color-red-900);\n --swui-button-danger-background-color-focus: var(--lhds-color-red-700);\n --swui-button-danger-background-color-hover: var(--lhds-color-red-600);\n\n --swui-button-success-background-color: var(--lhds-color-green-600);\n --swui-button-success-background-color-active: var(--lhds-color-green-900);\n --swui-button-success-background-color-focus: var(--lhds-color-green-800);\n --swui-button-success-background-color-hover: var(--lhds-color-green-700);\n\n /* Border */\n --swui-button-border-color: var(--swui-button-background-color);\n --swui-button-border-radius: var(--swui-border-radius);\n --swui-button-border-radius-icon-only: var(--swui-border-radius);\n --swui-button-border-color-focus: var(--swui-button-background-color-focus);\n --swui-button-border-color-hover: var(--swui-button-background-color-hover);\n --swui-button-border-color-active: var(--swui-button-background-color-active);\n --swui-button-border-color-disabled: var(--lhds-color-ui-400);\n\n --swui-button-danger-border-color: var(--swui-button-danger-background-color);\n --swui-button-danger-border-color-focus: var(\n --swui-button-danger-background-color-focus\n );\n --swui-button-danger-border-color-hover: var(\n --swui-button-danger-background-color-hover\n );\n --swui-button-danger-border-color-active: var(\n --swui-button-danger-background-color-active\n );\n\n --swui-button-success-border-color: var(\n --swui-button-success-background-color\n );\n --swui-button-success-border-color-focus: var(\n --swui-button-success-background-color-focus\n );\n --swui-button-success-border-color-hover: var(\n --swui-button-success-background-color-hover\n );\n --swui-button-success-border-color-active: var(\n --swui-button-success-background-color-active\n );\n\n /* Shadow */\n --swui-button-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n --swui-button-box-shadow-hover: 0 1px 1px 1px rgba(29, 100, 171, 0.16),\n 0 0 1px 0 rgba(29, 100, 171, 0.16);\n --swui-button-box-shadow: 0 1px 0 0 rgba(29, 100, 171, 0.08),\n 0 0 1px -1px rgba(29, 100, 171, 0.1);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n\n /*\n * Styling\n */\n --current-background-color: var(--swui-button-background-color);\n --current-icon-height: 16px;\n --current-icon-color: var(--swui-button-icon-color);\n --current-text-color: var(--swui-button-text-color);\n --current-border-color: var(--swui-button-border-color);\n\n box-sizing: border-box;\n letter-spacing: var(--swui-button-letter-spacing);\n -webkit-text-decoration: var(--swui-button-text-decoration);\n text-decoration: var(--swui-button-text-decoration);\n padding: var(--swui-button-padding-vertical)\n var(--swui-button-padding-horizontal);\n border: 1px solid var(--current-border-color);\n background-color: var(--current-background-color);\n border-radius: var(--swui-button-border-radius);\n box-shadow: var(--current-box-shadow, var(--swui-button-box-shadow));\n color: var(--current-text-color);\n font-size: var(--current-text-size, var(--swui-button-text-size));\n line-height: var(--current-line-height, var(--swui-button-line-height));\n font-weight: var(--swui-button-font-weight);\n font-family: var(--swui-font-buttons);\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT {\n padding: var(--swui-button-padding-vertical);\n color: var(--current-icon-color);\n flex: none;\n\n border-radius: var(--swui-button-border-radius-icon-only);\n\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n display: flex;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_small__2fGop {\n width: 24px;\n height: 24px;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_large__22CGX {\n width: 40px;\n height: 40px;\n }\n\n /*\n * State and variants\n */\n\n .Button-module_button__qBMg_.Button-module_small__2fGop {\n --current-line-height: 16px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);\n --current-text-size: 12px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX {\n --current-line-height: 24px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);\n --current-text-size: 16px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX.Button-module_iconButton__1-wQT {\n --current-icon-height: 24px;\n }\n\n .Button-module_button__qBMg_:hover {\n --current-background-color: var(--swui-button-background-color-hover);\n --current-border-color: var(--swui-button-border-color-hover);\n --current-icon-color: var(--swui-button-icon-color-hover);\n --current-text-color: var(--swui-button-text-color-hover);\n --current-box-shadow: var(--swui-button-box-shadow-hover);\n }\n\n .Button-module_button__qBMg_:focus {\n outline: 0;\n --current-background-color: var(--swui-button-background-color-focus);\n --current-border-color: var(--swui-button-border-color-focus);\n --current-icon-color: var(--swui-button-icon-color-focus);\n --current-text-color: var(--swui-button-text-color-focus);\n --current-box-shadow: var(--swui-button-box-shadow-focus);\n }\n\n .Button-module_button__qBMg_:active {\n --current-background-color: var(--swui-button-background-color-active);\n --current-border-color: var(--swui-button-border-color-active);\n --current-icon-color: var(--swui-button-icon-color-active);\n --current-text-color: var(--swui-button-text-color-active);\n --current-box-shadow: var(--swui-button-box-shadow-active);\n }\n\n .Button-module_button__qBMg_:disabled {\n --current-background-color: var(--swui-button-background-color-disabled);\n --current-border-color: var(--swui-button-border-color-disabled);\n --current-icon-color: var(--swui-button-icon-color-disabled);\n --current-text-color: var(--swui-button-text-color-disabled);\n --current-box-shadow: var(--swui-button-box-shadow-disabled);\n cursor: not-allowed;\n }\n\n .Button-module_button__qBMg_.Button-module_normal__ZIWYY {\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled) {\n --current-background-color: var(--swui-button-danger-background-color);\n --current-border-color: var(--swui-button-danger-border-color);\n --current-text-color: var(--swui-button-danger-text-color);\n --current-icon-color: var(--swui-button-danger-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-danger-background-color-hover\n );\n --current-border-color: var(--swui-button-danger-border-color-hover);\n --current-text-color: var(--swui-button-danger-text-color-hover);\n --current-icon-color: var(--swui-button-danger-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-danger-background-color-focus\n );\n --current-border-color: var(--swui-button-danger-border-color-focus);\n --current-text-color: var(--swui-button-danger-text-color-focus);\n --current-icon-color: var(--swui-button-danger-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):active {\n --current-background-color: var(\n --swui-button-danger-background-color-active\n );\n --current-border-color: var(--swui-button-danger-border-color-active);\n --current-text-color: var(--swui-button-danger-text-color-active);\n --current-icon-color: var(--swui-button-danger-icon-color-active);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled) {\n --current-background-color: var(--swui-button-success-background-color);\n --current-border-color: var(--swui-button-success-border-color);\n --current-text-color: var(--swui-button-success-text-color);\n --current-icon-color: var(--swui-button-success-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-success-background-color-hover\n );\n --current-border-color: var(--swui-button-success-border-color-hover);\n --current-text-color: var(--swui-button-success-text-color-hover);\n --current-icon-color: var(--swui-button-success-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-success-background-color-focus\n );\n --current-border-color: var(--swui-button-success-border-color-focus);\n --current-text-color: var(--swui-button-success-text-color-focus);\n --current-icon-color: var(--swui-button-success-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):active {\n --current-background-color: var(\n --swui-button-success-background-color-active\n );\n --current-border-color: var(--swui-button-success-border-color-active);\n --current-text-color: var(--swui-button-success-text-color-active);\n --current-icon-color: var(--swui-button-success-icon-color-active);\n }\n";
|
|
312
|
+
var css_248z$g = ".Button-module_button__qBMg_ {\n /* Theme vars */\n --swui-button-line-height: 1.6rem;\n --swui-button-font-weight: 400;\n --swui-button-text-size: var(--swui-font-size-medium);\n --swui-button-text-color: var(--swui-white);\n --swui-button-text-decoration: none;\n --swui-button-letter-spacing: var(--swui-field-letter-spacing);\n --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);\n\n /* Text */\n --swui-button-text-color-focus: var(--swui-button-text-color);\n --swui-button-text-color-hover: var(--swui-button-text-color);\n --swui-button-text-color-active: var(--swui-button-text-color);\n --swui-button-text-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-text-color: var(--swui-button-text-color);\n --swui-button-danger-text-color-focus: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-hover: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-active: var(--swui-button-danger-text-color);\n\n --swui-button-success-text-color: var(--swui-button-text-color);\n --swui-button-success-text-color-focus: var(--swui-button-success-text-color);\n --swui-button-success-text-color-hover: var(--swui-button-success-text-color);\n --swui-button-success-text-color-active: var(\n --swui-button-success-text-color\n );\n\n /* Icon */\n --swui-button-icon-height: 1.6rem;\n --swui-button-icon-height-large: 2.4rem;\n\n --swui-button-icon-color: var(--swui-white);\n --swui-button-icon-color-focus: var(--swui-button-icon-color);\n --swui-button-icon-color-hover: var(--swui-button-icon-color);\n --swui-button-icon-color-active: var(--swui-button-icon-color);\n --swui-button-icon-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-icon-color: var(--swui-button-icon-color);\n --swui-button-danger-icon-color-focus: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-hover: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-active: var(--swui-button-danger-icon-color);\n\n --swui-button-success-icon-color: var(--swui-button-icon-color);\n --swui-button-success-icon-color-focus: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-hover: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-active: var(\n --swui-button-success-icon-color\n );\n\n /* Background */\n --swui-button-background-color: var(--swui-primary-action-color);\n --swui-button-background-color-active: var(\n --swui-primary-action-color-active\n );\n --swui-button-background-color-focus: var(--swui-primary-action-color-focus);\n --swui-button-background-color-hover: var(--swui-primary-action-color-hover);\n --swui-button-background-color-disabled: var(\n --swui-primary-action-color-disabled\n );\n\n --swui-button-danger-background-color: var(--lhds-color-red-500);\n --swui-button-danger-background-color-active: var(--lhds-color-red-900);\n --swui-button-danger-background-color-focus: var(--lhds-color-red-700);\n --swui-button-danger-background-color-hover: var(--lhds-color-red-600);\n\n --swui-button-success-background-color: var(--lhds-color-green-600);\n --swui-button-success-background-color-active: var(--lhds-color-green-900);\n --swui-button-success-background-color-focus: var(--lhds-color-green-800);\n --swui-button-success-background-color-hover: var(--lhds-color-green-700);\n\n /* Border */\n --swui-button-border-color: var(--swui-button-background-color);\n --swui-button-border-radius: var(--swui-border-radius);\n --swui-button-border-radius-icon-only: var(--swui-border-radius);\n --swui-button-border-color-focus: var(--swui-button-background-color-focus);\n --swui-button-border-color-hover: var(--swui-button-background-color-hover);\n --swui-button-border-color-active: var(--swui-button-background-color-active);\n --swui-button-border-color-disabled: var(--lhds-color-ui-400);\n\n --swui-button-danger-border-color: var(--swui-button-danger-background-color);\n --swui-button-danger-border-color-focus: var(\n --swui-button-danger-background-color-focus\n );\n --swui-button-danger-border-color-hover: var(\n --swui-button-danger-background-color-hover\n );\n --swui-button-danger-border-color-active: var(\n --swui-button-danger-background-color-active\n );\n\n --swui-button-success-border-color: var(\n --swui-button-success-background-color\n );\n --swui-button-success-border-color-focus: var(\n --swui-button-success-background-color-focus\n );\n --swui-button-success-border-color-hover: var(\n --swui-button-success-background-color-hover\n );\n --swui-button-success-border-color-active: var(\n --swui-button-success-background-color-active\n );\n\n /* Shadow */\n --swui-button-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n --swui-button-box-shadow-hover: 0 1px 1px 1px rgba(29, 100, 171, 0.16),\n 0 0 1px 0 rgba(29, 100, 171, 0.16);\n --swui-button-box-shadow: 0 1px 0 0 rgba(29, 100, 171, 0.08),\n 0 0 1px -1px rgba(29, 100, 171, 0.1);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n\n /*\n * Styling\n */\n --current-background-color: var(--swui-button-background-color);\n --current-icon-height: var(--swui-button-icon-height);\n --current-icon-color: var(--swui-button-icon-color);\n --current-text-color: var(--swui-button-text-color);\n --current-border-color: var(--swui-button-border-color);\n\n box-sizing: border-box;\n letter-spacing: var(--swui-button-letter-spacing);\n -webkit-text-decoration: var(--swui-button-text-decoration);\n text-decoration: var(--swui-button-text-decoration);\n padding: var(--swui-button-padding-vertical)\n var(--swui-button-padding-horizontal);\n border: 1px solid var(--current-border-color);\n background-color: var(--current-background-color);\n border-radius: var(--swui-button-border-radius);\n box-shadow: var(--current-box-shadow, var(--swui-button-box-shadow));\n color: var(--current-text-color);\n font-size: var(--current-text-size, var(--swui-button-text-size));\n line-height: var(--current-line-height, var(--swui-button-line-height));\n font-weight: var(--swui-button-font-weight);\n font-family: var(--swui-font-buttons);\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT {\n padding: var(--swui-button-padding-vertical);\n color: var(--current-icon-color);\n flex: none;\n\n border-radius: var(--swui-button-border-radius-icon-only);\n\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n display: flex;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_small__2fGop {\n width: 24px;\n height: 24px;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_large__22CGX {\n width: 40px;\n height: 40px;\n }\n\n /*\n * State and variants\n */\n\n .Button-module_button__qBMg_.Button-module_small__2fGop {\n --current-line-height: 1.6rem;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);\n --current-text-size: 1.2rem;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX {\n --current-line-height: 2.4rem;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);\n --current-text-size: 1.6rem;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX.Button-module_iconButton__1-wQT {\n --current-icon-height: var(--swui-button-icon-height-large);\n }\n\n .Button-module_button__qBMg_:hover {\n --current-background-color: var(--swui-button-background-color-hover);\n --current-border-color: var(--swui-button-border-color-hover);\n --current-icon-color: var(--swui-button-icon-color-hover);\n --current-text-color: var(--swui-button-text-color-hover);\n --current-box-shadow: var(--swui-button-box-shadow-hover);\n }\n\n .Button-module_button__qBMg_:focus {\n outline: 0;\n --current-background-color: var(--swui-button-background-color-focus);\n --current-border-color: var(--swui-button-border-color-focus);\n --current-icon-color: var(--swui-button-icon-color-focus);\n --current-text-color: var(--swui-button-text-color-focus);\n --current-box-shadow: var(--swui-button-box-shadow-focus);\n }\n\n .Button-module_button__qBMg_:active {\n --current-background-color: var(--swui-button-background-color-active);\n --current-border-color: var(--swui-button-border-color-active);\n --current-icon-color: var(--swui-button-icon-color-active);\n --current-text-color: var(--swui-button-text-color-active);\n --current-box-shadow: var(--swui-button-box-shadow-active);\n }\n\n .Button-module_button__qBMg_:disabled {\n --current-background-color: var(--swui-button-background-color-disabled);\n --current-border-color: var(--swui-button-border-color-disabled);\n --current-icon-color: var(--swui-button-icon-color-disabled);\n --current-text-color: var(--swui-button-text-color-disabled);\n --current-box-shadow: var(--swui-button-box-shadow-disabled);\n cursor: not-allowed;\n }\n\n .Button-module_button__qBMg_.Button-module_normal__ZIWYY {\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled) {\n --current-background-color: var(--swui-button-danger-background-color);\n --current-border-color: var(--swui-button-danger-border-color);\n --current-text-color: var(--swui-button-danger-text-color);\n --current-icon-color: var(--swui-button-danger-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-danger-background-color-hover\n );\n --current-border-color: var(--swui-button-danger-border-color-hover);\n --current-text-color: var(--swui-button-danger-text-color-hover);\n --current-icon-color: var(--swui-button-danger-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-danger-background-color-focus\n );\n --current-border-color: var(--swui-button-danger-border-color-focus);\n --current-text-color: var(--swui-button-danger-text-color-focus);\n --current-icon-color: var(--swui-button-danger-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):active {\n --current-background-color: var(\n --swui-button-danger-background-color-active\n );\n --current-border-color: var(--swui-button-danger-border-color-active);\n --current-text-color: var(--swui-button-danger-text-color-active);\n --current-icon-color: var(--swui-button-danger-icon-color-active);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled) {\n --current-background-color: var(--swui-button-success-background-color);\n --current-border-color: var(--swui-button-success-border-color);\n --current-text-color: var(--swui-button-success-text-color);\n --current-icon-color: var(--swui-button-success-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-success-background-color-hover\n );\n --current-border-color: var(--swui-button-success-border-color-hover);\n --current-text-color: var(--swui-button-success-text-color-hover);\n --current-icon-color: var(--swui-button-success-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-success-background-color-focus\n );\n --current-border-color: var(--swui-button-success-border-color-focus);\n --current-text-color: var(--swui-button-success-text-color-focus);\n --current-icon-color: var(--swui-button-success-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):active {\n --current-background-color: var(\n --swui-button-success-background-color-active\n );\n --current-border-color: var(--swui-button-success-border-color-active);\n --current-text-color: var(--swui-button-success-text-color-active);\n --current-icon-color: var(--swui-button-success-icon-color-active);\n }\n";
|
|
313
313
|
var styles$e = {"button":"Button-module_button__qBMg_","iconButton":"Button-module_iconButton__1-wQT","small":"Button-module_small__2fGop","large":"Button-module_large__22CGX","normal":"Button-module_normal__ZIWYY","danger":"Button-module_danger__2b61k","success":"Button-module_success__23dYZ"};
|
|
314
314
|
styleInject(css_248z$g);
|
|
315
315
|
|
|
@@ -441,7 +441,7 @@ var CardBody = function (_a) {
|
|
|
441
441
|
return React.createElement(Column, __assign({ indent: 3, spacing: variant === "compact" ? 1 : 3 }, props));
|
|
442
442
|
};
|
|
443
443
|
|
|
444
|
-
var css_248z$8 = ".Chip-module_chip__3Uf1d {\n /* Theme vars */\n --swui-chip-font-size: var(--swui-font-size-small);\n --swui-chip-line-height: var(--swui-line-height-small);\n --swui-chip-font-weight: var(--swui-font-weight-text);\n --swui-chip-font-family: var(--swui-font-primary);\n --swui-chip-letter-spacing: var(--swui-text-letter-spacing);\n --swui-chip-height: 24px;\n --swui-chip-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n border-radius: var(--swui-chip-border-radius);\n background-color: var(--current-bg-color);\n}\n\n .Chip-module_chip__3Uf1d .Chip-module_chipCell__2bQON {\n font-family: var(--swui-chip-font-family);\n font-size: var(--swui-chip-font-size);\n font-weight: var(--swui-chip-font-weight);\n line-height: var(--swui-chip-line-height);\n color: var(--current-text-color);\n height: var(--swui-chip-height);\n display: flex;\n align-items: center;\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv {\n white-space: nowrap;\n padding: 0 var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d button {\n background: transparent;\n border: none;\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .Chip-module_chip__3Uf1d button:hover {\n background-color: var(--current-bg-color-hover);\n }\n\n .Chip-module_chip__3Uf1d button:focus {\n background-color: var(--current-bg-color-focus);\n outline: none;\n }\n\n .Chip-module_chip__3Uf1d button:active {\n background-color: var(--current-bg-color-active);\n }\n\n .Chip-module_chip__3Uf1d button:first-child {\n border-top-left-radius: var(--swui-chip-border-radius);\n border-bottom-left-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d button:last-child {\n border-top-right-radius: var(--swui-chip-border-radius);\n border-bottom-right-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_clickable__3zjMU {\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 {\n padding-left: var(--swui-metrics-space);\n padding-right: var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 svg {\n color: var(--current-text-color);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n --current-bg-color: var(--swui-primary-action-color);\n --current-text-color: var(--swui-white);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n --current-bg-color-hover: var(--lhds-color-blue-200);\n --current-bg-color-focus: var(--lhds-color-blue-200);\n --current-bg-color-active: var(--lhds-color-blue-300);\n }\n";
|
|
444
|
+
var css_248z$8 = ".Chip-module_chip__3Uf1d {\n /* Theme vars */\n --swui-chip-font-size: var(--swui-font-size-small);\n --swui-chip-line-height: var(--swui-line-height-small);\n --swui-chip-font-weight: var(--swui-font-weight-text);\n --swui-chip-font-family: var(--swui-font-primary);\n --swui-chip-letter-spacing: var(--swui-text-letter-spacing);\n --swui-chip-height: 24px;\n --swui-chip-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n border-radius: var(--swui-chip-border-radius);\n background-color: var(--current-bg-color);\n}\n\n .Chip-module_chip__3Uf1d .Chip-module_chipCell__2bQON {\n font-family: var(--swui-chip-font-family);\n font-size: var(--swui-chip-font-size);\n font-weight: var(--swui-chip-font-weight);\n line-height: var(--swui-chip-line-height);\n color: var(--current-text-color);\n min-height: var(--swui-chip-height);\n display: flex;\n align-items: center;\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv {\n white-space: nowrap;\n padding: 0 var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d button {\n background: transparent;\n border: none;\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .Chip-module_chip__3Uf1d button:hover {\n background-color: var(--current-bg-color-hover);\n }\n\n .Chip-module_chip__3Uf1d button:focus {\n background-color: var(--current-bg-color-focus);\n outline: none;\n }\n\n .Chip-module_chip__3Uf1d button:active {\n background-color: var(--current-bg-color-active);\n }\n\n .Chip-module_chip__3Uf1d button:first-child {\n border-top-left-radius: var(--swui-chip-border-radius);\n border-bottom-left-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d button:last-child {\n border-top-right-radius: var(--swui-chip-border-radius);\n border-bottom-right-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_clickable__3zjMU {\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 {\n padding-left: var(--swui-metrics-space);\n padding-right: var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 svg {\n color: var(--current-text-color);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n --current-bg-color: var(--swui-primary-action-color);\n --current-text-color: var(--swui-white);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n --current-bg-color-hover: var(--lhds-color-blue-200);\n --current-bg-color-focus: var(--lhds-color-blue-200);\n --current-bg-color-active: var(--lhds-color-blue-300);\n }\n";
|
|
445
445
|
var styles$8 = {"chip":"Chip-module_chip__3Uf1d","chipCell":"Chip-module_chipCell__2bQON","label":"Chip-module_label__3gHgv","clickable":"Chip-module_clickable__3zjMU","close":"Chip-module_close__2uEi1","primary":"Chip-module_primary__3kb_i","secondary":"Chip-module_secondary__2hWgY"};
|
|
446
446
|
styleInject(css_248z$8);
|
|
447
447
|
|
|
@@ -512,7 +512,7 @@ styleInject(css_248z$6);
|
|
|
512
512
|
var ToggleButton = function (_a) {
|
|
513
513
|
var label = _a.label, pressed = _a.pressed, first = _a.first, last = _a.last, width = _a.width, onClick = _a.onClick;
|
|
514
514
|
var borderRadius = useMemo(function () {
|
|
515
|
-
return (first ? "3px" : 0
|
|
515
|
+
return "".concat(first ? "3px" : 0, " ").concat(last ? "3px 3px" : "0 0", " ").concat(first ? "3px" : "0");
|
|
516
516
|
}, [first, last]);
|
|
517
517
|
return (React.createElement(Clickable, { onClick: function () { return onClick && onClick(!pressed); } },
|
|
518
518
|
React.createElement(Box, { className: cx(styles$6.toggleButton, pressed && styles$6.pressed), width: width, justifyContent: "center", alignItems: "center", borderRadius: borderRadius },
|
|
@@ -638,7 +638,7 @@ var TabMenu = function (_a) {
|
|
|
638
638
|
return (React.createElement(Row, { className: cx(styles$2.tabMenu, (_b = {}, _b[styles$2.withBorder] = enableBorder, _b)), gap: 2, role: "tablist" }, children));
|
|
639
639
|
};
|
|
640
640
|
|
|
641
|
-
var css_248z$1 = ".Tag-module_tag__1jkHo {\n /* Theme vars */\n --swui-tag-font-size: var(--swui-font-size-small);\n --swui-tag-line-height: var(--swui-line-height-small);\n --swui-tag-font-weight: var(--swui-font-weight-text);\n --swui-tag-font-family: var(--swui-font-primary);\n --swui-tag-letter-spacing: var(--swui-text-letter-spacing);\n --swui-tag-height-normal: 24px;\n --swui-tag-height-small: 16px;\n --swui-tag-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-border-color: var(--swui-primary-action-color);\n --current-height: var(--swui-tag-height-normal);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n white-space: nowrap;\n border-radius: var(--swui-tag-border-radius);\n background-color: var(--current-bg-color);\n border: 1px solid var(--current-border-color);\n font-family: var(--swui-tag-font-family);\n font-size: var(--swui-tag-font-size);\n font-weight: var(--swui-tag-font-weight);\n line-height: var(--swui-tag-line-height);\n color: var(--current-text-color);\n height: var(--current-height);\n align-items: center;\n padding: 0 var(--swui-metrics-space);\n}\n\n .Tag-module_tag__1jkHo.Tag-module_small__2WMmo {\n --current-height: var(--swui-tag-height-small);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_info__1Nb3P {\n --current-border-color: var(--lhds-color-blue-300);\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_error__322oJ {\n --current-border-color: var(--lhds-color-red-300);\n --current-bg-color: var(--lhds-color-red-50);\n --current-text-color: var(--lhds-color-red-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_warning__2TcGy {\n --current-border-color: var(--lhds-color-orange-300);\n --current-bg-color: var(--lhds-color-orange-50);\n --current-text-color: var(--lhds-color-orange-900);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_success__2MOAb {\n --current-border-color: var(--lhds-color-green-300);\n --current-bg-color: var(--lhds-color-green-50);\n --current-text-color: var(--lhds-color-green-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_passive__1ZzM0 {\n --current-border-color: var(--lhds-color-ui-300);\n --current-bg-color: var(--lhds-color-ui-50);\n --current-text-color: var(--lhds-color-ui-800);\n }\n";
|
|
641
|
+
var css_248z$1 = ".Tag-module_tag__1jkHo {\n /* Theme vars */\n --swui-tag-font-size: var(--swui-font-size-small);\n --swui-tag-line-height: var(--swui-line-height-small);\n --swui-tag-font-weight: var(--swui-font-weight-text);\n --swui-tag-font-family: var(--swui-font-primary);\n --swui-tag-letter-spacing: var(--swui-text-letter-spacing);\n --swui-tag-height-normal: 24px;\n --swui-tag-height-small: 16px;\n --swui-tag-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-border-color: var(--swui-primary-action-color);\n --current-height: var(--swui-tag-height-normal);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n white-space: nowrap;\n border-radius: var(--swui-tag-border-radius);\n background-color: var(--current-bg-color);\n border: 1px solid var(--current-border-color);\n font-family: var(--swui-tag-font-family);\n font-size: var(--swui-tag-font-size);\n font-weight: var(--swui-tag-font-weight);\n line-height: var(--swui-tag-line-height);\n color: var(--current-text-color);\n min-height: var(--current-height);\n align-items: center;\n padding: 0 var(--swui-metrics-space);\n}\n\n .Tag-module_tag__1jkHo.Tag-module_small__2WMmo {\n --current-height: var(--swui-tag-height-small);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_info__1Nb3P {\n --current-border-color: var(--lhds-color-blue-300);\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_error__322oJ {\n --current-border-color: var(--lhds-color-red-300);\n --current-bg-color: var(--lhds-color-red-50);\n --current-text-color: var(--lhds-color-red-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_warning__2TcGy {\n --current-border-color: var(--lhds-color-orange-300);\n --current-bg-color: var(--lhds-color-orange-50);\n --current-text-color: var(--lhds-color-orange-900);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_success__2MOAb {\n --current-border-color: var(--lhds-color-green-300);\n --current-bg-color: var(--lhds-color-green-50);\n --current-text-color: var(--lhds-color-green-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_passive__1ZzM0 {\n --current-border-color: var(--lhds-color-ui-300);\n --current-bg-color: var(--lhds-color-ui-50);\n --current-text-color: var(--lhds-color-ui-800);\n }\n";
|
|
642
642
|
var styles$1 = {"tag":"Tag-module_tag__1jkHo","small":"Tag-module_small__2WMmo","info":"Tag-module_info__1Nb3P","error":"Tag-module_error__322oJ","warning":"Tag-module_warning__2TcGy","success":"Tag-module_success__2MOAb","passive":"Tag-module_passive__1ZzM0"};
|
|
643
643
|
styleInject(css_248z$1);
|
|
644
644
|
|