@carissa-io/theme-default 0.3.0 → 0.3.1
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.
- package/DESIGN.md +1 -1
- package/dist/index.css +2 -2
- package/package.json +1 -1
- package/scss/index.scss +2 -2
package/DESIGN.md
CHANGED
|
@@ -101,7 +101,7 @@ Field text is 1rem (16px, which also avoids the zoom-on-focus of mobile browsers
|
|
|
101
101
|
Three variants from [components-button](components/components-button), all square, 44px tall, with the same uppercase,
|
|
102
102
|
bold, tracked 11px label as the field labels and 200ms color transitions.
|
|
103
103
|
- **Primary:** black background, white text; hover `#262626`, active `#404040`.
|
|
104
|
-
- **Secondary:** white background, 1px `#737373` border; the border turns black on
|
|
104
|
+
- **Secondary:** white background, 1px `#737373` border; on hover the border turns black and the background becomes `#e5e5e5` (`--c-surface-active`), so the state reads without relying on the border alone.
|
|
105
105
|
- **Ghost:** transparent; a `#f5f5f5` surface appears on hover.
|
|
106
106
|
- **Disabled:** `#a3a3a3` text on a `#f5f5f5` surface (primary), or a lighter border (secondary, ghost); no hover.
|
|
107
107
|
- **Focus:** keyboard focus (`:focus-visible`) follows the general rule below: secondary and ghost thicken their border to
|
package/dist/index.css
CHANGED
|
@@ -272,12 +272,12 @@
|
|
|
272
272
|
}
|
|
273
273
|
.c-button--secondary:hover:not(:disabled) {
|
|
274
274
|
color: var(--c-primary);
|
|
275
|
-
background: var(--c-
|
|
275
|
+
background: var(--c-surface-active);
|
|
276
276
|
border-color: var(--c-primary);
|
|
277
277
|
}
|
|
278
278
|
.c-button--secondary:active:not(:disabled) {
|
|
279
279
|
color: var(--c-primary);
|
|
280
|
-
background: var(--c-surface);
|
|
280
|
+
background: var(--c-surface-active);
|
|
281
281
|
border-color: var(--c-primary);
|
|
282
282
|
}
|
|
283
283
|
.c-button--secondary:disabled {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carissa-io/theme-default",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "Carissa UI: the default theme (Swiss minimalism) as SCSS variable overrides of the Carissa components, with a compiled CSS build",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"style": "dist/index.css",
|
package/scss/index.scss
CHANGED
|
@@ -83,10 +83,10 @@
|
|
|
83
83
|
$c-button-secondary-background: $var-background,
|
|
84
84
|
$c-button-secondary-border-color: $var-muted,
|
|
85
85
|
$c-button-secondary-color-hover: $var-primary,
|
|
86
|
-
$c-button-secondary-background-hover: $var-
|
|
86
|
+
$c-button-secondary-background-hover: $var-surface-active,
|
|
87
87
|
$c-button-secondary-border-color-hover: $var-primary,
|
|
88
88
|
$c-button-secondary-color-active: $var-primary,
|
|
89
|
-
$c-button-secondary-background-active: $var-surface,
|
|
89
|
+
$c-button-secondary-background-active: $var-surface-active,
|
|
90
90
|
$c-button-secondary-border-color-active: $var-primary,
|
|
91
91
|
$c-button-secondary-color-disabled: $var-disabled-text,
|
|
92
92
|
$c-button-secondary-background-disabled: $var-background,
|