@frame-kit/tokens 0.2.14 → 0.2.16

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 (7) hide show
  1. package/base.css +6 -1
  2. package/dark.css +1 -1
  3. package/index.d.ts +1 -0
  4. package/index.js +2 -1
  5. package/package.json +1 -1
  6. package/scss/tokens.base.scss +6 -1
  7. package/scss/tokens.dark.scss +1 -1
package/base.css CHANGED
@@ -92,7 +92,12 @@
92
92
  --fk-overlay-brand: rgba(37, 99, 235, 0.18);
93
93
  /* ---------- Shadows ---------- */
94
94
  /* ---------- Focus ---------- */
95
- --fk-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
95
+ /* The ring's width on its own. A scroll container clips on both axes the
96
+ moment either one scrolls, so any container whose children run its full
97
+ width has to leave this much room or it cuts the ring off them. Kept
98
+ separate from the shadow so the two cannot drift apart. */
99
+ --fk-focus-ring-width: 3px;
100
+ --fk-focus-ring: 0 0 0 var(--fk-focus-ring-width) rgba(37, 99, 235, 0.18);
96
101
  /* ==========================================================================
97
102
  2. SEMANTIC — meaningful assignments using primitives
98
103
  ========================================================================== */
package/dark.css CHANGED
@@ -31,7 +31,7 @@
31
31
  --fk-color-muted: #8a8f98;
32
32
  --fk-color-border: #2e2e34;
33
33
  /* Focus */
34
- --fk-focus-ring: 0 0 0 3px rgba(59, 158, 255, 0.4);
34
+ --fk-focus-ring: 0 0 0 var(--fk-focus-ring-width) rgba(59, 158, 255, 0.4);
35
35
  /* ==========================================================================
36
36
  3. ATOMS
37
37
  ========================================================================== */
package/index.d.ts CHANGED
@@ -60,6 +60,7 @@ export type FkTokenName =
60
60
  | '--fk-radius-lg'
61
61
  | '--fk-radius-full'
62
62
  | '--fk-overlay-brand'
63
+ | '--fk-focus-ring-width'
63
64
  | '--fk-focus-ring'
64
65
  | '--fk-typography-subtitle-font-size'
65
66
  | '--fk-typography-heading-font-size'
package/index.js CHANGED
@@ -60,7 +60,8 @@ export const tokens = {
60
60
  '--fk-radius-lg': "0.75rem",
61
61
  '--fk-radius-full': "9999px",
62
62
  '--fk-overlay-brand': "rgba(37, 99, 235, 0.18)",
63
- '--fk-focus-ring': "0 0 0 3px rgba(37, 99, 235, 0.18)",
63
+ '--fk-focus-ring-width': "3px",
64
+ '--fk-focus-ring': "0 0 0 var(--fk-focus-ring-width) rgba(37, 99, 235, 0.18)",
64
65
  '--fk-typography-subtitle-font-size': "var(--fk-typography-lead-font-size)",
65
66
  '--fk-typography-heading-font-size': "1.5rem",
66
67
  '--fk-typography-h1-font-size': "3.5rem",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frame-kit/tokens",
3
- "version": "0.2.14",
3
+ "version": "0.2.16",
4
4
  "description": "Default design tokens (CSS custom properties) and dark theme for FrameKit.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/scss/tokens.base.scss CHANGED
@@ -108,7 +108,12 @@
108
108
  /* ---------- Shadows ---------- */
109
109
 
110
110
  /* ---------- Focus ---------- */
111
- --fk-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
111
+ /* The ring's width on its own. A scroll container clips on both axes the
112
+ moment either one scrolls, so any container whose children run its full
113
+ width has to leave this much room or it cuts the ring off them. Kept
114
+ separate from the shadow so the two cannot drift apart. */
115
+ --fk-focus-ring-width: 3px;
116
+ --fk-focus-ring: 0 0 0 var(--fk-focus-ring-width) rgba(37, 99, 235, 0.18);
112
117
 
113
118
  /* ==========================================================================
114
119
  2. SEMANTIC — meaningful assignments using primitives
package/scss/tokens.dark.scss CHANGED
@@ -37,7 +37,7 @@
37
37
  --fk-color-border: #2e2e34;
38
38
 
39
39
  /* Focus */
40
- --fk-focus-ring: 0 0 0 3px rgba(59, 158, 255, 0.4);
40
+ --fk-focus-ring: 0 0 0 var(--fk-focus-ring-width) rgba(59, 158, 255, 0.4);
41
41
 
42
42
  /* ==========================================================================
43
43
  3. ATOMS