@heliosgraphics/ui 2.0.0-alpha.69 → 2.0.0-alpha.71

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 (17) hide show
  1. package/components/Flex/Flex.meta.ts +1 -1
  2. package/components/Flex/Flex.types.ts +2 -2
  3. package/components/Flex/Flex.utils.spec.ts +2 -2
  4. package/components/Flex/Flex.utils.ts +3 -1
  5. package/components/Layout/Layout.types.ts +2 -0
  6. package/components/Layout/components/LayoutMain/LayoutMain.module.css +5 -0
  7. package/components/Layout/components/LayoutNavigation/LayoutNavigation.module.css +0 -1
  8. package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.meta.ts +15 -0
  9. package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.module.css +12 -0
  10. package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.tsx +22 -0
  11. package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.types.ts +5 -0
  12. package/components/Layout/components/LayoutSubNavigation/index.ts +1 -0
  13. package/components/Layout/index.ts +2 -0
  14. package/components/Markdown/Markdown.module.css +1 -1
  15. package/css/core.colors-helpers.css +10 -10
  16. package/css/core.colors.css +21 -12
  17. package/package.json +1 -1
package/components/Flex/Flex.meta.ts CHANGED
@@ -37,7 +37,7 @@ export const meta: HeliosAttributeMeta<FlexBaseProps> = {
37
37
  paddingX: { type: "HeliosScale", isOptional: true },
38
38
  paddingY: { type: "HeliosScale", isOptional: true },
39
39
  ref: { type: "RefObject<HTMLDivElement>", isOptional: true },
40
- withBackground: { type: "boolean", isOptional: true },
40
+ withBackground: { type: "HeliosEmphasisType", isOptional: true },
41
41
  withRadius: { type: "ResponsiveRadiusType", isOptional: true },
42
42
  xAlign: { type: '"start" | "end" | "center"', isOptional: true },
43
43
  yAlign: { type: '"start" | "end" | "baseline"', isOptional: true },
package/components/Flex/Flex.types.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { HTMLAttributes, MouseEventHandler, PropsWithChildren, ForwardedRef } from "react"
2
- import type { HeliosScaleType, HeliosRadiusType } from "../.."
2
+ import type { HeliosScaleType, HeliosRadiusType, HeliosEmphasisType } from "../.."
3
3
 
4
4
  export type ResponsiveScaleType = HeliosScaleType | [HeliosScaleType, HeliosScaleType, HeliosScaleType]
5
5
  export type ResponsiveRadiusType = HeliosRadiusType | [HeliosRadiusType, HeliosRadiusType, HeliosRadiusType]
@@ -25,7 +25,7 @@ export interface FlexBaseProps {
25
25
  paddingX?: HeliosScaleType
26
26
  paddingY?: HeliosScaleType
27
27
  ref?: ForwardedRef<HTMLDivElement>
28
- withBackground?: boolean
28
+ withBackground?: HeliosEmphasisType
29
29
  withRadius?: ResponsiveRadiusType
30
30
  xAlign?: "start" | "end" | "center"
31
31
  yAlign?: "start" | "end" | "baseline"
package/components/Flex/Flex.utils.spec.ts CHANGED
@@ -29,12 +29,12 @@ describe("getFlexUtility", () => {
29
29
  it("Generates empty flex without attrs", () => expect(getFlexUtility(MOCK_FLEX)).toEqual(MOCK_FLEX_CLASSES))
30
30
  it("Generates empty flex with undefined", () => expect(getFlexUtility(undefined)).toEqual(MOCK_FLEX_CLASSES))
31
31
 
32
- const MOCK_FLEX_DUPLICATE_CLASSES = `flex flex-center ui-bg`
32
+ const MOCK_FLEX_DUPLICATE_CLASSES = `flex flex-center ui-bg-primary`
33
33
  const MOCK_FLEX_DUPLICATE: FlexProps = {
34
34
  children: null,
35
35
  isCentered: true,
36
36
  className: "flex",
37
- withBackground: true,
37
+ withBackground: "primary",
38
38
  }
39
39
 
40
40
  it("Generates without duplicated classes", () =>
package/components/Flex/Flex.utils.ts CHANGED
@@ -47,7 +47,9 @@ export const getFlexUtility = (props?: FlexProps): string => {
47
47
  if (props.paddingX) flexClasses.add(`px-${props.paddingX}`)
48
48
 
49
49
  if (props.className) flexClasses.add(props.className)
50
- if (props.withBackground) flexClasses.add("ui-bg")
50
+ if (props.withBackground === "primary") flexClasses.add("ui-bg-primary")
51
+ if (props.withBackground === "secondary") flexClasses.add("ui-bg-secondary")
52
+ if (props.withBackground === "tertiary") flexClasses.add("ui-bg-tertiary")
51
53
 
52
54
  return Array.from(flexClasses).join(" ")
53
55
  }
package/components/Layout/Layout.types.ts CHANGED
@@ -2,6 +2,7 @@ import type { FC, ReactElement, PropsWithChildren } from "react"
2
2
  import type { LayoutAsideComposition } from "./components/LayoutAside/LayoutAside.types"
3
3
  import type { LayoutMainComposition } from "./components/LayoutMain/LayoutMain.types"
4
4
  import type { LayoutNavigationProps } from "./components/LayoutNavigation/LayoutNavigation.types"
5
+ import type { LayoutSubNavigationProps } from "./components/LayoutSubNavigation/LayoutSubNavigation.types"
5
6
 
6
7
  export type LayoutBaseProps = {
7
8
  isFullHeight?: boolean
@@ -14,4 +15,5 @@ export interface LayoutComposition {
14
15
  Aside: LayoutAsideComposition
15
16
  Main: LayoutMainComposition
16
17
  Navigation: FC<LayoutNavigationProps>
18
+ SubNavigation: FC<LayoutSubNavigationProps>
17
19
  }
package/components/Layout/components/LayoutMain/LayoutMain.module.css CHANGED
@@ -8,3 +8,8 @@
8
8
  height: calc(100dvh - 64px);
9
9
  margin-top: 64px;
10
10
  }
11
+
12
+ .layoutMain:has(nav[data-ui-component="Layout.Navigation"]):has(nav[data-ui-component="Layout.SubNavigation"]) {
13
+ height: calc(100dvh - 120px);
14
+ margin-top: 120px;
15
+ }
package/components/Layout/components/LayoutNavigation/LayoutNavigation.module.css CHANGED
@@ -8,6 +8,5 @@
8
8
  width: -webkit-fill-available;
9
9
  width: stretch;
10
10
 
11
- border-right: 1px solid var(--ui-border-secondary);
12
11
  border-bottom: 1px solid var(--ui-border-secondary);
13
12
  }
package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.meta.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { HeliosAttributeMeta } from "../../../.."
2
+ import type { LayoutSubNavigationBaseProps } from "./LayoutSubNavigation.types"
3
+
4
+ export const meta: HeliosAttributeMeta<LayoutSubNavigationBaseProps> = {
5
+ _patterns: [
6
+ {
7
+ id: "ui-layout-sub-navigation-default",
8
+ description: "default",
9
+ content: `<Layout.SubNavigation>{CHILDREN}</Layout.SubNavigation>`,
10
+ },
11
+ ],
12
+ _status: "internal",
13
+ _category: "layout",
14
+ _extends: ["FlexProps"],
15
+ }
package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.module.css ADDED
@@ -0,0 +1,12 @@
1
+ .layoutNavigation {
2
+ position: fixed;
3
+ top: 64px;
4
+ z-index: var(--z-index-5);
5
+
6
+ height: 56px;
7
+ width: -moz-available;
8
+ width: -webkit-fill-available;
9
+ width: stretch;
10
+
11
+ border-bottom: 1px solid var(--ui-border-secondary);
12
+ }
package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import { getFlexUtility, getSafeFlexProps } from "../../../Flex/Flex.utils"
2
+ import { getClasses } from "@heliosgraphics/utils"
3
+ import styles from "./LayoutSubNavigation.module.css"
4
+ import type { FC } from "react"
5
+ import type { LayoutSubNavigationProps } from "./LayoutSubNavigation.types"
6
+
7
+ export const LayoutSubNavigation: FC<LayoutSubNavigationProps> = (props) => {
8
+ const mainNavigationFlexClasses: string = getFlexUtility({
9
+ ...props,
10
+ isYCentered: props.isYCentered ?? true,
11
+ paddingX: props.paddingX ?? 8,
12
+ })
13
+
14
+ const navigationClasses: string = getClasses(mainNavigationFlexClasses, styles.layoutNavigation)
15
+ const safeProps = getSafeFlexProps(props)
16
+
17
+ return (
18
+ <nav {...safeProps} className={navigationClasses} data-ui-component="Layout.SubNavigation">
19
+ {props.children}
20
+ </nav>
21
+ )
22
+ }
package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.types.ts ADDED
@@ -0,0 +1,5 @@
1
+ import type { FlexProps } from "../../../.."
2
+
3
+ export interface LayoutSubNavigationBaseProps {}
4
+
5
+ export type LayoutSubNavigationProps = FlexProps & LayoutSubNavigationBaseProps
package/components/Layout/components/LayoutSubNavigation/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { LayoutSubNavigation } from "./LayoutSubNavigation"
package/components/Layout/index.ts CHANGED
@@ -2,6 +2,7 @@ import type { LayoutComposition } from "./Layout.types"
2
2
  import { LayoutAside } from "./components/LayoutAside"
3
3
  import { LayoutMain } from "./components/LayoutMain"
4
4
  import { LayoutNavigation } from "./components/LayoutNavigation/LayoutNavigation"
5
+ import { LayoutSubNavigation } from "./components/LayoutSubNavigation"
5
6
  import { Layout as LC } from "./Layout"
6
7
  import type { LayoutAsideComposition } from "./components/LayoutAside/LayoutAside.types"
7
8
  import type { LayoutMainComposition } from "./components/LayoutMain/LayoutMain.types"
@@ -11,5 +12,6 @@ const LayoutComponent = LC as LayoutComposition
11
12
  LayoutComponent.Aside = LayoutAside as LayoutAsideComposition
12
13
  LayoutComponent.Main = LayoutMain as LayoutMainComposition
13
14
  LayoutComponent.Navigation = LayoutNavigation
15
+ LayoutComponent.SubNavigation = LayoutSubNavigation
14
16
 
15
17
  export { LayoutComponent as Layout }
package/components/Markdown/Markdown.module.css CHANGED
@@ -106,7 +106,7 @@
106
106
 
107
107
  /* Element: Link */
108
108
  .markdown a {
109
- color: var(--ui-text-orange);
109
+ color: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-blue));
110
110
 
111
111
  font-weight: var(--font-weight-medium);
112
112
  text-decoration: underline;
package/css/core.colors-helpers.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --bg: var(--ui-bg-gray);
7
7
 
8
8
  --text-disabled: var(--ui-text-disabled-gray);
9
- --text: var(--ui-text-gray);
9
+ --text: var(--ui-text-gray-tone);
10
10
 
11
11
  --border: var(--ui-border-gray);
12
12
  --border-hover: var(--ui-border-hover-gray);
@@ -38,7 +38,7 @@
38
38
  --bg: var(--ui-bg-purple);
39
39
 
40
40
  --text-disabled: var(--ui-text-disabled-purple);
41
- --text: var(--ui-text-purple);
41
+ --text: var(--ui-text-purple-tone);
42
42
 
43
43
  --border: var(--ui-border-purple);
44
44
  --border-hover: var(--ui-border-hover-purple);
@@ -70,7 +70,7 @@
70
70
  --bg: var(--ui-bg-blue);
71
71
 
72
72
  --text-disabled: var(--ui-text-disabled-blue);
73
- --text: var(--ui-text-blue);
73
+ --text: var(--ui-text-blue-tone);
74
74
 
75
75
  --border: var(--ui-border-blue);
76
76
  --border-hover: var(--ui-border-hover-blue);
@@ -102,7 +102,7 @@
102
102
  --bg: var(--ui-bg-aqua);
103
103
 
104
104
  --text-disabled: var(--ui-text-disabled-aqua);
105
- --text: var(--ui-text-aqua);
105
+ --text: var(--ui-text-aqua-tone);
106
106
 
107
107
  --border: var(--ui-border-aqua);
108
108
  --border-hover: var(--ui-border-hover-aqua);
@@ -134,7 +134,7 @@
134
134
  --bg: var(--ui-bg-green);
135
135
 
136
136
  --text-disabled: var(--ui-text-disabled-green);
137
- --text: var(--ui-text-green);
137
+ --text: var(--ui-text-green-tone);
138
138
 
139
139
  --border: var(--ui-border-green);
140
140
  --border-hover: var(--ui-border-hover-green);
@@ -166,7 +166,7 @@
166
166
  --bg: var(--ui-bg-olive);
167
167
 
168
168
  --text-disabled: var(--ui-text-disabled-olive);
169
- --text: var(--ui-text-olive);
169
+ --text: var(--ui-text-olive-tone);
170
170
 
171
171
  --border: var(--ui-border-olive);
172
172
  --border-hover: var(--ui-border-hover-olive);
@@ -198,7 +198,7 @@
198
198
  --bg: var(--ui-bg-yellow);
199
199
 
200
200
  --text-disabled: var(--ui-text-disabled-yellow);
201
- --text: var(--ui-text-yellow);
201
+ --text: var(--ui-text-yellow-tone);
202
202
 
203
203
  --border: var(--ui-border-yellow);
204
204
  --border-hover: var(--ui-border-hover-yellow);
@@ -230,7 +230,7 @@
230
230
  --bg: var(--ui-bg-orange);
231
231
 
232
232
  --text-disabled: var(--ui-text-disabled-orange);
233
- --text: var(--ui-text-orange);
233
+ --text: var(--ui-text-orange-tone);
234
234
 
235
235
  --border: var(--ui-border-orange);
236
236
  --border-hover: var(--ui-border-hover-orange);
@@ -262,7 +262,7 @@
262
262
  --bg: var(--ui-bg-red);
263
263
 
264
264
  --text-disabled: var(--ui-text-disabled-red);
265
- --text: var(--ui-text-red);
265
+ --text: var(--ui-text-red-tone);
266
266
 
267
267
  --border: var(--ui-border-red);
268
268
  --border-hover: var(--ui-border-hover-red);
@@ -294,7 +294,7 @@
294
294
  --bg: var(--ui-bg-pink);
295
295
 
296
296
  --text-disabled: var(--ui-text-disabled-pink);
297
- --text: var(--ui-text-pink);
297
+ --text: var(--ui-text-pink-tone);
298
298
 
299
299
  --border: var(--ui-border-pink);
300
300
  --border-hover: var(--ui-border-hover-pink);
package/css/core.colors.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  /* chroma */
3
3
  --ui-chroma: 0.228;
4
- --ui-chroma-soft: 0.072;
4
+ --ui-chroma-soft: 0.048;
5
5
  --ui-chroma-tone: 0.004;
6
6
 
7
7
  /* hue */
@@ -36,7 +36,8 @@
36
36
  --ui-bg-hover-gray: oklch(var(--ui-bg-hover-l) var(--ui-chroma-tone) var(--ui-gray));
37
37
  --ui-bg-active-gray: oklch(var(--ui-bg-active-l) var(--ui-chroma-tone) var(--ui-gray));
38
38
  --ui-bg-disabled-gray: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-gray));
39
- --ui-text-gray: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-gray));
39
+ --ui-text-gray-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-gray));
40
+ --ui-text-gray: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-gray));
40
41
  --ui-text-disabled-gray: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-gray));
41
42
 
42
43
  --ui-border-gray: oklch(var(--ui-border-l) var(--ui-chroma-tone) var(--ui-gray));
@@ -63,7 +64,8 @@
63
64
  --ui-bg-hover-blue: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-blue));
64
65
  --ui-bg-active-blue: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-blue));
65
66
  --ui-bg-disabled-blue: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-blue));
66
- --ui-text-blue: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-blue));
67
+ --ui-text-blue-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-blue));
68
+ --ui-text-blue: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-blue));
67
69
  --ui-text-disabled-blue: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-blue));
68
70
 
69
71
  --ui-border-blue: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-blue));
@@ -90,7 +92,8 @@
90
92
  --ui-bg-hover-purple: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-purple));
91
93
  --ui-bg-active-purple: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-purple));
92
94
  --ui-bg-disabled-purple: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-purple));
93
- --ui-text-purple: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-purple));
95
+ --ui-text-purple-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-purple));
96
+ --ui-text-purple: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-purple));
94
97
  --ui-text-disabled-purple: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-purple));
95
98
 
96
99
  --ui-border-purple: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-purple));
@@ -117,7 +120,8 @@
117
120
  --ui-bg-hover-pink: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-pink));
118
121
  --ui-bg-active-pink: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-pink));
119
122
  --ui-bg-disabled-pink: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-pink));
120
- --ui-text-pink: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-pink));
123
+ --ui-text-pink-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-pink));
124
+ --ui-text-pink: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-pink));
121
125
  --ui-text-disabled-pink: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-pink));
122
126
 
123
127
  --ui-border-pink: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-pink));
@@ -144,7 +148,8 @@
144
148
  --ui-bg-hover-red: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-red));
145
149
  --ui-bg-active-red: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-red));
146
150
  --ui-bg-disabled-red: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-red));
147
- --ui-text-red: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-red));
151
+ --ui-text-red-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-red));
152
+ --ui-text-red: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-red));
148
153
  --ui-text-disabled-red: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-red));
149
154
 
150
155
  --ui-border-red: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-red));
@@ -171,7 +176,8 @@
171
176
  --ui-bg-hover-orange: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-orange));
172
177
  --ui-bg-active-orange: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-orange));
173
178
  --ui-bg-disabled-orange: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-orange));
174
- --ui-text-orange: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-orange));
179
+ --ui-text-orange-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-orange));
180
+ --ui-text-orange: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-orange));
175
181
  --ui-text-disabled-orange: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-orange));
176
182
 
177
183
  --ui-border-orange: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-orange));
@@ -198,7 +204,8 @@
198
204
  --ui-bg-hover-yellow: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-yellow));
199
205
  --ui-bg-active-yellow: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-yellow));
200
206
  --ui-bg-disabled-yellow: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-yellow));
201
- --ui-text-yellow: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-yellow));
207
+ --ui-text-yellow-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-yellow));
208
+ --ui-text-yellow: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-yellow));
202
209
  --ui-text-disabled-yellow: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-yellow));
203
210
 
204
211
  --ui-border-yellow: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-yellow));
@@ -225,7 +232,8 @@
225
232
  --ui-bg-hover-olive: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-olive));
226
233
  --ui-bg-active-olive: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-olive));
227
234
  --ui-bg-disabled-olive: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-olive));
228
- --ui-text-olive: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-olive));
235
+ --ui-text-olive-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-olive));
236
+ --ui-text-olive: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-olive));
229
237
  --ui-text-disabled-olive: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-olive));
230
238
 
231
239
  --ui-border-olive: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-olive));
@@ -252,7 +260,8 @@
252
260
  --ui-bg-hover-green: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-green));
253
261
  --ui-bg-active-green: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-green));
254
262
  --ui-bg-disabled-green: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-green));
255
- --ui-text-green: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-green));
263
+ --ui-text-green-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-green));
264
+ --ui-text-green: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-green));
256
265
  --ui-text-disabled-green: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-green));
257
266
 
258
267
  --ui-border-green: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-green));
@@ -279,7 +288,8 @@
279
288
  --ui-bg-hover-aqua: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-aqua));
280
289
  --ui-bg-active-aqua: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-aqua));
281
290
  --ui-bg-disabled-aqua: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-aqua));
282
- --ui-text-aqua: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-aqua));
291
+ --ui-text-aqua-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-aqua));
292
+ --ui-text-aqua: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-aqua));
283
293
  --ui-text-disabled-aqua: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-aqua));
284
294
 
285
295
  --ui-border-aqua: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-aqua));
@@ -405,7 +415,6 @@
405
415
  --ui-border-soft-selected-l: 78%;
406
416
 
407
417
  /* element text lightness */
408
- --ui-text-l: 96%;
409
418
  --ui-text-soft-secondary-l: 48%;
410
419
  --ui-text-soft-l: 80%;
411
420
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@heliosgraphics/ui",
3
- "version": "2.0.0-alpha.69",
3
+ "version": "2.0.0-alpha.71",
4
4
  "type": "module",
5
5
  "author": "Chris Puska <chris@puska.org>",
6
6
  "private": false,