@sveltia/ui 0.5.0 → 0.6.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 (31) hide show
  1. package/package/components/alert/alert.svelte +15 -15
  2. package/package/components/button/button.svelte +34 -31
  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 +11 -8
  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 +9 -5
  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 +9 -6
  15. package/package/components/select/combobox.svelte +14 -9
  16. package/package/components/slider/slider.svelte +6 -6
  17. package/package/components/switch/switch.svelte +10 -8
  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 +9 -9
  25. package/package/components/text-field/text-input.svelte +17 -17
  26. package/package/components/toolbar/toolbar.svelte +6 -6
  27. package/package/components/util/app-shell.svelte +185 -177
  28. package/package/components/util/popup.svelte +4 -4
  29. package/package/styles/core.scss +14 -19
  30. package/package/styles/variables.scss +172 -154
  31. package/package.json +25 -25
package/package/components/tabs/tab-list.svelte CHANGED
@@ -42,7 +42,7 @@
42
42
  <style>.tab-list {
43
43
  display: flex;
44
44
  align-items: center;
45
- border-color: var(--control-border-color);
45
+ border-color: var(--sui-control-border-color);
46
46
  }
47
47
  .tab-list[aria-orientation=horizontal] {
48
48
  gap: 16px;
@@ -70,8 +70,8 @@
70
70
  border-color: transparent;
71
71
  padding: 0;
72
72
  border-radius: 0;
73
- height: var(--tab--medium--height);
73
+ height: var(--sui-tab-medium-height);
74
74
  }
75
75
  .tab-list :global(button[aria-selected="true"]) {
76
- border-color: var(--primary-accent-color-lighter);
76
+ border-color: var(--sui-primary-accent-color-lighter);
77
77
  }</style>
package/package/components/text-field/markdown-editor.svelte CHANGED
@@ -69,7 +69,7 @@ div :global([role="toolbar"]) {
69
69
  gap: 8px;
70
70
  border-radius: 4px 4px 0 0;
71
71
  padding: 8px;
72
- background-color: var(--tertiary-background-color);
72
+ background-color: var(--sui-tertiary-background-color);
73
73
  }
74
74
  div :global([role="toolbar"]) :global(button) {
75
75
  flex: none;
package/package/components/text-field/number-input.svelte CHANGED
@@ -112,9 +112,9 @@
112
112
  .number-input :global(button) {
113
113
  flex: none;
114
114
  border-width: 1px;
115
- border-color: var(--control-border-color);
115
+ border-color: var(--sui-control-border-color);
116
116
  width: 32px;
117
- height: var(--input--medium--height);
117
+ height: var(--sui-textbox-medium-height);
118
118
  }
119
119
  .number-input :global(button):first-of-type {
120
120
  border-radius: 0;
@@ -124,5 +124,5 @@
124
124
  border-radius: 0 4px 4px 0;
125
125
  }
126
126
  .number-input :global(button) :global(.icon) {
127
- font-size: var(--font-size--xx-large);
127
+ font-size: var(--sui-font-size-xx-large);
128
128
  }</style>
package/package/components/text-field/password-input.svelte CHANGED
@@ -72,13 +72,13 @@
72
72
  flex: none;
73
73
  margin-left: -1px;
74
74
  border-width: 1px;
75
- border-color: var(--control-border-color);
76
- height: var(--input--medium--height);
75
+ border-color: var(--sui-control-border-color);
76
+ height: var(--sui-textbox-medium-height);
77
77
  aspect-ratio: 1/1;
78
78
  }
79
79
  .password-input :global(button):last-child {
80
80
  border-radius: 0 4px 4px 0;
81
81
  }
82
82
  .password-input :global(button) :global(.icon) {
83
- font-size: var(--font-size--xx-large);
83
+ font-size: var(--sui-font-size-xx-large);
84
84
  }</style>
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,16 +103,16 @@ 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-textbox-medium-border-radius);
109
108
  padding: 8px;
110
109
  width: 100%;
111
110
  min-height: 8em;
112
- color: inherit;
113
- font-family: inherit;
114
- font-size: inherit;
115
- line-height: 1.75;
111
+ color: var(--sui-textbox-foreground-color);
112
+ background-color: var(--sui-textbox-background-color);
113
+ font-family: var(--sui-textbox-font-family);
114
+ font-size: var(--sui-textbox-font-size);
115
+ line-height: var(--sui-textbox-multiline-line-height);
116
116
  resize: vertical;
117
117
  transition: all 200ms;
118
118
  }
@@ -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,27 +86,27 @@ 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-textbox-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);
95
- color: inherit;
96
- font-family: inherit;
97
- font-size: inherit;
98
- line-height: 30px;
93
+ height: var(--sui-textbox-medium-height);
94
+ color: var(--sui-textbox-foreground-color);
95
+ background-color: var(--sui-textbox-background-color);
96
+ font-family: var(--sui-textbox-font-family);
97
+ font-size: var(--sui-textbox-font-size);
98
+ line-height: var(--sui-textbox-singleline-line-height);
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-textbox-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-textbox-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>