@danske/sapphire-css 33.2.0 → 35.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.
Files changed (9) hide show
  1. package/components/dateField/dateField.module.css +43 -44
  2. package/components/dateField/dateField.module.css.d.ts +5 -0
  3. package/components/listbox/listbox.module.css +25 -0
  4. package/components/listbox/listbox.module.css.d.ts +1 -0
  5. package/components/modalLayout/modalLayout.module.css +3 -8
  6. package/components/modalLayout/modalLayout.module.css.d.ts +0 -1
  7. package/components/searchField/searchField.module.css +1 -0
  8. package/components/text/text.module.css +1 -1
  9. package/package.json +4 -4
package/components/dateField/dateField.module.css CHANGED
@@ -5,10 +5,12 @@
5
5
  grid-auto-flow: column;
6
6
  align-items: center;
7
7
  line-height: var(--sapphire-semantic-size-line-height-md);
8
- gap: var(--sapphire-semantic-size-spacing-20);
8
+ gap: var(--sapphire-semantic-size-spacing-30);
9
9
  box-sizing: border-box;
10
10
  width: var(--sapphire-semantic-size-width-control-default);
11
11
 
12
+ --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-lg);
13
+
12
14
  /* The below is meant to address a font rendering quirk in OSX where the text
13
15
  * looks bolder than intended due to subpixel rendering. This quirk generally
14
16
  * occurs for bold fonts on dark backgrounds but depending on the font, it
@@ -28,8 +30,8 @@
28
30
  * "clear" button appears in the last column.
29
31
  */
30
32
  grid-template-columns:
31
- var(--sapphire-semantic-size-icon-lg) auto
32
- var(--sapphire-semantic-size-icon-lg);
33
+ var(--sapphire-dateField-icon-size) 1fr
34
+ var(--sapphire-dateField-icon-size);
33
35
 
34
36
  height: var(--sapphire-semantic-size-height-input-lg);
35
37
  border-radius: var(--sapphire-semantic-size-radius-sm);
@@ -39,31 +41,42 @@
39
41
  background-color: var(--sapphire-semantic-color-background-field-default);
40
42
  }
41
43
 
42
- .sapphire-date-field--md {
44
+ .sapphire-date-field--no-calendar {
43
45
  grid-template-columns:
44
- var(--sapphire-semantic-size-icon-md) auto
45
- var(--sapphire-semantic-size-icon-md);
46
+ auto
47
+ var(--sapphire-dateField-icon-size);
48
+ }
49
+
50
+ .sapphire-date-field--no-clear-button {
51
+ grid-template-columns:
52
+ var(--sapphire-dateField-icon-size)
53
+ auto;
54
+ }
55
+
56
+ .sapphire-date-field--no-clear-button.sapphire-date-field--no-calendar {
57
+ grid-template-columns: 1fr;
58
+ }
59
+
60
+ .sapphire-date-field--md {
61
+ --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-md);
46
62
 
47
63
  height: var(--sapphire-semantic-size-height-input-md);
48
64
  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
65
+ gap: var(--sapphire-semantic-size-spacing-20);
49
66
  }
50
67
 
51
68
  .sapphire-date-field--range {
52
- width: auto;
69
+ width: var(--sapphire-global-size-generic-960);
53
70
  }
54
71
 
55
- .sapphire-date-field.sapphire-date-field--range {
56
- grid-template-columns:
57
- var(--sapphire-semantic-size-icon-lg) min-content
58
- var(--sapphire-semantic-size-icon-lg)
59
- min-content var(--sapphire-semantic-size-icon-lg);
72
+ .sapphire-date-field__input-group {
73
+ display: grid;
74
+ grid-template-columns: min-content var(--sapphire-dateField-icon-size) min-content;
75
+ gap: var(--sapphire-semantic-size-spacing-10);
60
76
  }
61
77
 
62
- .sapphire-date-field--md.sapphire-date-field--range {
63
- grid-template-columns:
64
- var(--sapphire-semantic-size-icon-md) min-content
65
- var(--sapphire-semantic-size-icon-md)
66
- min-content var(--sapphire-semantic-size-icon-md);
78
+ .sapphire-date-field--md .sapphire-date-field__input-group {
79
+ gap: var(--sapphire-semantic-size-spacing-5);
67
80
  }
68
81
 
69
82
  .sapphire-date-field__input {
@@ -73,25 +86,10 @@
73
86
  cursor: text;
74
87
  font-size: var(--sapphire-semantic-size-font-control-default);
75
88
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
76
- min-width: var(--sapphire-global-size-generic-340);
77
- }
78
- .sapphire-date-field__input:first-of-type {
79
- margin-left: var(--sapphire-semantic-size-spacing-10);
80
- }
81
- .sapphire-date-field__input:last-of-type {
82
- margin-right: var(--sapphire-semantic-size-spacing-10);
83
89
  }
84
90
 
85
91
  .sapphire-date-field--md .sapphire-date-field__input {
86
92
  font-size: var(--sapphire-semantic-size-font-control-md);
87
- min-width: var(--sapphire-global-size-generic-300);
88
- }
89
-
90
- .sapphire-date-field--md .sapphire-date-field__input:first-of-type {
91
- margin-left: var(--sapphire-global-size-generic-0);
92
- }
93
- .sapphire-date-field--md .sapphire-date-field__input:last-of-type {
94
- margin-right: var(--sapphire-global-size-generic-0);
95
93
  }
96
94
 
97
95
  /**
@@ -131,6 +129,13 @@
131
129
  color: var(--sapphire-semantic-color-content-default-primary);
132
130
  }
133
131
 
132
+ /**
133
+ * Separator segments
134
+ */
135
+ .sapphire-date-field__segment--separator {
136
+ padding: 0;
137
+ }
138
+
134
139
  /**
135
140
  * Focus
136
141
  *
@@ -187,15 +192,14 @@
187
192
  transition-timing-function: ease-in-out;
188
193
  cursor: pointer;
189
194
 
190
- height: var(--sapphire-semantic-size-icon-lg);
191
- width: var(--sapphire-semantic-size-icon-lg);
195
+ height: var(--sapphire-dateField-icon-size);
196
+ width: var(--sapphire-dateField-icon-size);
192
197
  background-color: transparent;
193
198
  color: var(--sapphire-semantic-color-content-default-secondary);
194
199
  }
195
200
 
196
- .sapphire-date-field--md .sapphire-date-field__button {
197
- height: var(--sapphire-semantic-size-icon-md);
198
- width: var(--sapphire-semantic-size-icon-md);
201
+ .sapphire-date-field__button--clear {
202
+ border-radius: 50%;
199
203
  }
200
204
 
201
205
  .sapphire-date-field__button:disabled,
@@ -207,13 +211,8 @@
207
211
  * Icon (button)
208
212
  */
209
213
  .sapphire-date-field__icon {
210
- height: var(--sapphire-semantic-size-icon-lg);
211
- width: var(--sapphire-semantic-size-icon-lg);
212
- }
213
-
214
- .sapphire-date-field--md .sapphire-date-field__icon {
215
- height: var(--sapphire-semantic-size-icon-md);
216
- width: var(--sapphire-semantic-size-icon-md);
214
+ height: var(--sapphire-dateField-icon-size);
215
+ width: var(--sapphire-dateField-icon-size);
217
216
  }
218
217
 
219
218
  /**
package/components/dateField/dateField.module.css.d.ts CHANGED
@@ -1,14 +1,19 @@
1
1
  declare const styles: {
2
2
  readonly "sapphire-date-field": string;
3
+ readonly "sapphire-date-field--no-calendar": string;
4
+ readonly "sapphire-date-field--no-clear-button": string;
3
5
  readonly "sapphire-date-field--md": string;
4
6
  readonly "sapphire-date-field--range": string;
7
+ readonly "sapphire-date-field__input-group": string;
5
8
  readonly "sapphire-date-field__input": string;
6
9
  readonly "sapphire-date-field__segment": string;
7
10
  readonly "is-disabled": string;
8
11
  readonly "is-focus": string;
9
12
  readonly "sapphire-date-field__segment--filled": string;
13
+ readonly "sapphire-date-field__segment--separator": string;
10
14
  readonly "sapphire-date-field--error": string;
11
15
  readonly "sapphire-date-field__button": string;
16
+ readonly "sapphire-date-field__button--clear": string;
12
17
  readonly "sapphire-date-field__icon": string;
13
18
  readonly "is-active": string;
14
19
  readonly "js-hover": string;
package/components/listbox/listbox.module.css CHANGED
@@ -192,6 +192,31 @@
192
192
  list-style: none;
193
193
  }
194
194
 
195
+ .sapphire-listbox__section-header {
196
+ font-size: var(--sapphire-semantic-size-font-text-md);
197
+ color: var(--sapphire-semantic-color-content-default-secondary);
198
+ padding: var(--sapphire-semantic-size-spacing-30)
199
+ var(--sapphire-semantic-size-spacing-40)
200
+ var(--sapphire-semantic-size-spacing-20)
201
+ var(--sapphire-semantic-size-spacing-40);
202
+ }
203
+
204
+ .sapphire-listbox--md .sapphire-listbox__section-header {
205
+ font-size: var(--sapphire-semantic-size-font-text-sm);
206
+ padding: var(--sapphire-semantic-size-spacing-25)
207
+ var(--sapphire-global-size-generic-35)
208
+ var(--sapphire-global-size-generic-15)
209
+ var(--sapphire-global-size-generic-35);
210
+ }
211
+
212
+ .sapphire-listbox--sm .sapphire-listbox__section-header {
213
+ font-size: var(--sapphire-semantic-size-font-text-sm);
214
+ padding: var(--sapphire-semantic-size-spacing-20)
215
+ var(--sapphire-semantic-size-spacing-30)
216
+ var(--sapphire-semantic-size-spacing-10)
217
+ var(--sapphire-semantic-size-spacing-30);
218
+ }
219
+
195
220
  .sapphire-listbox__separator {
196
221
  height: var(--sapphire-semantic-size-border-sm);
197
222
  width: 100%;
package/components/listbox/listbox.module.css.d.ts CHANGED
@@ -12,6 +12,7 @@ declare const styles: {
12
12
  readonly "sapphire-listbox__secondary-text": string;
13
13
  readonly "is-disabled": string;
14
14
  readonly "sapphire-listbox__section": string;
15
+ readonly "sapphire-listbox__section-header": string;
15
16
  readonly "sapphire-listbox__separator": string;
16
17
  readonly "is-focus": string;
17
18
  readonly "js-focus": string;
package/components/modalLayout/modalLayout.module.css CHANGED
@@ -17,7 +17,7 @@
17
17
  justify-content: space-between;
18
18
  padding: var(--sapphire-semantic-size-spacing-50)
19
19
  var(--sapphire-semantic-size-spacing-container-horizontal-md);
20
- gap: var(--sapphire-semantic-size-spacing-40);
20
+ gap: var(--sapphire-semantic-size-spacing-30);
21
21
  }
22
22
 
23
23
  .sapphire-modal-layout__body {
@@ -54,11 +54,7 @@
54
54
 
55
55
  .sapphire-modal-layout__subheading {
56
56
  color: var(--sapphire-semantic-color-content-default-secondary);
57
- margin-top: var(--sapphire-semantic-size-spacing-10);
58
- }
59
-
60
- .sapphire-modal-layout__close-button-container {
61
- margin-left: var(--sapphire-semantic-size-spacing-50);
57
+ margin-top: var(--sapphire-semantic-size-spacing-20);
62
58
  }
63
59
 
64
60
  .sapphire-modal-layout__header-container + .sapphire-modal-layout__body {
@@ -73,10 +69,9 @@
73
69
  }
74
70
 
75
71
  .sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer))
76
- .sapphire-modal-layout__body {
72
+ .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding) {
77
73
  padding-bottom: var(--sapphire-semantic-size-spacing-50);
78
74
  }
79
-
80
75
  .sapphire-modal-layout__body + .sapphire-modal-layout__footer-container {
81
76
  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
82
77
  border-top: var(--sapphire-semantic-size-border-sm) solid transparent;
package/components/modalLayout/modalLayout.module.css.d.ts CHANGED
@@ -8,7 +8,6 @@ declare const styles: {
8
8
  readonly "sapphire-modal-layout__footer": string;
9
9
  readonly "sapphire-modal-layout__heading-container": string;
10
10
  readonly "sapphire-modal-layout__subheading": string;
11
- readonly "sapphire-modal-layout__close-button-container": string;
12
11
  readonly "sapphire-modal-layout__body--scrolled": string;
13
12
  readonly "sapphire-modal-layout__body--scrollable": string;
14
13
  };
package/components/searchField/searchField.module.css CHANGED
@@ -91,6 +91,7 @@
91
91
  flex-shrink: 0;
92
92
 
93
93
  transition: transform var(--sapphire-semantic-time-fade-quick);
94
+ border-radius: 50%;
94
95
  }
95
96
 
96
97
  .sapphire-search-field__button:not(.js-hover):hover,
package/components/text/text.module.css CHANGED
@@ -131,7 +131,7 @@
131
131
  }
132
132
 
133
133
  .sapphire-text--body-1 {
134
- font-size: var(--sapphire-global-size-font-106);
134
+ font-size: var(--sapphire-global-size-font-100);
135
135
  }
136
136
 
137
137
  .sapphire-text--body-2 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@danske/sapphire-css",
3
- "version": "33.2.0",
3
+ "version": "35.0.0",
4
4
  "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "sideEffects": false,
@@ -46,7 +46,7 @@
46
46
  "@babel/preset-react": "^7.18.6",
47
47
  "@babel/preset-typescript": "^7.18.6",
48
48
  "@danske/sapphire-icons": "^2.0.0",
49
- "@danske/sapphire-react": "^3.39.2",
49
+ "@danske/sapphire-react": "^4.3.0",
50
50
  "@storybook/addon-essentials": "^6.5.13",
51
51
  "@storybook/addon-links": "^6.5.13",
52
52
  "@storybook/addons": "^6.5.13",
@@ -66,7 +66,7 @@
66
66
  "typescript": "~4.6.4"
67
67
  },
68
68
  "dependencies": {
69
- "@danske/sapphire-design-tokens": "^41.0.0"
69
+ "@danske/sapphire-design-tokens": "^41.2.0"
70
70
  },
71
- "gitHead": "0c0a3ac6422680aaad11c528af3f66d8911c4274"
71
+ "gitHead": "48ef1e292c3525b32559a8450dbd22b1df5e55db"
72
72
  }