@dillingerstaffing/strand 0.5.0 → 0.6.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 +54 -0
- package/bulma/_strand-bulma-use.scss +33 -0
- package/bulma/_strand-bulma-vars.scss +36 -0
- package/bulma/strand-bulma-compat.css +95 -0
- package/css/tokens.css +1 -1
- package/package.json +5 -3
package/README.md
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# @dillingerstaffing/strand
|
|
2
|
+
|
|
3
|
+
Design tokens for the [Strand Design Language](https://github.com/dillingerstaffing/strand/blob/main/DESIGN_LANGUAGE.md). CSS custom properties + typed JavaScript constants. Framework-agnostic. Zero runtime.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @dillingerstaffing/strand
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## CSS Tokens
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
@import '@dillingerstaffing/strand/css/reset.css';
|
|
15
|
+
@import '@dillingerstaffing/strand/css/tokens.css';
|
|
16
|
+
@import '@dillingerstaffing/strand/css/base.css';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Use tokens in your CSS:
|
|
20
|
+
|
|
21
|
+
```css
|
|
22
|
+
.card {
|
|
23
|
+
background: var(--strand-surface-elevated);
|
|
24
|
+
border-radius: var(--strand-radius-lg);
|
|
25
|
+
box-shadow: var(--strand-elevation-1);
|
|
26
|
+
padding: var(--strand-space-6);
|
|
27
|
+
color: var(--strand-gray-600);
|
|
28
|
+
font-family: var(--strand-font-sans);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## JavaScript Tokens
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
import { colors, spacing, typography } from '@dillingerstaffing/strand';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Bulma Integration
|
|
39
|
+
|
|
40
|
+
Make Bulma components adopt the Strand aesthetic:
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<link rel="stylesheet" href="@dillingerstaffing/strand/bulma/strand-bulma-compat.css">
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Or in Sass: `@use "@dillingerstaffing/strand/bulma/strand-bulma-use"`. See [Using Strand with Bulma](https://github.com/dillingerstaffing/strand/blob/main/docs/migration/from-bulma.md).
|
|
47
|
+
|
|
48
|
+
## Links
|
|
49
|
+
|
|
50
|
+
- [GitHub](https://github.com/dillingerstaffing/strand)
|
|
51
|
+
- [Design Language](https://github.com/dillingerstaffing/strand/blob/main/DESIGN_LANGUAGE.md)
|
|
52
|
+
- [Documentation](https://dillingerstaffing.com/labs/strand)
|
|
53
|
+
|
|
54
|
+
Created by [Dillinger Staffing](https://dillingerstaffing.com)
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// Strand Bulma Integration
|
|
2
|
+
// Import this INSTEAD of importing bulma/sass directly.
|
|
3
|
+
// Usage: @use "@dillingerstaffing/strand/bulma/strand-bulma-use" as bulma;
|
|
4
|
+
|
|
5
|
+
@use "./strand-bulma-vars" as strand;
|
|
6
|
+
|
|
7
|
+
@use "bulma/sass" with (
|
|
8
|
+
$primary: strand.$strand-primary,
|
|
9
|
+
$link: strand.$strand-link,
|
|
10
|
+
$info: strand.$strand-info,
|
|
11
|
+
$success: strand.$strand-success,
|
|
12
|
+
$warning: strand.$strand-warning,
|
|
13
|
+
$danger: strand.$strand-danger,
|
|
14
|
+
$family-primary: strand.$strand-family-sans,
|
|
15
|
+
$family-secondary: strand.$strand-family-sans,
|
|
16
|
+
$family-code: strand.$strand-family-mono,
|
|
17
|
+
$black: strand.$strand-black,
|
|
18
|
+
$grey-darker: strand.$strand-grey-darker,
|
|
19
|
+
$grey-dark: strand.$strand-grey-dark,
|
|
20
|
+
$grey: strand.$strand-grey,
|
|
21
|
+
$grey-light: strand.$strand-grey-light,
|
|
22
|
+
$grey-lighter: strand.$strand-grey-lighter,
|
|
23
|
+
$grey-lightest: strand.$strand-grey-lightest,
|
|
24
|
+
$white-ter: strand.$strand-white-ter,
|
|
25
|
+
$white-bis: strand.$strand-white-bis,
|
|
26
|
+
$white: strand.$strand-white,
|
|
27
|
+
$radius-small: strand.$strand-radius-small,
|
|
28
|
+
$radius: strand.$strand-radius,
|
|
29
|
+
$radius-medium: strand.$strand-radius-medium,
|
|
30
|
+
$radius-large: strand.$strand-radius-large,
|
|
31
|
+
$duration: strand.$strand-duration,
|
|
32
|
+
$easing: strand.$strand-easing
|
|
33
|
+
);
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// Strand Bulma Compatibility (Sass)
|
|
2
|
+
// Usage: @use "bulma/sass" with ($primary: $strand-primary, ...);
|
|
3
|
+
|
|
4
|
+
// ── Colors ──
|
|
5
|
+
$strand-primary: #3B8EF6; // --strand-blue-primary
|
|
6
|
+
$strand-link: #3B8EF6; // --strand-blue-primary
|
|
7
|
+
$strand-info: #93CCFD; // --strand-blue-indicator
|
|
8
|
+
$strand-success: #14B8A6; // --strand-teal-vital
|
|
9
|
+
$strand-warning: #F59E0B; // --strand-amber-caution
|
|
10
|
+
$strand-danger: #EF4444; // --strand-red-alert
|
|
11
|
+
|
|
12
|
+
// ── Grays (cyan-shifted) ──
|
|
13
|
+
$strand-black: #0F192A; // --strand-blue-abyss
|
|
14
|
+
$strand-grey-darker: #1E2B3B; // --strand-gray-800
|
|
15
|
+
$strand-grey-dark: #334355; // --strand-gray-700
|
|
16
|
+
$strand-grey: #64778B; // --strand-gray-500
|
|
17
|
+
$strand-grey-light: #94A5B8; // --strand-gray-400
|
|
18
|
+
$strand-grey-lighter: #CBD6E1; // --strand-gray-300
|
|
19
|
+
$strand-grey-lightest: #E2E9F0; // --strand-gray-200
|
|
20
|
+
$strand-white-ter: #F0F5F8; // --strand-surface-recessed
|
|
21
|
+
$strand-white-bis: #F7FAFD; // --strand-gray-50
|
|
22
|
+
$strand-white: #FAFCFF; // --strand-surface-primary
|
|
23
|
+
|
|
24
|
+
// ── Typography ──
|
|
25
|
+
$strand-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
26
|
+
$strand-family-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", monospace;
|
|
27
|
+
|
|
28
|
+
// ── Border Radius ──
|
|
29
|
+
$strand-radius-small: 4px; // --strand-radius-sm
|
|
30
|
+
$strand-radius: 6px; // --strand-radius-md
|
|
31
|
+
$strand-radius-medium: 8px; // --strand-radius-lg
|
|
32
|
+
$strand-radius-large: 12px; // --strand-radius-xl
|
|
33
|
+
|
|
34
|
+
// ── Duration ──
|
|
35
|
+
$strand-duration: 250ms;
|
|
36
|
+
$strand-easing: cubic-bezier(0.25, 1, 0.5, 1);
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/*! Strand Theme for Bulma | MIT License | dillingerstaffing.com */
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* A Bulma theme that applies the Strand design language.
|
|
5
|
+
*
|
|
6
|
+
* Usage (CSS only, no build step):
|
|
7
|
+
* <link rel="stylesheet" href="bulma.min.css">
|
|
8
|
+
* <link rel="stylesheet" href="@dillingerstaffing/strand/css/tokens.css">
|
|
9
|
+
* <link rel="stylesheet" href="@dillingerstaffing/strand/bulma/strand-bulma-compat.css">
|
|
10
|
+
*
|
|
11
|
+
* Or scope to specific elements:
|
|
12
|
+
* <div data-theme="strand"> ... Bulma + Strand aesthetic ... </div>
|
|
13
|
+
* <div class="theme-strand"> ... Bulma + Strand aesthetic ... </div>
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
/* Apply globally when loaded */
|
|
17
|
+
:root,
|
|
18
|
+
[data-theme="strand"],
|
|
19
|
+
.theme-strand {
|
|
20
|
+
/* ── Primary Colors (HSL decomposed for Bulma's palette system) ── */
|
|
21
|
+
--bulma-primary-h: 213deg;
|
|
22
|
+
--bulma-primary-s: 91%;
|
|
23
|
+
--bulma-primary-l: 60%;
|
|
24
|
+
|
|
25
|
+
--bulma-link-h: 213deg;
|
|
26
|
+
--bulma-link-s: 91%;
|
|
27
|
+
--bulma-link-l: 60%;
|
|
28
|
+
|
|
29
|
+
--bulma-info-h: 207deg;
|
|
30
|
+
--bulma-info-s: 96%;
|
|
31
|
+
--bulma-info-l: 78%;
|
|
32
|
+
|
|
33
|
+
--bulma-success-h: 173deg;
|
|
34
|
+
--bulma-success-s: 80%;
|
|
35
|
+
--bulma-success-l: 40%;
|
|
36
|
+
|
|
37
|
+
--bulma-warning-h: 38deg;
|
|
38
|
+
--bulma-warning-s: 92%;
|
|
39
|
+
--bulma-warning-l: 50%;
|
|
40
|
+
|
|
41
|
+
--bulma-danger-h: 0deg;
|
|
42
|
+
--bulma-danger-s: 84%;
|
|
43
|
+
--bulma-danger-l: 60%;
|
|
44
|
+
|
|
45
|
+
/* ── Scheme (surfaces) ── */
|
|
46
|
+
--bulma-scheme-h: 220;
|
|
47
|
+
--bulma-scheme-s: 100%;
|
|
48
|
+
--bulma-scheme-main: var(--strand-surface-primary);
|
|
49
|
+
--bulma-scheme-main-bis: var(--strand-surface-recessed);
|
|
50
|
+
--bulma-scheme-main-ter: var(--strand-surface-subtle);
|
|
51
|
+
|
|
52
|
+
/* ── Text ── */
|
|
53
|
+
--bulma-text: var(--strand-gray-600);
|
|
54
|
+
--bulma-text-strong: var(--strand-gray-800);
|
|
55
|
+
--bulma-text-weak: var(--strand-gray-500);
|
|
56
|
+
|
|
57
|
+
/* ── Typography ── */
|
|
58
|
+
--bulma-family-primary: var(--strand-font-sans);
|
|
59
|
+
--bulma-family-secondary: var(--strand-font-sans);
|
|
60
|
+
--bulma-family-code: var(--strand-font-mono);
|
|
61
|
+
--bulma-size-small: 0.833rem;
|
|
62
|
+
--bulma-size-normal: 1rem;
|
|
63
|
+
--bulma-size-medium: 1.25rem;
|
|
64
|
+
--bulma-size-large: 1.563rem;
|
|
65
|
+
--bulma-weight-light: 300;
|
|
66
|
+
--bulma-weight-normal: 400;
|
|
67
|
+
--bulma-weight-medium: 500;
|
|
68
|
+
--bulma-weight-semibold: 600;
|
|
69
|
+
--bulma-weight-bold: 700;
|
|
70
|
+
|
|
71
|
+
/* ── Borders ── */
|
|
72
|
+
--bulma-border: var(--strand-gray-200);
|
|
73
|
+
--bulma-border-weak: var(--strand-surface-subtle);
|
|
74
|
+
--bulma-radius-small: var(--strand-radius-sm);
|
|
75
|
+
--bulma-radius: var(--strand-radius-md);
|
|
76
|
+
--bulma-radius-medium: var(--strand-radius-lg);
|
|
77
|
+
--bulma-radius-large: var(--strand-radius-xl);
|
|
78
|
+
--bulma-radius-rounded: var(--strand-radius-full);
|
|
79
|
+
|
|
80
|
+
/* ── Spacing ── */
|
|
81
|
+
--bulma-block-spacing: var(--strand-space-6);
|
|
82
|
+
--bulma-gap: var(--strand-space-8);
|
|
83
|
+
|
|
84
|
+
/* ── Shadows ── */
|
|
85
|
+
--bulma-shadow: var(--strand-elevation-1);
|
|
86
|
+
|
|
87
|
+
/* ── Focus ── */
|
|
88
|
+
--bulma-focus-h: 213deg;
|
|
89
|
+
--bulma-focus-s: 91%;
|
|
90
|
+
--bulma-focus-l: 60%;
|
|
91
|
+
|
|
92
|
+
/* ── Motion ── */
|
|
93
|
+
--bulma-duration: 250ms;
|
|
94
|
+
--bulma-easing: cubic-bezier(0.25, 1, 0.5, 1);
|
|
95
|
+
}
|
package/css/tokens.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dillingerstaffing/strand",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Strand Design Language tokens - CSS custom properties and JS constants",
|
|
5
5
|
"author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -25,12 +25,14 @@
|
|
|
25
25
|
},
|
|
26
26
|
"./css/tokens.css": "./css/tokens.css",
|
|
27
27
|
"./css/reset.css": "./css/reset.css",
|
|
28
|
-
"./css/base.css": "./css/base.css"
|
|
28
|
+
"./css/base.css": "./css/base.css",
|
|
29
|
+
"./bulma/*": "./bulma/*"
|
|
29
30
|
},
|
|
30
31
|
"style": "./css/tokens.css",
|
|
31
32
|
"files": [
|
|
32
33
|
"css/",
|
|
33
|
-
"dist/"
|
|
34
|
+
"dist/",
|
|
35
|
+
"bulma/"
|
|
34
36
|
],
|
|
35
37
|
"sideEffects": [
|
|
36
38
|
"css/*.css"
|