@seed-design/css 2.4.1 → 2.5.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 (11) hide show
  1. package/all.css +13 -7
  2. package/all.layered.css +13 -7
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/bottom-sheet.css +1 -3
  7. package/recipes/bottom-sheet.layered.css +1 -3
  8. package/recipes/date-picker.css +10 -4
  9. package/recipes/date-picker.layered.css +12 -4
  10. package/vars/component/date-picker.d.ts +5 -0
  11. package/vars/component/date-picker.mjs +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "2.4.1",
3
+ "version": "2.5.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/bottom-sheet.css CHANGED
@@ -35,11 +35,9 @@
35
35
  border-top-left-radius: var(--seed-radius-r6);
36
36
  border-top-right-radius: var(--seed-radius-r6);
37
37
  padding-bottom: var(--seed-safe-area-bottom);
38
- bottom: 0;
39
38
  touch-action: none;
40
39
  will-change: transform;
41
- --drawer-keyboard-transition: bottom var(--seed-duration-d5) cubic-bezier(0.32, 0.72, 0, 1);
42
- transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
40
+ transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
43
41
  }
44
42
  .seed-bottom-sheet__content[data-snap-points='true'] {
45
43
  transform: translate3d(0, var(--initial-transform, 100%), 0);
package/recipes/bottom-sheet.layered.css CHANGED
@@ -35,13 +35,11 @@
35
35
  padding-bottom: var(--seed-safe-area-bottom);
36
36
  touch-action: none;
37
37
  will-change: transform;
38
- --drawer-keyboard-transition: bottom var(--seed-duration-d5) cubic-bezier(.32, .72, 0, 1);
39
- transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
38
+ transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
40
39
  flex-direction: column;
41
40
  flex: 1;
42
41
  display: flex;
43
42
  position: relative;
44
- bottom: 0;
45
43
  }
46
44
 
47
45
  .seed-bottom-sheet__content[data-snap-points="true"] {
package/recipes/date-picker.css CHANGED
@@ -228,25 +228,31 @@
228
228
  color: var(--seed-color-fg-neutral-inverted);
229
229
  }
230
230
  @media (hover: hover) and (pointer: fine) {
231
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
231
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover])::before {
232
232
  background-color: var(--seed-color-bg-transparent-pressed);
233
233
  }
234
234
  }
235
235
  @media not all and (hover: hover) and (pointer: fine) {
236
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
236
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active])::before {
237
237
  background-color: var(--seed-color-bg-transparent-pressed);
238
238
  }
239
239
  }
240
240
  @media (hover: hover) and (pointer: fine) {
241
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected=true], [data-selected]):is(:hover, [data-hover]):not([data-in-range])::before {
241
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected=true], [data-selected]):is(:hover, [data-hover]):not([data-in-range])::before {
242
242
  background-color: var(--seed-color-bg-neutral-inverted);
243
243
  }
244
244
  }
245
245
  @media not all and (hover: hover) and (pointer: fine) {
246
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected=true], [data-selected]):is(:active, [data-active]):not([data-in-range])::before {
246
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected=true], [data-selected]):is(:active, [data-active]):not([data-in-range])::before {
247
247
  background-color: var(--seed-color-bg-neutral-inverted);
248
248
  }
249
249
  }
250
+ .seed-date-picker__dateButton[data-range-start-readonly]::before {
251
+ background-color: var(--seed-color-palette-gray-600);
252
+ }
253
+ .seed-date-picker__dateButton[data-range-start-readonly] {
254
+ cursor: default;
255
+ }
250
256
  .seed-date-picker__dateButton[data-in-range] {
251
257
  color: var(--seed-color-fg-neutral-muted);
252
258
  }
package/recipes/date-picker.layered.css CHANGED
@@ -259,29 +259,37 @@
259
259
  }
260
260
 
261
261
  @media (hover: hover) and (pointer: fine) {
262
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
262
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover]):before {
263
263
  background-color: var(--seed-color-bg-transparent-pressed);
264
264
  }
265
265
  }
266
266
 
267
267
  @media not all and (hover: hover) and (pointer: fine) {
268
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
268
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active]):before {
269
269
  background-color: var(--seed-color-bg-transparent-pressed);
270
270
  }
271
271
  }
272
272
 
273
273
  @media (hover: hover) and (pointer: fine) {
274
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
274
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
275
275
  background-color: var(--seed-color-bg-neutral-inverted);
276
276
  }
277
277
  }
278
278
 
279
279
  @media not all and (hover: hover) and (pointer: fine) {
280
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
280
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
281
281
  background-color: var(--seed-color-bg-neutral-inverted);
282
282
  }
283
283
  }
284
284
 
285
+ .seed-date-picker__dateButton[data-range-start-readonly]:before {
286
+ background-color: var(--seed-color-palette-gray-600);
287
+ }
288
+
289
+ .seed-date-picker__dateButton[data-range-start-readonly] {
290
+ cursor: default;
291
+ }
292
+
285
293
  .seed-date-picker__dateButton[data-in-range] {
286
294
  color: var(--seed-color-fg-neutral-muted);
287
295
  }
package/vars/component/date-picker.d.ts CHANGED
@@ -89,6 +89,11 @@ export declare const vars: {
89
89
  "color": "var(--seed-color-fg-neutral)"
90
90
  }
91
91
  },
92
+ "readOnly": {
93
+ "dateVisual": {
94
+ "color": "var(--seed-color-palette-gray-600)"
95
+ }
96
+ },
92
97
  "disabled": {
93
98
  "dateContent": {
94
99
  "color": "var(--seed-color-fg-disabled)"
package/vars/component/date-picker.mjs CHANGED
@@ -89,6 +89,11 @@ export const vars = {
89
89
  "color": "var(--seed-color-fg-neutral)"
90
90
  }
91
91
  },
92
+ "readOnly": {
93
+ "dateVisual": {
94
+ "color": "var(--seed-color-palette-gray-600)"
95
+ }
96
+ },
92
97
  "disabled": {
93
98
  "dateContent": {
94
99
  "color": "var(--seed-color-fg-disabled)"