@seed-design/css 1.1.3 → 1.1.5

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 (8) hide show
  1. package/all.css +24 -23
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/app-bar.css +6 -1
  5. package/recipes/app-screen.css +0 -16
  6. package/recipes/input-button.css +14 -4
  7. package/vars/component/input-button.d.ts +11 -0
  8. package/vars/component/input-button.mjs +11 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "1.1.3",
3
+ "version": "1.1.5",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/app-bar.css CHANGED
@@ -249,8 +249,13 @@
249
249
  .seed-app-bar__icon--tone_layer {
250
250
  color: var(--seed-icon-color, var(--seed-color-fg-neutral));
251
251
  }
252
+ .seed-app-bar__root--tone_transparent {
253
+ --transparent-gradient-dim-height: 120px;
254
+ --transparent-gradient-dim-background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.00) 100%);
255
+ }
252
256
  .seed-app-bar__root--tone_transparent:before {
253
- background-color: #00000000;
257
+ height: var(--transparent-gradient-dim-height);
258
+ background: var(--transparent-gradient-dim-background);
254
259
  }
255
260
  .seed-app-bar__icon--tone_transparent {
256
261
  color: var(--seed-icon-color, var(--seed-color-palette-static-white));
package/recipes/app-screen.css CHANGED
@@ -265,20 +265,4 @@
265
265
  }
266
266
  .seed-app-screen__layer--layerOffsetBottom_safeArea {
267
267
  padding-bottom: var(--seed-safe-area-bottom);
268
- }
269
- .seed-app-screen__layer--tone_transparent {
270
- --transparent-gradient-dim-height: 120px;
271
- --transparent-gradient-dim-offset: -54px;
272
- --transparent-gradient-dim-background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.00) 100%);
273
- }
274
- .seed-app-screen__layer--tone_transparent:after {
275
- content: '';
276
- display: block;
277
- position: absolute;
278
- top: 0;
279
- left: 0;
280
- right: 0;
281
- height: var(--transparent-gradient-dim-height);
282
- transform: translateY(var(--transparent-gradient-dim-offset));
283
- background: var(--transparent-gradient-dim-background);
284
268
  }
package/recipes/input-button.css CHANGED
@@ -24,13 +24,17 @@
24
24
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
25
25
  transition: box-shadow var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d3) var(--seed-timing-function-easing);
26
26
  }
27
- .seed-input-button__button:is(:disabled, [disabled], [data-disabled]) {
27
+ .seed-input-button__button[data-disabled] {
28
28
  cursor: not-allowed;
29
29
  background-color: var(--seed-color-bg-disabled);
30
30
  }
31
- .seed-input-button__button:is(:active, [data-active]) {
31
+ .seed-input-button__button:not([data-disabled]):not(:is([data-readonly])):is(:active, [data-active]) {
32
32
  background-color: var(--seed-color-bg-layer-default-pressed);
33
33
  }
34
+ .seed-input-button__button:is([data-readonly]):not([data-disabled]) {
35
+ cursor: default;
36
+ background-color: var(--seed-color-bg-disabled);
37
+ }
34
38
  .seed-input-button__button:is(:focus, [data-focus]) {
35
39
  outline: none;
36
40
  }
@@ -48,9 +52,12 @@
48
52
  flex-grow: 1;
49
53
  pointer-events: none;
50
54
  }
51
- .seed-input-button__value:is(:disabled, [disabled], [data-disabled]) {
55
+ .seed-input-button__value[data-disabled] {
52
56
  color: var(--seed-color-fg-disabled);
53
57
  }
58
+ .seed-input-button__value:is([data-readonly]):not([data-disabled]) {
59
+ color: var(--seed-color-fg-neutral);
60
+ }
54
61
  .seed-input-button__placeholder {
55
62
  font-size: var(--seed-font-size-t5);
56
63
  line-height: var(--seed-line-height-t5);
@@ -62,9 +69,12 @@
62
69
  flex-grow: 1;
63
70
  pointer-events: none;
64
71
  }
65
- .seed-input-button__placeholder:is(:disabled, [disabled], [data-disabled]) {
72
+ .seed-input-button__placeholder[data-disabled] {
66
73
  color: var(--seed-color-fg-disabled);
67
74
  }
75
+ .seed-input-button__placeholder:is([data-readonly]):not([data-disabled]) {
76
+ color: var(--seed-color-fg-placeholder);
77
+ }
68
78
  .seed-input-button__prefixText {
69
79
  font-size: var(--seed-font-size-t5);
70
80
  line-height: var(--seed-line-height-t5);
package/vars/component/input-button.d.ts CHANGED
@@ -73,6 +73,17 @@ export declare const vars: {
73
73
  "placeholder": {
74
74
  "color": "var(--seed-color-fg-disabled)"
75
75
  }
76
+ },
77
+ "readonly": {
78
+ "root": {
79
+ "color": "var(--seed-color-bg-disabled)"
80
+ },
81
+ "value": {
82
+ "color": "var(--seed-color-fg-neutral)"
83
+ },
84
+ "placeholder": {
85
+ "color": "var(--seed-color-fg-placeholder)"
86
+ }
76
87
  }
77
88
  }
78
89
  }
package/vars/component/input-button.mjs CHANGED
@@ -73,6 +73,17 @@ export const vars = {
73
73
  "placeholder": {
74
74
  "color": "var(--seed-color-fg-disabled)"
75
75
  }
76
+ },
77
+ "readonly": {
78
+ "root": {
79
+ "color": "var(--seed-color-bg-disabled)"
80
+ },
81
+ "value": {
82
+ "color": "var(--seed-color-fg-neutral)"
83
+ },
84
+ "placeholder": {
85
+ "color": "var(--seed-color-fg-placeholder)"
86
+ }
76
87
  }
77
88
  }
78
89
  }