@navikt/ds-css 0.16.11 → 0.16.14

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.
@@ -20,10 +20,22 @@ html {
20
20
  box-sizing: inherit;
21
21
  }
22
22
 
23
+ :root,
24
+ [data-theme="light"] {
25
+ --navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
26
+
27
+ color: var(--navds-semantic-color-text);
28
+ }
29
+
30
+ [data-theme="dark"] {
31
+ --navds-shadow-focus: var(--navds-shadow-focus-inverted);
32
+
33
+ color: var(--navds-semantic-color-text-inverted);
34
+ }
35
+
23
36
  body {
24
37
  font-family: var(--navds-font-family);
25
38
  line-height: 1.333;
26
- color: var(--navds-semantic-color-text);
27
39
  font-size: 1.125rem;
28
40
  }
29
41
 
package/button.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ [data-theme="light"] {
2
3
  /* Primary */
3
4
  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
4
5
  --navds-button-color-primary-border-focus: var(
@@ -80,6 +81,39 @@
80
81
  --navds-loader-color-on-button-foreground: currentColor;
81
82
  }
82
83
 
84
+ [data-theme="dark"] {
85
+ /* Primary */
86
+ --navds-button-color-primary-text: var(--navds-semantic-color-text);
87
+ --navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
88
+ --navds-button-color-primary-background: var(--navds-global-color-blue-200);
89
+ --navds-button-color-primary-background-hover: var(
90
+ --navds-global-color-blue-300
91
+ );
92
+ --navds-button-color-primary-background-active: var(
93
+ --navds-global-color-blue-400
94
+ );
95
+
96
+ /* Secondary */
97
+ --navds-button-color-secondary-text: var(--navds-global-color-blue-200);
98
+ --navds-button-color-secondary-text-hover: var(--navds-global-color-blue-200);
99
+ --navds-button-color-secondary-text-active: var(
100
+ --navds-global-color-blue-200
101
+ );
102
+ --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
103
+ --navds-button-color-secondary-border-focus-active-hover: var(
104
+ --navds-semantic-color-text
105
+ );
106
+ --navds-button-color-secondary-background: var(
107
+ --navds-semantic-color-component-background-inverted
108
+ );
109
+ --navds-button-color-secondary-background-hover: var(
110
+ --navds-global-color-blue-900
111
+ );
112
+ --navds-button-color-secondary-background-active: var(
113
+ --navds-global-color-blue-800
114
+ );
115
+ }
116
+
83
117
  .navds-button {
84
118
  display: inline-flex;
85
119
  cursor: pointer;