@frame-kit/tokens 0.1.4 → 0.1.6

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 +37 -0
  2. package/index.d.ts +30 -0
  3. package/index.js +30 -0
  4. package/package.json +1 -1
  5. package/scss/tokens.base.scss +42 -0
package/base.css CHANGED
@@ -1008,6 +1008,43 @@
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);
1011
1048
  }
1012
1049
 
1013
1050
  /* ==========================================================================
package/index.d.ts CHANGED
@@ -861,6 +861,36 @@ 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'
864
894
  | '--fk-method-badge-min-width'
865
895
  | '--fk-method-badge-padding-block'
866
896
  | '--fk-method-badge-padding-inline'
package/index.js CHANGED
@@ -861,6 +861,36 @@ 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)",
864
894
  '--fk-method-badge-min-width': "3rem",
865
895
  '--fk-method-badge-padding-block': "2px",
866
896
  '--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.4",
3
+ "version": "0.1.6",
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,48 @@
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);
1150
1192
  }
1151
1193
 
1152
1194
  /* ==========================================================================