@kofile/gds-foundations 1.4.2 → 1.4.3
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/build/css/components/badge.module.css +2 -24
- package/build/css/components/checkbox.module.css +0 -11
- package/build/css/components/label.module.css +0 -10
- package/build/minified/badge.module.css +1 -1
- package/build/minified/checkbox.module.css +1 -1
- package/build/minified/label.module.css +1 -1
- package/package.json +1 -1
|
@@ -1,32 +1,10 @@
|
|
|
1
|
-
:root,
|
|
2
|
-
:host {
|
|
3
|
-
--badge-bg-default: var(--color-neutral-200);
|
|
4
|
-
--badge-bg-primary: var(--color-primary-200);
|
|
5
|
-
--badge-bg-success: var(--color-success-200);
|
|
6
|
-
--badge-bg-danger: var(--color-danger-200);
|
|
7
|
-
--badge-bg-warning: var(--color-warning-200);
|
|
8
|
-
--badge-bg-neutral-light: var(--color-neutral-200);
|
|
9
|
-
--badge-text-color: var(--color-neutral-darkest);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* @media (prefers-color-scheme: dark) {
|
|
13
|
-
:root {
|
|
14
|
-
--badge-bg-primary: var(--color-primary-900);
|
|
15
|
-
--badge-bg-success: var(--color-success-900);
|
|
16
|
-
--badge-bg-danger: var(--color-danger-900);
|
|
17
|
-
--badge-bg-warning: var(--color-warning-900);
|
|
18
|
-
--badge-bg-neutral-light: var(--color-neutral-800);
|
|
19
|
-
--badge-text-color: var(--color-neutral-lightest);
|
|
20
|
-
}
|
|
21
|
-
} */
|
|
22
|
-
|
|
23
1
|
.badge {
|
|
24
|
-
background-color: var(--
|
|
2
|
+
background-color: var(--color-neutral-200);
|
|
25
3
|
border-start-start-radius: var(--border-radius-xs);
|
|
26
4
|
border-start-end-radius: var(--border-radius-xs);
|
|
27
5
|
border-end-start-radius: var(--border-radius-xs);
|
|
28
6
|
border-end-end-radius: var(--border-radius-xs);
|
|
29
|
-
color: var(--
|
|
7
|
+
color: var(--color-neutral-darkest);
|
|
30
8
|
font-family: var(--font-families-default);
|
|
31
9
|
font-size: var(--font-size-xs);
|
|
32
10
|
font-weight: var(--font-weights-semibold);
|
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
/* Default to light color-scheme */
|
|
3
|
-
color-scheme: light;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
/* @media (prefers-color-scheme: dark) {
|
|
7
|
-
:root {
|
|
8
|
-
color-scheme: dark;
|
|
9
|
-
}
|
|
10
|
-
} */
|
|
11
|
-
|
|
12
1
|
/* ------------------------------------------------------------------
|
|
13
2
|
Base (Light) Styles
|
|
14
3
|
------------------------------------------------------------------ */
|
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
color-scheme: light;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
/* @media (prefers-color-scheme: dark) {
|
|
6
|
-
:root {
|
|
7
|
-
color-scheme: dark;
|
|
8
|
-
}
|
|
9
|
-
} */
|
|
10
|
-
|
|
11
1
|
/* ------------------------------------------------------------------
|
|
12
2
|
Base (Light) Styles
|
|
13
3
|
------------------------------------------------------------------ */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.badge{align-items:center;background-color:var(--color-neutral-200);border-end-end-radius:var(--border-radius-xs);border-end-start-radius:var(--border-radius-xs);border-start-end-radius:var(--border-radius-xs);border-start-start-radius:var(--border-radius-xs);color:var(--color-neutral-darkest);display:inline-flex;font-family:var(--font-families-default);font-size:var(--font-size-xs);font-weight:var(--font-weights-semibold);gap:var(--spacing-2xs);height:fit-content;letter-spacing:var(--letter-spacing-xs);line-height:var(--line-heights-xs);padding-block-end:var(--primitive-6);padding-block-start:var(--primitive-6);vertical-align:top;white-space:nowrap;width:fit-content}.badge,.badge[data-size=md]{padding-inline-end:var(--spacing-xs);padding-inline-start:var(--spacing-xs)}.badge[data-size=md]{font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-2xs);line-height:var(--line-heights-2xs)}.badge[data-size=md],.badge[data-size=sm]{padding-block-end:var(--spacing-3xs);padding-block-start:var(--spacing-3xs)}.badge[data-size=sm]{font-size:var(--font-size-3xs);letter-spacing:var(--letter-spacing-3xs);line-height:var(--line-heights-3xs);padding-inline-end:var(--spacing-2xs);padding-inline-start:var(--spacing-2xs)}.badge[data-color=neutral-light]{background-color:var(--color-neutral-200)}.badge[data-color=neutral-dark]{background-color:var(--color-neutral-300)}.badge[data-color=primary]{background-color:var(--color-primary-200)}.badge[data-color=success]{background-color:var(--color-success-200)}.badge[data-color=danger]{background-color:var(--color-danger-200)}.badge[data-color=warning]{background-color:var(--color-warning-200)}.badge[data-color=highlight]{background-color:var(--color-highlight-200)}.badge[data-mode=dark]{color:var(--color-neutral-lightest)}.badge[data-color=neutral-light][data-mode=dark]{background-color:var(--color-neutral-800);color:var(--color-neutral-lightest)}.badge[data-color=neutral-dark][data-mode=dark]{background-color:var(--color-neutral-900)}.badge[data-color=primary][data-mode=dark]{background-color:var(--color-primary-900)}.badge[data-color=success][data-mode=dark]{background-color:var(--color-success-900)}.badge[data-color=danger][data-mode=dark]{background-color:var(--color-danger-900)}.badge[data-color=warning][data-mode=dark]{background-color:var(--color-warning-900)}.badge[data-color=highlight][data-mode=dark]{background-color:var(--color-highlight-900)}.action:hover{background-color:transparent!important;border-color:transparent!important}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.checkbox,.indicator{display:flex}.checkbox{--checkbox-transition-speed:0.2s;appearance:none;background-color:var(--color-neutral-lightest);border:var(--border-width-sm) solid var(--color-neutral-800);border-radius:var(--spacing-2xs);box-sizing:border-box;cursor:pointer;height:var(--spacing-lg);justify-content:center;min-width:var(--spacing-lg);position:relative;transition:background-color var(--checkbox-transition-speed,.2s) ease;width:var(--spacing-lg)}.checkbox:not([data-disabled]):hover:not([data-state=checked]):not(:indeterminate):before{background-color:var(--color-neutral-400);content:"";height:var(--spacing-xs);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .25s ease;width:var(--spacing-xs)}.checkbox[data-state=checked]{background-color:var(--color-primary-600);border-color:var(--color-primary-900)}.checkbox:focus-visible{outline:var(--border-width-lg) solid var(--color-primary-700);outline-offset:var(--spacing-3xs)}.checkbox[data-disabled],.checkbox[data-error=true][data-disabled]{cursor:not-allowed;opacity:var(--opacity-disabled)}.checkbox[data-error=true]{background-color:var(--color-danger-600)}.checkbox[data-error=true]:not([data-disabled]):not([data-state=checked]):hover{background-color:var(--color-neutral-lightest)}.checkbox:indeterminate{background-color:var(--color-primary-600)}.checkbox[data-size=sm]{border-radius:var(--border-radius-2xs);height:var(--spacing-md);min-width:var(--spacing-md);width:var(--spacing-md)}.checkbox[data-size=sm]:not([data-disabled]):hover:not([data-state=checked]):not(:indeterminate):before{height:var(--spacing-xs);width:var(--spacing-xs)}.tile{align-items:center;background-color:var(--color-neutral-lightest);border:var(--border-width-sm) solid var(--color-neutral-300);border-radius:var(--primitive-6);box-sizing:border-box;display:flex;min-height:var(--spacing-3xl);padding-block:var(--spacing-sm);padding-inline:var(--spacing-md)}.tile[data-altbackground=true]{background-color:var(--color-neutral-400);border-color:var(--color-neutral-400)}.tile:has(.root[data-state=checked]){background-color:var(--color-primary-200-alpha)}.tile[data-state=checked]{background-color:var(--color-primary-200-alpha);border-color:var(--color-primary-600)}.tile[data-state=checked][data-error=true]{background-color:var(--color-danger-200);border-color:var(--color-danger-600)}.tile:not([data-state=checked]):hover{background-color:var(--color-neutral-400);border-color:var(--color-neutral-500,#818791)}.checkbox[data-mode=dark]{background-color:var(--color-neutral-darkest);border-color:var(--color-neutral-800)}.checkbox[data-mode=dark]:not([data-disabled]):hover:not([data-state=checked]):not(:indeterminate):before{background-color:var(--color-neutral-700)}.checkbox[data-mode=dark][data-state=checked]{background-color:var(--color-primary-500);border-color:var(--color-primary-500)}.checkbox[data-mode=dark]:focus-visible{outline-color:var(--color-primary-700)}.checkbox[data-mode=dark][data-error=true]{background-color:var(--color-danger-500)}.checkbox[data-mode=dark][data-error=true]:not([data-disabled]):not([data-state=checked]):hover{background-color:var(--color-danger-900)}.checkbox[data-mode=dark][data-error=true][data-state=checked],.checkbox[data-mode=dark][data-error=true][data-state=checked]:hover{background-color:var(--color-danger-500)}.tile[data-mode=dark]{background-color:var(--color-neutral-darkest);border-color:var(--color-neutral-900)}.tile[data-altbackground=true][data-mode=dark]{background-color:var(--color-neutral-700)}.tile[data-mode=dark]:has(.root[data-state=checked]){background-color:var(--color-primary-900)}.tile[data-mode=dark]:hover{background-color:var(--color-neutral-700);border-color:var(--color-neutral-800)}.tile[data-mode=dark][data-state=checked]{background-color:var(--color-primary-900);border-color:var(--color-primary-400)}.tile[data-mode=dark][data-state=checked][data-error=true]{background-color:var(--color-danger-900);border-color:var(--color-danger-400)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.label{all:unset;box-sizing:border-box;color:var(--color-neutral-1000,#121212);cursor:default;font-family:var(--font-families-default);font-size:var(--font-size-md);font-weight:var(--font-weights-regular);letter-spacing:var(--letter-spacing-md);line-height:var(--line-heights-md)}.label[aria-disabled=true]{cursor:not-allowed;opacity:var(--opacity-disabled,.32)}.label[data-size=sm]{font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-xs);line-height:var(--line-heights-xs)}.label[data-mode=dark]{color:var(--color-neutral-lightest,#fff)}
|