@cas-smartdesign/button 5.4.0 → 7.0.0

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 (18) hide show
  1. package/dist/button.d.ts +13 -7
  2. package/dist/button.d.ts.map +1 -0
  3. package/dist/button.mjs +111 -188
  4. package/dist/button.mjs.map +1 -1
  5. package/dist/docs/created_from_source.js +1 -1
  6. package/dist/docs/doc.css +1 -1
  7. package/dist/docs/doc.mjs +404 -184
  8. package/dist/docs/index.html +1 -4
  9. package/dist/docs/new.svg +2 -5
  10. package/npm-third-party-licenses.json +61 -101
  11. package/package.json +22 -11
  12. package/readme.md +77 -3
  13. package/scss/_button.scss +85 -0
  14. package/scss/_config.scss +158 -0
  15. package/dist/button-with-externals.js +0 -108
  16. package/dist/button-with-externals.js.map +0 -7
  17. package/dist/docs/declarative_with_source.js +0 -1
  18. package/dist/docs/new_white.svg +0 -6
package/dist/docs/index.html CHANGED
@@ -4,6 +4,7 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7
+ <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
7
8
  <style>
8
9
  .markdown-body {
9
10
  box-sizing: border-box;
@@ -12,10 +13,6 @@
12
13
  margin: 0 auto !important;
13
14
  padding-bottom: 45px;
14
15
  }
15
-
16
- sd-button {
17
- margin: 8px;
18
- }
19
16
  </style>
20
17
  <script type="module" crossorigin src="./doc.mjs"></script>
21
18
  <link rel="stylesheet" crossorigin href="./doc.css">
package/dist/docs/new.svg CHANGED
@@ -1,6 +1,3 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
2
- <g color="#000" fill="#1467ba">
3
- <path style="marker:none" overflow="visible" d="M0 11h23v1H0z"/>
4
- <path style="marker:none" overflow="visible" d="M11 23V0h1v23z"/>
5
- </g>
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12 4.25a.75.75 0 0 1 .75.75v6.25H19a.75.75 0 0 1 0 1.5h-6.25V19a.75.75 0 0 1-1.5 0v-6.25H5a.75.75 0 0 1 0-1.5h6.25V5a.75.75 0 0 1 .75-.75" fill="currentColor"/>
6
3
  </svg>
package/npm-third-party-licenses.json CHANGED
@@ -1,88 +1,68 @@
1
1
  {
2
- "@cypress/vite-dev-server@7.0.0": {
2
+ "@cypress/vite-dev-server@7.3.2": {
3
3
  "licenses": "MIT",
4
4
  "repository": "https://github.com/cypress-io/cypress",
5
5
  "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
6
6
  },
7
- "@eslint/js@9.34.0": {
7
+ "@tsdown/css@0.21.7": {
8
8
  "licenses": "MIT",
9
- "repository": "https://github.com/eslint/eslint",
10
- "licenseUrl": "https://unpkg.com/@eslint/js@9.34.0/LICENSE"
9
+ "repository": "https://github.com/rolldown/tsdown",
10
+ "licenseUrl": "https://unpkg.com/@tsdown/css@0.21.7/LICENSE"
11
11
  },
12
- "@rollup/plugin-node-resolve@16.0.1": {
13
- "licenses": "MIT",
14
- "repository": "https://github.com/rollup/plugins",
15
- "licenseUrl": "https://unpkg.com/@rollup/plugin-node-resolve@16.0.1/LICENSE"
16
- },
17
- "@types/node@24.3.0": {
12
+ "@types/node@25.5.2": {
18
13
  "licenses": "MIT",
19
14
  "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
20
- "licenseUrl": "https://unpkg.com/@types/node@24.3.0/LICENSE"
15
+ "licenseUrl": "https://unpkg.com/@types/node@25.5.2/LICENSE"
21
16
  },
22
17
  "@types/postcss-prefix-selector@1.16.3": {
23
18
  "licenses": "MIT",
24
19
  "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
25
20
  "licenseUrl": "https://unpkg.com/@types/postcss-prefix-selector@1.16.3/LICENSE"
26
21
  },
27
- "@typescript-eslint/eslint-plugin@8.41.0": {
22
+ "@types/trusted-types@2.0.7": {
28
23
  "licenses": "MIT",
29
- "repository": "https://github.com/typescript-eslint/typescript-eslint",
30
- "licenseUrl": "https://unpkg.com/@typescript-eslint/eslint-plugin@8.41.0/LICENSE"
24
+ "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
25
+ "licenseUrl": "https://unpkg.com/@types/trusted-types@2.0.7/LICENSE"
31
26
  },
32
- "@typescript-eslint/parser@8.41.0": {
27
+ "@types/yargs@17.0.35": {
33
28
  "licenses": "MIT",
34
- "repository": "https://github.com/typescript-eslint/typescript-eslint",
35
- "licenseUrl": "https://unpkg.com/@typescript-eslint/parser@8.41.0/LICENSE"
29
+ "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
30
+ "licenseUrl": "https://unpkg.com/@types/yargs@17.0.35/LICENSE"
36
31
  },
37
- "@vitest/coverage-v8@4.0.18": {
32
+ "@vitest/coverage-v8@4.1.2": {
38
33
  "licenses": "MIT",
39
34
  "repository": "https://github.com/vitest-dev/vitest",
40
- "licenseUrl": "https://unpkg.com/@vitest/coverage-v8@4.0.18/LICENSE"
35
+ "licenseUrl": "https://unpkg.com/@vitest/coverage-v8@4.1.2/LICENSE"
41
36
  },
42
- "@vitest/ui@4.0.18": {
37
+ "@vitest/ui@4.1.2": {
43
38
  "licenses": "MIT",
44
39
  "repository": "https://github.com/vitest-dev/vitest",
45
- "licenseUrl": "https://unpkg.com/@vitest/ui@4.0.18/LICENSE"
40
+ "licenseUrl": "https://unpkg.com/@vitest/ui@4.1.2/LICENSE"
46
41
  },
47
- "axe-core@4.10.3": {
42
+ "axe-core@4.11.2": {
48
43
  "licenses": "MPL-2.0",
49
44
  "repository": "https://github.com/dequelabs/axe-core",
50
- "licenseUrl": "https://unpkg.com/axe-core@4.10.3/LICENSE"
45
+ "licenseUrl": "https://unpkg.com/axe-core@4.11.2/LICENSE"
51
46
  },
52
47
  "cypress-axe@1.7.0": {
53
48
  "licenses": "MIT",
54
49
  "repository": "https://github.com/component-driven/cypress-axe",
55
50
  "licenseUrl": "https://unpkg.com/cypress-axe@1.7.0/License.md"
56
51
  },
57
- "cypress@15.0.0": {
52
+ "cypress@15.13.0": {
58
53
  "licenses": "MIT",
59
54
  "repository": "https://github.com/cypress-io/cypress",
60
55
  "licenseUrl": "https://cypress.io"
61
56
  },
62
- "esbuild@0.27.2": {
63
- "licenses": "MIT",
64
- "repository": "https://github.com/evanw/esbuild",
65
- "licenseUrl": "https://unpkg.com/esbuild@0.27.2/LICENSE.md"
66
- },
67
- "eslint-config-google@0.14.0": {
68
- "licenses": "Apache-2.0",
69
- "repository": "https://github.com/google/eslint-config-google",
70
- "licenseUrl": "https://unpkg.com/eslint-config-google@0.14.0/LICENSE"
71
- },
72
- "eslint-config-prettier@10.1.8": {
73
- "licenses": "MIT",
74
- "repository": "https://github.com/prettier/eslint-config-prettier",
75
- "licenseUrl": "https://unpkg.com/eslint-config-prettier@10.1.8/LICENSE"
76
- },
77
- "eslint@9.34.0": {
78
- "licenses": "MIT",
79
- "repository": "https://github.com/eslint/eslint",
80
- "licenseUrl": "https://unpkg.com/eslint@9.34.0/LICENSE"
57
+ "dompurify@3.4.7": {
58
+ "licenses": "(MPL-2.0 OR Apache-2.0)",
59
+ "repository": "https://github.com/cure53/DOMPurify",
60
+ "licenseUrl": "https://unpkg.com/dompurify@3.4.7/LICENSE"
81
61
  },
82
- "github-markdown-css@5.8.1": {
62
+ "github-markdown-css@5.9.0": {
83
63
  "licenses": "MIT",
84
64
  "repository": "https://github.com/sindresorhus/github-markdown-css",
85
- "licenseUrl": "https://unpkg.com/github-markdown-css@5.8.1/license"
65
+ "licenseUrl": "https://unpkg.com/github-markdown-css@5.9.0/license"
86
66
  },
87
67
  "highlight.js@11.11.1": {
88
68
  "licenses": "BSD-3-Clause",
@@ -94,95 +74,75 @@
94
74
  "repository": "https://github.com/davidparsson/junit-report-builder",
95
75
  "licenseUrl": "https://unpkg.com/junit-report-builder@5.1.1/LICENSE"
96
76
  },
97
- "lint-staged@16.1.5": {
77
+ "lint-staged@16.4.0": {
98
78
  "licenses": "MIT",
99
79
  "repository": "https://github.com/lint-staged/lint-staged",
100
- "licenseUrl": "https://unpkg.com/lint-staged@16.1.5/LICENSE"
80
+ "licenseUrl": "https://unpkg.com/lint-staged@16.4.0/LICENSE"
101
81
  },
102
- "marked@16.2.1": {
82
+ "marked@18.0.0": {
103
83
  "licenses": "MIT",
104
84
  "repository": "https://github.com/markedjs/marked",
105
- "licenseUrl": "https://unpkg.com/marked@16.2.1/LICENSE.md"
85
+ "licenseUrl": "https://unpkg.com/marked@18.0.0/LICENSE.md"
106
86
  },
107
- "postcss-prefix-selector@2.1.1": {
87
+ "oxfmt@0.44.0": {
108
88
  "licenses": "MIT",
109
- "repository": "https://github.com/RadValentin/postcss-prefix-selector",
110
- "licenseUrl": "https://unpkg.com/postcss-prefix-selector@2.1.1/LICENSE"
89
+ "repository": "https://github.com/oxc-project/oxc",
90
+ "licenseUrl": "https://unpkg.com/oxfmt@0.44.0/LICENSE"
111
91
  },
112
- "postcss@8.5.6": {
92
+ "oxlint-tsgolint@0.20.0": {
113
93
  "licenses": "MIT",
114
- "repository": "https://github.com/postcss/postcss",
115
- "licenseUrl": "https://unpkg.com/postcss@8.5.6/LICENSE"
94
+ "repository": "https://github.com/oxc-project/tsgolint",
95
+ "licenseUrl": "https://unpkg.com/oxlint-tsgolint@0.20.0/LICENSE"
116
96
  },
117
- "prettier@3.8.1": {
97
+ "oxlint@1.59.0": {
118
98
  "licenses": "MIT",
119
- "repository": "https://github.com/prettier/prettier",
120
- "licenseUrl": "https://unpkg.com/prettier@3.8.1/LICENSE"
99
+ "repository": "https://github.com/oxc-project/oxc",
100
+ "licenseUrl": "https://unpkg.com/oxlint@1.59.0/LICENSE"
121
101
  },
122
- "resolve-pkg@2.0.0": {
123
- "licenses": "MIT",
124
- "repository": "https://github.com/sindresorhus/resolve-pkg",
125
- "licenseUrl": "https://unpkg.com/resolve-pkg@2.0.0/license"
126
- },
127
- "sass@1.91.0": {
128
- "licenses": "MIT",
129
- "repository": "https://github.com/sass/dart-sass",
130
- "licenseUrl": "https://unpkg.com/sass@1.91.0/LICENSE"
131
- },
132
- "stylelint-config-recommended-scss@16.0.0": {
102
+ "postcss-prefix-selector@2.1.1": {
133
103
  "licenses": "MIT",
134
- "repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
135
- "licenseUrl": "https://unpkg.com/stylelint-config-recommended-scss@16.0.0/LICENSE"
104
+ "repository": "https://github.com/RadValentin/postcss-prefix-selector",
105
+ "licenseUrl": "https://unpkg.com/postcss-prefix-selector@2.1.1/LICENSE"
136
106
  },
137
- "stylelint-config-standard@39.0.0": {
107
+ "postcss@8.5.8": {
138
108
  "licenses": "MIT",
139
- "repository": "https://github.com/stylelint/stylelint-config-standard",
140
- "licenseUrl": "https://unpkg.com/stylelint-config-standard@39.0.0/LICENSE"
109
+ "repository": "https://github.com/postcss/postcss",
110
+ "licenseUrl": "https://unpkg.com/postcss@8.5.8/LICENSE"
141
111
  },
142
- "stylelint-scss@6.12.1": {
112
+ "resolve-pkg@3.0.1": {
143
113
  "licenses": "MIT",
144
- "repository": "https://github.com/stylelint-scss/stylelint-scss",
145
- "licenseUrl": "https://unpkg.com/stylelint-scss@6.12.1/LICENSE"
114
+ "repository": "https://github.com/sindresorhus/resolve-pkg",
115
+ "licenseUrl": "https://unpkg.com/resolve-pkg@3.0.1/license"
146
116
  },
147
- "stylelint@16.23.1": {
117
+ "sass@1.99.0": {
148
118
  "licenses": "MIT",
149
- "repository": "https://github.com/stylelint/stylelint",
150
- "licenseUrl": "https://unpkg.com/stylelint@16.23.1/LICENSE"
119
+ "repository": "https://github.com/sass/dart-sass",
120
+ "licenseUrl": "https://unpkg.com/sass@1.99.0/LICENSE"
151
121
  },
152
- "tsup@8.5.1": {
122
+ "tsdown@0.21.7": {
153
123
  "licenses": "MIT",
154
- "repository": "https://github.com/egoist/tsup",
155
- "licenseUrl": "https://unpkg.com/tsup@8.5.1/LICENSE"
124
+ "repository": "https://github.com/rolldown/tsdown",
125
+ "licenseUrl": "https://unpkg.com/tsdown@0.21.7/LICENSE"
156
126
  },
157
- "turbo@2.5.6": {
127
+ "turbo@2.9.4": {
158
128
  "licenses": "MIT",
159
129
  "repository": "https://github.com/vercel/turborepo",
160
- "licenseUrl": "https://unpkg.com/turbo@2.5.6/LICENSE"
130
+ "licenseUrl": "https://unpkg.com/turbo@2.9.4/LICENSE"
161
131
  },
162
- "typescript-eslint@8.41.0": {
163
- "licenses": "MIT",
164
- "repository": "https://github.com/typescript-eslint/typescript-eslint",
165
- "licenseUrl": "https://unpkg.com/typescript-eslint@8.41.0/LICENSE"
166
- },
167
- "typescript@5.9.3": {
132
+ "typescript@6.0.2": {
168
133
  "licenses": "Apache-2.0",
169
134
  "repository": "https://github.com/microsoft/TypeScript",
170
- "licenseUrl": "https://unpkg.com/typescript@5.9.3/LICENSE.txt"
171
- },
172
- "vite-tsconfig-paths@5.1.4": {
173
- "licenses": "MIT",
174
- "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
175
- "licenseUrl": "https://unpkg.com/vite-tsconfig-paths@5.1.4/LICENSE"
135
+ "licenseUrl": "https://unpkg.com/typescript@6.0.2/LICENSE.txt"
176
136
  },
177
- "vite@7.3.1": {
137
+ "vite@8.0.5": {
178
138
  "licenses": "MIT",
179
139
  "repository": "https://github.com/vitejs/vite",
180
- "licenseUrl": "https://unpkg.com/vite@7.3.1/LICENSE.md"
140
+ "licenseUrl": "https://unpkg.com/vite@8.0.5/LICENSE.md"
181
141
  },
182
- "vitest@4.0.18": {
142
+ "vitest@4.1.2": {
183
143
  "licenses": "MIT",
184
144
  "repository": "https://github.com/vitest-dev/vitest",
185
- "licenseUrl": "https://unpkg.com/vitest@4.0.18/LICENSE.md"
145
+ "licenseUrl": "https://unpkg.com/vitest@4.1.2/LICENSE.md"
186
146
  },
187
147
  "yargs@18.0.0": {
188
148
  "licenses": "MIT",
package/package.json CHANGED
@@ -1,25 +1,36 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/button",
3
- "version": "5.4.0",
3
+ "version": "7.0.0",
4
4
  "description": "A button element which encloses the look and feel of the smartdesign button",
5
- "main": "dist/button-with-externals.js",
6
- "module": "dist/button.mjs",
7
- "types": "dist/button.d.ts",
8
5
  "license": "SEE LICENSE IN LICENSE",
9
- "dependencies": {
10
- "@cas-smartdesign/element-base": "^5.2.0"
11
- },
12
6
  "files": [
13
7
  "dist",
8
+ "scss",
14
9
  "npm-third-party-licenses.json"
15
10
  ],
11
+ "type": "module",
12
+ "main": "dist/button.mjs",
13
+ "module": "dist/button.mjs",
14
+ "types": "dist/button.d.ts",
16
15
  "publishConfig": {
17
- "registry": "https://registry.npmjs.org/",
18
- "access": "public"
16
+ "access": "public",
17
+ "registry": "https://registry.npmjs.org/"
18
+ },
19
+ "dependencies": {
20
+ "@cas-smartdesign/element-base": "^6.0.0",
21
+ "@cas-smartdesign/image-embed": "^1.0.1"
19
22
  },
20
23
  "devDependencies": {
21
- "@cas-smartdesign/license-generator": "^1.9.0",
22
- "@cas-smartdesign/element-preview": "^0.4.0"
24
+ "@cas-smartdesign/element-preview": "^1.1.0",
25
+ "@cas-smartdesign/license-generator": "^1.10.0"
26
+ },
27
+ "peerDependencies": {
28
+ "@cas-smartdesign/design-tokens": "^3.0.1"
29
+ },
30
+ "peerDependenciesMeta": {
31
+ "@cas-smartdesign/design-tokens": {
32
+ "optional": true
33
+ }
23
34
  },
24
35
  "scripts": {
25
36
  "version": "pnpm version",
package/readme.md CHANGED
@@ -1,6 +1,10 @@
1
1
  # @cas-smartdesign/button
2
2
 
3
- A button element which encloses the look and feel of the smartdesign button.
3
+ A button element which encloses the look and feel of the SmartDesign 3.0 button.
4
+
5
+ This element must be used together with the design tokens of SmartDesign.
6
+ For an independent application, make sure to include the @cas-smartdesign/design-tokens package.
7
+ For a web app / web widget, refer to the official documentation about design token usage.
4
8
 
5
9
  ## Attributes
6
10
 
@@ -12,11 +16,17 @@ A button element which encloses the look and feel of the smartdesign button.
12
16
  - Defines whether if the button is disabled. Note that it uses default disabled attribute, thus blocking pointer/mouse events.
13
17
  - `type`: string
14
18
  - Can be set to either `submit` or `reset` to make the button act like a HTML form button.
19
+ - `variant`: string
20
+ - Defines the visual style of the button. One of `primary`, `outline`, `standard`, `ghost`, `outline-danger`, `ghost-danger`, `selection` or `custom`. Defaults to `standard` when unset or set to an unknown value.
21
+ - `aria-pressed`: boolean
22
+ - Marks a `selection` button as selected (standard toggle-button semantics). When the variant is set to `selection` and the attribute is absent, the button initializes it to `false` so assistive tools announce it as a toggle; the consumer flips it to `true`/`false`.
15
23
 
16
24
  ## Properties
17
25
 
18
26
  - `disabled`: boolean
19
27
  - Makes the button looks like it is disabled & also prevents click events but used with a classname so mouse events are still triggered thus allowing for example tooltip usage in all browsers.
28
+ - `variant`: ButtonVariant
29
+ - Gets or sets the button's visual style (`primary`, `outline`, `standard`, `ghost`, `outline-danger`, `ghost-danger`, `selection` or `custom`). Reading it returns `standard` when the `variant` attribute is missing or invalid.
20
30
 
21
31
  ## CSS Custom Properties
22
32
 
@@ -24,5 +34,69 @@ A button element which encloses the look and feel of the smartdesign button.
24
34
  - Defines the value of margin-left, margin-right (default is 8px)
25
35
  - `--sd-button-max-icon-size`
26
36
  - Defines the value of max-width, max-height (default is 32px)
27
- - `--sd-button-border-radius`
28
- - Defines the border radius of the button
37
+
38
+ ### Colors & border
39
+
40
+ Each `variant` sets sensible defaults for these. Override them to fully customize a variant, or to style the `custom` variant which sets none of them itself. Each property falls back to a smartdesign design token when unset.
41
+
42
+ The `selection` variant additionally re-points these properties while selected (`[aria-pressed="true"]`): the background and border switch to the selection accent tokens, and the hover state is pinned to the selected colors so the selected look survives the cursor. To customize the selected appearance, set the same `--sd-button-*` properties under your own `[aria-pressed="true"]` selector.
43
+
44
+ For the `custom` variant you only need to set the two rest colors — `--sd-button-background-color` and `--sd-button-color`. The hover and pressed states are derived from them automatically (the background darkens, the text color is kept), so a minimal override stays coherent. You can still pin any individual state by setting its `--sd-button-*` property explicitly.
45
+
46
+ Mind the color contrast when relying on the derived states: because the background darkens while the text color is kept, a `--sd-button-color` that contrasts well against the rest background may fall below the required contrast ratio against the darker hover/pressed background. If the derived states do not meet your contrast requirements, set `--sd-button-color-hover` and `--sd-button-color-pressed` (and the matching background properties) explicitly.
47
+
48
+ - `--sd-button-background-color`
49
+ - Background color in the default (rest) state.
50
+ - `--sd-button-color`
51
+ - Foreground (text/icon) color in the default state.
52
+ - `--sd-button-border`
53
+ - The `border` shorthand applied to the button (e.g. `1px solid …`). Used by the `outline` variants.
54
+ - `--sd-button-background-color-hover`
55
+ - Background color on hover/focus.
56
+ - `--sd-button-color-hover`
57
+ - Foreground color on hover/focus.
58
+ - `--sd-button-border-color-hover`
59
+ - Border color on hover/focus (defaults to `transparent`).
60
+ - `--sd-button-background-color-pressed`
61
+ - Background color while pressed (`:active`).
62
+ - `--sd-button-color-pressed`
63
+ - Foreground color while pressed.
64
+ - `--sd-button-border-color-pressed`
65
+ - Border color while pressed (defaults to `transparent`).
66
+ - `--sd-button-background-color-disabled`
67
+ - Background color when disabled.
68
+ - `--sd-button-color-disabled`
69
+ - Foreground color when disabled.
70
+ - `--sd-button-border-color-disabled`
71
+ - Border color when disabled (defaults to `transparent`).
72
+
73
+ ## SCSS mixins
74
+
75
+ The package ships SCSS mixins so a consumer app can apply the SmartDesign button look to its own elements (e.g. a native `<button>`), reusing the exact same variant definitions as the web component.
76
+
77
+ ```scss
78
+ @use "@cas-smartdesign/button/scss/button" as sd-button;
79
+
80
+ button.cta {
81
+ @include sd-button.button(primary);
82
+ }
83
+
84
+ // compose if you only want the variant colors onto an already-laid-out element
85
+ .danger {
86
+ @include sd-button.appearance;
87
+ @include sd-button.variant("outline-danger");
88
+ }
89
+ ```
90
+
91
+ Available mixins:
92
+
93
+ - `button($variant: standard)` — full look (layout + colors + variant). The default `standard` needs no variant. For `selection` it also emits the selected-state rules under `[aria-pressed="true"]` (you manage the attribute yourself on a native element).
94
+ - `base` — structural styling only (layout, focus ring, disabled cursor), no colors.
95
+ - `appearance` — the color engine (rest + hover/focus + pressed + disabled), driven by the `--sd-button-*` properties.
96
+ - `variant($name)` — sets the `--sd-button-*` values for a named variant.
97
+ - `selection-checked` — the selected-state rules of the `selection` variant (under `[aria-pressed="true"]`); include it alongside `variant("selection")` when composing manually instead of using `button(selection)`.
98
+
99
+ Notes:
100
+
101
+ - Resolving `@use "@cas-smartdesign/button/scss/button"` requires the consumer's build to resolve packages in Sass.
102
+ - Themed colors resolve through the `@cas-smartdesign/design-tokens` CSS custom properties; without them, the built-in hex fallbacks apply. Consumers keep the same `--sd-button-*` override knobs documented above.
package/scss/_button.scss ADDED
@@ -0,0 +1,85 @@
1
+ @use "config";
2
+
3
+ // Public SCSS API for consumer apps that want the SmartDesign button look on their
4
+ // own elements (e.g. a native <button>). Apply onto any selector:
5
+ //
6
+ // @use "@cas-smartdesign/button/scss/button" as sd-button;
7
+ // button.cta { @include sd-button.button(primary); }
8
+ // .danger { @include sd-button.button(outline-danger); }
9
+ //
10
+ // Themed colors resolve through @cas-smartdesign/design-tokens CSS custom
11
+ // properties; without them the hardcoded fallbacks apply. Consumers retain the
12
+ // same --sd-button-* override knobs as the web component.
13
+
14
+ // Structural styling (layout, focus ring, disabled cursor) — no colors.
15
+ @mixin base {
16
+ display: inline-flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ box-sizing: border-box;
20
+ vertical-align: middle;
21
+ min-height: 36px;
22
+ padding: var(--spacing-x3, 6px) var(--spacing-x4, 8px);
23
+ border-radius: var(--radius-s, 4px);
24
+ cursor: pointer;
25
+ user-select: none;
26
+ outline: none;
27
+
28
+ &:focus-visible {
29
+ outline: 1px solid var(--color-border-interaction-focus, #111);
30
+ outline-offset: var(--spacing-x1, 2px);
31
+ }
32
+
33
+ &:is(:disabled, [disabled], [aria-disabled="true"]) {
34
+ cursor: default;
35
+ }
36
+ }
37
+
38
+ // Color engine: paints rest + hover/focus + pressed + disabled states.
39
+ // The border lives on the element itself here (no ::after overlay), so the
40
+ // state border colors must too.
41
+ @mixin appearance {
42
+ @include config.state("base");
43
+ border: var(--sd-button-border, none);
44
+
45
+ &:is(:focus, :hover) {
46
+ @include config.state("hover", $border-on-after: false);
47
+ }
48
+
49
+ &:active {
50
+ @include config.state("pressed", $border-on-after: false);
51
+ }
52
+
53
+ &:is(:disabled, [disabled], [aria-disabled="true"]) {
54
+ @include config.state("disabled", $border-on-after: false);
55
+ }
56
+ }
57
+
58
+ // Just the --sd-button-* values for a variant (compose onto your own engine).
59
+ @mixin variant($name) {
60
+ @include config.variant-vars($name);
61
+ }
62
+
63
+ // Selected-state look of the `selection` variant, applied on [aria-pressed="true"].
64
+ // button(selection) emits this already; include it alongside variant("selection")
65
+ // when composing manually. You manage the aria-pressed attribute yourself.
66
+ @mixin selection-checked {
67
+ &[aria-pressed="true"] {
68
+ @include config.selection-checked-vars;
69
+ }
70
+ }
71
+
72
+ // Convenience: full button look in one call. `standard` needs no variant vars
73
+ // because it is exactly the neutral fallback the engine already paints.
74
+ @mixin button($variant: standard) {
75
+ @include base;
76
+ @include appearance;
77
+ @if $variant != standard {
78
+ @include config.variant-vars($variant);
79
+ }
80
+ // Selection is stateful: the selected look is driven by the standard
81
+ // aria-pressed attribute.
82
+ @if $variant == selection {
83
+ @include selection-checked;
84
+ }
85
+ }