unholy-design-tokens 1.0.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 (111) hide show
  1. package/.github/workflows/lint-format-build.yml +35 -0
  2. package/.github/workflows/publish_release.yml +18 -0
  3. package/.prettierrc +9 -0
  4. package/ANALOGY_HOUSE.md +139 -0
  5. package/ANALOGY_I18NEXT.md +160 -0
  6. package/LICENSE +201 -0
  7. package/README.md +90 -0
  8. package/WHY_THIS_EXISTS.md +74 -0
  9. package/bin/build-tokens.ts +34 -0
  10. package/build/css/bg/bg.css +60 -0
  11. package/build/css/border/border.css +51 -0
  12. package/build/css/colors.css +204 -0
  13. package/build/css/conditional.css +8 -0
  14. package/build/css/cube/cube.block.css +18 -0
  15. package/build/css/cube/cube.composition.css +16 -0
  16. package/build/css/cube/cube.utility.css +185 -0
  17. package/build/css/font/font.css +24 -0
  18. package/build/css/space.css +20 -0
  19. package/build/css/text/text.css +48 -0
  20. package/build/css/themes/private-theme.css +228 -0
  21. package/build/css/themes/public-theme.css +228 -0
  22. package/build/css/variant/variant.css +42 -0
  23. package/build/css/variants.css +167 -0
  24. package/build/types/theme.d.ts +932 -0
  25. package/build/types/tokens.ts +653 -0
  26. package/dist/bin/build-tokens.js +27 -0
  27. package/dist/scripts/build-style-dictionary.js +32 -0
  28. package/dist/scripts/generate-typography-tokens.js +125 -0
  29. package/dist/src/colors/color.config.js +45 -0
  30. package/dist/src/colors/color.filter.js +19 -0
  31. package/dist/src/colors/color.formatter.js +25 -0
  32. package/dist/src/colors/index.js +2 -0
  33. package/dist/src/cube-css/cube.config.js +42 -0
  34. package/dist/src/cube-css/cube.formatter.js +89 -0
  35. package/dist/src/style-dictionary.config.js +143 -0
  36. package/dist/src/type-declarations/type-declarations.config.js +29 -0
  37. package/dist/src/type-declarations/type-declarations.formatter.js +111 -0
  38. package/dist/src/utils/helpers.js +9 -0
  39. package/dist/src/utils/index.js +4 -0
  40. package/dist/src/utils/template.js +83 -0
  41. package/dist/src/utils/tokens.js +80 -0
  42. package/dist/src/utils/utopia.js +19 -0
  43. package/eslint.config.js +67 -0
  44. package/package.json +60 -0
  45. package/scripts/build-style-dictionary.ts +44 -0
  46. package/scripts/generate-typography-tokens.ts +138 -0
  47. package/src/LICENSE +201 -0
  48. package/src/README.md +88 -0
  49. package/src/colors/color.config.ts +48 -0
  50. package/src/colors/color.filter.ts +28 -0
  51. package/src/colors/color.formatter.ts +43 -0
  52. package/src/colors/index.ts +6 -0
  53. package/src/cube-css/cube.config.ts +50 -0
  54. package/src/cube-css/cube.formatter.ts +104 -0
  55. package/src/formatters/spacing.js +95 -0
  56. package/src/style-dictionary.config.ts +151 -0
  57. package/src/theme/README.md +256 -0
  58. package/src/theme/cube-theme-addon.js +44 -0
  59. package/src/theme/helper.js +38 -0
  60. package/src/theme/index.js +6 -0
  61. package/src/theme/theme.config.js +42 -0
  62. package/src/theme/theme.filter.js +42 -0
  63. package/src/theme/theme.formatter.js +71 -0
  64. package/src/tokens/1 - primitives/README.md +58 -0
  65. package/src/tokens/1 - primitives/border.json +54 -0
  66. package/src/tokens/1 - primitives/breakpoint.json +10 -0
  67. package/src/tokens/1 - primitives/color-pool.json +266 -0
  68. package/src/tokens/1 - primitives/color.json +266 -0
  69. package/src/tokens/1 - primitives/font-scale.json +27 -0
  70. package/src/tokens/1 - primitives/font.json +23 -0
  71. package/src/tokens/1 - primitives/shadow.json +26 -0
  72. package/src/tokens/1 - primitives/space.json +27 -0
  73. package/src/tokens/2 - semantic/README.md +49 -0
  74. package/src/tokens/2 - semantic/border.json +27 -0
  75. package/src/tokens/2 - semantic/color.json +263 -0
  76. package/src/tokens/2 - semantic/details.md +1 -0
  77. package/src/tokens/2 - semantic/layout.json +52 -0
  78. package/src/tokens/2 - semantic/radius.json +13 -0
  79. package/src/tokens/2 - semantic/shadow.json +19 -0
  80. package/src/tokens/2 - semantic/spacing.json +25 -0
  81. package/src/tokens/3 - intent/README.md +43 -0
  82. package/src/tokens/3 - intent/background.json +135 -0
  83. package/src/tokens/3 - intent/color.json +265 -0
  84. package/src/tokens/3 - intent/font.json +61 -0
  85. package/src/tokens/3 - intent/text +67 -0
  86. package/src/tokens/README.md +176 -0
  87. package/src/tokens/color/brand.json +316 -0
  88. package/src/tokens/component/theming.json +69 -0
  89. package/src/tokens/conditional.json +40 -0
  90. package/src/tokens/custom/4 - (OPTIONAL) cube css/README.md +38 -0
  91. package/src/tokens/custom/4 - (OPTIONAL) cube css/block.json +24 -0
  92. package/src/tokens/custom/4 - (OPTIONAL) cube css/composition.json +26 -0
  93. package/src/tokens/custom/4 - (OPTIONAL) cube css/global.json +15 -0
  94. package/src/tokens/custom/4 - (OPTIONAL) cube css/utility.json +224 -0
  95. package/src/tokens/custom/OKlch/color.json +61 -0
  96. package/src/tokens/custom/OKlch/state.json +107 -0
  97. package/src/tokens/custom/OKlch/theme-color.json +34 -0
  98. package/src/tokens/custom/OKlch/variant.json +67 -0
  99. package/src/tokens/custom/components/highlighted.json +16 -0
  100. package/src/tokens/state.js +29 -0
  101. package/src/tokens/theme-color.json +34 -0
  102. package/src/type-declarations/type-declarations.config.ts +34 -0
  103. package/src/type-declarations/type-declarations.formatter.ts +122 -0
  104. package/src/utils/helpers.ts +11 -0
  105. package/src/utils/index.ts +4 -0
  106. package/src/utils/template.ts +110 -0
  107. package/src/utils/tokens.ts +95 -0
  108. package/src/utils/utopia.ts +36 -0
  109. package/tailwind.md +720 -0
  110. package/tsconfig.json +19 -0
  111. package/turbowatch.ts +14 -0
package/build/css/variants.css ADDED
@@ -0,0 +1,167 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ * Variant tokens
4
+ */
5
+
6
+ :root {
7
+ --color-primary-bg-hue: 0deg;
8
+ --color-primary-bg-lightness: 0%;
9
+ --color-primary-bg-opacity: 1;
10
+ --color-primary-border-hue: 0deg;
11
+ --color-primary-border-lightness: 0%;
12
+ --color-primary-border-opacity: 1;
13
+ --color-primary-text-hue: 0deg;
14
+ --color-primary-text-lightness: 0%;
15
+ --color-primary-text-opacity: 1;
16
+ --color-secondary-bg-hue: 0deg;
17
+ --color-secondary-bg-lightness: 0%;
18
+ --color-secondary-bg-opacity: 1;
19
+ --color-secondary-border-hue: 0deg;
20
+ --color-secondary-border-lightness: 0%;
21
+ --color-secondary-border-opacity: 1;
22
+ --color-secondary-text-hue: 0deg;
23
+ --color-secondary-text-lightness: 0%;
24
+ --color-secondary-text-opacity: 1;
25
+ --color-bg-secondary-lightness: var(--color-secondary-lightness, 0);
26
+ --color-bg-secondary-chroma: var(--color-secondary-chroma, 0);
27
+ --color-bg-secondary-hue: var(--color-secondary-hue, 0);
28
+ --color-bg-secondary-opacity: var(--color-secondary-opacity, 0);
29
+ --color-bg-secondary: oklch(var(--color-bg-secondary-lightness) var(--color-bg-secondary-chroma) var(--color-bg-secondary-hue) / var(--color-bg-secondary-opacity));
30
+ --color-bg-danger-lightness: var(--color-danger-lightness, 0);
31
+ --color-bg-danger-chroma: var(--color-danger-chroma, 0);
32
+ --color-bg-danger-hue: var(--color-danger-hue, 0);
33
+ --color-bg-danger-opacity: var(--color-danger-opacity, 1);
34
+ --color-bg-danger: oklch(var(--color-bg-danger-lightness) var(--color-bg-danger-chroma) var(--color-bg-danger-hue) / var(--color-bg-danger-opacity));
35
+ --color-bg-hue: var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0);
36
+ --color-bg-h: var(--theme-color-bg-hue);
37
+ --color-bg-lightness: var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0);
38
+ --color-bg-l: var(--theme-color-bg-lightness);
39
+ --color-bg-opacity: var(--color-primary-opacity);
40
+ --color-bg-o: var(--theme-color-bg-opacity);
41
+ --color-text-danger-lightness: var(--color-danger-lightness, 0);
42
+ --color-text-danger-chroma: var(--color-danger-chroma, 0);
43
+ --color-text-danger-hue: var(--color-danger-hue, 0);
44
+ --color-text-danger-opacity: var(--color-danger-opacity, 1);
45
+ --color-text-danger: oklch(var(--color-text-danger-lightness) var(--color-text-danger-chroma) var(--color-text-danger-hue) / var(--color-text-danger-opacity));
46
+ --color-text-hue: var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0);
47
+ --color-text-lightness: var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0);
48
+ --color-text-opacity: var(--color-primary-opacity);
49
+ --color-border-secondary-lightness: var(--color-secondary-lightness, 0);
50
+ --color-border-secondary-chroma: var(--color-secondary-chroma, 0);
51
+ --color-border-secondary-hue: var(--color-secondary-hue, 0);
52
+ --color-border-secondary-opacity: var(--color-secondary-opacity, 1);
53
+ --color-border-secondary: oklch(var(--color-border-secondary-lightness) var(--color-border-secondary-chroma) var(--color-border-secondary-hue) / var(--color-border-secondary-opacity));
54
+ --color-border-danger-lightness: var(--color-danger-lightness, 0);
55
+ --color-border-danger-chroma: var(--color-danger-chroma, 0);
56
+ --color-border-danger-hue: var(--color-danger-hue, 0);
57
+ --color-border-danger-opacity: var(--color-danger-opacity, 1);
58
+ --color-border-danger: oklch(var(--color-border-danger-lightness) var(--color-border-danger-chroma) var(--color-border-danger-hue) / var(--color-border-danger-opacity));
59
+ --color-border-hue: var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0);
60
+ --color-border-lightness: var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0);
61
+ --color-border-opacity: var(--color-primary-opacity);
62
+ --color-danger-bg-hue: 0deg;
63
+ --color-danger-bg-lightness: 0%;
64
+ --color-danger-bg-opacity: 1;
65
+ --color-danger-border-hue: 0deg;
66
+ --color-danger-border-lightness: 0%;
67
+ --color-danger-border-opacity: 1;
68
+ --color-danger-text-hue: 0deg;
69
+ --color-danger-text-lightness: 0%;
70
+ --color-danger-text-opacity: 1;
71
+ --state-base-bg-lightness: 0;
72
+ --state-base-bg-chroma: 0;
73
+ --state-base-bg-hue: 0;
74
+ --state-base-bg-opacity: 1;
75
+ --state-base-border-lightness: 0;
76
+ --state-base-border-chroma: 0;
77
+ --state-base-border-hue: 0;
78
+ --state-base-border-opacity: 1;
79
+ --state-base-text-lightness: 0;
80
+ --state-base-text-chroma: 0;
81
+ --state-base-text-hue: 0;
82
+ --state-base-text-opacity: 1;
83
+ --state-hover-bg-lightness: 0.05;
84
+ --state-hover-bg-chroma: 0;
85
+ --state-hover-bg-hue: 0;
86
+ --state-hover-bg-opacity: 1;
87
+ --state-hover-border-lightness: 0;
88
+ --state-hover-border-chroma: 0;
89
+ --state-hover-border-hue: 0;
90
+ --state-hover-border-opacity: 1;
91
+ --state-hover-text-lightness: 0;
92
+ --state-hover-text-chroma: 0;
93
+ --state-hover-text-hue: 0;
94
+ --state-hover-text-opacity: 1;
95
+ --state-active-bg-lightness: 0.1;
96
+ --state-active-bg-chroma: 0;
97
+ --state-active-bg-hue: 0;
98
+ --state-active-bg-opacity: 1;
99
+ --state-active-border-lightness: 0;
100
+ --state-active-border-chroma: 0;
101
+ --state-active-border-hue: 0;
102
+ --state-active-border-opacity: 1;
103
+ --state-active-text-lightness: 0;
104
+ --state-active-text-chroma: 0;
105
+ --state-active-text-hue: 0;
106
+ --state-active-text-opacity: 1;
107
+ --state-focus-bg-lightness: 0.05;
108
+ --state-focus-bg-chroma: 0;
109
+ --state-focus-bg-hue: 0;
110
+ --state-focus-bg-opacity: 1;
111
+ --state-focus-border-lightness: 0;
112
+ --state-focus-border-chroma: 0;
113
+ --state-focus-border-hue: 0;
114
+ --state-focus-border-opacity: 1;
115
+ --state-focus-text-lightness: 0;
116
+ --state-focus-text-chroma: 0;
117
+ --state-focus-text-hue: 0;
118
+ --state-focus-text-opacity: 1;
119
+ --state-disabled-bg-lightness: 0;
120
+ --state-disabled-bg-chroma: 0;
121
+ --state-disabled-bg-hue: 0;
122
+ --state-disabled-bg-opacity: 1;
123
+ --state-disabled-border-lightness: 0;
124
+ --state-disabled-border-chroma: 0;
125
+ --state-disabled-border-hue: 0;
126
+ --state-disabled-border-opacity: 1;
127
+ --state-disabled-text-lightness: 0;
128
+ --state-disabled-text-chroma: 0;
129
+ --state-disabled-text-hue: 0;
130
+ --state-disabled-text-opacity: 1;
131
+ --variant-contained-bg-lightness: 0;
132
+ --variant-contained-bg-chroma: 0;
133
+ --variant-contained-bg-hue: 0;
134
+ --variant-contained-bg-opacity: 1;
135
+ --variant-contained-border-lightness: 0;
136
+ --variant-contained-border-chroma: 0;
137
+ --variant-contained-border-hue: 0;
138
+ --variant-contained-border-opacity: 1;
139
+ --variant-contained-text-lightness: 0;
140
+ --variant-contained-text-chroma: 0;
141
+ --variant-contained-text-hue: 0;
142
+ --variant-contained-text-opacity: 1;
143
+ --variant-outlined-bg-lightness: 0;
144
+ --variant-outlined-bg-chroma: 0;
145
+ --variant-outlined-bg-hue: 0;
146
+ --variant-outlined-bg-opacity: 0;
147
+ --variant-outlined-border-lightness: 0;
148
+ --variant-outlined-border-chroma: 0;
149
+ --variant-outlined-border-hue: 0;
150
+ --variant-outlined-border-opacity: 1;
151
+ --variant-outlined-text-lightness: 0;
152
+ --variant-outlined-text-chroma: 0;
153
+ --variant-outlined-text-hue: 0;
154
+ --variant-outlined-text-opacity: 1;
155
+ --variant-text-bg-lightness: 0;
156
+ --variant-text-bg-chroma: 0;
157
+ --variant-text-bg-hue: 0;
158
+ --variant-text-bg-opacity: 0;
159
+ --variant-text-border-lightness: 0;
160
+ --variant-text-border-chroma: 0;
161
+ --variant-text-border-hue: 0;
162
+ --variant-text-border-opacity: 0;
163
+ --variant-text-text-lightness: 0;
164
+ --variant-text-text-chroma: 0;
165
+ --variant-text-text-hue: 0;
166
+ --variant-text-text-opacity: 1;
167
+ }