@pepperui/tokens 1.2.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.
- package/README.md +101 -0
- package/dist/_tokens.scss +348 -0
- package/dist/figma.json +4503 -0
- package/dist/pepper_tokens.py +819 -0
- package/dist/shadcn.css +125 -0
- package/dist/tailwind.css +213 -0
- package/dist/tailwind.js +214 -0
- package/dist/tokens.css +573 -0
- package/package.json +24 -0
package/README.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# @pepperui/tokens
|
|
2
|
+
|
|
3
|
+
The Mobupps design system's tokens. Generated from `tokens/*.json` (W3C DTCG format) in the
|
|
4
|
+
[`pepper-ui`](https://bitbucket.org/rashidmobupps/pepper-ui) repo. **Nothing in `dist/` is hand-edited** —
|
|
5
|
+
if a value is wrong, it is wrong in the source and nowhere else.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @pepperui/tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
@import "@pepperui/tokens/css";
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
**On npm from 1.2.0** (item 1.2.3). A version on the registry is always a version this repository tags —
|
|
18
|
+
`tokens-v1.2.0` — and never one without: the tag is cut first, the publish is of that commit (`RELEASING.md` §1).
|
|
19
|
+
|
|
20
|
+
~~Before 1.2.0 a consumer installed a git tag~~ — and **a tag does not install this package** (corrected
|
|
21
|
+
2026-09-11, 3.3.8): npm installs the `package.json` at the root of a git URL, and this repository's root is the
|
|
22
|
+
private workspace `pepper-ui`, so a `git+ssh://…#tokens-v1.1.0` line puts the *whole repository* at
|
|
23
|
+
`node_modules/pepper-ui` and `@pepperui/tokens/…` does not resolve from it (npm 11 accepts a
|
|
24
|
+
`::path:packages/tokens` suffix and installs the root anyway). A consumer still pinned that way moves by replacing
|
|
25
|
+
its line with the two above; the paths it imported — `pepper-ui/packages/tokens/dist/…` — become the specifiers in
|
|
26
|
+
the table below.
|
|
27
|
+
|
|
28
|
+
A tag is the source as it stood the day it was cut, and the site's Changelog lists what has changed since.
|
|
29
|
+
|
|
30
|
+
## Use
|
|
31
|
+
|
|
32
|
+
**CSS** — custom properties, `--pui-` prefixed (D6).
|
|
33
|
+
|
|
34
|
+
```css
|
|
35
|
+
@import "@pepperui/tokens/css";
|
|
36
|
+
|
|
37
|
+
.card { background: var(--pui-surface-card); color: var(--pui-text-default); }
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**shadcn / Tailwind v4** (2.7.5, D53) — two more files, both references into `tokens.css`, never values:
|
|
41
|
+
|
|
42
|
+
```css
|
|
43
|
+
/* the app's Tailwind v4 entry */
|
|
44
|
+
@import "tailwindcss"; /* or theme.css + utilities.css without preflight — see artifacts/pilots/mafo */
|
|
45
|
+
@import "@pepperui/tokens/css"; /* --pui-* */
|
|
46
|
+
@import "@pepperui/tokens/shadcn"; /* --primary, --ring, --muted… = Pepper roles (build/shadcn-map.json), + @theme */
|
|
47
|
+
@import "@pepperui/tokens/tailwind.css"; /* every scale as a pui- key: rounded-pui-16, text-pui-14, bg-pui-surface-card */
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
`shadcn.css` is what every shadcn component reads (`bg-primary`, `text-muted-foreground`, `ring-ring`); D53 puts
|
|
51
|
+
`--primary` on the black button and `--ring` on `border/focus`. `tailwind.css` is the v4 form of the preset (v4 has no
|
|
52
|
+
JS preset); `tailwind.js` stays for Tailwind v3.
|
|
53
|
+
|
|
54
|
+
**Accent modes.** Paggy's `data-accent` system, promoted to the token source. Set the attribute and
|
|
55
|
+
every `--pui-accent-*` re-resolves:
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<section data-accent="yellow"> <!-- accent-heading goes grey, on-accent goes ink --> </section>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
The four modes are `blue`, `red`, `yellow`, `multicolor`. Two rules ride along that used to live in one
|
|
62
|
+
CSS file: yellow's subtitle drops to neutral grey (**U12**), and yellow's on-accent text flips to ink
|
|
63
|
+
because white on `#f9c426` is about 1.8:1 (**D24**).
|
|
64
|
+
|
|
65
|
+
**Canvas modes.** Typography comes in three: `web-desktop` (the default), `web-mobile` (under 768px,
|
|
66
|
+
automatic) and `slide` (opt in with `data-canvas="slide"` — the 1920×1080 deck canvas, which is fixed
|
|
67
|
+
and never responsive).
|
|
68
|
+
|
|
69
|
+
**Tailwind** — for the products.
|
|
70
|
+
|
|
71
|
+
```js
|
|
72
|
+
export default { presets: [require('@pepperui/tokens/tailwind')] };
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
**SCSS** — for the Laravel site repo. `$pui-color-blue-400`, plus a `$pui-accent` map.
|
|
76
|
+
|
|
77
|
+
**Python** — for `pptx_export.py`, so the PPTX palette stops being a hand-kept copy.
|
|
78
|
+
|
|
79
|
+
```python
|
|
80
|
+
from pepper_tokens import color, accent
|
|
81
|
+
color("blue", "400") # "#2b25d9"
|
|
82
|
+
accent("yellow", "heading") # "#858080"
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
**Figma** — `figma.json`, four collections (Primitives, Semantic, Accent, Typography) with their modes,
|
|
86
|
+
imported by the plugin. Fedor triggers it by hand; **D13** established that is not a cost worth
|
|
87
|
+
designing around.
|
|
88
|
+
|
|
89
|
+
## What is in here
|
|
90
|
+
|
|
91
|
+
| | |
|
|
92
|
+
|---|---|
|
|
93
|
+
| Colour | `neutral` 0–1000, `blue` / `red` / `yellow` 100–700, `green` 100/400/600, `light-blue` 100, three gradients |
|
|
94
|
+
| Semantic | `text.*` `surface.*` `border.*` `action.*` `status.*`, and `accent.*` in four modes |
|
|
95
|
+
| Type | display / headline / title / body / label × three canvas modes |
|
|
96
|
+
| Space | 2–80, radius 4–64 + full, four shadows, five durations, two easings |
|
|
97
|
+
| Layout | two breakpoints, container widths, the slide canvas |
|
|
98
|
+
|
|
99
|
+
Every value is quoted from a real source file and says so in its `$description`. The only two exceptions
|
|
100
|
+
are `neutral.500` and `neutral.700`, which no file contained: they are derived as OKLab midpoints of their
|
|
101
|
+
neighbours by `scripts/derive_neutrals.py`, and a test fails if they ever stop matching it.
|
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
// _tokens.scss — SCSS variables
|
|
2
|
+
// GENERATED by `npm run build` from tokens/*.json — do not edit by hand.
|
|
3
|
+
|
|
4
|
+
$pui-icon-list-ink: #6a66e4;
|
|
5
|
+
$pui-insight-max-width: 1344px;
|
|
6
|
+
$pui-bullet-list-gap: 8px;
|
|
7
|
+
$pui-chip-radius: 9999px;
|
|
8
|
+
$pui-table-header-bg: #0c0b41;
|
|
9
|
+
$pui-table-header-pill-tint: #d4d3f7;
|
|
10
|
+
$pui-table-row-selected-bg: #e9e9fb;
|
|
11
|
+
$pui-table-divider: #dad9d9;
|
|
12
|
+
$pui-card-band: #dad9d9;
|
|
13
|
+
$pui-avatar-blue-bg: #d4d3f7;
|
|
14
|
+
$pui-avatar-blue-fg: #110e56;
|
|
15
|
+
$pui-avatar-red-bg: #f9d3d2;
|
|
16
|
+
$pui-avatar-red-fg: #5b0e0d;
|
|
17
|
+
$pui-avatar-yellow-bg: #fdf3d3;
|
|
18
|
+
$pui-avatar-yellow-fg: #634e0f;
|
|
19
|
+
$pui-toggle-on-bg: #544d4d;
|
|
20
|
+
$pui-toggle-on-fg: #ffffff;
|
|
21
|
+
$pui-tabs-track: #f2f2f2;
|
|
22
|
+
$pui-kpi-tone-blue-bg: #e9e9fb;
|
|
23
|
+
$pui-kpi-tone-red-bg: #fce9e8;
|
|
24
|
+
$pui-kpi-tone-yellow-bg: #fef9e9;
|
|
25
|
+
$pui-kpi-tone-neutral-bg: #f2f2f2;
|
|
26
|
+
$pui-kpi-delta-ring: #ffffff;
|
|
27
|
+
$pui-nav-bg: #231b1b;
|
|
28
|
+
$pui-nav-item-fg: #b5b3b3;
|
|
29
|
+
$pui-nav-item-fg-active: #ffffff;
|
|
30
|
+
$pui-nav-item-bg-hover: #ffffff14;
|
|
31
|
+
$pui-nav-item-bg-active: #ffffff29;
|
|
32
|
+
$pui-nav-section-fg: #858080;
|
|
33
|
+
$pui-illustration-shell: #ffffff;
|
|
34
|
+
$pui-illustration-surface: #f2f2f7;
|
|
35
|
+
$pui-illustration-detail: #dad9d9;
|
|
36
|
+
$pui-illustration-screen: #fbfbfd;
|
|
37
|
+
$pui-illustration-deck: #ffffff;
|
|
38
|
+
$pui-illustration-text: #0b0202;
|
|
39
|
+
$pui-illustration-outline-color: #0b0202;
|
|
40
|
+
$pui-illustration-outline-opacity: 0.85;
|
|
41
|
+
$pui-illustration-outline-width: 0.5;
|
|
42
|
+
$pui-illustration-connector-color: #b5b3b3;
|
|
43
|
+
$pui-illustration-connector-radius: 0.028;
|
|
44
|
+
$pui-illustration-arrow-color: #6c6666;
|
|
45
|
+
$pui-illustration-arrow-width: 3;
|
|
46
|
+
$pui-illustration-arrow-head-length: 5;
|
|
47
|
+
$pui-illustration-arrow-head-angle: 40;
|
|
48
|
+
$pui-color-neutral-0: #ffffff;
|
|
49
|
+
$pui-color-neutral-100: #f2f2f2;
|
|
50
|
+
$pui-color-neutral-200: #dad9d9;
|
|
51
|
+
$pui-color-neutral-300: #b5b3b3;
|
|
52
|
+
$pui-color-neutral-400: #858080;
|
|
53
|
+
$pui-color-neutral-500: #6c6666;
|
|
54
|
+
$pui-color-neutral-600: #544d4d;
|
|
55
|
+
$pui-color-neutral-700: #3b3333;
|
|
56
|
+
$pui-color-neutral-800: #231b1b;
|
|
57
|
+
$pui-color-neutral-900: #0b0202;
|
|
58
|
+
$pui-color-neutral-1000: #000000;
|
|
59
|
+
$pui-color-blue-100: #e9e9fb;
|
|
60
|
+
$pui-color-blue-200: #d4d3f7;
|
|
61
|
+
$pui-color-blue-300: #6a66e4;
|
|
62
|
+
$pui-color-blue-400: #2b25d9;
|
|
63
|
+
$pui-color-blue-500: #221dad;
|
|
64
|
+
$pui-color-blue-600: #110e56;
|
|
65
|
+
$pui-color-blue-700: #0c0b41;
|
|
66
|
+
$pui-color-red-100: #fce9e8;
|
|
67
|
+
$pui-color-red-200: #f9d3d2;
|
|
68
|
+
$pui-color-red-300: #ec6663;
|
|
69
|
+
$pui-color-red-400: #e42521;
|
|
70
|
+
$pui-color-red-500: #b61d1a;
|
|
71
|
+
$pui-color-red-600: #5b0e0d;
|
|
72
|
+
$pui-color-red-700: #440b09;
|
|
73
|
+
$pui-color-yellow-100: #fef9e9;
|
|
74
|
+
$pui-color-yellow-200: #fdf3d3;
|
|
75
|
+
$pui-color-yellow-300: #fad567;
|
|
76
|
+
$pui-color-yellow-400: #f9c426;
|
|
77
|
+
$pui-color-yellow-500: #c79c1e;
|
|
78
|
+
$pui-color-yellow-600: #634e0f;
|
|
79
|
+
$pui-color-yellow-700: #4a3a0b;
|
|
80
|
+
$pui-color-green-100: #d4f2de;
|
|
81
|
+
$pui-color-green-400: #74af36;
|
|
82
|
+
$pui-color-green-600: #1a6b36;
|
|
83
|
+
$pui-color-status-danger: #da4144;
|
|
84
|
+
$pui-color-light-blue-50: #fbfbfd;
|
|
85
|
+
$pui-color-light-blue-100: #f2f2f7;
|
|
86
|
+
$pui-color-gradient-stop-pink: #f24288;
|
|
87
|
+
$pui-color-gradient-stop-orchid: #ebb8fc;
|
|
88
|
+
$pui-color-gradient-stop-magenta: #d947d6;
|
|
89
|
+
$pui-color-alpha-neutral-800-50: #231b1b80;
|
|
90
|
+
$pui-color-alpha-white-8: #ffffff14;
|
|
91
|
+
$pui-color-alpha-white-16: #ffffff29;
|
|
92
|
+
$pui-color-alpha-black-7: #00000012;
|
|
93
|
+
$pui-color-alpha-grey-232-49: #e8e8e87d;
|
|
94
|
+
$pui-color-alpha-white-71: #ffffffb5;
|
|
95
|
+
$pui-gradient-blue: linear-gradient(112deg, #2B25D9 30.59%, #F24288 125.66%);
|
|
96
|
+
$pui-gradient-yellow: linear-gradient(311deg, #EBB8FC 19.79%, #F9C426 80.81%);
|
|
97
|
+
$pui-gradient-red: linear-gradient(101deg, #E42521 26.31%, #D947D6 99.31%);
|
|
98
|
+
$pui-space-2: 2px;
|
|
99
|
+
$pui-space-4: 4px;
|
|
100
|
+
$pui-space-8: 8px;
|
|
101
|
+
$pui-space-12: 12px;
|
|
102
|
+
$pui-space-16: 16px;
|
|
103
|
+
$pui-space-20: 20px;
|
|
104
|
+
$pui-space-24: 24px;
|
|
105
|
+
$pui-space-32: 32px;
|
|
106
|
+
$pui-space-40: 40px;
|
|
107
|
+
$pui-space-48: 48px;
|
|
108
|
+
$pui-space-64: 64px;
|
|
109
|
+
$pui-space-80: 80px;
|
|
110
|
+
$pui-radius-4: 4px;
|
|
111
|
+
$pui-radius-8: 8px;
|
|
112
|
+
$pui-radius-16: 16px;
|
|
113
|
+
$pui-radius-32: 32px;
|
|
114
|
+
$pui-radius-64: 64px;
|
|
115
|
+
$pui-radius-full: 9999px;
|
|
116
|
+
$pui-font-family-poppins: Poppins, sans-serif;
|
|
117
|
+
$pui-font-family-cyrillic: Onest, sans-serif;
|
|
118
|
+
$pui-font-weight-400: 400;
|
|
119
|
+
$pui-font-weight-500: 500;
|
|
120
|
+
$pui-font-weight-600: 600;
|
|
121
|
+
$pui-font-weight-700: 700;
|
|
122
|
+
$pui-font-size-12: 12px;
|
|
123
|
+
$pui-font-size-13: 13px;
|
|
124
|
+
$pui-font-size-14: 14px;
|
|
125
|
+
$pui-font-size-15: 15px;
|
|
126
|
+
$pui-font-size-16: 16px;
|
|
127
|
+
$pui-font-size-18: 18px;
|
|
128
|
+
$pui-font-size-20: 20px;
|
|
129
|
+
$pui-font-size-22: 22px;
|
|
130
|
+
$pui-font-size-24: 24px;
|
|
131
|
+
$pui-font-size-25: 25px;
|
|
132
|
+
$pui-font-size-26: 26px;
|
|
133
|
+
$pui-font-size-28: 28px;
|
|
134
|
+
$pui-font-size-32: 32px;
|
|
135
|
+
$pui-font-size-36: 36px;
|
|
136
|
+
$pui-font-size-40: 40px;
|
|
137
|
+
$pui-font-size-41: 41px;
|
|
138
|
+
$pui-font-size-45: 45px;
|
|
139
|
+
$pui-font-size-46: 46px;
|
|
140
|
+
$pui-font-size-48: 48px;
|
|
141
|
+
$pui-font-size-64: 64px;
|
|
142
|
+
$pui-font-size-65: 65px;
|
|
143
|
+
$pui-font-size-66: 66px;
|
|
144
|
+
$pui-font-size-92: 92px;
|
|
145
|
+
$pui-font-size-117: 117px;
|
|
146
|
+
$pui-font-size-148: 148px;
|
|
147
|
+
$pui-font-line-height-tight: 1.2;
|
|
148
|
+
$pui-font-line-height-normal: 1.4;
|
|
149
|
+
$pui-font-line-height-relaxed: 1.5;
|
|
150
|
+
$pui-font-line-height-loose: 1.7;
|
|
151
|
+
$pui-font-letter-spacing-normal: 0px;
|
|
152
|
+
$pui-font-letter-spacing-tight: -0.01em;
|
|
153
|
+
$pui-font-letter-spacing-wide: 0.06em;
|
|
154
|
+
$pui-font-letter-spacing-wider: 0.1em;
|
|
155
|
+
$pui-shadow-sm: 0px 1px 2px 0px #0000000d;
|
|
156
|
+
$pui-shadow-lg: 0px 24px 48px -12px #0000002e;
|
|
157
|
+
$pui-shadow-xl: 0px 24px 64px 0px #1510511f;
|
|
158
|
+
$pui-shadow-xxl: 0px 32px 64px 0px #00000024;
|
|
159
|
+
$pui-duration-instant: 50ms;
|
|
160
|
+
$pui-duration-fast: 150ms;
|
|
161
|
+
$pui-duration-medium: 200ms;
|
|
162
|
+
$pui-duration-slow: 250ms;
|
|
163
|
+
$pui-duration-slower: 300ms;
|
|
164
|
+
$pui-easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
165
|
+
$pui-easing-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
|
|
166
|
+
$pui-size-icon-16: 16px;
|
|
167
|
+
$pui-size-icon-24: 24px;
|
|
168
|
+
$pui-size-icon-32: 32px;
|
|
169
|
+
$pui-size-icon-48: 48px;
|
|
170
|
+
$pui-size-control-small: 28px;
|
|
171
|
+
$pui-size-control-medium: 36px;
|
|
172
|
+
$pui-size-control-large: 44px;
|
|
173
|
+
$pui-breakpoint-tablet: 768px;
|
|
174
|
+
$pui-breakpoint-desktop: 1024px;
|
|
175
|
+
$pui-container-web: 1320px;
|
|
176
|
+
$pui-container-slide: 1792px;
|
|
177
|
+
$pui-canvas-slide-width: 1920px;
|
|
178
|
+
$pui-canvas-slide-height: 1080px;
|
|
179
|
+
$pui-canvas-slide-margin: 64px;
|
|
180
|
+
$pui-canvas-slide-margin-top: 42px;
|
|
181
|
+
$pui-blur-nav: 7.3px;
|
|
182
|
+
$pui-blur-panel: 14.6px;
|
|
183
|
+
$pui-blur-card: 6.8px;
|
|
184
|
+
$pui-blur-blob: 150px;
|
|
185
|
+
$pui-text-default: #0b0202;
|
|
186
|
+
$pui-text-muted: #544d4d;
|
|
187
|
+
$pui-text-subtle: #858080;
|
|
188
|
+
$pui-text-on-accent: #ffffff;
|
|
189
|
+
$pui-text-on-inverse: #ffffff;
|
|
190
|
+
$pui-text-link: #2b25d9;
|
|
191
|
+
$pui-text-disabled: #b5b3b3;
|
|
192
|
+
$pui-text-error: #e42521;
|
|
193
|
+
$pui-text-caption: #544d4d;
|
|
194
|
+
$pui-surface-page: #ffffff;
|
|
195
|
+
$pui-surface-card: #f2f2f7;
|
|
196
|
+
$pui-surface-sunken: #f2f2f2;
|
|
197
|
+
$pui-surface-inverse: #231b1b;
|
|
198
|
+
$pui-surface-slot: #ffffff;
|
|
199
|
+
$pui-surface-glass: #e8e8e87d;
|
|
200
|
+
$pui-surface-glass-strong: #ffffffb5;
|
|
201
|
+
$pui-ground-page-sunken: #f2f2f2;
|
|
202
|
+
$pui-ground-page-track: #f2f2f2;
|
|
203
|
+
$pui-ground-card-sunken: #dad9d9;
|
|
204
|
+
$pui-ground-card-track: #ffffff;
|
|
205
|
+
$pui-overlay-scrim: #231b1b80;
|
|
206
|
+
$pui-border-default: #dad9d9;
|
|
207
|
+
$pui-border-strong: #858080;
|
|
208
|
+
$pui-border-focus: #6a66e4;
|
|
209
|
+
$pui-border-error: #e42521;
|
|
210
|
+
$pui-action-primary-bg: #0b0202;
|
|
211
|
+
$pui-action-primary-bg-hover: #3b3333;
|
|
212
|
+
$pui-action-primary-fg: #ffffff;
|
|
213
|
+
$pui-action-secondary-bg: #ffffff;
|
|
214
|
+
$pui-action-secondary-bg-hover: #f2f2f2;
|
|
215
|
+
$pui-action-secondary-fg: #0b0202;
|
|
216
|
+
$pui-action-secondary-border: #dad9d9;
|
|
217
|
+
$pui-action-danger-bg: #e42521;
|
|
218
|
+
$pui-action-danger-bg-hover: #b61d1a;
|
|
219
|
+
$pui-action-danger-fg: #ffffff;
|
|
220
|
+
$pui-action-disabled-bg: #f2f2f2;
|
|
221
|
+
$pui-action-disabled-fg: #b5b3b3;
|
|
222
|
+
$pui-status-success-bg: #d4f2de;
|
|
223
|
+
$pui-status-success-fg: #1a6b36;
|
|
224
|
+
$pui-status-success-solid: #74af36;
|
|
225
|
+
$pui-status-danger-bg: #fce9e8;
|
|
226
|
+
$pui-status-danger-fg: #5b0e0d;
|
|
227
|
+
$pui-status-danger-solid: #da4144;
|
|
228
|
+
$pui-status-warning-bg: #fef9e9;
|
|
229
|
+
$pui-status-warning-fg: #634e0f;
|
|
230
|
+
$pui-status-warning-solid: #f9c426;
|
|
231
|
+
$pui-status-info-bg: #e9e9fb;
|
|
232
|
+
$pui-status-info-fg: #110e56;
|
|
233
|
+
$pui-status-info-solid: #2b25d9;
|
|
234
|
+
$pui-tint-neutral-bg: #dad9d9;
|
|
235
|
+
$pui-tint-neutral-fg: #544d4d;
|
|
236
|
+
$pui-tint-blue-bg: #d4d3f7;
|
|
237
|
+
$pui-tint-blue-fg: #6a66e4;
|
|
238
|
+
$pui-tint-red-bg: #f9d3d2;
|
|
239
|
+
$pui-tint-red-fg: #ec6663;
|
|
240
|
+
$pui-tint-yellow-bg: #fad567;
|
|
241
|
+
$pui-tint-yellow-fg: #634e0f;
|
|
242
|
+
$pui-tint-green-bg: #d4f2de;
|
|
243
|
+
$pui-tint-green-fg: #1a6b36;
|
|
244
|
+
$pui-elevation-flat: 0px 1px 2px 0px #0000000d;
|
|
245
|
+
$pui-elevation-card: 0px 24px 48px -12px #0000002e;
|
|
246
|
+
$pui-elevation-floating: 0px 24px 64px 0px #1510511f;
|
|
247
|
+
$pui-elevation-modal: 0px 32px 64px 0px #00000024;
|
|
248
|
+
$pui-motion-state: 150ms;
|
|
249
|
+
$pui-motion-move: 200ms;
|
|
250
|
+
$pui-motion-menu: 250ms;
|
|
251
|
+
$pui-motion-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
252
|
+
$pui-motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
|
|
253
|
+
$pui-layout-gutter: 24px;
|
|
254
|
+
$pui-layout-section-gap: 32px;
|
|
255
|
+
$pui-layout-heading-gap: 64px;
|
|
256
|
+
$pui-layout-card-padding: 20px;
|
|
257
|
+
$pui-layout-card-gap: 12px;
|
|
258
|
+
$pui-layout-bullet-gap: 8px;
|
|
259
|
+
$pui-layout-content-width: 1320px;
|
|
260
|
+
$pui-layout-slide-margin: 64px;
|
|
261
|
+
$pui-chart-text: #0b0202;
|
|
262
|
+
$pui-chart-grid: #00000012;
|
|
263
|
+
$pui-chart-rest: #dad9d9;
|
|
264
|
+
$pui-chart-on-fill: #ffffff;
|
|
265
|
+
|
|
266
|
+
// Accent modes as a map: map-get($pui-accent, blue, main)
|
|
267
|
+
$pui-accent: (
|
|
268
|
+
blue: (
|
|
269
|
+
main: #2b25d9,
|
|
270
|
+
light: #6a66e4,
|
|
271
|
+
lighter: #d4d3f7,
|
|
272
|
+
bg: #e9e9fb,
|
|
273
|
+
dark: #0c0b41,
|
|
274
|
+
on-accent: #ffffff,
|
|
275
|
+
heading: #6a66e4,
|
|
276
|
+
icon-ink: #6a66e4,
|
|
277
|
+
text: #2b25d9,
|
|
278
|
+
selected: #e9e9fb,
|
|
279
|
+
pill-tint: #d4d3f7,
|
|
280
|
+
chart-1: #2b25d9,
|
|
281
|
+
chart-2: #6a66e4,
|
|
282
|
+
chart-3: #d4d3f7,
|
|
283
|
+
chart-4: #b5b3b3,
|
|
284
|
+
chart-5: #dad9d9,
|
|
285
|
+
gradient-far: #f24288,
|
|
286
|
+
blob-opacity: 0.2
|
|
287
|
+
),
|
|
288
|
+
red: (
|
|
289
|
+
main: #e42521,
|
|
290
|
+
light: #ec6663,
|
|
291
|
+
lighter: #f9d3d2,
|
|
292
|
+
bg: #fce9e8,
|
|
293
|
+
dark: #440b09,
|
|
294
|
+
on-accent: #ffffff,
|
|
295
|
+
heading: #ec6663,
|
|
296
|
+
icon-ink: #ec6663,
|
|
297
|
+
text: #e42521,
|
|
298
|
+
selected: #fce9e8,
|
|
299
|
+
pill-tint: #f9d3d2,
|
|
300
|
+
chart-1: #e42521,
|
|
301
|
+
chart-2: #ec6663,
|
|
302
|
+
chart-3: #f9d3d2,
|
|
303
|
+
chart-4: #b5b3b3,
|
|
304
|
+
chart-5: #dad9d9,
|
|
305
|
+
gradient-far: #d947d6,
|
|
306
|
+
blob-opacity: 0.2
|
|
307
|
+
),
|
|
308
|
+
yellow: (
|
|
309
|
+
main: #f9c426,
|
|
310
|
+
light: #fad567,
|
|
311
|
+
lighter: #fdf3d3,
|
|
312
|
+
bg: #fef9e9,
|
|
313
|
+
dark: #4a3a0b,
|
|
314
|
+
on-accent: #0b0202,
|
|
315
|
+
heading: #858080,
|
|
316
|
+
icon-ink: #f9c426,
|
|
317
|
+
text: #0b0202,
|
|
318
|
+
selected: #fef9e9,
|
|
319
|
+
pill-tint: #fad567,
|
|
320
|
+
chart-1: #f9c426,
|
|
321
|
+
chart-2: #858080,
|
|
322
|
+
chart-3: #dad9d9,
|
|
323
|
+
chart-4: #fad567,
|
|
324
|
+
chart-5: #b5b3b3,
|
|
325
|
+
gradient-far: #ebb8fc,
|
|
326
|
+
blob-opacity: 0.35
|
|
327
|
+
),
|
|
328
|
+
multicolor: (
|
|
329
|
+
main: #e42521,
|
|
330
|
+
light: #ec6663,
|
|
331
|
+
lighter: #f9d3d2,
|
|
332
|
+
bg: #fce9e8,
|
|
333
|
+
dark: #231b1b,
|
|
334
|
+
on-accent: #ffffff,
|
|
335
|
+
heading: #858080,
|
|
336
|
+
icon-ink: #ec6663,
|
|
337
|
+
text: #e42521,
|
|
338
|
+
selected: #dad9d9,
|
|
339
|
+
pill-tint: #dad9d9,
|
|
340
|
+
chart-1: #e42521,
|
|
341
|
+
chart-2: #f9c426,
|
|
342
|
+
chart-3: #2b25d9,
|
|
343
|
+
chart-4: #b5b3b3,
|
|
344
|
+
chart-5: #ec6663,
|
|
345
|
+
gradient-far: #d947d6,
|
|
346
|
+
blob-opacity: 0.2
|
|
347
|
+
),
|
|
348
|
+
);
|