@stainless-api/ui-primitives 0.1.0-beta.7 → 0.1.0-beta.9

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 (22) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/package.json +6 -1
  3. package/src/components/Accordion.tsx +41 -0
  4. package/src/components/Button.tsx +1 -0
  5. package/src/components/DropdownButton.tsx +109 -0
  6. package/src/components/accordion.css +145 -0
  7. package/src/components/button.css +165 -135
  8. package/src/components/callout.css +57 -59
  9. package/src/components/dropdown-button.css +164 -0
  10. package/src/index.ts +2 -1
  11. package/src/scripts/dropdown-button.ts +55 -0
  12. package/src/scripts/index.ts +1 -0
  13. package/src/styles/layout.css +1 -1
  14. package/src/styles/scales.css +1 -1
  15. package/src/styles/starlight-compat.css +142 -134
  16. package/src/styles/swatches.css +2 -2
  17. package/src/styles/theme.css +2 -2
  18. package/src/styles/typography.css +128 -140
  19. package/src/styles.css +2 -1
  20. package/tsconfig.json +2 -6
  21. package/src/components/DetailsGroup.tsx +0 -17
  22. package/src/components/details.css +0 -124
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @stainless-api/ui-primitives
2
2
 
3
+ ## 0.1.0-beta.9
4
+
5
+ ### Patch Changes
6
+
7
+ - c96f895: Remove css layers, update sidebar styles, add new prose elements
8
+
9
+ ## 0.1.0-beta.8
10
+
11
+ ### Patch Changes
12
+
13
+ - d15a520: fix initialization of dropdown buttons
14
+
3
15
  ## 0.1.0-beta.7
4
16
 
5
17
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stainless-api/ui-primitives",
3
- "version": "0.1.0-beta.7",
3
+ "version": "0.1.0-beta.9",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -10,6 +10,11 @@
10
10
  "import": "./src/index.ts",
11
11
  "require": "./src/index.ts"
12
12
  },
13
+ "./scripts": {
14
+ "types": "./src/scripts/index.ts",
15
+ "import": "./src/scripts/index.ts",
16
+ "require": "./src/scripts/index.ts"
17
+ },
13
18
  "./styles.css": "./src/styles.css"
14
19
  },
15
20
  "types": "./src/index.ts",
package/src/components/Accordion.tsx ADDED
@@ -0,0 +1,41 @@
1
+ import React from 'react';
2
+ import clsx from 'clsx';
3
+
4
+ export type AccordionProps = React.ComponentProps<'details'>;
5
+
6
+ export function Accordion({ className, children, ...props }: AccordionProps) {
7
+ const classes = clsx('stl-ui-accordion', className);
8
+
9
+ return (
10
+ <details className={classes} {...props}>
11
+ {children}
12
+ </details>
13
+ );
14
+ }
15
+
16
+ function AccordionSummary({ children, className, ...props }: React.ComponentProps<'summary'>) {
17
+ const classes = clsx('stl-ui-accordion__summary', className);
18
+
19
+ return (
20
+ <summary className={classes} {...props}>
21
+ {children}
22
+ </summary>
23
+ );
24
+ }
25
+
26
+ Accordion.Summary = AccordionSummary;
27
+
28
+ function AccordionGroup({ className, children, ...props }: React.ComponentProps<'div'>) {
29
+ const classes = clsx('stl-ui-accordion-group', className);
30
+
31
+ // TODO: boolean `exclusive` prop assigns a unique `name` to each of the child <details> elements
32
+ // For now this can be handled by the user
33
+
34
+ return (
35
+ <div className={classes} {...props}>
36
+ {children}
37
+ </div>
38
+ );
39
+ }
40
+
41
+ Accordion.Group = AccordionGroup;
package/src/components/Button.tsx CHANGED
@@ -54,6 +54,7 @@ export function Button(props: ButtonProps) {
54
54
  'stl-ui-button--size-lg': props.size === 'lg',
55
55
  },
56
56
  'not-content',
57
+ 'stl-ui-not-prose',
57
58
  props.className,
58
59
  );
59
60
 
package/src/components/DropdownButton.tsx ADDED
@@ -0,0 +1,109 @@
1
+ import clsx from 'clsx';
2
+ import { ChevronsUpDown, ExternalLink } from 'lucide-react';
3
+
4
+ function PrimaryActionText({ children }: { children?: React.ReactNode }) {
5
+ return <span data-part="primary-action-text">{children}</span>;
6
+ }
7
+
8
+ function PrimaryAction({ children }: { children?: React.ReactNode }) {
9
+ return (
10
+ <button
11
+ type="button"
12
+ data-part="primary-action"
13
+ className="stl-ui-dropdown-button__button stl-ui-dropdown-button--action"
14
+ >
15
+ {children}
16
+ </button>
17
+ );
18
+ }
19
+
20
+ function Trigger() {
21
+ return (
22
+ <button
23
+ className="stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger"
24
+ aria-haspopup="listbox"
25
+ aria-expanded="false"
26
+ data-part="trigger"
27
+ >
28
+ <ChevronsUpDown size={16} />
29
+ </button>
30
+ );
31
+ }
32
+
33
+ function Menu({ children }: { children?: React.ReactNode }) {
34
+ return (
35
+ <div className="stl-ui-dropdown-button__menu" data-state="closed" data-part="menu">
36
+ {children}
37
+ </div>
38
+ );
39
+ }
40
+
41
+ function MenuItemIcon({ children }: { children?: React.ReactNode }) {
42
+ return (
43
+ <div className="stl-ui-dropdown-button__menu-item-icon" data-part="item-icon">
44
+ {children}
45
+ </div>
46
+ );
47
+ }
48
+
49
+ function MenuItemText({ children, subtle }: { children?: React.ReactNode; subtle?: boolean }) {
50
+ return (
51
+ <span
52
+ className={clsx(`stl-ui-dropdown-button__menu-item-text`, {
53
+ 'stl-ui-dropdown-button__menu-item-text--subtle': subtle,
54
+ })}
55
+ data-part="item-text"
56
+ >
57
+ {children}
58
+ </span>
59
+ );
60
+ }
61
+
62
+ function MenuItemTextSubtle({ children }: { children?: React.ReactNode }) {
63
+ return (
64
+ <span className="stl-ui-dropdown-button__menu-item-text-subtle" data-part="item-text-subtle">
65
+ {children}
66
+ </span>
67
+ );
68
+ }
69
+
70
+ function MenuItem({
71
+ children,
72
+ value,
73
+ isExternalLink,
74
+ }: {
75
+ children?: React.ReactNode;
76
+ value: string;
77
+ isExternalLink?: boolean;
78
+ }) {
79
+ return (
80
+ <div className="stl-ui-dropdown-button__menu-item" data-part="item" data-value={value}>
81
+ <div className="stl-ui-dropdown-button__menu-item-content">{children}</div>
82
+ {isExternalLink && (
83
+ <div
84
+ className="stl-ui-dropdown-button__menu-item-external-link-icon"
85
+ data-part="item-external-link-icon"
86
+ >
87
+ <ExternalLink size={16} />
88
+ </div>
89
+ )}
90
+ </div>
91
+ );
92
+ }
93
+
94
+ export function DropdownButton({ id, children }: { id: string; children?: React.ReactNode }) {
95
+ return (
96
+ <div className="stl-ui-dropdown-button stl-ui-not-prose not-content" id={id}>
97
+ {children}
98
+ </div>
99
+ );
100
+ }
101
+
102
+ DropdownButton.Menu = Menu;
103
+ DropdownButton.MenuItem = MenuItem;
104
+ DropdownButton.MenuItemIcon = MenuItemIcon;
105
+ DropdownButton.MenuItemText = MenuItemText;
106
+ DropdownButton.MenuItemTextSubtle = MenuItemTextSubtle;
107
+ DropdownButton.PrimaryAction = PrimaryAction;
108
+ DropdownButton.PrimaryActionText = PrimaryActionText;
109
+ 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
  }