@nazuraki/styles 0.2.1 → 0.2.2
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/package.json +8 -3
- package/summer-cloud/base.css +48 -0
- package/summer-cloud/components/alert.css +29 -0
- package/summer-cloud/components/badge.css +49 -0
- package/summer-cloud/components/button.css +109 -0
- package/summer-cloud/components/card.css +35 -0
- package/summer-cloud/components/dialog.css +30 -0
- package/summer-cloud/components/form.css +146 -0
- package/summer-cloud/components/link.css +60 -0
- package/summer-cloud/components/progress.css +43 -0
- package/summer-cloud/components/table.css +34 -0
- package/summer-cloud/components/tabs.css +38 -0
- package/summer-cloud/design.md +115 -0
- package/summer-cloud/index.css +13 -0
- package/summer-cloud/tokens.css +74 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nazuraki/styles",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Shared design-system styles: tokens, base styles, and component classes per theme.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -12,12 +12,17 @@
|
|
|
12
12
|
"access": "public"
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
|
-
"neon-butterfly"
|
|
15
|
+
"neon-butterfly",
|
|
16
|
+
"summer-cloud"
|
|
16
17
|
],
|
|
17
18
|
"exports": {
|
|
18
19
|
"./neon-butterfly": "./neon-butterfly/index.css",
|
|
19
20
|
"./neon-butterfly/tokens": "./neon-butterfly/tokens.css",
|
|
20
21
|
"./neon-butterfly/base": "./neon-butterfly/base.css",
|
|
21
|
-
"./neon-butterfly/components/*": "./neon-butterfly/components/*.css"
|
|
22
|
+
"./neon-butterfly/components/*": "./neon-butterfly/components/*.css",
|
|
23
|
+
"./summer-cloud": "./summer-cloud/index.css",
|
|
24
|
+
"./summer-cloud/tokens": "./summer-cloud/tokens.css",
|
|
25
|
+
"./summer-cloud/base": "./summer-cloud/base.css",
|
|
26
|
+
"./summer-cloud/components/*": "./summer-cloud/components/*.css"
|
|
22
27
|
}
|
|
23
28
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/* summer-cloud — base styles
|
|
2
|
+
* Global defaults. Requires tokens.css. Apps that need the webfonts should
|
|
3
|
+
* include the Google Fonts <link>s for Plus Jakarta Sans (400;600;700;800),
|
|
4
|
+
* Inter (400;600) and JetBrains Mono (500;700), or self-host; every token
|
|
5
|
+
* stack falls back to a system family.
|
|
6
|
+
*/
|
|
7
|
+
*,
|
|
8
|
+
*::before,
|
|
9
|
+
*::after {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
body {
|
|
14
|
+
margin: 0;
|
|
15
|
+
min-height: 100vh;
|
|
16
|
+
background-color: var(--nb-bg);
|
|
17
|
+
color: var(--nb-on-surface);
|
|
18
|
+
font-family: var(--nb-font-body);
|
|
19
|
+
font-weight: var(--nb-font-weight);
|
|
20
|
+
-webkit-font-smoothing: antialiased;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Opt-in page background: the sky gradient. Flat --nb-bg is also correct, but
|
|
24
|
+
* the gradient is the signature — the theme reads as "airy" only against it.
|
|
25
|
+
* Apply to <body>. */
|
|
26
|
+
.nb-bg {
|
|
27
|
+
background: linear-gradient(135deg, var(--nb-sky-start) 0%, var(--nb-sky-end) 100%);
|
|
28
|
+
background-attachment: fixed;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
h1,
|
|
32
|
+
h2,
|
|
33
|
+
h3,
|
|
34
|
+
h4 {
|
|
35
|
+
font-family: var(--nb-font-display);
|
|
36
|
+
font-weight: var(--nb-font-weight-bold);
|
|
37
|
+
letter-spacing: var(--nb-tracking-tight);
|
|
38
|
+
color: var(--nb-on-surface);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
a {
|
|
42
|
+
color: var(--nb-primary);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
::selection {
|
|
46
|
+
background: var(--nb-primary);
|
|
47
|
+
color: #fff;
|
|
48
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/* summer-cloud — alert / callout: glass card with a semantic left rule */
|
|
2
|
+
.nb-alert {
|
|
3
|
+
padding: var(--nb-space-4);
|
|
4
|
+
background: var(--nb-surface-glass);
|
|
5
|
+
border: 1px solid var(--nb-border);
|
|
6
|
+
border-left: 4px solid var(--nb-accent);
|
|
7
|
+
border-radius: var(--nb-radius);
|
|
8
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
9
|
+
-webkit-backdrop-filter: blur(var(--nb-blur));
|
|
10
|
+
box-shadow: var(--nb-shadow-soft);
|
|
11
|
+
color: var(--nb-on-surface);
|
|
12
|
+
font-size: var(--nb-text-sm);
|
|
13
|
+
}
|
|
14
|
+
.nb-alert--info { border-left-color: var(--nb-info); }
|
|
15
|
+
.nb-alert--success { border-left-color: var(--nb-success); }
|
|
16
|
+
.nb-alert--warning { border-left-color: var(--nb-warning); }
|
|
17
|
+
.nb-alert--danger { border-left-color: var(--nb-danger); }
|
|
18
|
+
.nb-alert__title {
|
|
19
|
+
display: block;
|
|
20
|
+
margin-bottom: var(--nb-space-1);
|
|
21
|
+
font-family: var(--nb-font-display);
|
|
22
|
+
font-weight: var(--nb-font-weight-medium);
|
|
23
|
+
font-size: var(--nb-text-sm);
|
|
24
|
+
color: var(--nb-on-surface);
|
|
25
|
+
}
|
|
26
|
+
.nb-alert--info .nb-alert__title { color: var(--nb-accent-deep); }
|
|
27
|
+
.nb-alert--success .nb-alert__title { color: #1a7a1a; }
|
|
28
|
+
.nb-alert--warning .nb-alert__title { color: #594400; }
|
|
29
|
+
.nb-alert--danger .nb-alert__title { color: #93000a; }
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/* summer-cloud — badge: solid pill, mono uppercase, for retail energy */
|
|
2
|
+
.nb-badge {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: var(--nb-space-1);
|
|
6
|
+
padding: 0.25rem 0.75rem;
|
|
7
|
+
background: var(--nb-surface-glass-high);
|
|
8
|
+
border: 1px solid var(--nb-border);
|
|
9
|
+
border-radius: var(--nb-radius-pill);
|
|
10
|
+
color: var(--nb-faint);
|
|
11
|
+
text-transform: uppercase;
|
|
12
|
+
font-family: var(--nb-font-mono);
|
|
13
|
+
font-size: 12px;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
16
|
+
box-shadow: 0 1px 2px rgba(93, 43, 255, 0.06);
|
|
17
|
+
}
|
|
18
|
+
.nb-badge--primary { background: var(--nb-primary); border-color: transparent; color: #fff; }
|
|
19
|
+
.nb-badge--info { background: var(--nb-info); border-color: transparent; color: #004261; }
|
|
20
|
+
.nb-badge--success { background: var(--nb-success); border-color: transparent; color: #0a2e0a; }
|
|
21
|
+
.nb-badge--warning { background: var(--nb-warning); border-color: transparent; color: #241a00; }
|
|
22
|
+
.nb-badge--danger { background: var(--nb-danger); border-color: transparent; color: #4a0000; }
|
|
23
|
+
|
|
24
|
+
/* Chip — the filter variant: outlined until selected. */
|
|
25
|
+
.nb-chip {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
gap: var(--nb-space-1);
|
|
29
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
30
|
+
background: none;
|
|
31
|
+
border: 1px solid var(--nb-outline);
|
|
32
|
+
border-radius: var(--nb-radius-pill);
|
|
33
|
+
color: var(--nb-faint);
|
|
34
|
+
font-family: var(--nb-font-display);
|
|
35
|
+
font-size: 12px;
|
|
36
|
+
font-weight: var(--nb-font-weight-medium);
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
transition: background var(--nb-transition), color var(--nb-transition),
|
|
39
|
+
border-color var(--nb-transition);
|
|
40
|
+
}
|
|
41
|
+
.nb-chip:hover {
|
|
42
|
+
background: var(--nb-sky-tint);
|
|
43
|
+
}
|
|
44
|
+
.nb-chip--selected,
|
|
45
|
+
.nb-chip[aria-pressed="true"] {
|
|
46
|
+
background: var(--nb-primary-bright);
|
|
47
|
+
border-color: transparent;
|
|
48
|
+
color: #fff;
|
|
49
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/* summer-cloud — button: pill-shaped, bouncy, tinted-shadow lift */
|
|
2
|
+
.nb-btn {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
gap: var(--nb-space-2);
|
|
7
|
+
padding: 0.75rem var(--nb-space-4);
|
|
8
|
+
background: rgba(255, 255, 255, 0.4);
|
|
9
|
+
border: 1px solid var(--nb-border);
|
|
10
|
+
border-radius: var(--nb-radius-pill);
|
|
11
|
+
color: var(--nb-faint);
|
|
12
|
+
font-family: var(--nb-font-display);
|
|
13
|
+
font-weight: var(--nb-font-weight-medium);
|
|
14
|
+
font-size: var(--nb-text-sm);
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
transition:
|
|
17
|
+
background var(--nb-transition),
|
|
18
|
+
border-color var(--nb-transition),
|
|
19
|
+
color var(--nb-transition),
|
|
20
|
+
box-shadow 0.2s ease,
|
|
21
|
+
transform 0.2s var(--nb-ease-bounce);
|
|
22
|
+
}
|
|
23
|
+
.nb-btn:hover,
|
|
24
|
+
.nb-btn:focus-visible {
|
|
25
|
+
background: rgba(255, 255, 255, 0.6);
|
|
26
|
+
border-color: var(--nb-primary-border);
|
|
27
|
+
color: var(--nb-primary);
|
|
28
|
+
transform: scale(1.03);
|
|
29
|
+
outline: none;
|
|
30
|
+
}
|
|
31
|
+
.nb-btn:focus-visible {
|
|
32
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
33
|
+
}
|
|
34
|
+
.nb-btn:active {
|
|
35
|
+
transform: scale(0.95);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Primary — the solid violet CTA. One per view. */
|
|
39
|
+
.nb-btn--primary {
|
|
40
|
+
background: var(--nb-primary);
|
|
41
|
+
border-color: transparent;
|
|
42
|
+
color: #fff;
|
|
43
|
+
font-weight: var(--nb-font-weight-bold);
|
|
44
|
+
box-shadow: var(--nb-shadow-raised);
|
|
45
|
+
}
|
|
46
|
+
.nb-btn--primary:hover {
|
|
47
|
+
background: var(--nb-primary-bright);
|
|
48
|
+
color: #fff;
|
|
49
|
+
box-shadow: var(--nb-shadow-raised-hover);
|
|
50
|
+
}
|
|
51
|
+
.nb-btn--primary:focus-visible {
|
|
52
|
+
background: var(--nb-primary-bright);
|
|
53
|
+
color: #fff;
|
|
54
|
+
box-shadow: var(--nb-shadow-raised-hover), 0 0 0 4px var(--nb-primary-glow);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Accent — glass with a sky-blue edge, for the secondary path. */
|
|
58
|
+
.nb-btn--accent {
|
|
59
|
+
border-color: var(--nb-accent);
|
|
60
|
+
color: var(--nb-accent-deep);
|
|
61
|
+
}
|
|
62
|
+
.nb-btn--accent:hover,
|
|
63
|
+
.nb-btn--accent:focus-visible {
|
|
64
|
+
color: var(--nb-accent-deep);
|
|
65
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Ghost — no chrome until hovered. */
|
|
69
|
+
.nb-btn--ghost {
|
|
70
|
+
background: none;
|
|
71
|
+
border-color: transparent;
|
|
72
|
+
box-shadow: none;
|
|
73
|
+
}
|
|
74
|
+
.nb-btn--ghost:hover,
|
|
75
|
+
.nb-btn--ghost:focus-visible {
|
|
76
|
+
background: var(--nb-sky-tint);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.nb-btn--danger {
|
|
80
|
+
background: var(--nb-danger-deep);
|
|
81
|
+
border-color: transparent;
|
|
82
|
+
color: #fff;
|
|
83
|
+
font-weight: var(--nb-font-weight-bold);
|
|
84
|
+
box-shadow: 0 4px 14px rgba(204, 31, 31, 0.39);
|
|
85
|
+
}
|
|
86
|
+
.nb-btn--danger:hover,
|
|
87
|
+
.nb-btn--danger:focus-visible {
|
|
88
|
+
background: var(--nb-danger);
|
|
89
|
+
color: #4a0000;
|
|
90
|
+
box-shadow: 0 6px 20px rgba(255, 77, 77, 0.5);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.nb-btn:disabled {
|
|
94
|
+
opacity: 0.5;
|
|
95
|
+
cursor: not-allowed;
|
|
96
|
+
transform: none;
|
|
97
|
+
box-shadow: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@media (prefers-reduced-motion: reduce) {
|
|
101
|
+
.nb-btn {
|
|
102
|
+
transition: background var(--nb-transition), color var(--nb-transition);
|
|
103
|
+
}
|
|
104
|
+
.nb-btn:hover,
|
|
105
|
+
.nb-btn:focus-visible,
|
|
106
|
+
.nb-btn:active {
|
|
107
|
+
transform: none;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* summer-cloud — card: the glassmorphic panel everything else sits in */
|
|
2
|
+
.nb-card {
|
|
3
|
+
padding: var(--nb-space-5);
|
|
4
|
+
background: var(--nb-surface-glass);
|
|
5
|
+
border: 1px solid var(--nb-border);
|
|
6
|
+
border-radius: var(--nb-radius);
|
|
7
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
8
|
+
-webkit-backdrop-filter: blur(var(--nb-blur));
|
|
9
|
+
box-shadow: var(--nb-shadow);
|
|
10
|
+
color: var(--nb-on-surface);
|
|
11
|
+
}
|
|
12
|
+
.nb-card > :first-child { margin-top: 0; }
|
|
13
|
+
.nb-card > :last-child { margin-bottom: 0; }
|
|
14
|
+
|
|
15
|
+
/* Level 2 — floating: higher-opacity white, lifts on hover. Use for
|
|
16
|
+
* interactive cards (products, tiles), not for static content panels. */
|
|
17
|
+
.nb-card--floating {
|
|
18
|
+
background: var(--nb-surface-glass-high);
|
|
19
|
+
backdrop-filter: blur(var(--nb-blur-high));
|
|
20
|
+
-webkit-backdrop-filter: blur(var(--nb-blur-high));
|
|
21
|
+
transition: transform var(--nb-transition), box-shadow var(--nb-transition);
|
|
22
|
+
}
|
|
23
|
+
.nb-card--floating:hover {
|
|
24
|
+
transform: translateY(-4px);
|
|
25
|
+
box-shadow: var(--nb-shadow-raised-hover);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@media (prefers-reduced-motion: reduce) {
|
|
29
|
+
.nb-card--floating {
|
|
30
|
+
transition: none;
|
|
31
|
+
}
|
|
32
|
+
.nb-card--floating:hover {
|
|
33
|
+
transform: none;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/* summer-cloud — dialog (native <dialog>): the floating tier, fully opaque */
|
|
2
|
+
.nb-dialog {
|
|
3
|
+
padding: var(--nb-space-5);
|
|
4
|
+
max-width: 32rem;
|
|
5
|
+
width: calc(100vw - 2rem);
|
|
6
|
+
background: var(--nb-surface);
|
|
7
|
+
border: 1px solid var(--nb-border);
|
|
8
|
+
border-radius: var(--nb-radius);
|
|
9
|
+
color: var(--nb-on-surface);
|
|
10
|
+
font-family: var(--nb-font-body);
|
|
11
|
+
box-shadow: var(--nb-shadow);
|
|
12
|
+
}
|
|
13
|
+
.nb-dialog::backdrop {
|
|
14
|
+
background: rgba(23, 28, 31, 0.3);
|
|
15
|
+
backdrop-filter: blur(4px);
|
|
16
|
+
}
|
|
17
|
+
.nb-dialog__title {
|
|
18
|
+
margin: 0 0 var(--nb-space-3);
|
|
19
|
+
color: var(--nb-primary);
|
|
20
|
+
font-family: var(--nb-font-display);
|
|
21
|
+
font-size: 1.5rem;
|
|
22
|
+
font-weight: var(--nb-font-weight-bold);
|
|
23
|
+
letter-spacing: var(--nb-tracking-tight);
|
|
24
|
+
}
|
|
25
|
+
.nb-dialog__actions {
|
|
26
|
+
display: flex;
|
|
27
|
+
justify-content: flex-end;
|
|
28
|
+
gap: var(--nb-space-2);
|
|
29
|
+
margin-top: var(--nb-space-5);
|
|
30
|
+
}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
/* summer-cloud — form controls: input, textarea, select, checkbox, radio, switch
|
|
2
|
+
* Fields are sunken (no resting border) and bloom a sky-blue ring on focus. */
|
|
3
|
+
.nb-input,
|
|
4
|
+
.nb-select,
|
|
5
|
+
.nb-textarea {
|
|
6
|
+
display: block;
|
|
7
|
+
width: 100%;
|
|
8
|
+
padding: 0.75rem var(--nb-space-3);
|
|
9
|
+
background: var(--nb-surface-sunken);
|
|
10
|
+
border: 1px solid transparent;
|
|
11
|
+
border-radius: var(--nb-radius);
|
|
12
|
+
color: var(--nb-on-surface);
|
|
13
|
+
font-family: var(--nb-font-body);
|
|
14
|
+
font-weight: var(--nb-font-weight);
|
|
15
|
+
font-size: 16px;
|
|
16
|
+
transition: border-color var(--nb-transition), box-shadow var(--nb-transition);
|
|
17
|
+
}
|
|
18
|
+
.nb-select {
|
|
19
|
+
appearance: none;
|
|
20
|
+
padding-right: 2.25rem;
|
|
21
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23484457' stroke-width='1.5'/%3E%3C/svg%3E");
|
|
22
|
+
background-repeat: no-repeat;
|
|
23
|
+
background-position: right 0.75rem center;
|
|
24
|
+
}
|
|
25
|
+
.nb-input::placeholder,
|
|
26
|
+
.nb-textarea::placeholder {
|
|
27
|
+
color: var(--nb-outline);
|
|
28
|
+
}
|
|
29
|
+
.nb-input:focus,
|
|
30
|
+
.nb-select:focus,
|
|
31
|
+
.nb-textarea:focus {
|
|
32
|
+
outline: none;
|
|
33
|
+
border-color: var(--nb-accent);
|
|
34
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
35
|
+
}
|
|
36
|
+
.nb-input[aria-invalid="true"],
|
|
37
|
+
.nb-textarea[aria-invalid="true"] {
|
|
38
|
+
border-color: var(--nb-danger);
|
|
39
|
+
}
|
|
40
|
+
.nb-input[aria-invalid="true"]:focus,
|
|
41
|
+
.nb-textarea[aria-invalid="true"]:focus {
|
|
42
|
+
box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.2);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Labels are the mono voice: small, tracked, utility-grade. */
|
|
46
|
+
.nb-label {
|
|
47
|
+
display: block;
|
|
48
|
+
margin-bottom: var(--nb-space-1);
|
|
49
|
+
padding-left: var(--nb-space-1);
|
|
50
|
+
color: var(--nb-faint);
|
|
51
|
+
font-family: var(--nb-font-mono);
|
|
52
|
+
font-size: 12px;
|
|
53
|
+
font-weight: 500;
|
|
54
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.nb-field {
|
|
58
|
+
margin-bottom: var(--nb-space-3);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* checkbox & radio */
|
|
62
|
+
.nb-checkbox,
|
|
63
|
+
.nb-radio {
|
|
64
|
+
appearance: none;
|
|
65
|
+
width: 1.25rem;
|
|
66
|
+
height: 1.25rem;
|
|
67
|
+
margin: 0;
|
|
68
|
+
vertical-align: text-bottom;
|
|
69
|
+
background: var(--nb-surface-sunken);
|
|
70
|
+
border: 1px solid var(--nb-outline);
|
|
71
|
+
border-radius: var(--nb-radius-sm);
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
transition: background var(--nb-transition), border-color var(--nb-transition),
|
|
74
|
+
box-shadow var(--nb-transition);
|
|
75
|
+
}
|
|
76
|
+
.nb-radio {
|
|
77
|
+
border-radius: 50%;
|
|
78
|
+
}
|
|
79
|
+
.nb-checkbox:checked,
|
|
80
|
+
.nb-radio:checked {
|
|
81
|
+
background: var(--nb-primary);
|
|
82
|
+
border-color: var(--nb-primary);
|
|
83
|
+
}
|
|
84
|
+
.nb-checkbox:checked {
|
|
85
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
86
|
+
background-repeat: no-repeat;
|
|
87
|
+
background-position: center;
|
|
88
|
+
}
|
|
89
|
+
.nb-radio:checked {
|
|
90
|
+
box-shadow: inset 0 0 0 4px var(--nb-surface);
|
|
91
|
+
}
|
|
92
|
+
.nb-checkbox:focus-visible,
|
|
93
|
+
.nb-radio:focus-visible,
|
|
94
|
+
.nb-switch:focus-visible {
|
|
95
|
+
outline: none;
|
|
96
|
+
border-color: var(--nb-accent);
|
|
97
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
98
|
+
}
|
|
99
|
+
.nb-choice {
|
|
100
|
+
display: inline-flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
gap: var(--nb-space-2);
|
|
103
|
+
color: var(--nb-on-surface);
|
|
104
|
+
font-size: var(--nb-text-sm);
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* switch — the cloud-toggle: oversized, squishy, green when live */
|
|
109
|
+
.nb-switch {
|
|
110
|
+
appearance: none;
|
|
111
|
+
width: 3rem;
|
|
112
|
+
height: 1.75rem;
|
|
113
|
+
margin: 0;
|
|
114
|
+
vertical-align: text-bottom;
|
|
115
|
+
background: var(--nb-surface-sunken);
|
|
116
|
+
border: 1px solid var(--nb-outline);
|
|
117
|
+
border-radius: var(--nb-radius-pill);
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
position: relative;
|
|
120
|
+
transition: background var(--nb-transition), border-color var(--nb-transition);
|
|
121
|
+
}
|
|
122
|
+
.nb-switch::after {
|
|
123
|
+
content: "";
|
|
124
|
+
position: absolute;
|
|
125
|
+
top: 2px;
|
|
126
|
+
left: 2px;
|
|
127
|
+
width: calc(1.75rem - 6px);
|
|
128
|
+
height: calc(1.75rem - 6px);
|
|
129
|
+
border-radius: 50%;
|
|
130
|
+
background: #fff;
|
|
131
|
+
box-shadow: 0 2px 6px rgba(93, 43, 255, 0.2);
|
|
132
|
+
transition: transform var(--nb-transition) var(--nb-ease-bounce);
|
|
133
|
+
}
|
|
134
|
+
.nb-switch:checked {
|
|
135
|
+
background: var(--nb-success);
|
|
136
|
+
border-color: var(--nb-success);
|
|
137
|
+
}
|
|
138
|
+
.nb-switch:checked::after {
|
|
139
|
+
transform: translateX(1.25rem);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
@media (prefers-reduced-motion: reduce) {
|
|
143
|
+
.nb-switch::after {
|
|
144
|
+
transition: none;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/* summer-cloud — nav link: pill that fills with sky tint, arrow slides out */
|
|
2
|
+
.nb-link {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: var(--nb-space-2);
|
|
6
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
7
|
+
border: 1px solid transparent;
|
|
8
|
+
border-radius: var(--nb-radius-pill);
|
|
9
|
+
color: var(--nb-faint);
|
|
10
|
+
text-decoration: none;
|
|
11
|
+
font-family: var(--nb-font-display);
|
|
12
|
+
font-weight: var(--nb-font-weight-medium);
|
|
13
|
+
font-size: var(--nb-text-sm);
|
|
14
|
+
transition:
|
|
15
|
+
background var(--nb-transition),
|
|
16
|
+
color var(--nb-transition);
|
|
17
|
+
}
|
|
18
|
+
.nb-link::after {
|
|
19
|
+
content: "→";
|
|
20
|
+
color: var(--nb-accent);
|
|
21
|
+
transition: transform var(--nb-transition);
|
|
22
|
+
}
|
|
23
|
+
.nb-link:hover,
|
|
24
|
+
.nb-link:focus-visible {
|
|
25
|
+
background: var(--nb-sky-tint);
|
|
26
|
+
color: var(--nb-primary);
|
|
27
|
+
outline: none;
|
|
28
|
+
}
|
|
29
|
+
.nb-link:hover::after,
|
|
30
|
+
.nb-link:focus-visible::after {
|
|
31
|
+
transform: translateX(4px);
|
|
32
|
+
}
|
|
33
|
+
.nb-link:active {
|
|
34
|
+
transform: scale(0.95);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Current page: violet with the underline rule from the top nav. */
|
|
38
|
+
.nb-link--active,
|
|
39
|
+
.nb-link[aria-current="page"] {
|
|
40
|
+
background: none;
|
|
41
|
+
border-radius: 0;
|
|
42
|
+
border-bottom: 2px solid var(--nb-primary);
|
|
43
|
+
color: var(--nb-primary);
|
|
44
|
+
}
|
|
45
|
+
.nb-link--active::after,
|
|
46
|
+
.nb-link[aria-current="page"]::after {
|
|
47
|
+
content: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@media (prefers-reduced-motion: reduce) {
|
|
51
|
+
.nb-link,
|
|
52
|
+
.nb-link::after {
|
|
53
|
+
transition: none;
|
|
54
|
+
}
|
|
55
|
+
.nb-link:hover::after,
|
|
56
|
+
.nb-link:focus-visible::after,
|
|
57
|
+
.nb-link:active {
|
|
58
|
+
transform: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/* summer-cloud — progress bar & spinner: glowing violet indicators */
|
|
2
|
+
.nb-progress {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 0.5rem;
|
|
6
|
+
background: var(--nb-bg-blend);
|
|
7
|
+
border-radius: var(--nb-radius-pill);
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
}
|
|
10
|
+
.nb-progress__bar {
|
|
11
|
+
height: 100%;
|
|
12
|
+
background: var(--nb-primary);
|
|
13
|
+
border-radius: var(--nb-radius-pill);
|
|
14
|
+
box-shadow: 0 0 10px rgba(69, 0, 217, 0.5);
|
|
15
|
+
transition: width var(--nb-transition);
|
|
16
|
+
}
|
|
17
|
+
.nb-progress__bar--accent {
|
|
18
|
+
background: var(--nb-accent);
|
|
19
|
+
box-shadow: 0 0 10px rgba(12, 179, 255, 0.5);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.nb-spinner {
|
|
23
|
+
display: inline-block;
|
|
24
|
+
width: 1.5rem;
|
|
25
|
+
height: 1.5rem;
|
|
26
|
+
border: 2px solid var(--nb-outline);
|
|
27
|
+
border-top-color: var(--nb-primary);
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
animation: nb-spin 0.8s linear infinite;
|
|
30
|
+
}
|
|
31
|
+
@keyframes nb-spin {
|
|
32
|
+
to {
|
|
33
|
+
transform: rotate(360deg);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
@media (prefers-reduced-motion: reduce) {
|
|
37
|
+
.nb-spinner {
|
|
38
|
+
animation-duration: 2s;
|
|
39
|
+
}
|
|
40
|
+
.nb-progress__bar {
|
|
41
|
+
transition: none;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/* summer-cloud — table: mono header labels, sky-tint row hover */
|
|
2
|
+
.nb-table {
|
|
3
|
+
width: 100%;
|
|
4
|
+
border-collapse: collapse;
|
|
5
|
+
font-size: var(--nb-text-sm);
|
|
6
|
+
color: var(--nb-on-surface);
|
|
7
|
+
}
|
|
8
|
+
.nb-table th {
|
|
9
|
+
padding: var(--nb-space-3);
|
|
10
|
+
border-bottom: 1px solid var(--nb-outline);
|
|
11
|
+
color: var(--nb-faint);
|
|
12
|
+
text-align: left;
|
|
13
|
+
text-transform: uppercase;
|
|
14
|
+
font-family: var(--nb-font-mono);
|
|
15
|
+
font-size: 12px;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
18
|
+
}
|
|
19
|
+
.nb-table td {
|
|
20
|
+
padding: var(--nb-space-3);
|
|
21
|
+
border-bottom: 1px solid rgba(201, 195, 218, 0.4);
|
|
22
|
+
}
|
|
23
|
+
.nb-table tbody tr {
|
|
24
|
+
transition: background var(--nb-transition);
|
|
25
|
+
}
|
|
26
|
+
.nb-table tbody tr:hover {
|
|
27
|
+
background: var(--nb-sky-tint);
|
|
28
|
+
}
|
|
29
|
+
/* Numeric cells take the mono voice — prices and data read as utility-grade. */
|
|
30
|
+
.nb-table td.nb-num,
|
|
31
|
+
.nb-table th.nb-num {
|
|
32
|
+
font-family: var(--nb-font-mono);
|
|
33
|
+
text-align: right;
|
|
34
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/* summer-cloud — tabs: violet underline on the active tab, sky tint on hover */
|
|
2
|
+
.nb-tabs {
|
|
3
|
+
display: flex;
|
|
4
|
+
gap: var(--nb-space-2);
|
|
5
|
+
border-bottom: 1px solid var(--nb-outline);
|
|
6
|
+
}
|
|
7
|
+
.nb-tab {
|
|
8
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
9
|
+
margin-bottom: -1px;
|
|
10
|
+
background: none;
|
|
11
|
+
border: none;
|
|
12
|
+
border-bottom: 2px solid transparent;
|
|
13
|
+
border-radius: var(--nb-radius-sm) var(--nb-radius-sm) 0 0;
|
|
14
|
+
color: var(--nb-faint);
|
|
15
|
+
font-family: var(--nb-font-display);
|
|
16
|
+
font-weight: var(--nb-font-weight-medium);
|
|
17
|
+
font-size: var(--nb-text-sm);
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
transition: color var(--nb-transition), background var(--nb-transition),
|
|
20
|
+
border-color var(--nb-transition);
|
|
21
|
+
}
|
|
22
|
+
.nb-tab:hover {
|
|
23
|
+
background: var(--nb-sky-tint);
|
|
24
|
+
color: var(--nb-primary);
|
|
25
|
+
}
|
|
26
|
+
.nb-tab:focus-visible {
|
|
27
|
+
outline: none;
|
|
28
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
29
|
+
}
|
|
30
|
+
.nb-tab--active,
|
|
31
|
+
.nb-tab[aria-selected="true"] {
|
|
32
|
+
color: var(--nb-primary);
|
|
33
|
+
border-bottom-color: var(--nb-primary);
|
|
34
|
+
font-weight: var(--nb-font-weight-bold);
|
|
35
|
+
}
|
|
36
|
+
.nb-tabpanel {
|
|
37
|
+
padding: var(--nb-space-3) 0;
|
|
38
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# summer-cloud
|
|
2
|
+
|
|
3
|
+
Light, airy, high-velocity retail aesthetic — "Airy Energetic." Frosted white
|
|
4
|
+
glass floating on a sky gradient, with a vivid violet doing all the work of
|
|
5
|
+
emphasis. Where neon-butterfly is a command console, summer-cloud is a summer
|
|
6
|
+
storefront: weightless, optimistic, effortless. Nothing sits flat on the page;
|
|
7
|
+
everything hovers.
|
|
8
|
+
|
|
9
|
+
Derived from the Stitch project *Summer Cloud UI System*
|
|
10
|
+
(`15973631330153907862`): Style Guide, Components Showcase, Retail Dashboard.
|
|
11
|
+
|
|
12
|
+
## Color
|
|
13
|
+
|
|
14
|
+
| Role | Value | Usage |
|
|
15
|
+
| --- | --- | --- |
|
|
16
|
+
| Background | `#f6fafe` → `#c9e6ff` | Sky gradient at 135°, `fixed`. Apply via `.nb-bg` |
|
|
17
|
+
| Surface | `#ffffff` | Dialogs and fully opaque panels |
|
|
18
|
+
| Surface sunken | `#f0f4f8` | Inset form fields |
|
|
19
|
+
| Surface glass | `rgba(255,255,255,0.6)` + 12px blur | Cards, alerts (Level 1) |
|
|
20
|
+
| Surface glass high | `rgba(255,255,255,0.8)` + 20px blur | Floating/hover cards, modals (Level 2) |
|
|
21
|
+
| On-surface | `#171c1f` | Body text |
|
|
22
|
+
| Faint | `#484457` | Secondary text, labels, idle nav |
|
|
23
|
+
| Primary | `#4500d9` (violet) | Headings, CTAs, active states, prices, progress |
|
|
24
|
+
| Primary bright | `#5d2bff` | Shadow/glow tint and primary hover fill |
|
|
25
|
+
| Accent | `#0cb3ff` (sky blue) | Focus rings, secondary path, info — the interactive signal |
|
|
26
|
+
| Accent deep | `#006492` | Accent as *text* (the bright sky blue fails contrast) |
|
|
27
|
+
| Info | `#0cb3ff` | Informational callouts and badges |
|
|
28
|
+
| Success | `#30e330` | Switch "on" state — deliberately vibrant, the one high-energy pop |
|
|
29
|
+
| Warning | `#f2c025` | Caution states, "New" badges |
|
|
30
|
+
| Danger | `#ff4d4d` (retail red) | Errors, "Sale" badges, alert rules — carries dark text, never white |
|
|
31
|
+
| Danger deep | `#cc1f1f` | Danger where white text sits on it (destructive buttons) |
|
|
32
|
+
| Border | `rgba(255,255,255,0.4)` | Glass edges — the highlight that makes glass read as glass |
|
|
33
|
+
| Outline | `#c9c3da` | Hairlines on opaque surfaces (chips, table rules, checkboxes) |
|
|
34
|
+
| Sky tint | `rgba(255,255,255,0.7)` | Hover wash on ghost/nav elements |
|
|
35
|
+
|
|
36
|
+
Rules: the violet is the only loud color and carries emphasis alone — resting UI
|
|
37
|
+
is faint grey on white glass. Sky blue means "you can interact with this"
|
|
38
|
+
(focus, secondary actions, info). Never use pure black; never use a grey shadow.
|
|
39
|
+
The gradient is not decoration — on a flat white page the glass has nothing to
|
|
40
|
+
be glass against, and the theme collapses.
|
|
41
|
+
|
|
42
|
+
## Typography
|
|
43
|
+
|
|
44
|
+
Three voices, per the project's design system:
|
|
45
|
+
|
|
46
|
+
- **Display & headings:** Plus Jakarta Sans (600/700/800), letter-spacing
|
|
47
|
+
`-0.02em` at display sizes — friendly rounded terminals, tucked in tight.
|
|
48
|
+
- **Body:** Inter 400, 16px/24px. Sentence case, always.
|
|
49
|
+
- **Data & labels:** JetBrains Mono 500, 12px, tracking `0.05em`. Field labels,
|
|
50
|
+
badges, table headers, prices, metadata. This is the "utility-grade"
|
|
51
|
+
counterweight to the soft headings. Uppercase for badges and table headers
|
|
52
|
+
(furniture); sentence case for field labels, which people read as words.
|
|
53
|
+
|
|
54
|
+
Interactive text (buttons, links, tabs) is Plus Jakarta Sans 600 at 14px,
|
|
55
|
+
sentence case. Uppercase never appears outside the mono voice.
|
|
56
|
+
|
|
57
|
+
The three webfonts are not bundled; include the Google Fonts links or self-host.
|
|
58
|
+
Every stack falls back to a system family.
|
|
59
|
+
|
|
60
|
+
## Shape & effects
|
|
61
|
+
|
|
62
|
+
- Radius `1rem` (16px) for cards, panels, and fields; **pills**
|
|
63
|
+
(`--nb-radius-pill`) for every button, badge, and chip; `0.25rem` minimum
|
|
64
|
+
anywhere else. Never 0.
|
|
65
|
+
- Depth is **blur + tinted shadow**, never grey drop shadows. Shadows are tinted
|
|
66
|
+
with `#5d2bff`: `0 20px 40px rgba(93,43,255,0.08)` at rest,
|
|
67
|
+
`0 4px 14px rgba(93,43,255,0.39)` for raised CTAs.
|
|
68
|
+
- Two elevation tiers only — Level 1 glass (0.6 white / 12px blur) for content,
|
|
69
|
+
Level 2 (0.8 white / 20px blur + lift) for interactive and floating things.
|
|
70
|
+
- **Bouncy, not linear.** Buttons scale to 1.03 on hover and 0.95 on press with
|
|
71
|
+
`cubic-bezier(0.34,1.56,0.64,1)`; floating cards translate `-4px`.
|
|
72
|
+
- Focus is a 4px sky-blue ring (`0 0 0 4px rgba(12,179,255,0.2)`), never an
|
|
73
|
+
outline suppression without a replacement.
|
|
74
|
+
- Spacing is strictly multiples of 8px. When in doubt, add 8.
|
|
75
|
+
- Respect `prefers-reduced-motion` — every transform is dropped.
|
|
76
|
+
|
|
77
|
+
## Components
|
|
78
|
+
|
|
79
|
+
Class prefix `nb-` (shared across themes so `@nazuraki/ui-react` stays
|
|
80
|
+
theme-agnostic). Variants use BEM-ish modifiers (`nb-btn--primary`).
|
|
81
|
+
|
|
82
|
+
- **Card** `.nb-card` — glass panel; `--floating` adds the Level 2 hover lift.
|
|
83
|
+
- **NavLink** `.nb-link` — pill, sky-tint wash, `→` slides 4px on hover;
|
|
84
|
+
`--active` / `[aria-current=page]` becomes the violet underline rule.
|
|
85
|
+
- **Button** `.nb-btn` — glass by default; `--primary` (solid violet CTA, one
|
|
86
|
+
per view), `--accent` (sky-edged glass), `--ghost`, `--danger`.
|
|
87
|
+
- **Form** `.nb-input`, `.nb-textarea`, `.nb-select`, `.nb-label`, `.nb-field`,
|
|
88
|
+
`.nb-checkbox`, `.nb-radio`, `.nb-switch`, `.nb-choice` — sunken fields, no
|
|
89
|
+
resting border, sky-blue ring on focus. The switch is the oversized
|
|
90
|
+
"cloud-toggle": squishy, and green when live.
|
|
91
|
+
- **Badge** `.nb-badge` + semantic modifiers — solid pills, mono uppercase.
|
|
92
|
+
**Chip** `.nb-chip` — outlined filter chip; `--selected` fills violet.
|
|
93
|
+
- **Alert** `.nb-alert` — glass card with a 4px semantic left rule.
|
|
94
|
+
- **Dialog** `.nb-dialog` — native `<dialog>`, opaque white, blurred backdrop.
|
|
95
|
+
- **Tabs** `.nb-tabs`/`.nb-tab`/`.nb-tabpanel` — violet underline when active.
|
|
96
|
+
- **Table** `.nb-table` — mono uppercase headers, sky-tint row hover; add
|
|
97
|
+
`.nb-num` to numeric cells for the mono/right-aligned treatment.
|
|
98
|
+
- **Progress** `.nb-progress`, **Spinner** `.nb-spinner` — glowing violet.
|
|
99
|
+
|
|
100
|
+
## Deviations from the Stitch source
|
|
101
|
+
|
|
102
|
+
- The generated screens flattened all three type voices to Plus Jakarta Sans.
|
|
103
|
+
This theme follows the project's written design system instead (Inter body,
|
|
104
|
+
JetBrains Mono labels), which is the richer and intended spec.
|
|
105
|
+
- The project's stored theme carried an earlier palette (near-black primary
|
|
106
|
+
`#01020e`, lavender secondary `#7248ae`). The rendered screens — all three,
|
|
107
|
+
in agreement — use violet `#4500d9` and sky blue `#0cb3ff`. This theme
|
|
108
|
+
matches the screens, since that is what Summer Cloud actually looks like.
|
|
109
|
+
- Tabs, table, dialog, and spinner do not appear in the source screens; they are
|
|
110
|
+
extrapolated from the rules above to complete the `nb-*` inventory.
|
|
111
|
+
- The source screens set white text on retail red (`#ff4d4d`), which is 3.27:1 —
|
|
112
|
+
below AA at badge and button sizes. This theme keeps the vivid red and puts
|
|
113
|
+
dark text on it (4.97:1), and uses `--nb-danger-deep` for the solid
|
|
114
|
+
destructive button (5.55:1 on white). Every other foreground/background pair
|
|
115
|
+
in the palette clears AA.
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* summer-cloud — full theme entry point */
|
|
2
|
+
@import "./tokens.css";
|
|
3
|
+
@import "./base.css";
|
|
4
|
+
@import "./components/card.css";
|
|
5
|
+
@import "./components/link.css";
|
|
6
|
+
@import "./components/button.css";
|
|
7
|
+
@import "./components/form.css";
|
|
8
|
+
@import "./components/badge.css";
|
|
9
|
+
@import "./components/alert.css";
|
|
10
|
+
@import "./components/dialog.css";
|
|
11
|
+
@import "./components/tabs.css";
|
|
12
|
+
@import "./components/table.css";
|
|
13
|
+
@import "./components/progress.css";
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/* summer-cloud — design tokens
|
|
2
|
+
* Source of truth for the summer-cloud theme. Consume via:
|
|
3
|
+
* @import "@nazuraki/styles/summer-cloud/tokens";
|
|
4
|
+
* or pull the whole theme with ./index.css.
|
|
5
|
+
*
|
|
6
|
+
* Token names mirror neon-butterfly's --nb-* contract so themes stay
|
|
7
|
+
* swappable; names marked (extra) are additions this theme needs and that
|
|
8
|
+
* neon-butterfly does not define.
|
|
9
|
+
*/
|
|
10
|
+
:root {
|
|
11
|
+
/* color */
|
|
12
|
+
--nb-bg: #f6fafe;
|
|
13
|
+
--nb-bg-blend: #eaeef2;
|
|
14
|
+
--nb-surface: #ffffff;
|
|
15
|
+
--nb-surface-sunken: #f0f4f8; /* (extra) inset fields */
|
|
16
|
+
--nb-surface-glass: rgba(255, 255, 255, 0.6);
|
|
17
|
+
--nb-surface-glass-high: rgba(255, 255, 255, 0.8); /* (extra) floating tier */
|
|
18
|
+
--nb-on-surface: #171c1f;
|
|
19
|
+
--nb-faint: #484457;
|
|
20
|
+
--nb-primary: #4500d9;
|
|
21
|
+
--nb-primary-bright: #5d2bff; /* (extra) shadow/glow tint */
|
|
22
|
+
--nb-primary-glow: rgba(93, 43, 255, 0.4);
|
|
23
|
+
--nb-primary-border: rgba(69, 0, 217, 0.2);
|
|
24
|
+
--nb-accent: #0cb3ff;
|
|
25
|
+
--nb-accent-glow: rgba(12, 179, 255, 0.2);
|
|
26
|
+
--nb-accent-deep: #006492; /* (extra) readable accent text */
|
|
27
|
+
--nb-border: rgba(255, 255, 255, 0.4);
|
|
28
|
+
--nb-outline: #c9c3da; /* (extra) hairline on opaque surfaces */
|
|
29
|
+
|
|
30
|
+
/* semantic color */
|
|
31
|
+
--nb-info: #0cb3ff;
|
|
32
|
+
--nb-success: #30e330;
|
|
33
|
+
--nb-warning: #f2c025;
|
|
34
|
+
--nb-danger: #ff4d4d;
|
|
35
|
+
--nb-danger-deep: #cc1f1f; /* (extra) danger where white text sits on it */
|
|
36
|
+
|
|
37
|
+
/* sky gradient (extra) */
|
|
38
|
+
--nb-sky-start: #f0f4f8;
|
|
39
|
+
--nb-sky-end: #c9e6ff;
|
|
40
|
+
--nb-sky-tint: rgba(255, 255, 255, 0.7);
|
|
41
|
+
|
|
42
|
+
/* typography */
|
|
43
|
+
--nb-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; /* (extra) */
|
|
44
|
+
--nb-font-body: "Inter", ui-sans-serif, system-ui, sans-serif; /* (extra) */
|
|
45
|
+
--nb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
46
|
+
--nb-font-weight: 400;
|
|
47
|
+
--nb-font-weight-medium: 600; /* (extra) */
|
|
48
|
+
--nb-font-weight-bold: 700;
|
|
49
|
+
--nb-text-sm: 14px;
|
|
50
|
+
--nb-tracking-wide: 0.05em;
|
|
51
|
+
--nb-tracking-tight: -0.02em; /* (extra) display sizes */
|
|
52
|
+
|
|
53
|
+
/* shape & effects */
|
|
54
|
+
--nb-radius: 1rem;
|
|
55
|
+
--nb-radius-sm: 0.25rem; /* (extra) */
|
|
56
|
+
--nb-radius-pill: 9999px; /* (extra) */
|
|
57
|
+
--nb-blur: 12px;
|
|
58
|
+
--nb-blur-high: 20px; /* (extra) */
|
|
59
|
+
--nb-transition: 0.3s;
|
|
60
|
+
--nb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* (extra) */
|
|
61
|
+
|
|
62
|
+
/* elevation (extra) — tinted with the primary, never grey */
|
|
63
|
+
--nb-shadow: 0 20px 40px rgba(93, 43, 255, 0.08);
|
|
64
|
+
--nb-shadow-soft: 0 10px 30px rgba(0, 100, 146, 0.05);
|
|
65
|
+
--nb-shadow-raised: 0 4px 14px rgba(93, 43, 255, 0.39);
|
|
66
|
+
--nb-shadow-raised-hover: 0 6px 20px rgba(93, 43, 255, 0.5);
|
|
67
|
+
|
|
68
|
+
/* spacing */
|
|
69
|
+
--nb-space-1: 0.25rem;
|
|
70
|
+
--nb-space-2: 0.5rem;
|
|
71
|
+
--nb-space-3: 1rem;
|
|
72
|
+
--nb-space-4: 1.5rem;
|
|
73
|
+
--nb-space-5: 2rem;
|
|
74
|
+
}
|