@frame-kit/tokens 0.1.5 → 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 +59 -0
  2. package/index.d.ts +47 -0
  3. package/index.js +47 -0
  4. package/package.json +1 -1
  5. package/scss/tokens.base.scss +68 -0
package/base.css CHANGED
@@ -1008,6 +1008,65 @@
1008
1008
  --fk-avatar-stack-overflow-bg: var(--fk-color-surface-muted);
1009
1009
  --fk-avatar-stack-overflow-bg-hover: var(--fk-color-surface-hover);
1010
1010
  --fk-avatar-stack-overflow-focus-ring: var(--fk-focus-ring);
1011
+ /* ---------- Dialog Shell (patterns) ---------- */
1012
+ /* Header icon-tile tints — each maps to a semantic tone; override per theme. */
1013
+ --fk-dialog-header-tint-brand-color: var(--fk-color-primary);
1014
+ --fk-dialog-header-tint-brand-bg: var(--fk-color-primary-light);
1015
+ --fk-dialog-header-tint-warning-color: var(--fk-color-warning);
1016
+ --fk-dialog-header-tint-warning-bg: var(--fk-color-warning-subtle);
1017
+ --fk-dialog-header-tint-success-color: var(--fk-color-success);
1018
+ --fk-dialog-header-tint-success-bg: var(--fk-color-success-subtle);
1019
+ --fk-dialog-header-tint-danger-color: var(--fk-color-danger);
1020
+ --fk-dialog-header-tint-danger-bg: var(--fk-color-danger-light);
1021
+ --fk-dialog-header-tint-accent-color: var(--fk-color-accent, #7c3aed);
1022
+ --fk-dialog-header-tint-accent-bg: var(--fk-color-accent-subtle, #f5f3ff);
1023
+ /* Header layout, title, subtitle, and close affordance. */
1024
+ --fk-dialog-header-gap: var(--fk-rhythm-3);
1025
+ --fk-dialog-header-title-font-size: 1.25rem;
1026
+ --fk-dialog-header-subtitle-color: var(--fk-color-muted);
1027
+ --fk-dialog-header-subtitle-font-family: var(--fk-font-family-mono);
1028
+ --fk-dialog-header-close-color: var(--fk-color-muted);
1029
+ --fk-dialog-header-close-color-hover: var(--fk-color-text);
1030
+ --fk-dialog-header-close-bg-hover: var(--fk-color-surface-muted);
1031
+ --fk-dialog-header-close-border-hover: var(--fk-color-border);
1032
+ --fk-dialog-header-close-radius: var(--fk-radius-sm);
1033
+ /* Body rhythm between header, projected content, and footer. */
1034
+ --fk-dialog-shell-body-margin-top: var(--fk-rhythm-4);
1035
+ /* Footer note + top divider. */
1036
+ --fk-dialog-footer-gap: var(--fk-rhythm-3);
1037
+ --fk-dialog-footer-margin-top: var(--fk-rhythm-5);
1038
+ --fk-dialog-footer-padding-top: var(--fk-rhythm-5);
1039
+ --fk-dialog-footer-divider-color: var(--fk-color-surface-dim);
1040
+ --fk-dialog-footer-note-color: var(--fk-color-muted);
1041
+ --fk-dialog-footer-note-font-size: 0.71875rem;
1042
+ /* Confirm-button "warning" retint (fk-button has no warning variant, so the
1043
+ shell overrides fk-button's danger custom props to the warning scale). */
1044
+ --fk-dialog-confirm-warning-bg: var(--fk-color-warning);
1045
+ --fk-dialog-confirm-warning-bg-hover: var(--fk-color-warning-strong);
1046
+ --fk-dialog-confirm-warning-bg-active: var(--fk-color-warning-strong);
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);
1011
1070
  }
1012
1071
 
1013
1072
  /* ==========================================================================
package/index.d.ts CHANGED
@@ -861,6 +861,53 @@ export type FkTokenName =
861
861
  | '--fk-avatar-stack-overflow-bg'
862
862
  | '--fk-avatar-stack-overflow-bg-hover'
863
863
  | '--fk-avatar-stack-overflow-focus-ring'
864
+ | '--fk-dialog-header-tint-brand-color'
865
+ | '--fk-dialog-header-tint-brand-bg'
866
+ | '--fk-dialog-header-tint-warning-color'
867
+ | '--fk-dialog-header-tint-warning-bg'
868
+ | '--fk-dialog-header-tint-success-color'
869
+ | '--fk-dialog-header-tint-success-bg'
870
+ | '--fk-dialog-header-tint-danger-color'
871
+ | '--fk-dialog-header-tint-danger-bg'
872
+ | '--fk-dialog-header-tint-accent-color'
873
+ | '--fk-dialog-header-tint-accent-bg'
874
+ | '--fk-dialog-header-gap'
875
+ | '--fk-dialog-header-title-font-size'
876
+ | '--fk-dialog-header-subtitle-color'
877
+ | '--fk-dialog-header-subtitle-font-family'
878
+ | '--fk-dialog-header-close-color'
879
+ | '--fk-dialog-header-close-color-hover'
880
+ | '--fk-dialog-header-close-bg-hover'
881
+ | '--fk-dialog-header-close-border-hover'
882
+ | '--fk-dialog-header-close-radius'
883
+ | '--fk-dialog-shell-body-margin-top'
884
+ | '--fk-dialog-footer-gap'
885
+ | '--fk-dialog-footer-margin-top'
886
+ | '--fk-dialog-footer-padding-top'
887
+ | '--fk-dialog-footer-divider-color'
888
+ | '--fk-dialog-footer-note-color'
889
+ | '--fk-dialog-footer-note-font-size'
890
+ | '--fk-dialog-confirm-warning-bg'
891
+ | '--fk-dialog-confirm-warning-bg-hover'
892
+ | '--fk-dialog-confirm-warning-bg-active'
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'
864
911
  | '--fk-method-badge-min-width'
865
912
  | '--fk-method-badge-padding-block'
866
913
  | '--fk-method-badge-padding-inline'
package/index.js CHANGED
@@ -861,6 +861,53 @@ export const tokens = {
861
861
  '--fk-avatar-stack-overflow-bg': "var(--fk-color-surface-muted)",
862
862
  '--fk-avatar-stack-overflow-bg-hover': "var(--fk-color-surface-hover)",
863
863
  '--fk-avatar-stack-overflow-focus-ring': "var(--fk-focus-ring)",
864
+ '--fk-dialog-header-tint-brand-color': "var(--fk-color-primary)",
865
+ '--fk-dialog-header-tint-brand-bg': "var(--fk-color-primary-light)",
866
+ '--fk-dialog-header-tint-warning-color': "var(--fk-color-warning)",
867
+ '--fk-dialog-header-tint-warning-bg': "var(--fk-color-warning-subtle)",
868
+ '--fk-dialog-header-tint-success-color': "var(--fk-color-success)",
869
+ '--fk-dialog-header-tint-success-bg': "var(--fk-color-success-subtle)",
870
+ '--fk-dialog-header-tint-danger-color': "var(--fk-color-danger)",
871
+ '--fk-dialog-header-tint-danger-bg': "var(--fk-color-danger-light)",
872
+ '--fk-dialog-header-tint-accent-color': "var(--fk-color-accent, #7c3aed)",
873
+ '--fk-dialog-header-tint-accent-bg': "var(--fk-color-accent-subtle, #f5f3ff)",
874
+ '--fk-dialog-header-gap': "var(--fk-rhythm-3)",
875
+ '--fk-dialog-header-title-font-size': "1.25rem",
876
+ '--fk-dialog-header-subtitle-color': "var(--fk-color-muted)",
877
+ '--fk-dialog-header-subtitle-font-family': "var(--fk-font-family-mono)",
878
+ '--fk-dialog-header-close-color': "var(--fk-color-muted)",
879
+ '--fk-dialog-header-close-color-hover': "var(--fk-color-text)",
880
+ '--fk-dialog-header-close-bg-hover': "var(--fk-color-surface-muted)",
881
+ '--fk-dialog-header-close-border-hover': "var(--fk-color-border)",
882
+ '--fk-dialog-header-close-radius': "var(--fk-radius-sm)",
883
+ '--fk-dialog-shell-body-margin-top': "var(--fk-rhythm-4)",
884
+ '--fk-dialog-footer-gap': "var(--fk-rhythm-3)",
885
+ '--fk-dialog-footer-margin-top': "var(--fk-rhythm-5)",
886
+ '--fk-dialog-footer-padding-top': "var(--fk-rhythm-5)",
887
+ '--fk-dialog-footer-divider-color': "var(--fk-color-surface-dim)",
888
+ '--fk-dialog-footer-note-color': "var(--fk-color-muted)",
889
+ '--fk-dialog-footer-note-font-size': "0.71875rem",
890
+ '--fk-dialog-confirm-warning-bg': "var(--fk-color-warning)",
891
+ '--fk-dialog-confirm-warning-bg-hover': "var(--fk-color-warning-strong)",
892
+ '--fk-dialog-confirm-warning-bg-active': "var(--fk-color-warning-strong)",
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)",
864
911
  '--fk-method-badge-min-width': "3rem",
865
912
  '--fk-method-badge-padding-block': "2px",
866
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.5",
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
@@ -1147,6 +1147,74 @@
1147
1147
  --fk-avatar-stack-overflow-bg: var(--fk-color-surface-muted);
1148
1148
  --fk-avatar-stack-overflow-bg-hover: var(--fk-color-surface-hover);
1149
1149
  --fk-avatar-stack-overflow-focus-ring: var(--fk-focus-ring);
1150
+
1151
+ /* ---------- Dialog Shell (patterns) ---------- */
1152
+ /* Header icon-tile tints — each maps to a semantic tone; override per theme. */
1153
+ --fk-dialog-header-tint-brand-color: var(--fk-color-primary);
1154
+ --fk-dialog-header-tint-brand-bg: var(--fk-color-primary-light);
1155
+ --fk-dialog-header-tint-warning-color: var(--fk-color-warning);
1156
+ --fk-dialog-header-tint-warning-bg: var(--fk-color-warning-subtle);
1157
+ --fk-dialog-header-tint-success-color: var(--fk-color-success);
1158
+ --fk-dialog-header-tint-success-bg: var(--fk-color-success-subtle);
1159
+ --fk-dialog-header-tint-danger-color: var(--fk-color-danger);
1160
+ --fk-dialog-header-tint-danger-bg: var(--fk-color-danger-light);
1161
+ --fk-dialog-header-tint-accent-color: var(--fk-color-accent, #7c3aed);
1162
+ --fk-dialog-header-tint-accent-bg: var(--fk-color-accent-subtle, #f5f3ff);
1163
+
1164
+ /* Header layout, title, subtitle, and close affordance. */
1165
+ --fk-dialog-header-gap: var(--fk-rhythm-3);
1166
+ --fk-dialog-header-title-font-size: 1.25rem;
1167
+ --fk-dialog-header-subtitle-color: var(--fk-color-muted);
1168
+ --fk-dialog-header-subtitle-font-family: var(--fk-font-family-mono);
1169
+ --fk-dialog-header-close-color: var(--fk-color-muted);
1170
+ --fk-dialog-header-close-color-hover: var(--fk-color-text);
1171
+ --fk-dialog-header-close-bg-hover: var(--fk-color-surface-muted);
1172
+ --fk-dialog-header-close-border-hover: var(--fk-color-border);
1173
+ --fk-dialog-header-close-radius: var(--fk-radius-sm);
1174
+
1175
+ /* Body rhythm between header, projected content, and footer. */
1176
+ --fk-dialog-shell-body-margin-top: var(--fk-rhythm-4);
1177
+
1178
+ /* Footer note + top divider. */
1179
+ --fk-dialog-footer-gap: var(--fk-rhythm-3);
1180
+ --fk-dialog-footer-margin-top: var(--fk-rhythm-5);
1181
+ --fk-dialog-footer-padding-top: var(--fk-rhythm-5);
1182
+ --fk-dialog-footer-divider-color: var(--fk-color-surface-dim);
1183
+ --fk-dialog-footer-note-color: var(--fk-color-muted);
1184
+ --fk-dialog-footer-note-font-size: 0.71875rem;
1185
+
1186
+ /* Confirm-button "warning" retint (fk-button has no warning variant, so the
1187
+ shell overrides fk-button's danger custom props to the warning scale). */
1188
+ --fk-dialog-confirm-warning-bg: var(--fk-color-warning);
1189
+ --fk-dialog-confirm-warning-bg-hover: var(--fk-color-warning-strong);
1190
+ --fk-dialog-confirm-warning-bg-active: var(--fk-color-warning-strong);
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);
1150
1218
  }
1151
1219
 
1152
1220
  /* ==========================================================================