@dillingerstaffing/strand 0.5.1 → 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.
Files changed (3) hide show
  1. package/bulma/strand-bulma-compat.css +35 -31
  2. package/css/tokens.css +1 -1
  3. package/package.json +1 -1
package/bulma/strand-bulma-compat.css CHANGED
@@ -1,47 +1,55 @@
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 {
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 {
5
20
  /* ── Primary Colors (HSL decomposed for Bulma's palette system) ── */
6
- /* Strand blue-primary is #3B8EF6 = hsl(213, 91%, 60%) */
7
21
  --bulma-primary-h: 213deg;
8
22
  --bulma-primary-s: 91%;
9
23
  --bulma-primary-l: 60%;
10
24
 
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%;
25
+ --bulma-link-h: 213deg;
26
+ --bulma-link-s: 91%;
27
+ --bulma-link-l: 60%;
15
28
 
16
- /* Strand blue-indicator is #93CCFD = hsl(207, 96%, 78%) */
17
29
  --bulma-info-h: 207deg;
18
30
  --bulma-info-s: 96%;
19
31
  --bulma-info-l: 78%;
20
32
 
21
- /* Strand amber-caution is #F59E0B = hsl(38, 92%, 50%) */
33
+ --bulma-success-h: 173deg;
34
+ --bulma-success-s: 80%;
35
+ --bulma-success-l: 40%;
36
+
22
37
  --bulma-warning-h: 38deg;
23
38
  --bulma-warning-s: 92%;
24
39
  --bulma-warning-l: 50%;
25
40
 
26
- /* Strand red-alert is #EF4444 = hsl(0, 84%, 60%) */
27
41
  --bulma-danger-h: 0deg;
28
42
  --bulma-danger-s: 84%;
29
43
  --bulma-danger-l: 60%;
30
44
 
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 */
45
+ /* ── Scheme (surfaces) ── */
38
46
  --bulma-scheme-h: 220;
39
47
  --bulma-scheme-s: 100%;
40
48
  --bulma-scheme-main: var(--strand-surface-primary);
41
49
  --bulma-scheme-main-bis: var(--strand-surface-recessed);
42
50
  --bulma-scheme-main-ter: var(--strand-surface-subtle);
43
51
 
44
- /* ── Text colors ── */
52
+ /* ── Text ── */
45
53
  --bulma-text: var(--strand-gray-600);
46
54
  --bulma-text-strong: var(--strand-gray-800);
47
55
  --bulma-text-weak: var(--strand-gray-500);
@@ -50,23 +58,19 @@
50
58
  --bulma-family-primary: var(--strand-font-sans);
51
59
  --bulma-family-secondary: var(--strand-font-sans);
52
60
  --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
-
61
+ --bulma-size-small: 0.833rem;
62
+ --bulma-size-normal: 1rem;
63
+ --bulma-size-medium: 1.25rem;
64
+ --bulma-size-large: 1.563rem;
59
65
  --bulma-weight-light: 300;
60
66
  --bulma-weight-normal: 400;
61
67
  --bulma-weight-medium: 500;
62
68
  --bulma-weight-semibold: 600;
63
69
  --bulma-weight-bold: 700;
64
70
 
65
- /* ── Border ── */
71
+ /* ── Borders ── */
66
72
  --bulma-border: var(--strand-gray-200);
67
73
  --bulma-border-weak: var(--strand-surface-subtle);
68
-
69
- /* ── Border Radius ── */
70
74
  --bulma-radius-small: var(--strand-radius-sm);
71
75
  --bulma-radius: var(--strand-radius-md);
72
76
  --bulma-radius-medium: var(--strand-radius-lg);
@@ -85,7 +89,7 @@
85
89
  --bulma-focus-s: 91%;
86
90
  --bulma-focus-l: 60%;
87
91
 
88
- /* ── Animation ── */
92
+ /* ── Motion ── */
89
93
  --bulma-duration: 250ms;
90
- --bulma-easing: cubic-bezier(0.25, 1, 0.5, 1); /* strand ease-out-quart */
94
+ --bulma-easing: cubic-bezier(0.25, 1, 0.5, 1);
91
95
  }
package/css/tokens.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! Strand v0.5.0 | MIT License | dillingerstaffing.com */
1
+ /*! Strand v0.6.0 | MIT License | dillingerstaffing.com */
2
2
 
3
3
  :root {
4
4
  /* ═══════════════════════════════════════════
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dillingerstaffing/strand",
3
- "version": "0.5.1",
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",