@sveltia/ui 0.5.0 → 0.6.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 (31) hide show
  1. package/package/components/alert/alert.svelte +15 -15
  2. package/package/components/button/button.svelte +29 -29
  3. package/package/components/button/select-button-group.svelte +3 -3
  4. package/package/components/calendar/calendar.svelte +8 -8
  5. package/package/components/checkbox/checkbox.svelte +7 -7
  6. package/package/components/dialog/dialog.svelte +5 -5
  7. package/package/components/divider/divider.svelte +1 -1
  8. package/package/components/drawer/drawer.svelte +5 -5
  9. package/package/components/listbox/listbox.svelte +4 -4
  10. package/package/components/listbox/option-group.svelte +2 -2
  11. package/package/components/listbox/option.svelte +4 -4
  12. package/package/components/menu/menu-item.svelte +4 -4
  13. package/package/components/menu/menu.svelte +1 -1
  14. package/package/components/radio/radio.svelte +5 -5
  15. package/package/components/select/combobox.svelte +9 -9
  16. package/package/components/slider/slider.svelte +6 -6
  17. package/package/components/switch/switch.svelte +6 -6
  18. package/package/components/table/table.svelte +1 -1
  19. package/package/components/tabs/tab-list.svelte +3 -3
  20. package/package/components/text-field/markdown-editor.svelte +1 -1
  21. package/package/components/text-field/number-input.svelte +3 -3
  22. package/package/components/text-field/password-input.svelte +3 -3
  23. package/package/components/text-field/search-bar.svelte +2 -2
  24. package/package/components/text-field/text-area.svelte +5 -5
  25. package/package/components/text-field/text-input.svelte +13 -13
  26. package/package/components/toolbar/toolbar.svelte +6 -6
  27. package/package/components/util/app-shell.svelte +168 -163
  28. package/package/components/util/popup.svelte +4 -4
  29. package/package/styles/core.scss +5 -5
  30. package/package/styles/variables.scss +158 -153
  31. package/package.json +6 -6
package/package/components/text-field/search-bar.svelte CHANGED
@@ -71,7 +71,7 @@
71
71
  position: relative;
72
72
  }
73
73
  [role=search] :global(.icon) {
74
- font-size: var(--font-size--xx-large);
74
+ font-size: var(--sui-font-size-xx-large);
75
75
  opacity: 0.5;
76
76
  }
77
77
  [role=search] > :global(.icon) {
@@ -83,7 +83,7 @@
83
83
  position: absolute;
84
84
  inset: 0 0 auto auto;
85
85
  z-index: 2;
86
- height: var(--button--medium--height);
86
+ height: var(--sui-button-medium-height);
87
87
  }
88
88
  [role=search] :global(.label) {
89
89
  inset: 0 36px;
package/package/components/text-field/text-area.svelte CHANGED
@@ -103,9 +103,9 @@ textarea {
103
103
  display: block;
104
104
  margin: 0;
105
105
  border-width: 1px;
106
- border-color: var(--control-border-color);
107
- border-radius: var(--input--medium--border-radius);
108
- background-color: var(--control-background-color);
106
+ border-color: var(--sui-control-border-color);
107
+ border-radius: var(--sui-input-medium-border-radius);
108
+ background-color: var(--sui-control-background-color);
109
109
  padding: 8px;
110
110
  width: 100%;
111
111
  min-height: 8em;
@@ -120,10 +120,10 @@ textarea.resizing {
120
120
  transition-duration: 0ms;
121
121
  }
122
122
  textarea:focus {
123
- border-color: var(--primary-accent-color);
123
+ border-color: var(--sui-primary-accent-color);
124
124
  }
125
125
  textarea:disabled {
126
- background-color: var(--disabled-background-color);
126
+ background-color: var(--sui-disabled-background-color);
127
127
  opacity: 0.4;
128
128
  cursor: default;
129
129
  }</style>
package/package/components/text-field/text-input.svelte CHANGED
@@ -86,12 +86,12 @@ input {
86
86
  display: inline-block;
87
87
  flex: auto;
88
88
  border-width: 1px;
89
- border-color: var(--control-border-color);
90
- border-radius: var(--input--medium--border-radius);
89
+ border-color: var(--sui-control-border-color);
90
+ border-radius: var(--sui-input-medium-border-radius);
91
91
  padding: 0 8px;
92
92
  min-width: 0;
93
- height: var(--input--medium--height);
94
- background-color: var(--control-background-color);
93
+ height: var(--sui-input-medium-height);
94
+ background-color: var(--sui-control-background-color);
95
95
  color: inherit;
96
96
  font-family: inherit;
97
97
  font-size: inherit;
@@ -99,14 +99,14 @@ input {
99
99
  transition: all 200ms;
100
100
  }
101
101
  input:focus {
102
- border-color: var(--primary-accent-color);
102
+ border-color: var(--sui-primary-accent-color);
103
103
  }
104
104
  input:read-only {
105
- color: var(--tertiary-foreground-color);
106
- border-color: var(--control-border-color) !important;
105
+ color: var(--sui-tertiary-foreground-color);
106
+ border-color: var(--sui-control-border-color) !important;
107
107
  }
108
108
  input:disabled {
109
- background-color: var(--disabled-background-color);
109
+ background-color: var(--sui-disabled-background-color);
110
110
  opacity: 0.4;
111
111
  cursor: default;
112
112
  }
@@ -117,15 +117,15 @@ input ~ :global(button) {
117
117
  flex: none;
118
118
  margin-left: -1px;
119
119
  border-width: 1px;
120
- border-color: var(--control-border-color);
121
- height: var(--input--medium--height);
120
+ border-color: var(--sui-control-border-color);
121
+ height: var(--sui-input-medium-height);
122
122
  aspect-ratio: 1/1;
123
123
  }
124
124
  input ~ :global(button):last-child {
125
125
  border-radius: 0 4px 4px 0;
126
126
  }
127
127
  input ~ :global(button) :global(.icon) {
128
- font-size: var(--font-size--xx-large);
128
+ font-size: var(--sui-font-size-xx-large);
129
129
  }
130
130
 
131
131
  .label {
@@ -133,9 +133,9 @@ input ~ :global(button) :global(.icon) {
133
133
  inset: 0 8px;
134
134
  z-index: 2;
135
135
  display: flex;
136
- justify-content: var(--input-label-align, flex-start);
136
+ justify-content: var(--sui-input-label-align, flex-start);
137
137
  align-items: center;
138
- color: var(--primary-foreground-color);
138
+ color: var(--sui-primary-foreground-color);
139
139
  opacity: 0.5;
140
140
  pointer-events: none;
141
141
  }
package/package/components/toolbar/toolbar.svelte CHANGED
@@ -39,10 +39,10 @@
39
39
  }
40
40
  [role=toolbar].primary {
41
41
  --toolbar-size: 48px;
42
- background-color: var(--secondary-background-color);
42
+ background-color: var(--sui-secondary-background-color);
43
43
  }
44
44
  [role=toolbar].secondary {
45
- background-color: var(--tertiary-background-color);
45
+ background-color: var(--sui-tertiary-background-color);
46
46
  }
47
47
  [role=toolbar][aria-orientation=horizontal] {
48
48
  height: var(--toolbar-size);
@@ -53,11 +53,11 @@
53
53
  }
54
54
  [role=toolbar]:not(:last-child) {
55
55
  border-width: 0 0 1px;
56
- border-color: var(--primary-border-color);
56
+ border-color: var(--sui-primary-border-color);
57
57
  }
58
58
  [role=toolbar] :global(button[role="button"][aria-pressed="true"]),
59
59
  [role=toolbar] :global(button[role="button"][aria-checked="true"]) {
60
- background-color: var(--highlight-background-color);
60
+ background-color: var(--sui-highlight-background-color);
61
61
  }
62
62
  [role=toolbar] :global(h2) {
63
63
  display: flex;
@@ -65,10 +65,10 @@
65
65
  gap: 8px;
66
66
  margin: 0;
67
67
  padding: 0 8px;
68
- font-size: var(--font-size--large);
68
+ font-size: var(--sui-font-size-large);
69
69
  }
70
70
  [role=toolbar] :global(h2) :global(span) {
71
- font-size: var(--font-size--small);
71
+ font-size: var(--sui-font-size-small);
72
72
  font-weight: normal;
73
73
  opacity: 0.8;
74
74
  }</style>
package/package/components/util/app-shell.svelte CHANGED
@@ -52,175 +52,180 @@
52
52
 
53
53
  <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
54
54
  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
55
- :global(:root[data-theme=light]) {
56
- --foreground-color-1-hsl: var(--base-hue) 5% 0%;
57
- --foreground-color-2-hsl: var(--base-hue) 5% 20%;
58
- --foreground-color-3-hsl: var(--base-hue) 5% 40%;
59
- --foreground-color-4-hsl: var(--base-hue) 5% 60%;
60
- --background-color-1-hsl: var(--base-hue) 5% 100%;
61
- --background-color-2-hsl: var(--base-hue) 5% 98%;
62
- --background-color-3-hsl: var(--base-hue) 5% 94%;
63
- --background-color-4-hsl: var(--base-hue) 5% 90%;
64
- --background-color-5-hsl: var(--base-hue) 5% 86%;
65
- --border-color-1-hsl: var(--base-hue) 5% 78%;
66
- --border-color-2-hsl: var(--base-hue) 5% 82%;
67
- --shadow-color: var(--base-hue) 10% 0%;
68
- --primary-accent-color: hsl(var(--base-hue) 80% 45%);
69
- --primary-accent-color-lighter: hsl(var(--base-hue) 80% 40%);
70
- --primary-accent-color-darker: hsl(var(--base-hue) 80% 50%);
71
- --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
72
- --error-color-hue: 0;
73
- --warning-color-hue: 40;
74
- --info-color-hue: 210;
75
- --success-color-hue: 100;
76
- --alert-foreground-color-saturation: 88%;
77
- --alert-foreground-color-lightness: 28%;
78
- --alert-background-color-saturation: 68%;
79
- --alert-background-color-lightness: 88%;
80
- --alert-border-color-saturation: 48%;
81
- --alert-border-color-lightness: 68%;
55
+ :global(:root[data-theme=light]),
56
+ :global(:host[data-theme=light]) {
57
+ --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 0%;
58
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 20%;
59
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 40%;
60
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 60%;
61
+ --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
62
+ --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
63
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 94%;
64
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 90%;
65
+ --sui-background-color-5-hsl: var(--sui-base-hue) 5% 86%;
66
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 78%;
67
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 82%;
68
+ --sui-shadow-color: var(--sui-base-hue) 10% 0%;
69
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 45%);
70
+ --sui-primary-accent-color-lighter: hsl(var(--sui-base-hue) 80% 40%);
71
+ --sui-primary-accent-color-darker: hsl(var(--sui-base-hue) 80% 50%);
72
+ --sui-primary-accent-color-foreground: hsl(var(--sui-base-hue) 10% 100%);
73
+ --sui-error-color-hue: 0;
74
+ --sui-warning-color-hue: 40;
75
+ --sui-info-color-hue: 210;
76
+ --sui-success-color-hue: 100;
77
+ --sui-alert-foreground-color-saturation: 88%;
78
+ --sui-alert-foreground-color-lightness: 28%;
79
+ --sui-alert-background-color-saturation: 68%;
80
+ --sui-alert-background-color-lightness: 88%;
81
+ --sui-alert-border-color-saturation: 48%;
82
+ --sui-alert-border-color-lightness: 68%;
82
83
  }
83
84
 
84
- :global(:root[data-theme=dark]) {
85
- --foreground-color-1-hsl: var(--base-hue) 10% 100%;
86
- --foreground-color-2-hsl: var(--base-hue) 10% 80%;
87
- --foreground-color-3-hsl: var(--base-hue) 10% 60%;
88
- --foreground-color-4-hsl: var(--base-hue) 10% 40%;
89
- --background-color-1-hsl: var(--base-hue) 10% 10%;
90
- --background-color-2-hsl: var(--base-hue) 10% 12%;
91
- --background-color-3-hsl: var(--base-hue) 10% 16%;
92
- --background-color-4-hsl: var(--base-hue) 10% 20%;
93
- --background-color-5-hsl: var(--base-hue) 10% 24%;
94
- --border-color-1-hsl: var(--base-hue) 10% 32%;
95
- --border-color-2-hsl: var(--base-hue) 10% 28%;
96
- --shadow-color: var(--base-hue) 10% 0%;
97
- --primary-accent-color: hsl(var(--base-hue) 100% 45%);
98
- --primary-accent-color-lighter: hsl(var(--base-hue) 100% 55%);
99
- --primary-accent-color-darker: hsl(var(--base-hue) 100% 35%);
100
- --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
101
- --error-color-hue: 0;
102
- --warning-color-hue: 40;
103
- --info-color-hue: 210;
104
- --success-color-hue: 100;
105
- --alert-foreground-color-saturation: 48%;
106
- --alert-foreground-color-lightness: 68%;
107
- --alert-background-color-saturation: 88%;
108
- --alert-background-color-lightness: 8%;
109
- --alert-border-color-saturation: 38%;
110
- --alert-border-color-lightness: 18%;
85
+ :global(:root[data-theme=dark]),
86
+ :global(:host[data-theme=dark]) {
87
+ --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 100%;
88
+ --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 80%;
89
+ --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 60%;
90
+ --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 40%;
91
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
92
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
93
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 16%;
94
+ --sui-background-color-4-hsl: var(--sui-base-hue) 10% 20%;
95
+ --sui-background-color-5-hsl: var(--sui-base-hue) 10% 24%;
96
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 32%;
97
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 28%;
98
+ --sui-shadow-color: var(--sui-base-hue) 10% 0%;
99
+ --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 45%);
100
+ --sui-primary-accent-color-lighter: hsl(var(--sui-base-hue) 100% 55%);
101
+ --sui-primary-accent-color-darker: hsl(var(--sui-base-hue) 100% 35%);
102
+ --sui-primary-accent-color-foreground: hsl(var(--sui-base-hue) 10% 100%);
103
+ --sui-error-color-hue: 0;
104
+ --sui-warning-color-hue: 40;
105
+ --sui-info-color-hue: 210;
106
+ --sui-success-color-hue: 100;
107
+ --sui-alert-foreground-color-saturation: 48%;
108
+ --sui-alert-foreground-color-lightness: 68%;
109
+ --sui-alert-background-color-saturation: 88%;
110
+ --sui-alert-background-color-lightness: 8%;
111
+ --sui-alert-border-color-saturation: 38%;
112
+ --sui-alert-border-color-lightness: 18%;
111
113
  }
112
114
 
113
- :global(:root) {
114
- --base-hue: 210;
115
- --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
116
- --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
117
- --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
118
- --tertiary-foreground-color: hsl(var(--foreground-color-3-hsl));
119
- --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
120
- --error-foreground-color: hsl(
121
- var(--error-color-hue) var(--alert-foreground-color-saturation)
122
- var(--alert-foreground-color-lightness)
115
+ :global(:root),
116
+ :global(:host) {
117
+ --sui-base-hue: 210;
118
+ --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
119
+ --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
120
+ --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
121
+ --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
122
+ --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
123
+ --sui-error-foreground-color: hsl(
124
+ var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
125
+ var(--sui-alert-foreground-color-lightness)
123
126
  );
124
- --warning-foreground-color: hsl(
125
- var(--warning-color-hue) var(--alert-foreground-color-saturation)
126
- var(--alert-foreground-color-lightness)
127
+ --sui-warning-foreground-color: hsl(
128
+ var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
129
+ var(--sui-alert-foreground-color-lightness)
127
130
  );
128
- --info-foreground-color: hsl(
129
- var(--info-color-hue) var(--alert-foreground-color-saturation)
130
- var(--alert-foreground-color-lightness)
131
+ --sui-info-foreground-color: hsl(
132
+ var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
133
+ var(--sui-alert-foreground-color-lightness)
131
134
  );
132
- --success-foreground-color: hsl(
133
- var(--success-color-hue) var(--alert-foreground-color-saturation)
134
- var(--alert-foreground-color-lightness)
135
+ --sui-success-foreground-color: hsl(
136
+ var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
137
+ var(--sui-alert-foreground-color-lightness)
135
138
  );
136
- --highlight-background-color: hsl(var(--background-color-5-hsl));
137
- --content-background-color: hsl(var(--background-color-1-hsl));
138
- --primary-background-color: hsl(var(--background-color-2-hsl));
139
- --primary-background-color-translucent: hsl(var(--background-color-2-hsl) / 80%);
140
- --secondary-background-color: hsl(var(--background-color-3-hsl));
141
- --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 80%);
142
- --tertiary-background-color: hsl(var(--background-color-4-hsl));
143
- --tertiary-background-color-translucent: hsl(var(--background-color-4-hsl) / 80%);
144
- --control-background-color: hsl(var(--background-color-1-hsl));
145
- --disabled-background-color: hsl(var(--background-color-4-hsl));
146
- --error-background-color: hsl(
147
- var(--error-color-hue) var(--alert-background-color-saturation)
148
- var(--alert-background-color-lightness)
139
+ --sui-highlight-background-color: hsl(var(--sui-background-color-5-hsl));
140
+ --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
141
+ --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
142
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
143
+ --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
144
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
145
+ --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
146
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
147
+ --sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
148
+ --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
149
+ --sui-error-background-color: hsl(
150
+ var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
151
+ var(--sui-alert-background-color-lightness)
149
152
  );
150
- --warning-background-color: hsl(
151
- var(--warning-color-hue) var(--alert-background-color-saturation)
152
- var(--alert-background-color-lightness)
153
+ --sui-warning-background-color: hsl(
154
+ var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
155
+ var(--sui-alert-background-color-lightness)
153
156
  );
154
- --info-background-color: hsl(
155
- var(--info-color-hue) var(--alert-background-color-saturation)
156
- var(--alert-background-color-lightness)
157
+ --sui-info-background-color: hsl(
158
+ var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
159
+ var(--sui-alert-background-color-lightness)
157
160
  );
158
- --success-background-color: hsl(
159
- var(--success-color-hue) var(--alert-background-color-saturation)
160
- var(--alert-background-color-lightness)
161
+ --sui-success-background-color: hsl(
162
+ var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
163
+ var(--sui-alert-background-color-lightness)
161
164
  );
162
- --primary-border-color: hsl(var(--border-color-1-hsl));
163
- --secondary-border-color: hsl(var(--border-color-2-hsl));
164
- --control-border-color: hsl(var(--border-color-2-hsl));
165
- --checkbox-border-color: hsl(var(--foreground-color-3-hsl));
166
- --error-border-color: hsl(
167
- var(--error-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
165
+ --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
166
+ --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
167
+ --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
168
+ --sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
169
+ --sui-error-border-color: hsl(
170
+ var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
171
+ var(--sui-alert-border-color-lightness)
168
172
  );
169
- --warning-border-color: hsl(
170
- var(--warning-color-hue) var(--alert-border-color-saturation)
171
- var(--alert-border-color-lightness)
173
+ --sui-warning-border-color: hsl(
174
+ var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
175
+ var(--sui-alert-border-color-lightness)
172
176
  );
173
- --info-border-color: hsl(
174
- var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
177
+ --sui-info-border-color: hsl(
178
+ var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
179
+ var(--sui-alert-border-color-lightness)
175
180
  );
176
- --success-border-color: hsl(
177
- var(--success-color-hue) var(--alert-border-color-saturation)
178
- var(--alert-border-color-lightness)
181
+ --sui-success-border-color: hsl(
182
+ var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
183
+ var(--sui-alert-border-color-lightness)
179
184
  );
180
- --popup-shadow-color: hsl(var(--shadow-color) / 40%);
181
- --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
182
- --font-family--default: "Merriweather Sans", sans-serif;
183
- --font-size--xxx-large: 24px;
184
- --font-size--xx-large: 20px;
185
- --font-size--x-large: 18px;
186
- --font-size--large: 16px;
187
- --font-size--default: 14px;
188
- --font-size--small: 12px;
189
- --font-size--x-small: 10px;
190
- --font-weight--normal: 300;
191
- --font-weight--bold: 600;
192
- --font-family--monospace: "Noto Sans Mono", monospace;
193
- --font-size--monospace: 13px;
194
- --control--small--border-width: 1px;
195
- --control--small--border-radius: 2px;
196
- --control--small--height: 24px;
197
- --control--medium--border-width: 1px;
198
- --control--medium--border-radius: 4px;
199
- --control--medium--height: 32px;
200
- --control--large--border-width: 1px;
201
- --control--large--border-radius: 8px;
202
- --control--large--height: 40px;
203
- --button--small--border-radius: var(--control--small--border-radius);
204
- --button--small--height: var(--control--small--height);
205
- --button--medium--border-radius: var(--control--medium--border-radius);
206
- --button--medium--height: var(--control--medium--height);
207
- --button--large--border-radius: var(--control--large--border-radius);
208
- --button--large--height: var(--control--large--height);
209
- --option--small--border-radius: var(--control--small--border-radius);
210
- --option--small--height: var(--control--small--height);
211
- --option--medium--border-radius: var(--control--medium--border-radius);
212
- --option--medium--height: var(--control--medium--height);
213
- --option--large--border-radius: var(--control--large--border-radius);
214
- --option--large--height: var(--control--large--height);
215
- --input--small--border-radius: var(--control--small--border-radius);
216
- --input--small--height: var(--control--small--height);
217
- --input--medium--border-radius: var(--control--medium--border-radius);
218
- --input--medium--height: var(--control--medium--height);
219
- --input--large--border-radius: var(--control--large--border-radius);
220
- --input--large--height: var(--control--large--height);
221
- --tab--small--height: var(--control--small--height);
222
- --tab--medium--height: var(--control--medium--height);
223
- --tab--large--height: var(--control--large--height);
185
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
186
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
187
+ --sui-font-family-default: "Merriweather Sans", sans-serif;
188
+ --sui-font-size-xxx-large: 24px;
189
+ --sui-font-size-xx-large: 20px;
190
+ --sui-font-size-x-large: 18px;
191
+ --sui-font-size-large: 16px;
192
+ --sui-font-size-default: 14px;
193
+ --sui-font-size-small: 12px;
194
+ --sui-font-size-x-small: 10px;
195
+ --sui-font-weight-normal: 300;
196
+ --sui-font-weight-bold: 600;
197
+ --sui-font-family-monospace: "Noto Sans Mono", monospace;
198
+ --sui-font-size-monospace: 13px;
199
+ --sui-control-small-border-width: 1px;
200
+ --sui-control-small-border-radius: 2px;
201
+ --sui-control-small-height: 24px;
202
+ --sui-control-medium-border-width: 1px;
203
+ --sui-control-medium-border-radius: 4px;
204
+ --sui-control-medium-height: 32px;
205
+ --sui-control-large-border-width: 1px;
206
+ --sui-control-large-border-radius: 8px;
207
+ --sui-control-large-height: 40px;
208
+ --sui-button-small-border-radius: var(--sui-control-small-border-radius);
209
+ --sui-button-small-height: var(--sui-control-small-height);
210
+ --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
211
+ --sui-button-medium-height: var(--sui-control-medium-height);
212
+ --sui-button-large-border-radius: var(--sui-control-large-border-radius);
213
+ --sui-button-large-height: var(--sui-control-large-height);
214
+ --sui-option-small-border-radius: var(--sui-control-small-border-radius);
215
+ --sui-option-small-height: var(--sui-control-small-height);
216
+ --sui-option-medium-border-radius: var(--sui-control-medium-border-radius);
217
+ --sui-option-medium-height: var(--sui-control-medium-height);
218
+ --sui-option-large-border-radius: var(--sui-control-large-border-radius);
219
+ --sui-option-large-height: var(--sui-control-large-height);
220
+ --sui-input-small-border-radius: var(--sui-control-small-border-radius);
221
+ --sui-input-small-height: var(--sui-control-small-height);
222
+ --sui-input-medium-border-radius: var(--sui-control-medium-border-radius);
223
+ --sui-input-medium-height: var(--sui-control-medium-height);
224
+ --sui-input-large-border-radius: var(--sui-control-large-border-radius);
225
+ --sui-input-large-height: var(--sui-control-large-height);
226
+ --sui-tab-small-height: var(--sui-control-small-height);
227
+ --sui-tab-medium-height: var(--sui-control-medium-height);
228
+ --sui-tab-large-height: var(--sui-control-large-height);
224
229
  }
225
230
 
226
231
  :global(.material-symbols-outlined) {
@@ -244,7 +249,7 @@
244
249
  }
245
250
 
246
251
  :global(:focus-visible) {
247
- outline-color: var(--primary-accent-color-lighter);
252
+ outline-color: var(--sui-primary-accent-color-lighter);
248
253
  }
249
254
 
250
255
  :global(h1),
@@ -254,15 +259,15 @@
254
259
  :global(h5),
255
260
  :global(h6) {
256
261
  margin: 0;
257
- font-weight: var(--font-weight--bold);
262
+ font-weight: var(--sui-font-weight-bold);
258
263
  }
259
264
 
260
265
  :global(strong) {
261
- font-weight: var(--font-weight--bold);
266
+ font-weight: var(--sui-font-weight-bold);
262
267
  }
263
268
 
264
269
  :global(a) {
265
- color: var(--primary-accent-color-lighter);
270
+ color: var(--sui-primary-accent-color-lighter);
266
271
  text-decoration: none;
267
272
  }
268
273
 
@@ -289,7 +294,7 @@
289
294
 
290
295
  :global(code),
291
296
  :global(pre) {
292
- font-family: var(--font-family--monospace);
297
+ font-family: var(--sui-font-family-monospace);
293
298
  }
294
299
 
295
300
  :global(pre) {
@@ -326,11 +331,11 @@
326
331
  overflow: hidden;
327
332
  width: 100%;
328
333
  height: 100%;
329
- color: var(--primary-foreground-color);
330
- background-color: var(--primary-background-color);
331
- font-family: var(--font-family--default);
332
- font-size: var(--font-size--default);
333
- font-weight: var(--font-weight--normal);
334
+ color: var(--sui-primary-foreground-color);
335
+ background-color: var(--sui-primary-background-color);
336
+ font-family: var(--sui-font-family-default);
337
+ font-size: var(--sui-font-size-default);
338
+ font-weight: var(--sui-font-weight-normal);
334
339
  -webkit-user-select: none;
335
340
  user-select: none;
336
341
  touch-action: none;
package/package/components/util/popup.svelte CHANGED
@@ -153,17 +153,17 @@
153
153
  position: fixed;
154
154
  overflow-y: auto;
155
155
  outline-width: 0 !important;
156
- color: var(--primary-foreground-color);
157
- background-color: var(--secondary-background-color-translucent);
156
+ color: var(--sui-primary-foreground-color);
157
+ background-color: var(--sui-secondary-background-color-translucent);
158
158
  backdrop-filter: blur(16px);
159
- box-shadow: 0 8px 16px var(--popup-shadow-color);
159
+ box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
160
160
  will-change: opacity, transform;
161
161
  transition-property: opacity, transform;
162
162
  }
163
163
  .content.listbox, .content.menu {
164
164
  border-width: 1px;
165
165
  border-style: solid;
166
- border-color: var(--secondary-border-color);
166
+ border-color: var(--sui-secondary-border-color);
167
167
  border-radius: 4px;
168
168
  }
169
169
  .content.listbox :global(.sui.listbox),
package/package/styles/core.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  }
28
28
 
29
29
  :focus-visible {
30
- outline-color: var(--primary-accent-color-lighter);
30
+ outline-color: var(--sui-primary-accent-color-lighter);
31
31
  }
32
32
 
33
33
  h1,
@@ -37,15 +37,15 @@ h4,
37
37
  h5,
38
38
  h6 {
39
39
  margin: 0;
40
- font-weight: var(--font-weight--bold);
40
+ font-weight: var(--sui-font-weight-bold);
41
41
  }
42
42
 
43
43
  strong {
44
- font-weight: var(--font-weight--bold);
44
+ font-weight: var(--sui-font-weight-bold);
45
45
  }
46
46
 
47
47
  a {
48
- color: var(--primary-accent-color-lighter);
48
+ color: var(--sui-primary-accent-color-lighter);
49
49
  text-decoration: none;
50
50
  }
51
51
 
@@ -72,7 +72,7 @@ li {
72
72
 
73
73
  code,
74
74
  pre {
75
- font-family: var(--font-family--monospace);
75
+ font-family: var(--sui-font-family-monospace);
76
76
  }
77
77
 
78
78
  pre {