@dillingerstaffing/strand 0.5.0 → 0.5.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/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 +91 -0
- 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,91 @@
|
|
|
1
|
+
/*! Strand Bulma Compatibility | MIT License | dillingerstaffing.com */
|
|
2
|
+
/* Load after Bulma CSS + Strand tokens.css. Bulma components adopt the Strand aesthetic. */
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
/* ── Primary Colors (HSL decomposed for Bulma's palette system) ── */
|
|
6
|
+
/* Strand blue-primary is #3B8EF6 = hsl(213, 91%, 60%) */
|
|
7
|
+
--bulma-primary-h: 213deg;
|
|
8
|
+
--bulma-primary-s: 91%;
|
|
9
|
+
--bulma-primary-l: 60%;
|
|
10
|
+
|
|
11
|
+
/* Strand teal-vital is #14B8A6 = hsl(173, 80%, 40%) */
|
|
12
|
+
--bulma-success-h: 173deg;
|
|
13
|
+
--bulma-success-s: 80%;
|
|
14
|
+
--bulma-success-l: 40%;
|
|
15
|
+
|
|
16
|
+
/* Strand blue-indicator is #93CCFD = hsl(207, 96%, 78%) */
|
|
17
|
+
--bulma-info-h: 207deg;
|
|
18
|
+
--bulma-info-s: 96%;
|
|
19
|
+
--bulma-info-l: 78%;
|
|
20
|
+
|
|
21
|
+
/* Strand amber-caution is #F59E0B = hsl(38, 92%, 50%) */
|
|
22
|
+
--bulma-warning-h: 38deg;
|
|
23
|
+
--bulma-warning-s: 92%;
|
|
24
|
+
--bulma-warning-l: 50%;
|
|
25
|
+
|
|
26
|
+
/* Strand red-alert is #EF4444 = hsl(0, 84%, 60%) */
|
|
27
|
+
--bulma-danger-h: 0deg;
|
|
28
|
+
--bulma-danger-s: 84%;
|
|
29
|
+
--bulma-danger-l: 60%;
|
|
30
|
+
|
|
31
|
+
/* ── Link color (same as primary) ── */
|
|
32
|
+
--bulma-link-h: 213deg;
|
|
33
|
+
--bulma-link-s: 91%;
|
|
34
|
+
--bulma-link-l: 60%;
|
|
35
|
+
|
|
36
|
+
/* ── Scheme (background/surface) ── */
|
|
37
|
+
/* Strand surface-primary is #FAFCFF -- cool-shifted white */
|
|
38
|
+
--bulma-scheme-h: 220;
|
|
39
|
+
--bulma-scheme-s: 100%;
|
|
40
|
+
--bulma-scheme-main: var(--strand-surface-primary);
|
|
41
|
+
--bulma-scheme-main-bis: var(--strand-surface-recessed);
|
|
42
|
+
--bulma-scheme-main-ter: var(--strand-surface-subtle);
|
|
43
|
+
|
|
44
|
+
/* ── Text colors ── */
|
|
45
|
+
--bulma-text: var(--strand-gray-600);
|
|
46
|
+
--bulma-text-strong: var(--strand-gray-800);
|
|
47
|
+
--bulma-text-weak: var(--strand-gray-500);
|
|
48
|
+
|
|
49
|
+
/* ── Typography ── */
|
|
50
|
+
--bulma-family-primary: var(--strand-font-sans);
|
|
51
|
+
--bulma-family-secondary: var(--strand-font-sans);
|
|
52
|
+
--bulma-family-code: var(--strand-font-mono);
|
|
53
|
+
|
|
54
|
+
--bulma-size-small: 0.833rem; /* strand text-sm */
|
|
55
|
+
--bulma-size-normal: 1rem; /* strand text-base */
|
|
56
|
+
--bulma-size-medium: 1.25rem; /* strand text-lg */
|
|
57
|
+
--bulma-size-large: 1.563rem; /* strand text-xl */
|
|
58
|
+
|
|
59
|
+
--bulma-weight-light: 300;
|
|
60
|
+
--bulma-weight-normal: 400;
|
|
61
|
+
--bulma-weight-medium: 500;
|
|
62
|
+
--bulma-weight-semibold: 600;
|
|
63
|
+
--bulma-weight-bold: 700;
|
|
64
|
+
|
|
65
|
+
/* ── Border ── */
|
|
66
|
+
--bulma-border: var(--strand-gray-200);
|
|
67
|
+
--bulma-border-weak: var(--strand-surface-subtle);
|
|
68
|
+
|
|
69
|
+
/* ── Border Radius ── */
|
|
70
|
+
--bulma-radius-small: var(--strand-radius-sm);
|
|
71
|
+
--bulma-radius: var(--strand-radius-md);
|
|
72
|
+
--bulma-radius-medium: var(--strand-radius-lg);
|
|
73
|
+
--bulma-radius-large: var(--strand-radius-xl);
|
|
74
|
+
--bulma-radius-rounded: var(--strand-radius-full);
|
|
75
|
+
|
|
76
|
+
/* ── Spacing ── */
|
|
77
|
+
--bulma-block-spacing: var(--strand-space-6);
|
|
78
|
+
--bulma-gap: var(--strand-space-8);
|
|
79
|
+
|
|
80
|
+
/* ── Shadows ── */
|
|
81
|
+
--bulma-shadow: var(--strand-elevation-1);
|
|
82
|
+
|
|
83
|
+
/* ── Focus ── */
|
|
84
|
+
--bulma-focus-h: 213deg;
|
|
85
|
+
--bulma-focus-s: 91%;
|
|
86
|
+
--bulma-focus-l: 60%;
|
|
87
|
+
|
|
88
|
+
/* ── Animation ── */
|
|
89
|
+
--bulma-duration: 250ms;
|
|
90
|
+
--bulma-easing: cubic-bezier(0.25, 1, 0.5, 1); /* strand ease-out-quart */
|
|
91
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dillingerstaffing/strand",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.1",
|
|
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"
|