@stainless-api/ui-primitives 0.1.0-beta.1 → 0.1.0-beta.11

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 (44) hide show
  1. package/.turbo/turbo-build.log +5 -0
  2. package/CHANGELOG.md +60 -0
  3. package/dist/components/Accordion.d.ts +10 -0
  4. package/dist/components/Accordion.js +19 -0
  5. package/dist/components/Accordion.js.map +1 -0
  6. package/dist/components/Button.d.ts +27 -0
  7. package/dist/components/Button.js +33 -0
  8. package/dist/components/Button.js.map +1 -0
  9. package/dist/components/Callout.d.ts +8 -0
  10. package/dist/components/Callout.js +16 -0
  11. package/dist/components/Callout.js.map +1 -0
  12. package/dist/components/DropdownButton.d.ts +21 -0
  13. package/dist/components/DropdownButton.js +37 -0
  14. package/dist/components/DropdownButton.js.map +1 -0
  15. package/dist/index.d.ts +4 -0
  16. package/dist/index.js +5 -0
  17. package/dist/index.js.map +1 -0
  18. package/dist/scripts/dropdown-button.d.ts +5 -0
  19. package/dist/scripts/dropdown-button.js +43 -0
  20. package/dist/scripts/dropdown-button.js.map +1 -0
  21. package/dist/scripts/index.d.ts +1 -0
  22. package/dist/scripts/index.js +2 -0
  23. package/dist/scripts/index.js.map +1 -0
  24. package/dist/tsconfig.tsbuildinfo +1 -0
  25. package/package.json +6 -6
  26. package/src/components/Accordion.tsx +41 -0
  27. package/src/components/Button.tsx +1 -0
  28. package/src/components/DropdownButton.tsx +66 -40
  29. package/src/components/accordion.css +145 -0
  30. package/src/components/button.css +165 -135
  31. package/src/components/callout.css +57 -59
  32. package/src/components/dropdown-button.css +33 -31
  33. package/src/index.ts +1 -1
  34. package/src/styles/layout.css +3 -1
  35. package/src/styles/scales.css +1 -1
  36. package/src/styles/starlight-compat.css +138 -107
  37. package/src/styles/swatches.css +2 -2
  38. package/src/styles/theme.css +2 -2
  39. package/src/styles/typography.css +109 -148
  40. package/src/styles.css +1 -1
  41. package/tsconfig.json +2 -6
  42. package/.env +0 -1
  43. package/src/components/DetailsGroup.tsx +0 -17
  44. package/src/components/details.css +0 -126
package/src/components/DropdownButton.tsx CHANGED
@@ -1,77 +1,93 @@
1
+ import clsx from 'clsx';
1
2
  import { ChevronsUpDown, ExternalLink } from 'lucide-react';
3
+ import type { ComponentPropsWithoutRef } from 'react';
2
4
 
3
- export function DropdownButtonPrimaryActionText({ children }: { children?: React.ReactNode }) {
5
+ function PrimaryActionText({ children }: { children?: React.ReactNode }) {
4
6
  return <span data-part="primary-action-text">{children}</span>;
5
7
  }
6
8
 
7
- export function DropdownButtonPrimaryAction({ children }: { children?: React.ReactNode }) {
9
+ function PrimaryAction({ className, ...props }: ComponentPropsWithoutRef<'button'>) {
8
10
  return (
9
11
  <button
10
- type="button"
11
12
  data-part="primary-action"
12
- className="stl-ui-dropdown-button__button stl-ui-dropdown-button--action"
13
- >
14
- {children}
15
- </button>
13
+ {...props}
14
+ className={clsx('stl-ui-dropdown-button__button stl-ui-dropdown-button--action', className)}
15
+ />
16
16
  );
17
17
  }
18
18
 
19
- export function DropdownButtonTrigger() {
19
+ function Trigger({ className, ...props }: ComponentPropsWithoutRef<'button'>) {
20
20
  return (
21
21
  <button
22
- className="stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger"
23
22
  aria-haspopup="listbox"
24
23
  aria-expanded="false"
25
24
  data-part="trigger"
25
+ {...props}
26
+ className={clsx('stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger', className)}
26
27
  >
27
28
  <ChevronsUpDown size={16} />
28
29
  </button>
29
30
  );
30
31
  }
31
32
 
32
- export function DropdownButtonMenu({ children }: { children?: React.ReactNode }) {
33
- return (
34
- <div className="stl-ui-dropdown-button__menu" data-state="closed" data-part="menu">
35
- {children}
36
- </div>
37
- );
38
- }
39
-
40
- export function DropdownButtonItemIcon({ children }: { children?: React.ReactNode }) {
33
+ function Menu({ className, ...props }: ComponentPropsWithoutRef<'div'>) {
41
34
  return (
42
- <div className="stl-ui-dropdown-button__menu-item-icon" data-part="item-icon">
43
- {children}
44
- </div>
35
+ <div
36
+ data-state="closed"
37
+ data-part="menu"
38
+ {...props}
39
+ className={clsx('stl-ui-dropdown-button__menu', className)}
40
+ />
45
41
  );
46
42
  }
47
43
 
48
- export function DropdownButtonItemText({ children }: { children?: React.ReactNode }) {
44
+ function MenuItemIcon({ className, ...props }: ComponentPropsWithoutRef<'div'>) {
49
45
  return (
50
- <span className="stl-ui-dropdown-button__menu-item-text" data-part="item-text">
51
- {children}
52
- </span>
46
+ <div
47
+ data-part="item-icon"
48
+ {...props}
49
+ className={clsx('stl-ui-dropdown-button__menu-item-icon', className)}
50
+ />
53
51
  );
54
52
  }
55
53
 
56
- export function DropdownButtonItemTextSubtle({ children }: { children?: React.ReactNode }) {
54
+ function MenuItemText({
55
+ className,
56
+ subtle,
57
+ ...props
58
+ }: ComponentPropsWithoutRef<'span'> & { subtle?: boolean }) {
57
59
  return (
58
- <span className="stl-ui-dropdown-button__menu-item-text-subtle" data-part="item-text-subtle">
59
- {children}
60
- </span>
60
+ <span
61
+ data-part="item-text"
62
+ className={clsx(
63
+ `stl-ui-dropdown-button__menu-item-text`,
64
+ {
65
+ 'stl-ui-dropdown-button__menu-item-text--subtle': subtle,
66
+ },
67
+ className,
68
+ )}
69
+ {...props}
70
+ />
61
71
  );
62
72
  }
63
73
 
64
- export function DropdownButtonItem({
74
+ function MenuItem({
65
75
  children,
66
76
  value,
67
77
  isExternalLink,
68
- }: {
78
+ ...props
79
+ }: ComponentPropsWithoutRef<'div'> & {
69
80
  children?: React.ReactNode;
70
81
  value: string;
71
82
  isExternalLink?: boolean;
72
83
  }) {
73
84
  return (
74
- <div className="stl-ui-dropdown-button__menu-item" data-part="item" data-value={value}>
85
+ <div
86
+ data-part="item"
87
+ data-value={value}
88
+ {...props}
89
+ className={clsx('stl-ui-dropdown-button__menu-item', props.className)}
90
+ >
75
91
  <div className="stl-ui-dropdown-button__menu-item-content">{children}</div>
76
92
  {isExternalLink && (
77
93
  <div
@@ -85,14 +101,24 @@ export function DropdownButtonItem({
85
101
  );
86
102
  }
87
103
 
88
- export function DropdownButtonDivider() {
89
- return <div className="stl-ui-dropdown-button__divider" data-part="divider" />;
90
- }
91
-
92
- export function DropdownButton({ id, children }: { id: string; children?: React.ReactNode }) {
104
+ export function DropdownButton({
105
+ id,
106
+ className,
107
+ ...props
108
+ }: ComponentPropsWithoutRef<'div'> & { id: string }) {
93
109
  return (
94
- <div className="stl-ui-dropdown-button stl-ui-not-prose not-content" id={id}>
95
- {children}
96
- </div>
110
+ <div
111
+ id={id}
112
+ {...props}
113
+ className={clsx('stl-ui-dropdown-button stl-ui-not-prose not-content', className)}
114
+ />
97
115
  );
98
116
  }
117
+
118
+ DropdownButton.Menu = Menu;
119
+ DropdownButton.MenuItem = MenuItem;
120
+ DropdownButton.MenuItemIcon = MenuItemIcon;
121
+ DropdownButton.MenuItemText = MenuItemText;
122
+ DropdownButton.PrimaryAction = PrimaryAction;
123
+ DropdownButton.PrimaryActionText = PrimaryActionText;
124
+ DropdownButton.Trigger = Trigger;
package/src/components/accordion.css ADDED
@@ -0,0 +1,145 @@
1
+ /* revert starlight details styles */
2
+ @layer starlight.content {
3
+ /* artificially increase specificity to outcompete selectors in the same layer whose styles we want to revert */
4
+ .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
5
+ details,
6
+ summary,
7
+ summary::before,
8
+ summary::marker {
9
+ all: revert-layer;
10
+ }
11
+ }
12
+ }
13
+
14
+ .stl-ui-accordion {
15
+ --stl-ui-accordion-padding: 12px;
16
+ --stl-ui-accordion-content-padding-bottom: 4px;
17
+ --stl-ui-accordion-marker-size: 1em;
18
+ --stl-ui-accordion-marker-margin: calc((1lh - var(--stl-ui-accordion-marker-size)) / 2);
19
+ --stl-ui-accordion-row-gap: 8px;
20
+ --stl-ui-accordion-summary-column-gap: 8px;
21
+ --stl-ui-accordion-border-radius: var(--stl-ui-layout-border-radius);
22
+ --stl-ui-accordion-hover-film-color: oklch(from var(--stl-ui-foreground) l c h / 0.03);
23
+ /* left inset to make content line up with summary content (after chevron) */
24
+ --stl-ui--internal--accordion-padding-start: calc(
25
+ var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-marker-size) +
26
+ var(--stl-ui-accordion-marker-margin) * 2 + var(--stl-ui-accordion-summary-column-gap)
27
+ );
28
+
29
+ background-color: var(--stl-ui-card-background);
30
+ border: 1px solid var(--stl-ui-border);
31
+ border-radius: var(--stl-ui-accordion-border-radius);
32
+ font-size: var(--stl-ui-typography-text-body);
33
+
34
+ padding: var(--stl-ui-accordion-padding);
35
+ /* indent content to line up with left edge of summary content */
36
+ padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
37
+
38
+ & > .stl-ui-accordion__summary {
39
+ display: block;
40
+ list-style: none;
41
+
42
+ /* summary extends to the edges of the element in order to increase click target */
43
+ padding: var(--stl-ui-accordion-padding);
44
+ padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
45
+ margin: calc(-1 * var(--stl-ui-accordion-padding));
46
+ margin-inline-start: calc(-1 * var(--stl-ui--internal--accordion-padding-start));
47
+
48
+ cursor: pointer;
49
+ font-weight: 500;
50
+
51
+ border-radius: var(--stl-ui-accordion-border-radius);
52
+
53
+ &::before {
54
+ content: '';
55
+ width: var(--stl-ui-accordion-marker-size);
56
+ height: var(--stl-ui-accordion-marker-size);
57
+ margin: var(--stl-ui-accordion-marker-margin);
58
+ background-color: currentColor;
59
+ display: block;
60
+ position: absolute;
61
+ --stl-ui-accordion--internal--marker-width: calc(
62
+ var(--stl-ui-accordion-marker-size) + var(--stl-ui-accordion-marker-margin) * 2
63
+ );
64
+ --stl-ui-accordion--internal--summary-marker-transform: translateX(
65
+ calc(
66
+ -1 * var(--stl-ui-accordion--internal--marker-width) - var(--stl-ui-accordion-summary-column-gap)
67
+ )
68
+ );
69
+ transform: var(--stl-ui-accordion--internal--summary-marker-transform);
70
+
71
+ --lucide-chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==');
72
+ mask-image: var(--lucide-chevron-right);
73
+ mask-size: contain;
74
+ mask-repeat: no-repeat;
75
+
76
+ transition: transform 0.1s ease-out;
77
+ }
78
+
79
+ & > :first-child {
80
+ margin-top: 0;
81
+ }
82
+ }
83
+
84
+ &[open] {
85
+ border-color: var(--stl-ui-border-emphasis);
86
+ padding-bottom: calc(var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-content-padding-bottom));
87
+
88
+ & > .stl-ui-accordion__summary {
89
+ /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
90
+ --stl-ui--internal--summary-padding-bottom: min(
91
+ var(--stl-ui-accordion-padding),
92
+ var(--stl-ui-accordion-row-gap)
93
+ );
94
+ padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
95
+ margin-bottom: calc(var(--stl-ui-accordion-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
96
+ border-bottom-left-radius: 0;
97
+ border-bottom-right-radius: 0;
98
+
99
+ &::before {
100
+ transform: var(--stl-ui-accordion--internal--summary-marker-transform) rotate(90deg);
101
+ }
102
+ }
103
+ }
104
+
105
+ &:has(> .stl-ui-accordion__summary:hover) {
106
+ background-image: linear-gradient(
107
+ to bottom,
108
+ var(--stl-ui-accordion-hover-film-color),
109
+ var(--stl-ui-accordion-hover-film-color)
110
+ );
111
+ border-color: var(--stl-ui-border-emphasis);
112
+ }
113
+
114
+ & > .stl-ui-accordion__summary + * {
115
+ margin-top: 0;
116
+ }
117
+ }
118
+
119
+ .stl-ui-accordion-group {
120
+ & > .stl-ui-accordion:has(+ .stl-ui-accordion) {
121
+ border-bottom-left-radius: 0;
122
+ border-bottom-right-radius: 0;
123
+ & > .stl-ui-accordion__summary {
124
+ border-bottom-left-radius: 0;
125
+ border-bottom-right-radius: 0;
126
+ }
127
+ }
128
+
129
+ & > .stl-ui-accordion + .stl-ui-accordion {
130
+ margin-top: 0;
131
+ border-top-width: 0;
132
+ border-top-left-radius: 0;
133
+ border-top-right-radius: 0;
134
+
135
+ & > .stl-ui-accordion__summary {
136
+ border-top-left-radius: 0;
137
+ border-top-right-radius: 0;
138
+ }
139
+ }
140
+
141
+ .stl-ui-accordion:not(:is([open], :hover)) + .stl-ui-accordion:is([open], :hover) {
142
+ border-top-width: 1px;
143
+ margin-top: -1px;
144
+ }
145
+ }
package/src/components/button.css CHANGED
@@ -1,157 +1,187 @@
1
- @layer stl-ui {
2
- .stl-ui-button {
3
- --stl-ui-button-color: var(--stl-ui-inverse-foreground);
4
- --stl-ui-button-background-color: var(--stl-ui-inverse-background);
5
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-inverse-background) l c h / 0.9);
6
-
7
- --stl-ui-button-border-color: transparent;
8
- --stl-ui-button-border-color-hover: transparent;
9
-
10
- --stl-ui-button-height: 32px;
11
- --stl-ui-button-padding: 8px 10px;
12
- --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-sml);
13
- --stl-ui-button-line-height: 150%;
14
- --stl-ui-button-font-weight: 500;
15
- --stl-ui-button-font-size: var(--stl-ui-type-scale-text-sm);
16
- --stl-ui-button-font-family: var(--stl-ui-typography-font);
17
-
18
- cursor: pointer;
19
- display: inline-flex;
20
- align-items: center;
21
- justify-content: center;
22
- gap: 2px;
23
- white-space: nowrap;
24
- flex-shrink: 0;
25
-
26
- height: var(--stl-ui-button-height);
27
- padding: var(--stl-ui-button-padding);
28
- border-radius: var(--stl-ui-button-border-radius);
29
- line-height: var(--stl-ui-button-line-height);
30
- font-weight: var(--stl-ui-button-font-weight);
31
- font-size: var(--stl-ui-button-font-size);
32
-
33
- border: 1px solid var(--stl-ui-button-border-color);
34
- font-family: var(--stl-ui-button-font-family);
35
-
36
- color: var(--stl-ui-button-color);
37
- background-color: var(--stl-ui-button-background-color);
38
-
39
- &:hover {
40
- background-color: var(--stl-ui-button-background-color-hover);
41
- border-color: var(--stl-ui-button-border-color-hover);
42
- }
1
+ .stl-ui-button {
2
+ --stl-ui-button-color: var(--stl-ui-inverse-foreground);
3
+ --stl-ui-button-background-color: var(--stl-ui-inverse-background);
4
+ --stl-ui-button-background-color-hover: color-mix(
5
+ in oklch,
6
+ var(--stl-ui-inverse-background) 90%,
7
+ var(--stl-ui-background)
8
+ );
9
+
10
+ --stl-ui-button-border-color: transparent;
11
+ --stl-ui-button-border-color-hover: transparent;
12
+
13
+ --stl-ui-button-height: 32px;
14
+ --stl-ui-button-padding: 8px 10px;
15
+ --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-sml);
16
+ --stl-ui-button-line-height: 150%;
17
+ --stl-ui-button-font-weight: 500;
18
+ --stl-ui-button-font-size: var(--stl-ui-type-scale-text-sm);
19
+ --stl-ui-button-font-family: var(--stl-ui-typography-font);
20
+
21
+ cursor: pointer;
22
+ display: inline-flex;
23
+ align-items: center;
24
+ justify-content: center;
25
+ gap: 2px;
26
+ white-space: nowrap;
27
+ flex-shrink: 0;
28
+
29
+ height: var(--stl-ui-button-height);
30
+ padding: var(--stl-ui-button-padding);
31
+ border-radius: var(--stl-ui-button-border-radius);
32
+ line-height: var(--stl-ui-button-line-height);
33
+ font-weight: var(--stl-ui-button-font-weight);
34
+ font-size: var(--stl-ui-button-font-size);
35
+
36
+ border: 1px solid var(--stl-ui-button-border-color);
37
+ font-family: var(--stl-ui-button-font-family);
38
+
39
+ color: var(--stl-ui-button-color);
40
+ background-color: var(--stl-ui-button-background-color);
41
+
42
+ &:hover {
43
+ background-color: var(--stl-ui-button-background-color-hover);
44
+ border-color: var(--stl-ui-button-border-color-hover);
43
45
  }
46
+ }
44
47
 
45
- /* --- COLOR VARIANTS --- */
46
- .stl-ui-button--accent {
47
- --stl-ui-button-color: var(--stl-ui-accent-foreground);
48
- --stl-ui-button-background-color: var(--stl-ui-accent-background);
49
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-accent-background) l c h / 0.9);
50
- }
48
+ /* --- COLOR VARIANTS --- */
49
+ .stl-ui-button--accent {
50
+ --stl-ui-button-color: var(--stl-ui-accent-foreground);
51
+ --stl-ui-button-background-color: var(--stl-ui-accent-background);
52
+ --stl-ui-button-background-color-hover: color-mix(
53
+ in oklch,
54
+ var(--stl-ui-accent-background) 90%,
55
+ var(--stl-ui-inverse-foreground)
56
+ );
57
+ }
51
58
 
52
- .stl-ui-button--accent-muted {
53
- --stl-ui-button-color: var(--stl-ui-accent-muted-foreground);
54
- --stl-ui-button-background-color: var(--stl-ui-accent-muted-background);
55
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-accent-background) l c h / 0.1);
56
- }
59
+ .stl-ui-button--accent-muted {
60
+ --stl-ui-button-color: var(--stl-ui-accent-muted-foreground);
61
+ --stl-ui-button-background-color: var(--stl-ui-accent-muted-background);
62
+ --stl-ui-button-background-color-hover: color-mix(
63
+ in oklch,
64
+ var(--stl-ui-accent-background) 10%,
65
+ var(--stl-ui-inverse-foreground)
66
+ );
67
+ }
57
68
 
58
- .stl-ui-button--muted {
59
- --stl-ui-button-color: var(--stl-ui-foreground);
60
- --stl-ui-button-background-color: var(--stl-ui-muted-background);
61
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.1);
62
- }
69
+ .stl-ui-button--muted {
70
+ --stl-ui-button-color: var(--stl-ui-foreground);
71
+ --stl-ui-button-background-color: var(--stl-ui-muted-background);
72
+ --stl-ui-button-background-color-hover: color-mix(
73
+ in oklch,
74
+ var(--stl-ui-foreground) 10%,
75
+ var(--stl-ui-inverse-foreground)
76
+ );
77
+ }
63
78
 
64
- .stl-ui-button--outline {
65
- --stl-ui-button-color: var(--stl-ui-foreground);
66
- --stl-ui-button-background-color: var(--stl-ui-card-background);
67
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.05);
68
- --stl-ui-button-border-color: var(--stl-ui-border);
69
- --stl-ui-button-border-color-hover: var(--stl-ui-border-emphasis);
70
- }
79
+ .stl-ui-button--outline {
80
+ --stl-ui-button-color: var(--stl-ui-foreground);
81
+ --stl-ui-button-background-color: var(--stl-ui-card-background);
82
+ --stl-ui-button-background-color-hover: color-mix(
83
+ in oklch,
84
+ var(--stl-ui-foreground) 5%,
85
+ var(--stl-ui-inverse-foreground)
86
+ );
87
+ --stl-ui-button-border-color: var(--stl-ui-border);
88
+ --stl-ui-button-border-color-hover: var(--stl-ui-border-emphasis);
89
+ }
71
90
 
72
- .stl-ui-button--ghost {
73
- --stl-ui-button-color: var(--stl-ui-foreground);
74
- --stl-ui-button-background-color: transparent;
75
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.05);
76
- }
91
+ .stl-ui-button--ghost {
92
+ --stl-ui-button-color: var(--stl-ui-foreground);
93
+ --stl-ui-button-background-color: transparent;
94
+ --stl-ui-button-background-color-hover: color-mix(
95
+ in oklch,
96
+ var(--stl-ui-foreground) 5%,
97
+ var(--stl-ui-inverse-foreground)
98
+ );
99
+ }
77
100
 
78
- .stl-ui-button--success {
79
- --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
80
- --stl-ui-button-background-color: var(--stl-ui-swatch-green-base);
81
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-swatch-green-base) l c h / 0.9);
82
- }
101
+ .stl-ui-button--success {
102
+ --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
103
+ --stl-ui-button-background-color: var(--stl-ui-swatch-green-base);
104
+ --stl-ui-button-background-color-hover: color-mix(
105
+ in oklch,
106
+ var(--stl-ui-swatch-green-base) 90%,
107
+ var(--stl-ui-inverse-foreground)
108
+ );
109
+ }
83
110
 
84
- .stl-ui-button--destructive {
85
- --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
86
- --stl-ui-button-background-color: var(--stl-ui-swatch-red-base);
87
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-swatch-red-base) l c h / 0.9);
88
- }
111
+ .stl-ui-button--destructive {
112
+ --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
113
+ --stl-ui-button-background-color: var(--stl-ui-swatch-red-base);
114
+ --stl-ui-button-background-color-hover: color-mix(
115
+ in oklch,
116
+ var(--stl-ui-swatch-red-base) 90%,
117
+ var(--stl-ui-inverse-foreground)
118
+ );
119
+ }
89
120
 
90
- /* --- SIZE VARIANTS --- */
91
- .stl-ui-button--size-sm {
92
- --stl-ui-button-height: 24px;
93
- --stl-ui-button-padding: 0 6px;
94
- --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-xs);
95
- --stl-ui-button-line-height: 100%;
96
- --stl-ui-button-font-weight: 500;
97
- --stl-ui-button-font-size: var(--stl-ui-typography-text-body-xs);
98
- }
121
+ /* --- SIZE VARIANTS --- */
122
+ .stl-ui-button--size-sm {
123
+ --stl-ui-button-height: 24px;
124
+ --stl-ui-button-padding: 0 6px;
125
+ --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-xs);
126
+ --stl-ui-button-line-height: 100%;
127
+ --stl-ui-button-font-weight: 500;
128
+ --stl-ui-button-font-size: var(--stl-ui-typography-text-body-xs);
129
+ }
99
130
 
100
- .stl-ui-button--size-lg {
101
- --stl-ui-button-height: 40px;
102
- --stl-ui-button-padding: 8px 14px;
103
- --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius);
104
- --stl-ui-button-line-height: 150%;
105
- --stl-ui-button-font-weight: 500;
106
- --stl-ui-button-font-size: var(--stl-ui-typography-text-body);
107
- }
131
+ .stl-ui-button--size-lg {
132
+ --stl-ui-button-height: 40px;
133
+ --stl-ui-button-padding: 8px 14px;
134
+ --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius);
135
+ --stl-ui-button-line-height: 150%;
136
+ --stl-ui-button-font-weight: 500;
137
+ --stl-ui-button-font-size: var(--stl-ui-typography-text-body);
138
+ }
108
139
 
109
- /* --- ICONS --- */
110
- .stl-ui-button__icon {
111
- flex-shrink: 0;
112
- display: flex;
113
- align-items: center;
114
- justify-content: center;
115
-
116
- svg {
117
- margin-top: 0;
118
- }
119
- }
140
+ /* --- ICONS --- */
141
+ .stl-ui-button__icon {
142
+ flex-shrink: 0;
143
+ display: flex;
144
+ align-items: center;
145
+ justify-content: center;
120
146
 
121
- /* Left Icon */
122
- .stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
123
- margin-left: -4px;
124
- margin-right: 4px;
147
+ svg {
148
+ margin-top: 0;
125
149
  }
150
+ }
126
151
 
127
- .stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
128
- /* Right Icon */
129
- margin-right: -4px;
130
- margin-left: 4px;
152
+ /* Left Icon */
153
+ .stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
154
+ margin-left: -4px;
155
+ margin-right: 4px;
156
+ }
157
+
158
+ .stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
159
+ /* Right Icon */
160
+ margin-right: -4px;
161
+ margin-left: 4px;
131
162
 
132
- /* Right & Left Icon */
133
- &:first-child {
134
- margin-left: -4px;
135
- margin-right: 4px;
136
- }
163
+ /* Right & Left Icon */
164
+ &:first-child {
165
+ margin-left: -4px;
166
+ margin-right: 4px;
137
167
  }
168
+ }
138
169
 
139
- /* Only Icon */
140
- .stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(
141
- .stl-ui-button__icon:first-child
142
- ) {
143
- width: var(--stl-ui-button-height);
170
+ /* Only Icon */
171
+ .stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(
172
+ .stl-ui-button__icon:first-child
173
+ ) {
174
+ width: var(--stl-ui-button-height);
144
175
 
145
- .stl-ui-button__icon {
146
- margin-left: -4px;
147
- margin-right: -4px;
148
- }
176
+ .stl-ui-button__icon {
177
+ margin-left: -4px;
178
+ margin-right: -4px;
149
179
  }
180
+ }
150
181
 
151
- /* --- LINKS --- */
182
+ /* --- LINKS --- */
152
183
 
153
- a.stl-ui-button {
154
- text-decoration: none;
155
- text-align: center;
156
- }
184
+ a.stl-ui-button {
185
+ text-decoration: none;
186
+ text-align: center;
157
187
  }