@frame-kit/tokens 0.1.6 → 0.1.8

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 +51 -0
  2. package/index.d.ts +38 -0
  3. package/index.js +38 -0
  4. package/package.json +1 -1
  5. package/scss/tokens.base.scss +60 -0
package/base.css CHANGED
@@ -1045,6 +1045,57 @@
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);
1070
+ /* ---------- Search Bar Layout (patterns) ---------- */
1071
+ --fk-search-bar-layout-gap: var(--fk-rhythm-3);
1072
+ --fk-search-bar-layout-search-bg: var(--fk-color-surface-muted);
1073
+ --fk-search-bar-layout-chevron-color: var(--fk-color-muted);
1074
+ --fk-search-bar-layout-chevron-stroke: 1.25;
1075
+ --fk-search-bar-layout-control-padding: 0.5625rem 0.8125rem;
1076
+ --fk-search-bar-layout-control-font-size: 0.84375rem;
1077
+ --fk-search-bar-layout-control-radius: 0.5625rem;
1078
+ --fk-search-bar-layout-filter-min-width: 10rem;
1079
+ --fk-search-bar-layout-filter-font-weight: var(--fk-font-weight-medium);
1080
+ /* ---------- Content Page Section (patterns) ---------- */
1081
+ --fk-content-page-section-margin-top: var(--fk-rhythm-6);
1082
+ --fk-content-page-section-gap: var(--fk-rhythm-2);
1083
+ /* ---------- Content Row (patterns) ---------- */
1084
+ --fk-content-row-padding: var(--fk-rhythm-4);
1085
+ --fk-content-row-border-color: var(--fk-color-border);
1086
+ --fk-content-row-radius: var(--fk-radius-md);
1087
+ /* ---------- Content Column (patterns) ---------- */
1088
+ --fk-content-column-padding: var(--fk-rhythm-4);
1089
+ --fk-content-column-border-color: var(--fk-color-border);
1090
+ --fk-content-column-radius: var(--fk-radius-md);
1091
+ /* ---------- Content Column Headline (patterns) ---------- */
1092
+ --fk-content-column-headline-gap: var(--fk-rhythm-3);
1093
+ --fk-content-column-headline-color: var(--fk-color-text);
1094
+ --fk-content-column-headline-font-size: var(
1095
+ --fk-typography-subtitle-font-size,
1096
+ 1.125rem
1097
+ );
1098
+ --fk-content-column-headline-font-weight: var(--fk-font-weight-semibold);
1048
1099
  }
1049
1100
 
1050
1101
  /* ==========================================================================
package/index.d.ts CHANGED
@@ -891,6 +891,44 @@ 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'
911
+ | '--fk-search-bar-layout-gap'
912
+ | '--fk-search-bar-layout-search-bg'
913
+ | '--fk-search-bar-layout-chevron-color'
914
+ | '--fk-search-bar-layout-chevron-stroke'
915
+ | '--fk-search-bar-layout-control-padding'
916
+ | '--fk-search-bar-layout-control-font-size'
917
+ | '--fk-search-bar-layout-control-radius'
918
+ | '--fk-search-bar-layout-filter-min-width'
919
+ | '--fk-search-bar-layout-filter-font-weight'
920
+ | '--fk-content-page-section-margin-top'
921
+ | '--fk-content-page-section-gap'
922
+ | '--fk-content-row-padding'
923
+ | '--fk-content-row-border-color'
924
+ | '--fk-content-row-radius'
925
+ | '--fk-content-column-padding'
926
+ | '--fk-content-column-border-color'
927
+ | '--fk-content-column-radius'
928
+ | '--fk-content-column-headline-gap'
929
+ | '--fk-content-column-headline-color'
930
+ | '--fk-content-column-headline-font-size'
931
+ | '--fk-content-column-headline-font-weight'
894
932
  | '--fk-method-badge-min-width'
895
933
  | '--fk-method-badge-padding-block'
896
934
  | '--fk-method-badge-padding-inline'
package/index.js CHANGED
@@ -891,6 +891,44 @@ 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)",
911
+ '--fk-search-bar-layout-gap': "var(--fk-rhythm-3)",
912
+ '--fk-search-bar-layout-search-bg': "var(--fk-color-surface-muted)",
913
+ '--fk-search-bar-layout-chevron-color': "var(--fk-color-muted)",
914
+ '--fk-search-bar-layout-chevron-stroke': "1.25",
915
+ '--fk-search-bar-layout-control-padding': "0.5625rem 0.8125rem",
916
+ '--fk-search-bar-layout-control-font-size': "0.84375rem",
917
+ '--fk-search-bar-layout-control-radius': "0.5625rem",
918
+ '--fk-search-bar-layout-filter-min-width': "10rem",
919
+ '--fk-search-bar-layout-filter-font-weight': "var(--fk-font-weight-medium)",
920
+ '--fk-content-page-section-margin-top': "var(--fk-rhythm-6)",
921
+ '--fk-content-page-section-gap': "var(--fk-rhythm-2)",
922
+ '--fk-content-row-padding': "var(--fk-rhythm-4)",
923
+ '--fk-content-row-border-color': "var(--fk-color-border)",
924
+ '--fk-content-row-radius': "var(--fk-radius-md)",
925
+ '--fk-content-column-padding': "var(--fk-rhythm-4)",
926
+ '--fk-content-column-border-color': "var(--fk-color-border)",
927
+ '--fk-content-column-radius': "var(--fk-radius-md)",
928
+ '--fk-content-column-headline-gap': "var(--fk-rhythm-3)",
929
+ '--fk-content-column-headline-color': "var(--fk-color-text)",
930
+ '--fk-content-column-headline-font-size': "var(\n --fk-typography-subtitle-font-size,\n 1.125rem\n )",
931
+ '--fk-content-column-headline-font-weight': "var(--fk-font-weight-semibold)",
894
932
  '--fk-method-badge-min-width': "3rem",
895
933
  '--fk-method-badge-padding-block': "2px",
896
934
  '--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.8",
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,66 @@
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);
1218
+
1219
+ /* ---------- Search Bar Layout (patterns) ---------- */
1220
+ --fk-search-bar-layout-gap: var(--fk-rhythm-3);
1221
+ --fk-search-bar-layout-search-bg: var(--fk-color-surface-muted);
1222
+ --fk-search-bar-layout-chevron-color: var(--fk-color-muted);
1223
+ --fk-search-bar-layout-chevron-stroke: 1.25;
1224
+ --fk-search-bar-layout-control-padding: 0.5625rem 0.8125rem;
1225
+ --fk-search-bar-layout-control-font-size: 0.84375rem;
1226
+ --fk-search-bar-layout-control-radius: 0.5625rem;
1227
+ --fk-search-bar-layout-filter-min-width: 10rem;
1228
+ --fk-search-bar-layout-filter-font-weight: var(--fk-font-weight-medium);
1229
+
1230
+ /* ---------- Content Page Section (patterns) ---------- */
1231
+ --fk-content-page-section-margin-top: var(--fk-rhythm-6);
1232
+ --fk-content-page-section-gap: var(--fk-rhythm-2);
1233
+
1234
+ /* ---------- Content Row (patterns) ---------- */
1235
+ --fk-content-row-padding: var(--fk-rhythm-4);
1236
+ --fk-content-row-border-color: var(--fk-color-border);
1237
+ --fk-content-row-radius: var(--fk-radius-md);
1238
+
1239
+ /* ---------- Content Column (patterns) ---------- */
1240
+ --fk-content-column-padding: var(--fk-rhythm-4);
1241
+ --fk-content-column-border-color: var(--fk-color-border);
1242
+ --fk-content-column-radius: var(--fk-radius-md);
1243
+
1244
+ /* ---------- Content Column Headline (patterns) ---------- */
1245
+ --fk-content-column-headline-gap: var(--fk-rhythm-3);
1246
+ --fk-content-column-headline-color: var(--fk-color-text);
1247
+ --fk-content-column-headline-font-size: var(
1248
+ --fk-typography-subtitle-font-size,
1249
+ 1.125rem
1250
+ );
1251
+ --fk-content-column-headline-font-weight: var(--fk-font-weight-semibold);
1192
1252
  }
1193
1253
 
1194
1254
  /* ==========================================================================