@snagtag/design-system 0.2.0 → 0.2.2

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 (4) hide show
  1. package/dist/index.cjs +31 -0
  2. package/dist/index.js +31 -0
  3. package/dist/manifest.json +3 -3
  4. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -334,6 +334,17 @@ var THEME_DEFAULTS = {
334
334
  primaryLightColor: "#dbeafe",
335
335
  secondaryColor: "#64748b",
336
336
  accentColor: "#f59e0b",
337
+ // Foundations — global semantic text + border tokens.
338
+ // These are app-wide roles (not component-scoped) so host apps can map their
339
+ // own primary/secondary/muted text and default/subtle borders one-to-one.
340
+ // Defaults deliberately match the closest existing primitives so adopting
341
+ // them causes no visual shift (text-primary = ink-900, etc.).
342
+ textPrimary: "#0f172a",
343
+ textSecondary: "#64748b",
344
+ textMuted: "#94a3b8",
345
+ textInverse: "#ffffff",
346
+ borderDefault: "#e2e8f0",
347
+ borderSubtle: "#f1f5f9",
337
348
  // Sidebar
338
349
  sidebarBg: "#ffffff",
339
350
  sidebarText: "#475569",
@@ -418,6 +429,13 @@ var THEME_KEY_TO_CSS = {
418
429
  primaryLightColor: "--color-brand-100",
419
430
  secondaryColor: "--color-ink-500",
420
431
  accentColor: "--color-accent",
432
+ // Foundations — global semantic text + border tokens
433
+ textPrimary: "--color-text-primary",
434
+ textSecondary: "--color-text-secondary",
435
+ textMuted: "--color-text-muted",
436
+ textInverse: "--color-text-inverse",
437
+ borderDefault: "--color-border-default",
438
+ borderSubtle: "--color-border-subtle",
421
439
  // Sidebar
422
440
  sidebarBg: "--color-sidebar-bg",
423
441
  sidebarText: "--color-sidebar-text",
@@ -498,6 +516,10 @@ var THEME_CATEGORIES = [
498
516
  label: "Brand",
499
517
  keys: ["primaryColor", "primaryHoverColor", "primaryLightColor", "secondaryColor", "accentColor"]
500
518
  },
519
+ {
520
+ label: "Foundations",
521
+ keys: ["textPrimary", "textSecondary", "textMuted", "textInverse", "borderDefault", "borderSubtle"]
522
+ },
501
523
  {
502
524
  label: "Sidebar",
503
525
  keys: ["sidebarBg", "sidebarText", "sidebarActiveBg"]
@@ -719,6 +741,14 @@ var SEMANTIC_COLOURS = [
719
741
  { cssVar: "--color-info", label: "Info", category: "colour", defaultValue: "#3b82f6", themeKey: "infoColor" },
720
742
  { cssVar: "--color-info-light", label: "Info Light", category: "colour", defaultValue: "#dbeafe", themeKey: "infoLightColor" }
721
743
  ];
744
+ var FOUNDATION_TOKENS = [
745
+ { cssVar: "--color-text-primary", label: "Text Primary", category: "colour", defaultValue: "#0f172a", references: "--color-ink-900", themeKey: "textPrimary" },
746
+ { cssVar: "--color-text-secondary", label: "Text Secondary", category: "colour", defaultValue: "#64748b", references: "--color-ink-500", themeKey: "textSecondary" },
747
+ { cssVar: "--color-text-muted", label: "Text Muted", category: "colour", defaultValue: "#94a3b8", references: "--color-ink-400", themeKey: "textMuted" },
748
+ { cssVar: "--color-text-inverse", label: "Text Inverse", category: "colour", defaultValue: "#ffffff", themeKey: "textInverse" },
749
+ { cssVar: "--color-border-default", label: "Border Default", category: "colour", defaultValue: "#e2e8f0", references: "--color-ink-200", themeKey: "borderDefault" },
750
+ { cssVar: "--color-border-subtle", label: "Border Subtle", category: "colour", defaultValue: "#f1f5f9", references: "--color-ink-100", themeKey: "borderSubtle" }
751
+ ];
722
752
  var SURFACE_TOKENS = [
723
753
  { cssVar: "--color-surface-page", label: "Page Background", category: "colour", defaultValue: "#f8fafc", references: "--color-ink-50", themeKey: "surfacePageColor" },
724
754
  { cssVar: "--color-surface-card", label: "Card Surface", category: "colour", defaultValue: "#ffffff", themeKey: "surfaceCardColor" },
@@ -853,6 +883,7 @@ var TOKEN_REGISTRY = [
853
883
  { label: "Accent Colours", tokens: ACCENT_PRIMITIVES },
854
884
  { label: "Sidebar", tokens: SIDEBAR_TOKENS },
855
885
  { label: "Semantic Colours", tokens: SEMANTIC_COLOURS },
886
+ { label: "Foundations (Text & Border)", tokens: FOUNDATION_TOKENS },
856
887
  { label: "Surface", tokens: SURFACE_TOKENS },
857
888
  { label: "Interactive", tokens: INTERACTIVE_TOKENS },
858
889
  { label: "Button", tokens: BUTTON_TOKENS },
package/dist/index.js CHANGED
@@ -196,6 +196,17 @@ var THEME_DEFAULTS = {
196
196
  primaryLightColor: "#dbeafe",
197
197
  secondaryColor: "#64748b",
198
198
  accentColor: "#f59e0b",
199
+ // Foundations — global semantic text + border tokens.
200
+ // These are app-wide roles (not component-scoped) so host apps can map their
201
+ // own primary/secondary/muted text and default/subtle borders one-to-one.
202
+ // Defaults deliberately match the closest existing primitives so adopting
203
+ // them causes no visual shift (text-primary = ink-900, etc.).
204
+ textPrimary: "#0f172a",
205
+ textSecondary: "#64748b",
206
+ textMuted: "#94a3b8",
207
+ textInverse: "#ffffff",
208
+ borderDefault: "#e2e8f0",
209
+ borderSubtle: "#f1f5f9",
199
210
  // Sidebar
200
211
  sidebarBg: "#ffffff",
201
212
  sidebarText: "#475569",
@@ -280,6 +291,13 @@ var THEME_KEY_TO_CSS = {
280
291
  primaryLightColor: "--color-brand-100",
281
292
  secondaryColor: "--color-ink-500",
282
293
  accentColor: "--color-accent",
294
+ // Foundations — global semantic text + border tokens
295
+ textPrimary: "--color-text-primary",
296
+ textSecondary: "--color-text-secondary",
297
+ textMuted: "--color-text-muted",
298
+ textInverse: "--color-text-inverse",
299
+ borderDefault: "--color-border-default",
300
+ borderSubtle: "--color-border-subtle",
283
301
  // Sidebar
284
302
  sidebarBg: "--color-sidebar-bg",
285
303
  sidebarText: "--color-sidebar-text",
@@ -360,6 +378,10 @@ var THEME_CATEGORIES = [
360
378
  label: "Brand",
361
379
  keys: ["primaryColor", "primaryHoverColor", "primaryLightColor", "secondaryColor", "accentColor"]
362
380
  },
381
+ {
382
+ label: "Foundations",
383
+ keys: ["textPrimary", "textSecondary", "textMuted", "textInverse", "borderDefault", "borderSubtle"]
384
+ },
363
385
  {
364
386
  label: "Sidebar",
365
387
  keys: ["sidebarBg", "sidebarText", "sidebarActiveBg"]
@@ -581,6 +603,14 @@ var SEMANTIC_COLOURS = [
581
603
  { cssVar: "--color-info", label: "Info", category: "colour", defaultValue: "#3b82f6", themeKey: "infoColor" },
582
604
  { cssVar: "--color-info-light", label: "Info Light", category: "colour", defaultValue: "#dbeafe", themeKey: "infoLightColor" }
583
605
  ];
606
+ var FOUNDATION_TOKENS = [
607
+ { cssVar: "--color-text-primary", label: "Text Primary", category: "colour", defaultValue: "#0f172a", references: "--color-ink-900", themeKey: "textPrimary" },
608
+ { cssVar: "--color-text-secondary", label: "Text Secondary", category: "colour", defaultValue: "#64748b", references: "--color-ink-500", themeKey: "textSecondary" },
609
+ { cssVar: "--color-text-muted", label: "Text Muted", category: "colour", defaultValue: "#94a3b8", references: "--color-ink-400", themeKey: "textMuted" },
610
+ { cssVar: "--color-text-inverse", label: "Text Inverse", category: "colour", defaultValue: "#ffffff", themeKey: "textInverse" },
611
+ { cssVar: "--color-border-default", label: "Border Default", category: "colour", defaultValue: "#e2e8f0", references: "--color-ink-200", themeKey: "borderDefault" },
612
+ { cssVar: "--color-border-subtle", label: "Border Subtle", category: "colour", defaultValue: "#f1f5f9", references: "--color-ink-100", themeKey: "borderSubtle" }
613
+ ];
584
614
  var SURFACE_TOKENS = [
585
615
  { cssVar: "--color-surface-page", label: "Page Background", category: "colour", defaultValue: "#f8fafc", references: "--color-ink-50", themeKey: "surfacePageColor" },
586
616
  { cssVar: "--color-surface-card", label: "Card Surface", category: "colour", defaultValue: "#ffffff", themeKey: "surfaceCardColor" },
@@ -715,6 +745,7 @@ var TOKEN_REGISTRY = [
715
745
  { label: "Accent Colours", tokens: ACCENT_PRIMITIVES },
716
746
  { label: "Sidebar", tokens: SIDEBAR_TOKENS },
717
747
  { label: "Semantic Colours", tokens: SEMANTIC_COLOURS },
748
+ { label: "Foundations (Text & Border)", tokens: FOUNDATION_TOKENS },
718
749
  { label: "Surface", tokens: SURFACE_TOKENS },
719
750
  { label: "Interactive", tokens: INTERACTIVE_TOKENS },
720
751
  { label: "Button", tokens: BUTTON_TOKENS },
package/dist/manifest.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@snagtag/design-system",
3
- "version": "0.1.0",
4
- "buildTimestamp": "2026-06-09T21:34:53.445Z",
5
- "contentHash": "2effc038e3d2626a",
3
+ "version": "0.2.2",
4
+ "buildTimestamp": "2026-06-14T12:14:04.453Z",
5
+ "contentHash": "98bae0b9dc92d2a9",
6
6
  "changes": [],
7
7
  "breaking": false,
8
8
  "siblings": {}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@snagtag/design-system",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "type": "module",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",