@navikt/ds-css 1.5.7 → 1.5.9-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/accordion.css +11 -19
  3. package/alert.css +14 -28
  4. package/baseline/baseline.css +7 -9
  5. package/baseline/fonts.css +27 -0
  6. package/button.css +64 -105
  7. package/chat.css +16 -23
  8. package/chips.css +28 -32
  9. package/content-container.css +2 -2
  10. package/date.css +39 -40
  11. package/dist/index.css +916 -979
  12. package/form/confirmation-panel.css +9 -19
  13. package/form/error-summary.css +12 -18
  14. package/form/fieldset.css +2 -2
  15. package/form/form.css +2 -2
  16. package/form/radio-checkbox.css +43 -34
  17. package/form/search.css +30 -37
  18. package/form/select.css +10 -21
  19. package/form/switch.css +20 -35
  20. package/form/text-field.css +21 -35
  21. package/form/textarea.css +31 -30
  22. package/grid.css +2 -2
  23. package/guide-panel.css +14 -19
  24. package/help-text.css +7 -18
  25. package/link-panel.css +7 -14
  26. package/link.css +10 -23
  27. package/loader.css +16 -27
  28. package/modal.css +10 -17
  29. package/package.json +2 -2
  30. package/pagination.css +12 -18
  31. package/panel.css +4 -10
  32. package/popover.css +9 -15
  33. package/read-more.css +10 -10
  34. package/stepper.css +20 -20
  35. package/table.css +22 -32
  36. package/tabs.css +13 -13
  37. package/tag.css +43 -57
  38. package/toggle-group.css +16 -27
  39. package/tokens.json +302 -0
  40. package/tooltip.css +13 -13
  41. package/typography.css +54 -60
  42. package/baseline/Source-Sans-Pro-600.css +0 -7
  43. package/baseline/Source-Sans-Pro-italic.css +0 -7
  44. package/baseline/Source-Sans-Pro-regular.css +0 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 1.5.9
4
+
5
+ ### Patch Changes
6
+
7
+ - 4px -> 2px gap chips-toggle active
8
+
9
+ ## 1.5.8
10
+
3
11
  ## 1.5.7
4
12
 
5
13
  ## 1.5.6
package/accordion.css CHANGED
@@ -1,11 +1,3 @@
1
- :root,
2
- :host {
3
- --navds-accordion-color-text-hover: var(--navds-semantic-color-interaction-primary);
4
- --navds-accordion-color-border: var(--navds-semantic-color-border);
5
- --navds-accordion-color-border-hover: var(--navds-semantic-color-interaction-primary);
6
- --navds-accordion-color-background-open: var(--navds-semantic-color-interaction-primary-hover-subtle);
7
- }
8
-
9
1
  .navds-accordion__item:focus-within {
10
2
  position: relative;
11
3
  }
@@ -15,24 +7,24 @@
15
7
  display: flex;
16
8
  justify-content: space-between;
17
9
  align-items: flex-start;
18
- gap: var(--navds-spacing-2);
19
- padding: 14px var(--navds-spacing-3) var(--navds-spacing-3);
10
+ gap: var(--a-spacing-2);
11
+ padding: 14px var(--a-spacing-3) var(--a-spacing-3);
20
12
  margin: 0;
21
13
  text-align: left;
22
14
  background: transparent;
23
15
  cursor: pointer;
24
16
  border: none;
25
- border-bottom: 2px solid var(--navds-accordion-color-border);
17
+ border-bottom: 2px solid var(--a-border-strong);
26
18
  }
27
19
 
28
20
  .navds-accordion__header:focus {
29
21
  outline: none;
30
- box-shadow: var(--navds-shadow-focus);
22
+ box-shadow: var(--a-shadow-focus);
31
23
  }
32
24
 
33
25
  .navds-accordion__header:hover {
34
- color: var(--navds-accordion-color-text-hover);
35
- border-color: var(--navds-accordion-color-border-hover);
26
+ color: var(--ac-accordion-header-text-hover, var(--a-surface-action));
27
+ border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong-hover));
36
28
  }
37
29
 
38
30
  .navds-accordion__header-content {
@@ -41,17 +33,17 @@
41
33
  }
42
34
 
43
35
  .navds-accordion__item--open > .navds-accordion__header {
44
- background-color: var(--navds-accordion-color-background-open);
45
- border-color: var(--navds-accordion-color-background-open);
36
+ background-color: var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle));
37
+ border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
46
38
  }
47
39
 
48
40
  .navds-accordion__content {
49
- padding: var(--navds-spacing-3) var(--navds-spacing-3) 18px;
50
- border-bottom: 2px solid var(--navds-accordion-color-border);
41
+ padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
42
+ border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong));
51
43
  }
52
44
 
53
45
  .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
54
- border-color: var(--navds-accordion-color-border-hover);
46
+ border-color: var(--ac-accordion-content-border-open, var(--a-border-strong-hover));
55
47
  }
56
48
 
57
49
  .navds-accordion__expand-icon {
package/alert.css CHANGED
@@ -1,23 +1,9 @@
1
- :root,
2
- :host {
3
- --navds-alert-color-border: var(--navds-semantic-color-border-muted);
4
- --navds-alert-color-error-border: var(--navds-semantic-color-feedback-danger-border);
5
- --navds-alert-color-error-background: var(--navds-global-color-red-50);
6
- --navds-alert-color-warning-border: var(--navds-semantic-color-feedback-warning-border);
7
- --navds-alert-color-warning-background: var(--navds-global-color-orange-50);
8
- --navds-alert-color-info-border: var(--navds-semantic-color-feedback-info-border);
9
- --navds-alert-color-info-background: var(--navds-global-color-lightblue-50);
10
- --navds-alert-color-success-border: var(--navds-semantic-color-feedback-success-border);
11
- --navds-alert-color-success-background: var(--navds-global-color-green-50);
12
- }
13
-
14
1
  .navds-alert {
15
- border-radius: var(--navds-border-radius-medium);
2
+ border-radius: var(--a-border-radius-medium);
16
3
  border: 1px solid;
17
- border-color: var(--navds-alert-color-border);
18
- padding: var(--navds-spacing-4);
4
+ padding: var(--a-spacing-4);
19
5
  display: flex;
20
- gap: var(--navds-spacing-3);
6
+ gap: var(--a-spacing-3);
21
7
  align-items: center;
22
8
  }
23
9
 
@@ -26,7 +12,7 @@
26
12
  }
27
13
 
28
14
  .navds-alert--small {
29
- padding: var(--navds-spacing-2) var(--navds-spacing-4);
15
+ padding: var(--a-spacing-2) var(--a-spacing-4);
30
16
  }
31
17
 
32
18
  .navds-alert--full-width {
@@ -37,32 +23,32 @@
37
23
  flex-shrink: 0;
38
24
  font-size: 1.5rem;
39
25
  align-self: flex-start;
40
- height: var(--navds-font-line-height-xlarge);
26
+ height: var(--a-font-line-height-xlarge);
41
27
  }
42
28
 
43
29
  .navds-alert--small > .navds-alert__icon {
44
30
  font-size: 1.25rem;
45
- height: var(--navds-font-line-height-large);
31
+ height: var(--a-font-line-height-large);
46
32
  }
47
33
 
48
34
  .navds-alert--error {
49
- border-color: var(--navds-alert-color-error-border);
50
- background-color: var(--navds-alert-color-error-background);
35
+ border-color: var(--ac-alert-error-border, var(--a-border-danger));
36
+ background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
51
37
  }
52
38
 
53
39
  .navds-alert--warning {
54
- border-color: var(--navds-alert-color-warning-border);
55
- background-color: var(--navds-alert-color-warning-background);
40
+ border-color: var(--ac-alert-warning-border, var(--a-border-warning));
41
+ background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
56
42
  }
57
43
 
58
44
  .navds-alert--info {
59
- border-color: var(--navds-alert-color-info-border);
60
- background-color: var(--navds-alert-color-info-background);
45
+ border-color: var(--ac-alert-info-border, var(--a-border-info));
46
+ background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
61
47
  }
62
48
 
63
49
  .navds-alert--success {
64
- border-color: var(--navds-alert-color-success-border);
65
- background-color: var(--navds-alert-color-success-background);
50
+ border-color: var(--ac-alert-success-border, var(--a-border-success));
51
+ background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
66
52
  }
67
53
 
68
54
  .navds-alert--inline {
package/baseline/baseline.css CHANGED
@@ -1,8 +1,6 @@
1
1
  @import "@navikt/ds-tokens";
2
2
  @import "normalize.css";
3
- @import "Source-Sans-Pro-regular.css";
4
- @import "Source-Sans-Pro-italic.css";
5
- @import "Source-Sans-Pro-600.css";
3
+ @import "fonts.css";
6
4
  @import "print.css";
7
5
  @import "utility.css";
8
6
 
@@ -20,26 +18,26 @@ html,
20
18
  :root,
21
19
  :host,
22
20
  [data-theme="light"] {
23
- --navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
21
+ --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
24
22
 
25
- color: var(--navds-semantic-color-text);
23
+ color: var(--a-text-default);
26
24
  }
27
25
 
28
26
  [data-theme="dark"] {
29
- --navds-shadow-focus: var(--navds-shadow-focus-inverted);
27
+ --a-shadow-focus: var(--a-shadow-focus-inverted);
30
28
 
31
- color: var(--navds-semantic-color-text-inverted);
29
+ color: var(--a-text-on-inverted);
32
30
  }
33
31
 
34
32
  body,
35
33
  :host {
36
- font-family: var(--navds-font-family, "Source Sans Pro", Arial, sans-serif);
34
+ font-family: var(--a-font-family, "Source Sans Pro", Arial, sans-serif);
37
35
  line-height: 1.333;
38
36
  font-size: 1.125rem;
39
37
  }
40
38
 
41
39
  a {
42
- color: var(--navds-semantic-color-link);
40
+ color: var(--a-semantic-color-link);
43
41
  }
44
42
 
45
43
  button {
package/baseline/fonts.css ADDED
@@ -0,0 +1,27 @@
1
+ @font-face {
2
+ font-family: "Source Sans Pro";
3
+ font-style: italic;
4
+ font-weight: 400;
5
+ font-display: swap;
6
+ src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
7
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
8
+ U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
9
+ }
10
+ @font-face {
11
+ font-family: "Source Sans Pro";
12
+ font-style: normal;
13
+ font-weight: 400;
14
+ font-display: swap;
15
+ src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
16
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
17
+ U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
18
+ }
19
+ @font-face {
20
+ font-family: "Source Sans Pro";
21
+ font-style: normal;
22
+ font-weight: 600;
23
+ font-display: swap;
24
+ src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
25
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
26
+ U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
27
+ }
package/button.css CHANGED
@@ -1,60 +1,18 @@
1
- :root,
2
- :host,
3
- [data-theme="light"] {
4
- /* Primary */
5
- --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
6
- --navds-button-color-primary-border-focus: var(--navds-semantic-color-text-inverted);
7
- --navds-button-color-primary-background: var(--navds-semantic-color-interaction-primary);
8
- --navds-button-color-primary-background-hover: var(--navds-semantic-color-interaction-primary-hover);
9
- --navds-button-color-primary-background-active: var(--navds-semantic-color-interaction-primary-selected);
10
-
11
- /* Secondary */
12
- --navds-button-color-secondary-text: var(--navds-semantic-color-interaction-primary);
13
- --navds-button-color-secondary-text-hover: var(--navds-semantic-color-interaction-primary);
14
- --navds-button-color-secondary-text-active: var(--navds-semantic-color-text-inverted);
15
- --navds-button-color-secondary-border: var(--navds-semantic-color-interaction-primary);
16
- --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-component-background-light);
17
- --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-light);
18
- --navds-button-color-secondary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
19
- --navds-button-color-secondary-background-active: var(--navds-semantic-color-interaction-primary-selected);
20
-
21
- /* Tertiary */
22
- --navds-button-color-tertiary-text: var(--navds-semantic-color-interaction-primary);
23
- --navds-button-color-tertiary-text-active: var(--navds-semantic-color-text-inverted);
24
- --navds-button-color-tertiary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
25
- --navds-button-color-tertiary-border-focus: var(--navds-semantic-color-interaction-primary);
26
- --navds-button-color-tertiary-border-active: var(--navds-semantic-color-component-background-light);
27
- --navds-button-color-tertiary-background-active: var(--navds-semantic-color-interaction-primary-selected);
28
-
29
- /* Danger */
30
- --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
31
- --navds-button-color-danger-background: var(--navds-semantic-color-interaction-danger);
32
- --navds-button-color-danger-background-hover: var(--navds-semantic-color-interaction-danger-hover);
33
- --navds-button-color-danger-background-active: var(--navds-semantic-color-interaction-danger-selected);
34
- --navds-button-color-danger-border-focus: var(--navds-semantic-color-component-background-light);
35
-
36
- /* Loader */
37
- --navds-loader-color-on-button-background: rgb(255 255 255 / 0.3);
38
- --navds-loader-color-on-button-foreground: currentColor;
39
- }
40
-
41
1
  [data-theme="dark"] {
42
- /* Primary */
43
- --navds-button-color-primary-text: var(--navds-semantic-color-text);
44
- --navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
45
- --navds-button-color-primary-background: var(--navds-global-color-blue-200);
46
- --navds-button-color-primary-background-hover: var(--navds-global-color-blue-300);
47
- --navds-button-color-primary-background-active: var(--navds-global-color-blue-400);
48
-
49
- /* Secondary */
50
- --navds-button-color-secondary-text: var(--navds-global-color-white);
51
- --navds-button-color-secondary-text-hover: var(--navds-global-color-white);
52
- --navds-button-color-secondary-text-active: var(--navds-global-color-white);
53
- --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
54
- --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-text);
55
- --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-inverted);
56
- --navds-button-color-secondary-background-hover: var(--navds-global-color-gray-800);
57
- --navds-button-color-secondary-background-active: var(--navds-global-color-gray-700);
2
+ --ac-button-primary-text: var(--a-gray-900);
3
+ --ac-button-primary-bg: var(--a-blue-200);
4
+ --ac-button-primary-focus-border: var(--a-gray-900);
5
+ --ac-button-primary-hover-bg: var(--a-blue-300);
6
+ --ac-button-primary-active-bg: var(--a-blue-400);
7
+ --ac-button-secondary-text: var(--a-white);
8
+ --ac-button-secondary-hover-text: var(--a-white);
9
+ --ac-button-secondary-active-text: var(--a-white);
10
+ --ac-button-secondary-active-focus-border: var(--a-gray-900);
11
+ --ac-button-secondary-bg: var(--a-gray-900);
12
+ --ac-button-secondary-border: var(--a-blue-200);
13
+ --ac-button-secondary-hover-bg: var(--a-gray-800);
14
+ --ac-button-secondary-focus-border: var(--a-blue-200);
15
+ --ac-button-secondary-active-bg: var(--a-gray-700);
58
16
  }
59
17
 
60
18
  .navds-button {
@@ -64,24 +22,24 @@
64
22
  text-decoration: none;
65
23
  border: none;
66
24
  background: none;
67
- border-radius: var(--navds-border-radius-small);
68
- padding: var(--navds-spacing-3) var(--navds-spacing-5);
25
+ border-radius: var(--a-border-radius-medium);
26
+ padding: var(--a-spacing-3) var(--a-spacing-5);
69
27
  align-items: center;
70
28
  justify-content: center;
71
- gap: var(--navds-spacing-2);
29
+ gap: var(--a-spacing-2);
72
30
  }
73
31
 
74
32
  .navds-button--small {
75
- padding: 0.375rem var(--navds-spacing-3);
33
+ padding: 0.375rem var(--a-spacing-3);
76
34
  }
77
35
 
78
36
  .navds-button--xsmall {
79
- padding: 0.125rem var(--navds-spacing-2);
80
- gap: var(--navds-spacing-1);
37
+ padding: var(--a-spacing-05) var(--a-spacing-2);
38
+ gap: var(--a-spacing-1);
81
39
  }
82
40
 
83
41
  .navds-button--icon-only {
84
- padding: var(--navds-spacing-3);
42
+ padding: var(--a-spacing-3);
85
43
  }
86
44
 
87
45
  .navds-button--small.navds-button--icon-only {
@@ -89,27 +47,27 @@
89
47
  }
90
48
 
91
49
  .navds-button--xsmall.navds-button--icon-only {
92
- padding: var(--navds-spacing-1);
50
+ padding: var(--a-spacing-1);
93
51
  }
94
52
 
95
53
  .navds-button:focus {
96
54
  outline: none;
97
- box-shadow: var(--navds-shadow-focus);
55
+ box-shadow: var(--a-shadow-focus);
98
56
  }
99
57
 
100
58
  .navds-button__icon {
101
- --navds-button-icon-adjustment: -4px;
59
+ --ac-button-icon-margin: -4px;
102
60
 
103
61
  font-size: 1.5rem;
104
62
  display: flex;
105
63
  }
106
64
 
107
65
  .navds-button__icon:first-child {
108
- margin-left: var(--navds-button-icon-adjustment);
66
+ margin-left: var(--ac-button-icon-margin);
109
67
  }
110
68
 
111
69
  .navds-button__icon:last-child {
112
- margin-right: var(--navds-button-icon-adjustment);
70
+ margin-right: var(--ac-button-icon-margin);
113
71
  }
114
72
 
115
73
  .navds-button__icon:only-child {
@@ -117,13 +75,13 @@
117
75
  }
118
76
 
119
77
  .navds-button--small .navds-button__icon {
120
- --navds-button-icon-adjustment: -2px;
78
+ --ac-button-icon-margin: -2px;
121
79
 
122
80
  font-size: 1.25rem;
123
81
  }
124
82
 
125
83
  .navds-button--xsmall .navds-button__icon {
126
- --navds-button-icon-adjustment: -2px;
84
+ --ac-button-icon-margin: -2px;
127
85
 
128
86
  font-size: 1rem;
129
87
  }
@@ -133,25 +91,25 @@
133
91
  *************************/
134
92
 
135
93
  .navds-button--primary {
136
- background-color: var(--navds-button-color-primary-background);
137
- color: var(--navds-button-color-primary-text);
94
+ background-color: var(--ac-button-primary-bg, var(--a-surface-action));
95
+ color: var(--ac-button-primary-text, var(--a-text-on-action));
138
96
  }
139
97
 
140
98
  .navds-button--primary:hover {
141
- background-color: var(--navds-button-color-primary-background-hover);
99
+ background-color: var(--ac-button-primary-hover-bg, var(--a-surface-action-hover));
142
100
  }
143
101
 
144
102
  .navds-button--primary:active {
145
- background-color: var(--navds-button-color-primary-background-active);
103
+ background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
146
104
  }
147
105
 
148
106
  .navds-button--primary:focus {
149
- box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus), var(--navds-shadow-focus);
107
+ box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
150
108
  }
151
109
 
152
110
  .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
153
111
  .navds-button--primary:active:where(:disabled, .navds-button--disabled) {
154
- background-color: var(--navds-button-color-primary-background);
112
+ background-color: var(--ac-button-primary-bg, var(--a-surface-action));
155
113
  }
156
114
 
157
115
  /**************************
@@ -159,35 +117,35 @@
159
117
  **************************/
160
118
 
161
119
  .navds-button--secondary {
162
- color: var(--navds-button-color-secondary-text);
163
- background-color: var(--navds-button-color-secondary-background);
164
- box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
120
+ color: var(--ac-button-secondary-text, var(--a-text-action));
121
+ background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
122
+ box-shadow: inset 0 0 0 1.5px var(--ac-button-secondary-border, var(--a-border-action));
165
123
  }
166
124
 
167
125
  .navds-button--secondary:hover {
168
- color: var(--navds-button-color-secondary-text-hover);
169
- background-color: var(--navds-button-color-secondary-background-hover);
126
+ color: var(--ac-button-secondary-hover-text, var(--a-text-action-hover));
127
+ background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
170
128
  }
171
129
 
172
130
  .navds-button--secondary:focus {
173
- box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border), var(--navds-shadow-focus);
131
+ box-shadow: inset 0 0 0 1.5px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
174
132
  }
175
133
 
176
134
  .navds-button--secondary:active {
177
- color: var(--navds-button-color-secondary-text-active);
178
- background-color: var(--navds-button-color-secondary-background-active);
135
+ color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
136
+ background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
179
137
  box-shadow: none;
180
138
  }
181
139
 
182
140
  .navds-button--secondary:focus:active {
183
- box-shadow: inset 0 0 0 1px var(--navds-button-color-secondary-border-focus-active-hover), var(--navds-shadow-focus);
141
+ box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
184
142
  }
185
143
 
186
144
  .navds-button--secondary:where(:disabled, .navds-button--disabled),
187
145
  .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
188
- color: var(--navds-button-color-secondary-text);
189
- background-color: var(--navds-button-color-secondary-background);
190
- box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
146
+ color: var(--ac-button-secondary-text, var(--a-text-action));
147
+ background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
148
+ box-shadow: inset 0 0 0 1.5px var(--ac-button-secondary-border, var(--a-border-action));
191
149
  }
192
150
 
193
151
  /****************************
@@ -195,36 +153,37 @@
195
153
  ****************************/
196
154
 
197
155
  .navds-button--tertiary {
198
- color: var(--navds-button-color-tertiary-text);
156
+ color: var(--ac-button-tertiary-text, var(--a-text-action));
199
157
  }
200
158
 
201
159
  .navds-button--tertiary:hover {
202
- background-color: var(--navds-button-color-tertiary-background-hover);
160
+ color: var(--ac-button-tertiary-hover-text, var(--a-text-action-hover));
161
+ background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
203
162
  }
204
163
 
205
164
  .navds-button--tertiary:focus {
206
- box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus), var(--navds-shadow-focus);
165
+ box-shadow: inset 0 0 0 1.5px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
207
166
  }
208
167
 
209
168
  .navds-button--tertiary:active {
210
- color: var(--navds-button-color-tertiary-text-active);
211
- background-color: var(--navds-button-color-tertiary-background-active);
212
- box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
169
+ color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
170
+ background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
171
+ box-shadow: inset 0 0 0 1px var(--a-surface-default);
213
172
  }
214
173
 
215
174
  .navds-button--tertiary:active:hover {
216
- background-color: var(--navds-button-color-tertiary-background-active);
175
+ background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
217
176
  }
218
177
 
219
178
  .navds-button--tertiary:active:focus {
220
- box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active), var(--navds-shadow-focus);
179
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
221
180
  }
222
181
 
223
182
  .navds-button--tertiary:where(:disabled, .navds-button--disabled),
224
183
  .navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
225
184
  .navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
226
185
  .navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
227
- color: var(--navds-button-color-tertiary-text);
186
+ color: var(--ac-button-tertiary-text, var(--a-text-action));
228
187
  background: none;
229
188
  box-shadow: none;
230
189
  }
@@ -234,25 +193,25 @@
234
193
  *************************/
235
194
 
236
195
  .navds-button--danger {
237
- background-color: var(--navds-button-color-danger-background);
238
- color: var(--navds-button-color-danger-text);
196
+ background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
197
+ color: var(--ac-button-danger-text, var(--a-text-on-danger));
239
198
  }
240
199
 
241
200
  .navds-button--danger:hover {
242
- background-color: var(--navds-button-color-danger-background-hover);
201
+ background-color: var(--ac-button-danger-hover-bg, var(--a-surface-danger-hover));
243
202
  }
244
203
 
245
204
  .navds-button--danger:active {
246
- background-color: var(--navds-button-color-danger-background-active);
205
+ background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
247
206
  }
248
207
 
249
208
  .navds-button--danger:focus {
250
- box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus), var(--navds-shadow-focus);
209
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
251
210
  }
252
211
 
253
212
  .navds-button--danger:active:where(:disabled, .navds-button--disabled),
254
213
  .navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
255
- background-color: var(--navds-button-color-danger-background);
214
+ background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
256
215
  }
257
216
 
258
217
  /**************************
@@ -268,10 +227,10 @@
268
227
  }
269
228
 
270
229
  .navds-button .navds-loader .navds-loader__foreground {
271
- stroke: var(--navds-loader-color-on-button-foreground);
230
+ stroke: var(--ac-button-loader-stroke, currentColor);
272
231
  }
273
232
 
274
233
  .navds-button--primary .navds-loader .navds-loader__background,
275
234
  .navds-button--danger .navds-loader .navds-loader__background {
276
- stroke: var(--navds-loader-color-on-button-background);
235
+ stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
277
236
  }
package/chat.css CHANGED
@@ -1,21 +1,14 @@
1
- :root,
2
- :host {
3
- --navds-chat-color-background: var(--navds-semantic-color-canvas-background);
4
- --navds-chat-color-avatar: var(--navds-semantic-color-text);
5
- --navds-chat-color-avatar-background: var(--navds-semantic-color-canvas-background);
6
- }
7
-
8
1
  .navds-chat {
9
2
  display: flex;
10
3
  align-items: flex-end;
11
- gap: var(--navds-spacing-4);
12
- padding-right: var(--navds-spacing-16);
4
+ gap: var(--a-spacing-4);
5
+ padding-right: var(--a-spacing-16);
13
6
  }
14
7
 
15
8
  .navds-chat--right {
16
9
  flex-direction: row-reverse;
17
10
  padding-right: 0;
18
- padding-left: var(--navds-spacing-16);
11
+ padding-left: var(--a-spacing-16);
19
12
  }
20
13
 
21
14
  .navds-chat__bubble-wrapper {
@@ -24,7 +17,7 @@
24
17
  padding: 0;
25
18
  display: flex;
26
19
  flex-direction: column;
27
- gap: var(--navds-spacing-3);
20
+ gap: var(--a-spacing-3);
28
21
  }
29
22
 
30
23
  .navds-chat--right .navds-chat__bubble-wrapper {
@@ -33,9 +26,9 @@
33
26
 
34
27
  .navds-chat__avatar {
35
28
  align-items: center;
36
- background: var(--navds-chat-color-avatar-background);
37
- color: var(--navds-chat-color-avatar);
38
- border-radius: var(--navds-border-radius-full);
29
+ background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
30
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
31
+ border-radius: var(--a-border-radius-full);
39
32
  display: flex;
40
33
  flex-shrink: 0;
41
34
  justify-content: center;
@@ -52,31 +45,31 @@
52
45
 
53
46
  .navds-chat__bubble {
54
47
  padding: 1rem;
55
- box-shadow: var(--navds-shadow-small);
48
+ box-shadow: var(--a-shadow-small);
56
49
  width: fit-content;
57
50
  max-width: 37.5rem;
58
- background-color: var(--navds-chat-color-background);
59
- border-radius: var(--navds-border-radius-xlarge);
51
+ background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
52
+ border-radius: var(--a-border-radius-xlarge);
60
53
  border-bottom-left-radius: 2px;
61
54
  display: flex;
62
55
  flex-direction: column;
63
- gap: var(--navds-spacing-2);
56
+ gap: var(--a-spacing-2);
64
57
  }
65
58
 
66
59
  .navds-chat__bubble:focus {
67
- box-shadow: var(--navds-shadow-focus);
60
+ box-shadow: var(--a-shadow-focus);
68
61
  outline: none;
69
62
  }
70
63
 
71
64
  .navds-chat--right .navds-chat__bubble {
72
- border-radius: var(--navds-border-radius-xlarge);
65
+ border-radius: var(--a-border-radius-xlarge);
73
66
  border-bottom-right-radius: 2px;
74
67
  }
75
68
 
76
69
  .navds-chat__top-text {
77
- color: var(--navds-semantic-color-text);
70
+ color: var(--ac-chat-top-text, var(--a-text-default));
78
71
  display: flex;
79
- gap: var(--navds-spacing-2);
72
+ gap: var(--a-spacing-2);
80
73
  align-items: baseline;
81
74
  }
82
75
 
@@ -85,5 +78,5 @@
85
78
  }
86
79
 
87
80
  .navds-chat__name {
88
- font-weight: var(--navds-font-weight-bold);
81
+ font-weight: var(--a-font-weight-bold);
89
82
  }