@frame-kit/tokens 0.1.6 → 0.1.7

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 (5) hide show
  1. package/base.css +22 -0
  2. package/index.d.ts +17 -0
  3. package/index.js +17 -0
  4. package/package.json +1 -1
  5. package/scss/tokens.base.scss +26 -0
package/base.css CHANGED
@@ -1045,6 +1045,28 @@
1045
1045
  --fk-dialog-confirm-warning-bg-hover: var(--fk-color-warning-strong);
1046
1046
  --fk-dialog-confirm-warning-bg-active: var(--fk-color-warning-strong);
1047
1047
  --fk-dialog-confirm-warning-color: var(--fk-color-surface);
1048
+ /* ---------- Onboarding Guide (patterns) ---------- */
1049
+ /* Accent is intentionally neutral (near-black) by default — point it at a
1050
+ brand scale to colour the progress, active states, and CTA together. */
1051
+ --fk-onboarding-guide-accent: var(--fk-color-text);
1052
+ --fk-onboarding-guide-accent-contrast: var(--fk-color-surface);
1053
+ --fk-onboarding-guide-complete: var(--fk-color-success);
1054
+ --fk-onboarding-guide-surface: var(--fk-color-surface);
1055
+ --fk-onboarding-guide-surface-muted: var(--fk-color-surface-muted);
1056
+ --fk-onboarding-guide-border: var(--fk-color-border);
1057
+ --fk-onboarding-guide-divider: var(--fk-color-surface-dim);
1058
+ --fk-onboarding-guide-text: var(--fk-color-text);
1059
+ --fk-onboarding-guide-text-muted: var(--fk-color-muted);
1060
+ --fk-onboarding-guide-text-faint: var(--fk-color-muted);
1061
+ --fk-onboarding-guide-width: 360px;
1062
+ --fk-onboarding-guide-radius: var(--fk-radius-lg);
1063
+ --fk-onboarding-guide-radius-sm: var(--fk-radius-md);
1064
+ --fk-onboarding-guide-z: 60;
1065
+ --fk-onboarding-guide-shadow:
1066
+ 0 24px 54px -18px rgba(15, 23, 42, 0.28),
1067
+ 0 8px 20px -8px rgba(15, 23, 42, 0.16);
1068
+ --fk-onboarding-guide-font-display: var(--fk-font-family-display);
1069
+ --fk-onboarding-guide-font-mono: var(--fk-font-family-mono);
1048
1070
  }
1049
1071
 
1050
1072
  /* ==========================================================================
package/index.d.ts CHANGED
@@ -891,6 +891,23 @@ export type FkTokenName =
891
891
  | '--fk-dialog-confirm-warning-bg-hover'
892
892
  | '--fk-dialog-confirm-warning-bg-active'
893
893
  | '--fk-dialog-confirm-warning-color'
894
+ | '--fk-onboarding-guide-accent'
895
+ | '--fk-onboarding-guide-accent-contrast'
896
+ | '--fk-onboarding-guide-complete'
897
+ | '--fk-onboarding-guide-surface'
898
+ | '--fk-onboarding-guide-surface-muted'
899
+ | '--fk-onboarding-guide-border'
900
+ | '--fk-onboarding-guide-divider'
901
+ | '--fk-onboarding-guide-text'
902
+ | '--fk-onboarding-guide-text-muted'
903
+ | '--fk-onboarding-guide-text-faint'
904
+ | '--fk-onboarding-guide-width'
905
+ | '--fk-onboarding-guide-radius'
906
+ | '--fk-onboarding-guide-radius-sm'
907
+ | '--fk-onboarding-guide-z'
908
+ | '--fk-onboarding-guide-shadow'
909
+ | '--fk-onboarding-guide-font-display'
910
+ | '--fk-onboarding-guide-font-mono'
894
911
  | '--fk-method-badge-min-width'
895
912
  | '--fk-method-badge-padding-block'
896
913
  | '--fk-method-badge-padding-inline'
package/index.js CHANGED
@@ -891,6 +891,23 @@ export const tokens = {
891
891
  '--fk-dialog-confirm-warning-bg-hover': "var(--fk-color-warning-strong)",
892
892
  '--fk-dialog-confirm-warning-bg-active': "var(--fk-color-warning-strong)",
893
893
  '--fk-dialog-confirm-warning-color': "var(--fk-color-surface)",
894
+ '--fk-onboarding-guide-accent': "var(--fk-color-text)",
895
+ '--fk-onboarding-guide-accent-contrast': "var(--fk-color-surface)",
896
+ '--fk-onboarding-guide-complete': "var(--fk-color-success)",
897
+ '--fk-onboarding-guide-surface': "var(--fk-color-surface)",
898
+ '--fk-onboarding-guide-surface-muted': "var(--fk-color-surface-muted)",
899
+ '--fk-onboarding-guide-border': "var(--fk-color-border)",
900
+ '--fk-onboarding-guide-divider': "var(--fk-color-surface-dim)",
901
+ '--fk-onboarding-guide-text': "var(--fk-color-text)",
902
+ '--fk-onboarding-guide-text-muted': "var(--fk-color-muted)",
903
+ '--fk-onboarding-guide-text-faint': "var(--fk-color-muted)",
904
+ '--fk-onboarding-guide-width': "360px",
905
+ '--fk-onboarding-guide-radius': "var(--fk-radius-lg)",
906
+ '--fk-onboarding-guide-radius-sm': "var(--fk-radius-md)",
907
+ '--fk-onboarding-guide-z': "60",
908
+ '--fk-onboarding-guide-shadow': "0 24px 54px -18px rgba(15, 23, 42, 0.28),\n 0 8px 20px -8px rgba(15, 23, 42, 0.16)",
909
+ '--fk-onboarding-guide-font-display': "var(--fk-font-family-display)",
910
+ '--fk-onboarding-guide-font-mono': "var(--fk-font-family-mono)",
894
911
  '--fk-method-badge-min-width': "3rem",
895
912
  '--fk-method-badge-padding-block': "2px",
896
913
  '--fk-method-badge-padding-inline': "var(--fk-rhythm-2)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frame-kit/tokens",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
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
@@ -1189,6 +1189,32 @@
1189
1189
  --fk-dialog-confirm-warning-bg-hover: var(--fk-color-warning-strong);
1190
1190
  --fk-dialog-confirm-warning-bg-active: var(--fk-color-warning-strong);
1191
1191
  --fk-dialog-confirm-warning-color: var(--fk-color-surface);
1192
+
1193
+ /* ---------- Onboarding Guide (patterns) ---------- */
1194
+ /* Accent is intentionally neutral (near-black) by default — point it at a
1195
+ brand scale to colour the progress, active states, and CTA together. */
1196
+ --fk-onboarding-guide-accent: var(--fk-color-text);
1197
+ --fk-onboarding-guide-accent-contrast: var(--fk-color-surface);
1198
+ --fk-onboarding-guide-complete: var(--fk-color-success);
1199
+
1200
+ --fk-onboarding-guide-surface: var(--fk-color-surface);
1201
+ --fk-onboarding-guide-surface-muted: var(--fk-color-surface-muted);
1202
+ --fk-onboarding-guide-border: var(--fk-color-border);
1203
+ --fk-onboarding-guide-divider: var(--fk-color-surface-dim);
1204
+ --fk-onboarding-guide-text: var(--fk-color-text);
1205
+ --fk-onboarding-guide-text-muted: var(--fk-color-muted);
1206
+ --fk-onboarding-guide-text-faint: var(--fk-color-muted);
1207
+
1208
+ --fk-onboarding-guide-width: 360px;
1209
+ --fk-onboarding-guide-radius: var(--fk-radius-lg);
1210
+ --fk-onboarding-guide-radius-sm: var(--fk-radius-md);
1211
+ --fk-onboarding-guide-z: 60;
1212
+ --fk-onboarding-guide-shadow:
1213
+ 0 24px 54px -18px rgba(15, 23, 42, 0.28),
1214
+ 0 8px 20px -8px rgba(15, 23, 42, 0.16);
1215
+
1216
+ --fk-onboarding-guide-font-display: var(--fk-font-family-display);
1217
+ --fk-onboarding-guide-font-mono: var(--fk-font-family-mono);
1192
1218
  }
1193
1219
 
1194
1220
  /* ==========================================================================