@profpowell/vb-design-system 0.1.0

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 (104) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +122 -0
  3. package/dist/vb-design-system.css +993 -0
  4. package/dist/vb-design-system.js +4482 -0
  5. package/dist/vb-design-system.min.css +1 -0
  6. package/dist/vb-design-system.min.js +513 -0
  7. package/package.json +78 -0
  8. package/src/index.css +21 -0
  9. package/src/index.js +24 -0
  10. package/src/lib/bundle-registry.js +156 -0
  11. package/src/lib/vb-element.js +96 -0
  12. package/src/patterns/do-dont.css +86 -0
  13. package/src/patterns/token-table.css +67 -0
  14. package/src/utils/copy-init.js +287 -0
  15. package/src/web-components/accessibility-specimen/api.json +51 -0
  16. package/src/web-components/accessibility-specimen/logic.js +232 -0
  17. package/src/web-components/accessibility-specimen/static.html +41 -0
  18. package/src/web-components/accessibility-specimen/styles.css +156 -0
  19. package/src/web-components/brand-specimen/api.json +37 -0
  20. package/src/web-components/brand-specimen/logic.js +61 -0
  21. package/src/web-components/brand-specimen/static.html +77 -0
  22. package/src/web-components/brand-specimen/styles.css +10 -0
  23. package/src/web-components/breakpoint-specimen/api.json +44 -0
  24. package/src/web-components/breakpoint-specimen/logic.js +186 -0
  25. package/src/web-components/breakpoint-specimen/static.html +38 -0
  26. package/src/web-components/breakpoint-specimen/styles.css +180 -0
  27. package/src/web-components/color-palette/api.json +73 -0
  28. package/src/web-components/color-palette/logic.js +280 -0
  29. package/src/web-components/color-palette/static.html +54 -0
  30. package/src/web-components/color-palette/styles.css +113 -0
  31. package/src/web-components/color-picker/_color-utils.js +210 -0
  32. package/src/web-components/component-sampler/api.json +15 -0
  33. package/src/web-components/component-sampler/logic.js +120 -0
  34. package/src/web-components/component-sampler/static.html +47 -0
  35. package/src/web-components/component-sampler/styles.css +9 -0
  36. package/src/web-components/font-pairer/_font-data.js +95 -0
  37. package/src/web-components/font-pairer/api.json +56 -0
  38. package/src/web-components/font-pairer/logic.js +401 -0
  39. package/src/web-components/font-pairer/static.html +9 -0
  40. package/src/web-components/font-pairer/styles.css +10 -0
  41. package/src/web-components/gradient-builder/_gradient-utils.js +54 -0
  42. package/src/web-components/gradient-builder/api.json +63 -0
  43. package/src/web-components/gradient-builder/logic.js +261 -0
  44. package/src/web-components/gradient-builder/static.html +9 -0
  45. package/src/web-components/gradient-builder/styles.css +10 -0
  46. package/src/web-components/icon-set/api.json +39 -0
  47. package/src/web-components/icon-set/logic.js +133 -0
  48. package/src/web-components/icon-set/static.html +36 -0
  49. package/src/web-components/icon-set/styles.css +82 -0
  50. package/src/web-components/icon-specimen/api.json +46 -0
  51. package/src/web-components/icon-specimen/logic.js +67 -0
  52. package/src/web-components/icon-specimen/static.html +39 -0
  53. package/src/web-components/icon-specimen/styles.css +38 -0
  54. package/src/web-components/layout-specimen/api.json +12 -0
  55. package/src/web-components/layout-specimen/logic.js +219 -0
  56. package/src/web-components/layout-specimen/static.html +22 -0
  57. package/src/web-components/layout-specimen/styles.css +95 -0
  58. package/src/web-components/motion-specimen/api.json +54 -0
  59. package/src/web-components/motion-specimen/logic.js +146 -0
  60. package/src/web-components/motion-specimen/static.html +13 -0
  61. package/src/web-components/motion-specimen/styles.css +29 -0
  62. package/src/web-components/palette-generator/_palette-utils.js +133 -0
  63. package/src/web-components/palette-generator/api.json +79 -0
  64. package/src/web-components/palette-generator/logic.js +288 -0
  65. package/src/web-components/palette-generator/static.html +47 -0
  66. package/src/web-components/palette-generator/styles.css +36 -0
  67. package/src/web-components/semantic-palette/_color-math.js +149 -0
  68. package/src/web-components/semantic-palette/api.json +41 -0
  69. package/src/web-components/semantic-palette/logic.js +400 -0
  70. package/src/web-components/semantic-palette/static.html +42 -0
  71. package/src/web-components/semantic-palette/styles.css +20 -0
  72. package/src/web-components/spacing-specimen/api.json +63 -0
  73. package/src/web-components/spacing-specimen/logic.js +132 -0
  74. package/src/web-components/spacing-specimen/static.html +71 -0
  75. package/src/web-components/spacing-specimen/styles.css +58 -0
  76. package/src/web-components/theme-catalog/api.json +14 -0
  77. package/src/web-components/theme-catalog/logic.js +228 -0
  78. package/src/web-components/theme-catalog/static.html +15 -0
  79. package/src/web-components/theme-export/api.json +18 -0
  80. package/src/web-components/theme-export/dtcg-serialize.js +417 -0
  81. package/src/web-components/theme-export/logic.js +201 -0
  82. package/src/web-components/theme-export/static.html +12 -0
  83. package/src/web-components/theme-export/theme-css-parse.js +93 -0
  84. package/src/web-components/theme-import/api.json +14 -0
  85. package/src/web-components/theme-import/catalog/atlassian.tokens.json +303 -0
  86. package/src/web-components/theme-import/catalog/bootstrap.tokens.json +304 -0
  87. package/src/web-components/theme-import/catalog/carbon.tokens.json +301 -0
  88. package/src/web-components/theme-import/catalog/catppuccin-mocha.tokens.json +301 -0
  89. package/src/web-components/theme-import/catalog/govuk.tokens.json +301 -0
  90. package/src/web-components/theme-import/catalog/manifest.json +132 -0
  91. package/src/web-components/theme-import/catalog/material.tokens.json +289 -0
  92. package/src/web-components/theme-import/catalog/salesforce.tokens.json +301 -0
  93. package/src/web-components/theme-import/catalog/tailwind.tokens.json +302 -0
  94. package/src/web-components/theme-import/dtcg-deserialize.js +322 -0
  95. package/src/web-components/theme-import/logic.js +263 -0
  96. package/src/web-components/theme-import/static.html +15 -0
  97. package/src/web-components/token-specimen/api.json +24 -0
  98. package/src/web-components/token-specimen/logic.js +256 -0
  99. package/src/web-components/token-specimen/static.html +47 -0
  100. package/src/web-components/token-specimen/styles.css +10 -0
  101. package/src/web-components/type-specimen/api.json +91 -0
  102. package/src/web-components/type-specimen/logic.js +156 -0
  103. package/src/web-components/type-specimen/static.html +84 -0
  104. package/src/web-components/type-specimen/styles.css +131 -0
package/src/web-components/type-specimen/styles.css ADDED
@@ -0,0 +1,131 @@
1
+ /* --- Progressive enhancement: no-JS fallback --- */
2
+ type-specimen:not(:defined) {
3
+ display: block;
4
+ }
5
+
6
+ /* type-specimen scoped styles */
7
+ type-specimen {
8
+ display: block;
9
+ }
10
+
11
+ type-specimen .specimen-header {
12
+ margin-block-end: var(--size-s, 0.75rem);
13
+ }
14
+
15
+ type-specimen .specimen-label {
16
+ display: block;
17
+ font-size: var(--font-size-xs, 0.75rem);
18
+ font-weight: 700;
19
+ text-transform: uppercase;
20
+ letter-spacing: 0.08em;
21
+ color: var(--color-text-muted, #666);
22
+ margin-block-end: var(--size-2xs, 0.25rem);
23
+ font-family: var(--font-sans, system-ui);
24
+ }
25
+
26
+ type-specimen .specimen-sample {
27
+ font-size: var(--font-size-3xl, 1.875rem);
28
+ line-height: 1.2;
29
+ margin: 0;
30
+ padding: var(--size-xs, 0.5rem);
31
+ border: 1px dashed transparent;
32
+ border-radius: var(--radius-s, 0.25rem);
33
+ transition: border-color 0.15s ease;
34
+ cursor: text;
35
+ }
36
+
37
+ type-specimen .specimen-sample:hover {
38
+ border-color: var(--color-border, #ddd);
39
+ }
40
+
41
+ type-specimen .specimen-sample:focus {
42
+ outline: none;
43
+ border-color: var(--color-primary, #333);
44
+ }
45
+
46
+ /* Character grid */
47
+ type-specimen .specimen-chars {
48
+ display: flex;
49
+ flex-direction: column;
50
+ gap: var(--size-2xs, 0.25rem);
51
+ margin-block-end: var(--size-s, 0.75rem);
52
+ padding: var(--size-xs, 0.5rem);
53
+ background: var(--color-surface-raised, #f8f8f8);
54
+ border-radius: var(--radius-s, 0.25rem);
55
+ }
56
+
57
+ type-specimen .char-row {
58
+ display: flex;
59
+ flex-wrap: wrap;
60
+ gap: 2px;
61
+ align-items: center;
62
+ font-size: var(--font-size-sm, 0.875rem);
63
+ }
64
+
65
+ type-specimen .char-label {
66
+ font-family: var(--font-sans, system-ui);
67
+ font-size: var(--font-size-xs, 0.75rem);
68
+ font-weight: 600;
69
+ color: var(--color-text-muted, #666);
70
+ inline-size: 3.5rem;
71
+ flex-shrink: 0;
72
+ }
73
+
74
+ type-specimen .char-row span:not(.char-label) {
75
+ inline-size: 1.25em;
76
+ text-align: center;
77
+ }
78
+
79
+ /* Weight scale */
80
+ type-specimen .specimen-weights {
81
+ display: flex;
82
+ flex-wrap: wrap;
83
+ gap: var(--size-s, 0.75rem);
84
+ margin-block-end: var(--size-s, 0.75rem);
85
+ }
86
+
87
+ type-specimen .weight-sample {
88
+ display: flex;
89
+ flex-direction: column;
90
+ align-items: center;
91
+ gap: 2px;
92
+ }
93
+
94
+ type-specimen .weight-label {
95
+ font-family: var(--font-mono, monospace);
96
+ font-size: var(--font-size-xs, 0.75rem);
97
+ color: var(--color-text-muted, #666);
98
+ }
99
+
100
+ type-specimen .weight-text {
101
+ font-size: var(--font-size-2xl, 1.5rem);
102
+ }
103
+
104
+ /* Type scale */
105
+ type-specimen .specimen-scale {
106
+ display: flex;
107
+ flex-direction: column;
108
+ gap: var(--size-2xs, 0.25rem);
109
+ }
110
+
111
+ type-specimen .scale-step {
112
+ display: flex;
113
+ align-items: baseline;
114
+ gap: var(--size-s, 0.75rem);
115
+ line-height: 1.3;
116
+ }
117
+
118
+ type-specimen .scale-label {
119
+ font-family: var(--font-mono, monospace);
120
+ font-size: var(--font-size-xs, 0.75rem);
121
+ color: var(--color-text-muted, #666);
122
+ inline-size: 2.5rem;
123
+ flex-shrink: 0;
124
+ text-align: end;
125
+ }
126
+
127
+ type-specimen .scale-text {
128
+ overflow: hidden;
129
+ text-overflow: ellipsis;
130
+ white-space: nowrap;
131
+ }