@dxos/ui-theme 0.8.4-main.abd8ff62ef → 0.8.4-main.bc2380dfbc

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 (49) hide show
  1. package/LICENSE +102 -5
  2. package/README.md +1 -1
  3. package/dist/lib/browser/index.mjs +29 -31
  4. package/dist/lib/browser/index.mjs.map +3 -3
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/node-esm/index.mjs +29 -31
  7. package/dist/lib/node-esm/index.mjs.map +3 -3
  8. package/dist/lib/node-esm/meta.json +1 -1
  9. package/dist/plugin/node-cjs/main.css +85 -79
  10. package/dist/plugin/node-cjs/main.css.map +2 -2
  11. package/dist/plugin/node-cjs/meta.json +1 -1
  12. package/dist/plugin/node-esm/main.css +85 -79
  13. package/dist/plugin/node-esm/main.css.map +2 -2
  14. package/dist/plugin/node-esm/meta.json +1 -1
  15. package/dist/types/src/defs.d.ts +1 -1
  16. package/dist/types/src/defs.d.ts.map +1 -1
  17. package/dist/types/src/fragments/hover.d.ts +0 -1
  18. package/dist/types/src/fragments/hover.d.ts.map +1 -1
  19. package/dist/types/src/theme/components/button.d.ts +2 -2
  20. package/dist/types/src/theme/components/button.d.ts.map +1 -1
  21. package/dist/types/src/util/hash-styles.d.ts +1 -1
  22. package/dist/types/src/util/hash-styles.d.ts.map +1 -1
  23. package/dist/types/tsconfig.tsbuildinfo +1 -1
  24. package/package.json +8 -9
  25. package/src/Theme.stories.tsx +5 -5
  26. package/src/css/DESIGN_SYSTEM.md +159 -0
  27. package/src/css/base/base.css +2 -2
  28. package/src/css/components/button.css +3 -3
  29. package/src/css/components/checkbox.css +1 -1
  30. package/src/css/components/focus.css +12 -12
  31. package/src/css/components/panel.css +23 -23
  32. package/src/css/components/selected.css +58 -17
  33. package/src/css/components/surface.css +4 -4
  34. package/src/css/components/tag.css +23 -23
  35. package/src/css/theme/semantic.css +36 -40
  36. package/src/css/theme/spacing.css +1 -1
  37. package/src/css/theme/styles.css +22 -22
  38. package/src/defs.ts +1 -1
  39. package/src/fragments/AUDIT.md +0 -2
  40. package/src/fragments/hover.ts +0 -2
  41. package/src/main.css +3 -3
  42. package/src/theme/components/button.ts +2 -2
  43. package/src/theme/components/focus.ts +2 -2
  44. package/src/theme/components/icon-button.ts +1 -1
  45. package/src/theme/components/input.ts +5 -5
  46. package/src/theme/components/message.ts +1 -1
  47. package/src/theme/components/select.ts +1 -1
  48. package/src/theme/components/tooltip.ts +1 -1
  49. package/src/util/hash-styles.ts +19 -19
package/src/css/components/tag.css CHANGED
@@ -13,7 +13,7 @@
13
13
  /* NOTE: Margin offsets padding so that border is flush with text. This should only apply to anchor tags inside of Codemirror. */
14
14
  @apply inline cursor-pointer -mx-[3px] px-[2px] py-0.5 border rounded-xs transition-colors;
15
15
  /** TODO(burdon): Configure secondary color. */
16
- @apply bg-group-surface text-sky-surface-text border-sky-border;
16
+ @apply bg-group-surface text-sky-foreground border-sky-border;
17
17
 
18
18
  &:hover {
19
19
  @apply bg-hover-surface;
@@ -22,111 +22,111 @@
22
22
 
23
23
  .dx-tag[data-hue='neutral'],
24
24
  .dx-tag--neutral {
25
- @apply bg-neutral-surface text-neutral-surface-text;
25
+ @apply bg-neutral-surface text-neutral-foreground;
26
26
  }
27
27
 
28
28
  .dx-tag[data-hue='red'],
29
29
  .dx-tag--red {
30
- @apply bg-red-surface text-red-surface-text;
30
+ @apply bg-red-surface text-red-foreground;
31
31
  }
32
32
 
33
33
  .dx-tag[data-hue='orange'],
34
34
  .dx-tag--orange {
35
- @apply bg-orange-surface text-orange-surface-text;
35
+ @apply bg-orange-surface text-orange-foreground;
36
36
  }
37
37
 
38
38
  .dx-tag[data-hue='amber'],
39
39
  .dx-tag--amber {
40
- @apply bg-amber-surface text-amber-surface-text;
40
+ @apply bg-amber-surface text-amber-foreground;
41
41
  }
42
42
 
43
43
  .dx-tag[data-hue='yellow'],
44
44
  .dx-tag--yellow {
45
- @apply bg-yellow-surface text-yellow-surface-text;
45
+ @apply bg-yellow-surface text-yellow-foreground;
46
46
  }
47
47
 
48
48
  .dx-tag[data-hue='lime'],
49
49
  .dx-tag--lime {
50
- @apply bg-lime-surface text-lime-surface-text;
50
+ @apply bg-lime-surface text-lime-foreground;
51
51
  }
52
52
 
53
53
  .dx-tag[data-hue='green'],
54
54
  .dx-tag--green {
55
- @apply bg-green-surface text-green-surface-text;
55
+ @apply bg-green-surface text-green-foreground;
56
56
  }
57
57
 
58
58
  .dx-tag[data-hue='emerald'],
59
59
  .dx-tag--emerald {
60
- @apply bg-emerald-surface text-emerald-surface-text;
60
+ @apply bg-emerald-surface text-emerald-foreground;
61
61
  }
62
62
 
63
63
  .dx-tag[data-hue='teal'],
64
64
  .dx-tag--teal {
65
- @apply bg-teal-surface text-teal-surface-text;
65
+ @apply bg-teal-surface text-teal-foreground;
66
66
  }
67
67
 
68
68
  .dx-tag[data-hue='cyan'],
69
69
  .dx-tag--cyan {
70
- @apply bg-cyan-surface text-cyan-surface-text;
70
+ @apply bg-cyan-surface text-cyan-foreground;
71
71
  }
72
72
 
73
73
  .dx-tag[data-hue='sky'],
74
74
  .dx-tag--sky {
75
- @apply bg-sky-surface text-sky-surface-text;
75
+ @apply bg-sky-surface text-sky-foreground;
76
76
  }
77
77
 
78
78
  .dx-tag[data-hue='blue'],
79
79
  .dx-tag--blue {
80
- @apply bg-blue-surface text-blue-surface-text;
80
+ @apply bg-blue-surface text-blue-foreground;
81
81
  }
82
82
 
83
83
  .dx-tag[data-hue='indigo'],
84
84
  .dx-tag--indigo {
85
- @apply bg-indigo-surface text-indigo-surface-text;
85
+ @apply bg-indigo-surface text-indigo-foreground;
86
86
  }
87
87
 
88
88
  .dx-tag[data-hue='violet'],
89
89
  .dx-tag--violet {
90
- @apply bg-violet-surface text-violet-surface-text;
90
+ @apply bg-violet-surface text-violet-foreground;
91
91
  }
92
92
 
93
93
  .dx-tag[data-hue='purple'],
94
94
  .dx-tag--purple {
95
- @apply bg-purple-surface text-purple-surface-text;
95
+ @apply bg-purple-surface text-purple-foreground;
96
96
  }
97
97
 
98
98
  .dx-tag[data-hue='fuchsia'],
99
99
  .dx-tag--fuchsia {
100
- @apply bg-fuchsia-surface text-fuchsia-surface-text;
100
+ @apply bg-fuchsia-surface text-fuchsia-foreground;
101
101
  }
102
102
 
103
103
  .dx-tag[data-hue='pink'],
104
104
  .dx-tag--pink {
105
- @apply bg-pink-surface text-pink-surface-text;
105
+ @apply bg-pink-surface text-pink-foreground;
106
106
  }
107
107
 
108
108
  .dx-tag[data-hue='rose'],
109
109
  .dx-tag--rose {
110
- @apply bg-rose-surface text-rose-surface-text;
110
+ @apply bg-rose-surface text-rose-foreground;
111
111
  }
112
112
 
113
113
  .dx-tag[data-hue='info'],
114
114
  .dx-tag--info {
115
- @apply bg-cyan-surface text-cyan-surface-text;
115
+ @apply bg-cyan-surface text-cyan-foreground;
116
116
  }
117
117
 
118
118
  .dx-tag[data-hue='success'],
119
119
  .dx-tag--success {
120
- @apply bg-emerald-surface text-emerald-surface-text;
120
+ @apply bg-emerald-surface text-emerald-foreground;
121
121
  }
122
122
 
123
123
  .dx-tag[data-hue='warning'],
124
124
  .dx-tag--warning {
125
- @apply bg-amber-surface text-amber-surface-text;
125
+ @apply bg-amber-surface text-amber-foreground;
126
126
  }
127
127
 
128
128
  .dx-tag[data-hue='error'],
129
129
  .dx-tag--error {
130
- @apply bg-rose-surface text-rose-surface-text;
130
+ @apply bg-rose-surface text-rose-foreground;
131
131
  }
132
132
  }
package/src/css/theme/semantic.css CHANGED
@@ -1,21 +1,25 @@
1
1
  /**
2
2
  * Tokens
3
+ *
4
+ * Naming convention: --color-{name}-{part}[-{state}]
5
+ * part : surface | foreground | border | fill | text
6
+ * state : hover | active (optional)
7
+ *
8
+ * See DESIGN_SYSTEM.md.
3
9
  */
4
10
 
5
11
  @theme {
6
12
  /**
7
- * Surfaces
8
- *
9
- * TODO(burdon): Align suffix with styles.css?
10
- * -xxx-surface
11
- * -xxx-surface-text
13
+ * Surfaces
12
14
  */
13
15
 
14
16
  --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
15
- --color-base-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
17
+ --color-base-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
16
18
 
17
19
  --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200));
18
- --color-inverse-surface-text: light-dark(var(--color-neutral-50), var(--color-neutral-950));
20
+ --color-inverse-foreground: light-dark(var(--color-neutral-50), var(--color-neutral-950));
21
+
22
+ --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
19
23
 
20
24
  --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
21
25
  --color-scrim-surface: light-dark(
@@ -31,85 +35,77 @@
31
35
  --color-sidebar-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
32
36
  --color-header-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
33
37
 
38
+ /* input */
34
39
  --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
35
- --color-input-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
40
+ --color-input-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
36
41
 
37
- /** TODO(burdon): current vs active vs selected */
42
+ /* current (aria-current) */
38
43
  --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
39
- --color-active-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
40
- --color-active-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
44
+ --color-current-surface-hover: light-dark(var(--color-neutral-300), var(--color-neutral-700));
45
+ --color-current-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
46
+
47
+ /* selected (aria-selected) */
48
+ --color-selected-surface: light-dark(var(--color-neutral-150), var(--color-neutral-850));
49
+ --color-selected-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
50
+ --color-selected-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
41
51
 
42
- /** TODO(burdon): Merge overlay/surface? */
43
- --color-hover-overlay: light-dark(var(--color-neutral-250), var(--color-neutral-750));
52
+ /* hover (:hover, data-highlighted) */
44
53
  --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750));
45
- --color-hover-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
54
+ --color-hover-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
46
55
 
47
56
  /* Map attention to focus-surface logic so that elements acting as active attention zones highlight correctly on focus. */
48
57
  --color-attention-surface: var(--color-focus-surface);
49
58
  --color-attention-contains: oklch(from var(--color-accent-surface) l c h / 0.3);
50
- --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
51
- --color-neutral-focus-indicator: light-dark(var(--color-neutral-400), var(--color-neutral-600));
52
-
53
- /* Highlight and Selected */
54
-
55
- --color-highlight-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
56
- --color-highlight-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
57
- --color-highlight-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
58
-
59
- --color-selected-surface: light-dark(var(--color-neutral-150), var(--color-neutral-850));
60
- --color-selected-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
61
- --color-selected-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
62
59
 
63
60
  /* Accent (primary) */
64
- /* TODO(burdon): Rename primary */
65
-
66
61
  --color-accent-surface: light-dark(var(--color-blue-500), var(--color-blue-700));
67
62
  --color-accent-surface-hover: light-dark(var(--color-blue-800), var(--color-blue-800));
68
- --color-accent-surface-text: var(--color-blue-100);
63
+ --color-accent-foreground: var(--color-blue-100);
69
64
  --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-400));
70
65
  --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500));
71
- --color-accent-focus-indicator: light-dark(var(--color-blue-600), var(--color-blue-600));
72
66
 
73
67
  --color-un-accent: var(--color-neutral-400);
74
68
  --color-un-accent-hover: var(--color-neutral-500);
75
69
 
76
- /* Separator */
70
+ /* Focus rings (global) */
71
+ --color-focus-ring: light-dark(var(--color-blue-600), var(--color-blue-600));
72
+ --color-focus-ring-subtle: light-dark(var(--color-neutral-400), var(--color-neutral-600));
77
73
 
74
+ /* Separator */
78
75
  --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800));
79
76
  --color-subdued-separator: light-dark(var(--color-neutral-150), var(--color-neutral-850));
80
77
  --color-primary-separator: light-dark(var(--color-neutral-500), var(--color-neutral-700));
81
78
  --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500));
82
79
 
83
80
  /* Scrollbar */
84
-
85
81
  --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950));
86
82
  --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-700));
87
83
  --color-scrollbar-thumb-active: light-dark(var(--color-neutral-200), var(--color-neutral-600));
88
84
  --color-scrollbar-thumb-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600));
89
85
 
90
86
  /* Sheet */
91
-
92
87
  --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
93
88
  --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900));
94
89
  --color-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800));
95
90
  --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200));
96
91
 
97
- /* Grid */
98
-
92
+ /*
93
+ * Grid
94
+ * NOTE: Update main.css when changing grid tokens (and restart dev server).
95
+ */
99
96
  --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
97
+ --color-grid-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
98
+ --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800));
100
99
  --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5);
100
+ --color-grid-selection-surface: light-dark(var(--color-blue-500), var(--color-blue-400));
101
+ --color-grid-selection-foreground: light-dark(var(--color-neutral-50), var(--color-neutral-950));
101
102
  --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600));
102
103
  --color-grid-comment-active: light-dark(
103
104
  oklch(from var(--color-green-400) l c h / 0.5),
104
105
  oklch(from var(--color-green-600) l c h / 0.5)
105
106
  );
106
- --color-grid-hover-overlay: oklch(from var(--color-neutral-500) l c h / 0.1);
107
- --color-grid-selection-overlay: var(--color-blue-500);
108
- --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800));
109
- --color-grid-focus-indicator: light-dark(var(--color-primary-600), var(--color-primary-600));
110
107
 
111
108
  /* Text */
112
-
113
109
  --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600));
114
110
  --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-500));
115
111
  --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400));
package/src/css/theme/spacing.css CHANGED
@@ -124,7 +124,7 @@
124
124
  --dx-l0-avatar-size: 3rem;
125
125
  --dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
126
126
  --dx-r0-size: var(--dx-rail-size);
127
- --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size));
127
+ --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size) - 1px);
128
128
  }
129
129
 
130
130
  :root {
package/src/css/theme/styles.css CHANGED
@@ -9,25 +9,25 @@
9
9
 
10
10
  --color-info-fill: var(--color-cyan-fill);
11
11
  --color-info-surface: var(--color-cyan-surface);
12
- --color-info-surface-text: var(--color-cyan-surface-text);
12
+ --color-info-foreground: var(--color-cyan-foreground);
13
13
  --color-info-text: var(--color-cyan-text);
14
14
  --color-info-border: var(--color-cyan-border);
15
15
 
16
16
  --color-success-fill: var(--color-emerald-fill);
17
17
  --color-success-surface: var(--color-emerald-surface);
18
- --color-success-surface-text: var(--color-emerald-surface-text);
18
+ --color-success-foreground: var(--color-emerald-foreground);
19
19
  --color-success-text: var(--color-emerald-text);
20
20
  --color-success-border: var(--color-emerald-border);
21
21
 
22
22
  --color-warning-fill: var(--color-amber-fill);
23
23
  --color-warning-surface: var(--color-amber-surface);
24
- --color-warning-surface-text: var(--color-amber-surface-text);
24
+ --color-warning-foreground: var(--color-amber-foreground);
25
25
  --color-warning-text: var(--color-amber-text);
26
26
  --color-warning-border: var(--color-amber-border);
27
27
 
28
28
  --color-error-fill: var(--color-rose-fill);
29
29
  --color-error-surface: var(--color-rose-surface);
30
- --color-error-surface-text: var(--color-rose-surface-text);
30
+ --color-error-foreground: var(--color-rose-foreground);
31
31
  --color-error-text: var(--color-rose-text);
32
32
  --color-error-border: var(--color-rose-border);
33
33
 
@@ -37,109 +37,109 @@
37
37
 
38
38
  --color-neutral-fill: light-dark(var(--color-neutral-300), var(--color-neutral-700));
39
39
  --color-neutral-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
40
- --color-neutral-surface-text: light-dark(var(--color-neutral-800), var(--color-neutral-200));
40
+ --color-neutral-foreground: light-dark(var(--color-neutral-800), var(--color-neutral-200));
41
41
  --color-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-300));
42
42
  --color-neutral-border: light-dark(var(--color-neutral-400), var(--color-neutral-600));
43
43
 
44
44
  --color-red-fill: light-dark(var(--color-red-300), var(--color-red-700));
45
45
  --color-red-surface: light-dark(var(--color-red-200), var(--color-red-800));
46
- --color-red-surface-text: light-dark(var(--color-red-800), var(--color-red-200));
46
+ --color-red-foreground: light-dark(var(--color-red-800), var(--color-red-200));
47
47
  --color-red-text: light-dark(var(--color-red-700), var(--color-red-300));
48
48
  --color-red-border: light-dark(var(--color-red-400), var(--color-red-600));
49
49
 
50
50
  --color-orange-fill: light-dark(var(--color-orange-300), var(--color-orange-700));
51
51
  --color-orange-surface: light-dark(var(--color-orange-200), var(--color-orange-800));
52
- --color-orange-surface-text: light-dark(var(--color-orange-800), var(--color-orange-200));
52
+ --color-orange-foreground: light-dark(var(--color-orange-800), var(--color-orange-200));
53
53
  --color-orange-text: light-dark(var(--color-orange-700), var(--color-orange-300));
54
54
  --color-orange-border: light-dark(var(--color-orange-400), var(--color-orange-600));
55
55
 
56
56
  --color-amber-fill: light-dark(var(--color-amber-300), var(--color-amber-700));
57
57
  --color-amber-surface: light-dark(var(--color-amber-200), var(--color-amber-800));
58
- --color-amber-surface-text: light-dark(var(--color-amber-800), var(--color-amber-200));
58
+ --color-amber-foreground: light-dark(var(--color-amber-800), var(--color-amber-200));
59
59
  --color-amber-text: light-dark(var(--color-amber-700), var(--color-amber-300));
60
60
  --color-amber-border: light-dark(var(--color-amber-400), var(--color-amber-600));
61
61
 
62
62
  --color-yellow-fill: light-dark(var(--color-yellow-300), var(--color-yellow-700));
63
63
  --color-yellow-surface: light-dark(var(--color-yellow-200), var(--color-yellow-800));
64
- --color-yellow-surface-text: light-dark(var(--color-yellow-800), var(--color-yellow-200));
64
+ --color-yellow-foreground: light-dark(var(--color-yellow-800), var(--color-yellow-200));
65
65
  --color-yellow-text: light-dark(var(--color-yellow-700), var(--color-yellow-300));
66
66
  --color-yellow-border: light-dark(var(--color-yellow-400), var(--color-yellow-600));
67
67
 
68
68
  --color-lime-fill: light-dark(var(--color-lime-300), var(--color-lime-700));
69
69
  --color-lime-surface: light-dark(var(--color-lime-200), var(--color-lime-800));
70
- --color-lime-surface-text: light-dark(var(--color-lime-800), var(--color-lime-200));
70
+ --color-lime-foreground: light-dark(var(--color-lime-800), var(--color-lime-200));
71
71
  --color-lime-text: light-dark(var(--color-lime-700), var(--color-lime-300));
72
72
  --color-lime-border: light-dark(var(--color-lime-400), var(--color-lime-600));
73
73
 
74
74
  --color-green-fill: light-dark(var(--color-green-300), var(--color-green-700));
75
75
  --color-green-surface: light-dark(var(--color-green-200), var(--color-green-800));
76
- --color-green-surface-text: light-dark(var(--color-green-800), var(--color-green-200));
76
+ --color-green-foreground: light-dark(var(--color-green-800), var(--color-green-200));
77
77
  --color-green-text: light-dark(var(--color-green-700), var(--color-green-300));
78
78
  --color-green-border: light-dark(var(--color-green-400), var(--color-green-600));
79
79
 
80
80
  --color-emerald-fill: light-dark(var(--color-emerald-300), var(--color-emerald-700));
81
81
  --color-emerald-surface: light-dark(var(--color-emerald-200), var(--color-emerald-800));
82
- --color-emerald-surface-text: light-dark(var(--color-emerald-800), var(--color-emerald-200));
82
+ --color-emerald-foreground: light-dark(var(--color-emerald-800), var(--color-emerald-200));
83
83
  --color-emerald-text: light-dark(var(--color-emerald-700), var(--color-emerald-300));
84
84
  --color-emerald-border: light-dark(var(--color-emerald-400), var(--color-emerald-600));
85
85
 
86
86
  --color-teal-fill: light-dark(var(--color-teal-300), var(--color-teal-700));
87
87
  --color-teal-surface: light-dark(var(--color-teal-200), var(--color-teal-800));
88
- --color-teal-surface-text: light-dark(var(--color-teal-800), var(--color-teal-200));
88
+ --color-teal-foreground: light-dark(var(--color-teal-800), var(--color-teal-200));
89
89
  --color-teal-text: light-dark(var(--color-teal-700), var(--color-teal-300));
90
90
  --color-teal-border: light-dark(var(--color-teal-400), var(--color-teal-600));
91
91
 
92
92
  --color-cyan-fill: light-dark(var(--color-cyan-300), var(--color-cyan-700));
93
93
  --color-cyan-surface: light-dark(var(--color-cyan-200), var(--color-cyan-800));
94
- --color-cyan-surface-text: light-dark(var(--color-cyan-800), var(--color-cyan-200));
94
+ --color-cyan-foreground: light-dark(var(--color-cyan-800), var(--color-cyan-200));
95
95
  --color-cyan-text: light-dark(var(--color-cyan-700), var(--color-cyan-300));
96
96
  --color-cyan-border: light-dark(var(--color-cyan-400), var(--color-cyan-600));
97
97
 
98
98
  --color-sky-fill: light-dark(var(--color-sky-300), var(--color-sky-700));
99
99
  --color-sky-surface: light-dark(var(--color-sky-200), var(--color-sky-800));
100
- --color-sky-surface-text: light-dark(var(--color-sky-800), var(--color-sky-200));
100
+ --color-sky-foreground: light-dark(var(--color-sky-800), var(--color-sky-200));
101
101
  --color-sky-text: light-dark(var(--color-sky-700), var(--color-sky-300));
102
102
  --color-sky-border: light-dark(var(--color-sky-400), var(--color-sky-600));
103
103
 
104
104
  --color-blue-fill: light-dark(var(--color-blue-300), var(--color-blue-700));
105
105
  --color-blue-surface: light-dark(var(--color-blue-200), var(--color-blue-800));
106
- --color-blue-surface-text: light-dark(var(--color-blue-800), var(--color-blue-200));
106
+ --color-blue-foreground: light-dark(var(--color-blue-800), var(--color-blue-200));
107
107
  --color-blue-text: light-dark(var(--color-blue-700), var(--color-blue-300));
108
108
  --color-blue-border: light-dark(var(--color-blue-400), var(--color-blue-600));
109
109
 
110
110
  --color-indigo-fill: light-dark(var(--color-indigo-300), var(--color-indigo-700));
111
111
  --color-indigo-surface: light-dark(var(--color-indigo-200), var(--color-indigo-800));
112
- --color-indigo-surface-text: light-dark(var(--color-indigo-800), var(--color-indigo-200));
112
+ --color-indigo-foreground: light-dark(var(--color-indigo-800), var(--color-indigo-200));
113
113
  --color-indigo-text: light-dark(var(--color-indigo-700), var(--color-indigo-300));
114
114
  --color-indigo-border: light-dark(var(--color-indigo-400), var(--color-indigo-600));
115
115
 
116
116
  --color-violet-fill: light-dark(var(--color-violet-300), var(--color-violet-700));
117
117
  --color-violet-surface: light-dark(var(--color-violet-200), var(--color-violet-800));
118
- --color-violet-surface-text: light-dark(var(--color-violet-800), var(--color-violet-200));
118
+ --color-violet-foreground: light-dark(var(--color-violet-800), var(--color-violet-200));
119
119
  --color-violet-text: light-dark(var(--color-violet-700), var(--color-violet-300));
120
120
  --color-violet-border: light-dark(var(--color-violet-400), var(--color-violet-600));
121
121
 
122
122
  --color-purple-fill: light-dark(var(--color-purple-300), var(--color-purple-700));
123
123
  --color-purple-surface: light-dark(var(--color-purple-200), var(--color-purple-800));
124
- --color-purple-surface-text: light-dark(var(--color-purple-800), var(--color-purple-200));
124
+ --color-purple-foreground: light-dark(var(--color-purple-800), var(--color-purple-200));
125
125
  --color-purple-text: light-dark(var(--color-purple-700), var(--color-purple-300));
126
126
  --color-purple-border: light-dark(var(--color-purple-400), var(--color-purple-600));
127
127
 
128
128
  --color-fuchsia-fill: light-dark(var(--color-fuchsia-300), var(--color-fuchsia-700));
129
129
  --color-fuchsia-surface: light-dark(var(--color-fuchsia-200), var(--color-fuchsia-800));
130
- --color-fuchsia-surface-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200));
130
+ --color-fuchsia-foreground: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200));
131
131
  --color-fuchsia-text: light-dark(var(--color-fuchsia-700), var(--color-fuchsia-300));
132
132
  --color-fuchsia-border: light-dark(var(--color-fuchsia-400), var(--color-fuchsia-600));
133
133
 
134
134
  --color-pink-fill: light-dark(var(--color-pink-300), var(--color-pink-700));
135
135
  --color-pink-surface: light-dark(var(--color-pink-200), var(--color-pink-800));
136
- --color-pink-surface-text: light-dark(var(--color-pink-800), var(--color-pink-200));
136
+ --color-pink-foreground: light-dark(var(--color-pink-800), var(--color-pink-200));
137
137
  --color-pink-text: light-dark(var(--color-pink-700), var(--color-pink-300));
138
138
  --color-pink-border: light-dark(var(--color-pink-400), var(--color-pink-600));
139
139
 
140
140
  --color-rose-fill: light-dark(var(--color-rose-300), var(--color-rose-700));
141
141
  --color-rose-surface: light-dark(var(--color-rose-200), var(--color-rose-800));
142
- --color-rose-surface-text: light-dark(var(--color-rose-800), var(--color-rose-200));
142
+ --color-rose-foreground: light-dark(var(--color-rose-800), var(--color-rose-200));
143
143
  --color-rose-text: light-dark(var(--color-rose-700), var(--color-rose-300));
144
144
  --color-rose-border: light-dark(var(--color-rose-400), var(--color-rose-600));
145
145
  }
package/src/defs.ts CHANGED
@@ -34,7 +34,7 @@ export const hues: ChromaticPalette[] = [
34
34
 
35
35
  export const hueShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const;
36
36
 
37
- export const roles = ['fill', 'surface', 'surface-text', 'text', 'border'] as const;
37
+ export const roles = ['fill', 'surface', 'foreground', 'text', 'border'] as const;
38
38
 
39
39
  /**
40
40
  * Card size constants (Tailwind spacing units).
package/src/fragments/AUDIT.md CHANGED
@@ -16,7 +16,6 @@ External packages importing fragment definitions from `ui-theme/src/fragments`.
16
16
  | `focus.ts` | `focusRing` | 2 | 5 |
17
17
  | `focus.ts` | `subduedFocus` | - | 2 |
18
18
  | `focus.ts` | `staticFocusRing` | - | 1 |
19
- | `hover.ts` | `subtleHover` | 4 | - |
20
19
  | `hover.ts` | `ghostHover` | 8 | 2 |
21
20
  | `hover.ts` | `ghostFocusWithin` | 1 | - |
22
21
  | `hover.ts` | `hoverableControls` | 9 | - |
@@ -53,5 +52,4 @@ External packages importing fragment definitions from `ui-theme/src/fragments`.
53
52
 
54
53
  **Completely unused:** 7 fragments
55
54
 
56
- - `subtleHover` from `hover.ts`
57
55
  - `hoverableOpenControlItem`, `groupHoverControlItemWithTransition` from `hover.ts` (only 2-3 uses)
package/src/fragments/hover.ts CHANGED
@@ -2,8 +2,6 @@
2
2
  // Copyright 2022 DXOS.org
3
3
  //
4
4
 
5
- export const subtleHover = 'hover:bg-hover-overlay';
6
-
7
5
  export const ghostHover = 'hover:bg-hover-surface';
8
6
  export const ghostFocusWithin = 'focus-within:bg-hover-surface';
9
7
 
package/src/main.css CHANGED
@@ -86,9 +86,9 @@
86
86
  * --color-{hue}-{style}
87
87
  */
88
88
  @source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
89
- @source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,surface-text,text,border}");
89
+ @source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,foreground,text,border}");
90
90
  @source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
91
- @source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
91
+ @source inline("bg-{info,success,warning,error}-{fill,surface,foreground,text,border}");
92
92
  @source inline("border-{info,success,warning,error}-border");
93
93
 
94
94
  /**
@@ -96,7 +96,7 @@
96
96
  * Tailwind source-scan graph (e.g. lit-grid's dx-grid.pcss uses
97
97
  * var(--color-grid-line)).
98
98
  */
99
- @source inline("bg-grid-{surface,highlight,comment,comment-active,hover-overlay,selection-overlay,line,focus-indicator}");
99
+ @source inline("bg-grid-{surface,foreground,line,highlight,comment,comment-active,selection-surface,selection-foreground}");
100
100
 
101
101
  /**
102
102
  * Plugins must come after all imports.
package/src/theme/components/button.ts CHANGED
@@ -8,9 +8,9 @@ import { ghostHover } from '../../fragments';
8
8
  import { mx } from '../../util';
9
9
 
10
10
  export const primaryButtonColors =
11
- 'text-accent-surface-text bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100';
11
+ 'text-accent-foreground bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100';
12
12
 
13
- export const staticDefaultButtonColors = 'bg-input-surface text-input-surface-text';
13
+ export const staticDefaultButtonColors = 'bg-input-surface text-input-foreground';
14
14
 
15
15
  export const defaultButtonColors = mx(
16
16
  staticDefaultButtonColors,
package/src/theme/components/focus.ts CHANGED
@@ -20,8 +20,8 @@ export type FocusStyleProps = {
20
20
  const focusRing: ComponentFunction<FocusStyleProps> = ({ border }, ...etc) =>
21
21
  mx(
22
22
  'dx-ring-pseudo outline-hidden',
23
- 'focus:after:ring-neutral-focus-indicator',
24
- 'data-[focus-state=active]:after:ring-neutral-focus-indicator',
23
+ 'focus:after:ring-focus-ring-subtle',
24
+ 'data-[focus-state=active]:after:ring-focus-ring-subtle',
25
25
  'data-[focus-state=error]:after:ring-rose-500',
26
26
  border && 'border border-separator',
27
27
  ...etc,
package/src/theme/components/icon-button.ts CHANGED
@@ -13,7 +13,7 @@ export type IconButtonStyleProps = ButtonStyleProps & {
13
13
  };
14
14
 
15
15
  export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly, square }, ...etc) => {
16
- return mx('px-1.5', !iconOnly && 'gap-2', square && 'aspect-square', ...etc);
16
+ return mx('px-1.5', !iconOnly && 'gap-1.5', square && 'aspect-square', ...etc);
17
17
  };
18
18
 
19
19
  export const iconButtonTheme: Theme<IconButtonStyleProps> = {
package/src/theme/components/input.ts CHANGED
@@ -67,7 +67,7 @@ const sharedSubduedInputStyles: ComponentFragment<InputStyleProps> = (props) =>
67
67
 
68
68
  const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
69
69
  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
70
- 'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
70
+ 'py-0 w-full text-base-foreground rounded-xs placeholder-placeholder',
71
71
  textInputSurfaceFocus,
72
72
  densityDimensions(props.density),
73
73
  props.disabled ? staticDisabled : textInputSurfaceHover,
@@ -75,7 +75,7 @@ const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) =>
75
75
 
76
76
  const sharedStaticInputStyles: ComponentFragment<InputStyleProps> = (props) => [
77
77
  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
78
- 'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
78
+ 'py-0 w-full text-base-foreground rounded-xs placeholder-placeholder',
79
79
  textInputSurfaceFocus,
80
80
  textInputSurfaceHover,
81
81
  props.focused && 'bg-attention-surface',
@@ -135,9 +135,9 @@ const inputSegment: ComponentFunction<InputStyleProps> = (props, ...etc) =>
135
135
  mx(
136
136
  'flex items-center justify-center font-mono',
137
137
  props.density === 'fine' ? 'size-10 pointer-fine:size-8 rounded-xs' : 'size-12 rounded-xs',
138
- 'bg-input-surface text-base-surface-text transition-colors border border-separator',
139
- 'data-[focused]:bg-attention-surface data-[focused]:border-neutral-focus-indicator',
140
- 'data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-neutral-focus-indicator',
138
+ 'bg-input-surface text-base-foreground transition-colors border border-separator',
139
+ 'data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle',
140
+ 'data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle',
141
141
  inputValence(props.validationValence),
142
142
  props.disabled && staticDisabled,
143
143
  ...etc,
package/src/theme/components/message.ts CHANGED
@@ -28,7 +28,7 @@ export const messageIcon: ComponentFunction<MessageStyleProps> = (_, etc) => {
28
28
  };
29
29
 
30
30
  export const messageContent: ComponentFunction<MessageStyleProps> = (_, etc) => {
31
- return mx('col-start-2 grid grid-cols-subgrid first:font-medium', etc);
31
+ return mx('col-start-2 grid grid-cols-subgrid inline first:font-medium', etc);
32
32
  };
33
33
 
34
34
  export const messageTheme: Theme<MessageStyleProps> = {
package/src/theme/components/select.ts CHANGED
@@ -25,7 +25,7 @@ export const selectViewport: ComponentFunction<SelectStyleProps> = (_props, ...e
25
25
  export const selectItem: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
26
26
  mx(
27
27
  'flex items-center min-h-[2rem] px-3 py-1 gap-2',
28
- 'text-base-surface-text leading-none select-none outline-hidden',
28
+ 'text-base-foreground leading-none select-none outline-hidden',
29
29
  '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
30
30
  'dx-highlighted',
31
31
  ...etc,
package/src/theme/components/tooltip.ts CHANGED
@@ -12,7 +12,7 @@ export type TooltipStyleProps = Partial<{
12
12
 
13
13
  export const tooltipContent: ComponentFunction<TooltipStyleProps> = ({ elevation }, ...etc) =>
14
14
  mx(
15
- 'inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-surface-text rounded-sm',
15
+ 'inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-foreground rounded-sm',
16
16
  surfaceShadow({ elevation: 'positioned' }),
17
17
  surfaceZIndex({ elevation, level: 'tooltip' }),
18
18
  ...etc,