@carissa-io/theme-default 0.2.2 → 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 +47 -1
- package/README.md +54 -0
- package/dist/index.css +248 -179
- package/package.json +1 -1
- package/scss/_modes.scss +90 -0
- package/scss/_tokens.scss +20 -0
- package/scss/index.scss +198 -196
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carissa-io/theme-default",
|
|
3
|
-
"version": "0.
|
|
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/_modes.scss
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
// Carissa Default theme color modes: the light and dark palettes, emitted as CSS custom properties (`--c-<role>`).
|
|
2
|
+
// Loading this partial emits the CSS below (`@use 'modes' as *` in index.scss); `_tokens.scss` stays Sass-only.
|
|
3
|
+
//
|
|
4
|
+
// no attribute light (the default)
|
|
5
|
+
// data-mode="light" light
|
|
6
|
+
// data-mode="dark" dark
|
|
7
|
+
// data-mode="auto" light, and dark while `prefers-color-scheme: dark` matches
|
|
8
|
+
//
|
|
9
|
+
// The attribute goes on <html> and is set by the app (see README.md). Nothing else depends on it: the component blocks
|
|
10
|
+
// only read the custom properties through the `$var-*` references below.
|
|
11
|
+
@use 'tokens' as t;
|
|
12
|
+
|
|
13
|
+
// Light = the static Sass tokens of _tokens.scss, so the Sass API and the default look cannot drift apart.
|
|
14
|
+
$light: (
|
|
15
|
+
'background': t.$white,
|
|
16
|
+
'text': t.$text,
|
|
17
|
+
'muted': t.$muted,
|
|
18
|
+
'surface': t.$surface,
|
|
19
|
+
'surface-active': t.$surface-active,
|
|
20
|
+
'primary': t.$black,
|
|
21
|
+
'on-primary': t.$white,
|
|
22
|
+
'primary-hover': t.$primary-hover,
|
|
23
|
+
'primary-active': t.$primary-active,
|
|
24
|
+
'disabled-text': t.$disabled-text,
|
|
25
|
+
'disabled-border': t.$disabled-border,
|
|
26
|
+
'error': t.$error,
|
|
27
|
+
'focus': t.$focus-color,
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
// Dark: near-black ground, the contrast of the light theme inverted (see DESIGN.md for the ratios).
|
|
31
|
+
$dark: (
|
|
32
|
+
'background': #0a0a0a,
|
|
33
|
+
'text': #f5f5f5,
|
|
34
|
+
'muted': #a3a3a3,
|
|
35
|
+
'surface': #171717,
|
|
36
|
+
'surface-active': #262626,
|
|
37
|
+
'primary': #fff,
|
|
38
|
+
'on-primary': #000,
|
|
39
|
+
'primary-hover': #e5e5e5,
|
|
40
|
+
'primary-active': #d4d4d4,
|
|
41
|
+
'disabled-text': #737373,
|
|
42
|
+
'disabled-border': #404040,
|
|
43
|
+
'error': #f87171,
|
|
44
|
+
'focus': #fff,
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
// What the component blocks read: `var(--c-<role>)`, one per role.
|
|
48
|
+
$var-background: var(--c-background);
|
|
49
|
+
$var-text: var(--c-text);
|
|
50
|
+
$var-muted: var(--c-muted);
|
|
51
|
+
$var-surface: var(--c-surface);
|
|
52
|
+
$var-surface-active: var(--c-surface-active);
|
|
53
|
+
$var-primary: var(--c-primary);
|
|
54
|
+
$var-on-primary: var(--c-on-primary);
|
|
55
|
+
$var-primary-hover: var(--c-primary-hover);
|
|
56
|
+
$var-primary-active: var(--c-primary-active);
|
|
57
|
+
$var-disabled-text: var(--c-disabled-text);
|
|
58
|
+
$var-disabled-border: var(--c-disabled-border);
|
|
59
|
+
$var-error: var(--c-error);
|
|
60
|
+
$var-focus: var(--c-focus);
|
|
61
|
+
|
|
62
|
+
// The dropdown arrow of Select, Combobox and Date picker (the same roles as the `$arrow-*` tokens).
|
|
63
|
+
$var-arrow-color: $var-muted;
|
|
64
|
+
$var-arrow-color-active: $var-primary;
|
|
65
|
+
$var-arrow-color-disabled: $var-disabled-text;
|
|
66
|
+
|
|
67
|
+
@mixin palette($colors, $scheme) {
|
|
68
|
+
@each $role, $value in $colors {
|
|
69
|
+
--c-#{$role}: #{$value};
|
|
70
|
+
}
|
|
71
|
+
color-scheme: $scheme;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:root {
|
|
75
|
+
@include palette($light, light);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
:root[data-mode='light'] {
|
|
79
|
+
@include palette($light, light);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
:root[data-mode='dark'] {
|
|
83
|
+
@include palette($dark, dark);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@media (prefers-color-scheme: dark) {
|
|
87
|
+
:root[data-mode='auto'] {
|
|
88
|
+
@include palette($dark, dark);
|
|
89
|
+
}
|
|
90
|
+
}
|
package/scss/_tokens.scss
CHANGED
|
@@ -38,3 +38,23 @@ $arrow-color-active: $black;
|
|
|
38
38
|
$arrow-color-disabled: $disabled-text;
|
|
39
39
|
$arrow-transition: (rotate $transition-duration ease, color $transition-duration ease);
|
|
40
40
|
$arrow-rotate-open: 180deg;
|
|
41
|
+
|
|
42
|
+
// The type scale shared by every text role (Heading, Text and the components' own text), so the whole hierarchy moves
|
|
43
|
+
// from one place. The label style above is the field label and the overline.
|
|
44
|
+
$font-size-display: 3.5rem;
|
|
45
|
+
$font-size-h1: 2.5rem;
|
|
46
|
+
$font-size-h2: 1.75rem;
|
|
47
|
+
$font-size-h3: 1.25rem;
|
|
48
|
+
$font-size-h4: 1.125rem;
|
|
49
|
+
$font-size-h5: 1rem;
|
|
50
|
+
$font-size-h6: 0.875rem;
|
|
51
|
+
$font-size-lead: 1.25rem;
|
|
52
|
+
$font-size-body: 1rem;
|
|
53
|
+
$font-size-small: 0.875rem;
|
|
54
|
+
$font-size-caption: 0.75rem;
|
|
55
|
+
$font-size-overline: $label-font-size;
|
|
56
|
+
$font-weight-regular: 400;
|
|
57
|
+
$font-weight-bold: 700;
|
|
58
|
+
$font-weight-black: 900;
|
|
59
|
+
$line-height-tight: 1.3;
|
|
60
|
+
$line-height-normal: 1.5;
|