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

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 (20) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/package.json +1 -1
  3. package/src/components/Accordion.tsx +41 -0
  4. package/src/components/Button.tsx +1 -0
  5. package/src/components/DropdownButton.tsx +24 -13
  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 +33 -31
  10. package/src/index.ts +1 -1
  11. package/src/styles/layout.css +1 -1
  12. package/src/styles/scales.css +1 -1
  13. package/src/styles/starlight-compat.css +142 -107
  14. package/src/styles/swatches.css +2 -2
  15. package/src/styles/theme.css +2 -2
  16. package/src/styles/typography.css +117 -144
  17. package/src/styles.css +1 -1
  18. package/tsconfig.json +2 -6
  19. package/src/components/DetailsGroup.tsx +0 -17
  20. package/src/components/details.css +0 -126
package/CHANGELOG.md CHANGED
@@ -1,5 +1,59 @@
1
1
  # @stainless-api/ui-primitives
2
2
 
3
+ ## 0.1.0-beta.10
4
+
5
+ ### Patch Changes
6
+
7
+ - 3e44a9c: Reduce specificity on prose elements
8
+
9
+ ## 0.1.0-beta.9
10
+
11
+ ### Patch Changes
12
+
13
+ - c96f895: Remove css layers, update sidebar styles, add new prose elements
14
+
15
+ ## 0.1.0-beta.8
16
+
17
+ ### Patch Changes
18
+
19
+ - d15a520: fix initialization of dropdown buttons
20
+
21
+ ## 0.1.0-beta.7
22
+
23
+ ### Patch Changes
24
+
25
+ - 34e7c61: verify dependents update
26
+
27
+ ## 0.1.0-beta.6
28
+
29
+ ### Minor Changes
30
+
31
+ - f664b4d: Creating design system css variables, markdown styles, and typography improvements
32
+
33
+ ### Patch Changes
34
+
35
+ - 34cbd12: verify publishing
36
+
37
+ ## 0.1.0-beta.5
38
+
39
+ ### Patch Changes
40
+
41
+ - e7a2a96: verifying dependent packages update
42
+
43
+ ## 0.1.0-beta.4
44
+
45
+ ### Patch Changes
46
+
47
+ - 2853ae8: fixing dependency structure
48
+
49
+ ## 0.1.0-beta.3
50
+
51
+ ### Patch Changes
52
+
53
+ - 870af8d: verify dependent packages update
54
+
55
+ ## 0.1.0-beta.2
56
+
3
57
  ## 0.1.0-beta.1
4
58
 
5
59
  ### 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.1",
3
+ "version": "0.1.0-beta.10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
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 CHANGED
@@ -1,10 +1,11 @@
1
+ import clsx from 'clsx';
1
2
  import { ChevronsUpDown, ExternalLink } from 'lucide-react';
2
3
 
3
- export function DropdownButtonPrimaryActionText({ children }: { children?: React.ReactNode }) {
4
+ function PrimaryActionText({ children }: { children?: React.ReactNode }) {
4
5
  return <span data-part="primary-action-text">{children}</span>;
5
6
  }
6
7
 
7
- export function DropdownButtonPrimaryAction({ children }: { children?: React.ReactNode }) {
8
+ function PrimaryAction({ children }: { children?: React.ReactNode }) {
8
9
  return (
9
10
  <button
10
11
  type="button"
@@ -16,7 +17,7 @@ export function DropdownButtonPrimaryAction({ children }: { children?: React.Rea
16
17
  );
17
18
  }
18
19
 
19
- export function DropdownButtonTrigger() {
20
+ function Trigger() {
20
21
  return (
21
22
  <button
22
23
  className="stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger"
@@ -29,7 +30,7 @@ export function DropdownButtonTrigger() {
29
30
  );
30
31
  }
31
32
 
32
- export function DropdownButtonMenu({ children }: { children?: React.ReactNode }) {
33
+ function Menu({ children }: { children?: React.ReactNode }) {
33
34
  return (
34
35
  <div className="stl-ui-dropdown-button__menu" data-state="closed" data-part="menu">
35
36
  {children}
@@ -37,7 +38,7 @@ export function DropdownButtonMenu({ children }: { children?: React.ReactNode })
37
38
  );
38
39
  }
39
40
 
40
- export function DropdownButtonItemIcon({ children }: { children?: React.ReactNode }) {
41
+ function MenuItemIcon({ children }: { children?: React.ReactNode }) {
41
42
  return (
42
43
  <div className="stl-ui-dropdown-button__menu-item-icon" data-part="item-icon">
43
44
  {children}
@@ -45,15 +46,20 @@ export function DropdownButtonItemIcon({ children }: { children?: React.ReactNod
45
46
  );
46
47
  }
47
48
 
48
- export function DropdownButtonItemText({ children }: { children?: React.ReactNode }) {
49
+ function MenuItemText({ children, subtle }: { children?: React.ReactNode; subtle?: boolean }) {
49
50
  return (
50
- <span className="stl-ui-dropdown-button__menu-item-text" data-part="item-text">
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
+ >
51
57
  {children}
52
58
  </span>
53
59
  );
54
60
  }
55
61
 
56
- export function DropdownButtonItemTextSubtle({ children }: { children?: React.ReactNode }) {
62
+ function MenuItemTextSubtle({ children }: { children?: React.ReactNode }) {
57
63
  return (
58
64
  <span className="stl-ui-dropdown-button__menu-item-text-subtle" data-part="item-text-subtle">
59
65
  {children}
@@ -61,7 +67,7 @@ export function DropdownButtonItemTextSubtle({ children }: { children?: React.Re
61
67
  );
62
68
  }
63
69
 
64
- export function DropdownButtonItem({
70
+ function MenuItem({
65
71
  children,
66
72
  value,
67
73
  isExternalLink,
@@ -85,10 +91,6 @@ export function DropdownButtonItem({
85
91
  );
86
92
  }
87
93
 
88
- export function DropdownButtonDivider() {
89
- return <div className="stl-ui-dropdown-button__divider" data-part="divider" />;
90
- }
91
-
92
94
  export function DropdownButton({ id, children }: { id: string; children?: React.ReactNode }) {
93
95
  return (
94
96
  <div className="stl-ui-dropdown-button stl-ui-not-prose not-content" id={id}>
@@ -96,3 +98,12 @@ export function DropdownButton({ id, children }: { id: string; children?: React.
96
98
  </div>
97
99
  );
98
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
  }