@loidolt/theme-styles 0.7.0 → 0.8.1

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 (27) hide show
  1. package/README.md +3 -0
  2. package/package.json +3 -2
  3. package/src/accessibility.css +6 -6
  4. package/src/base.css +1 -1
  5. package/src/components/actions.css +13 -11
  6. package/src/components/charts.css +4 -3
  7. package/src/components/data.css +19 -13
  8. package/src/components/docs.css +34 -28
  9. package/src/components/feedback.css +19 -15
  10. package/src/components/forms.css +43 -30
  11. package/src/components/layout.css +33 -28
  12. package/src/components/maps.css +25 -21
  13. package/src/components/media.css +18 -12
  14. package/src/components/overlays.css +59 -42
  15. package/src/components/prose.css +21 -17
  16. package/src/components/selection.css +29 -22
  17. package/src/components/surfaces.css +18 -12
  18. package/src/presets/compact-dark-auto.css +2 -0
  19. package/src/presets/compact-dark.css +2 -0
  20. package/src/presets/compact.css +2 -0
  21. package/src/presets/loidolt-dark-auto.css +2 -0
  22. package/src/presets/loidolt-dark.css +2 -0
  23. package/src/presets/loidolt.css +2 -0
  24. package/src/presets/soft-dark-auto.css +2 -0
  25. package/src/presets/soft-dark.css +2 -0
  26. package/src/presets/soft.css +2 -0
  27. package/src/utilities.css +10 -4
package/src/presets/compact-dark-auto.css ADDED
@@ -0,0 +1,2 @@
1
+ /* The compact preset (dark-auto colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
2
+ @import '@loidolt/theme-tokens/css/presets/compact-dark-auto';
package/src/presets/compact-dark.css ADDED
@@ -0,0 +1,2 @@
1
+ /* The compact preset (dark colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
2
+ @import '@loidolt/theme-tokens/css/presets/compact-dark';
package/src/presets/compact.css ADDED
@@ -0,0 +1,2 @@
1
+ /* The compact preset. See '@loidolt/theme-tokens' definePreset() to build your own. */
2
+ @import '@loidolt/theme-tokens/css/presets/compact';
package/src/presets/loidolt-dark-auto.css ADDED
@@ -0,0 +1,2 @@
1
+ /* The loidolt preset (dark-auto colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
2
+ @import '@loidolt/theme-tokens/css/presets/loidolt-dark-auto';
package/src/presets/loidolt-dark.css ADDED
@@ -0,0 +1,2 @@
1
+ /* The loidolt preset (dark colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
2
+ @import '@loidolt/theme-tokens/css/presets/loidolt-dark';
package/src/presets/loidolt.css ADDED
@@ -0,0 +1,2 @@
1
+ /* The loidolt preset. See '@loidolt/theme-tokens' definePreset() to build your own. */
2
+ @import '@loidolt/theme-tokens/css/presets/loidolt';
package/src/presets/soft-dark-auto.css ADDED
@@ -0,0 +1,2 @@
1
+ /* The soft preset (dark-auto colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
2
+ @import '@loidolt/theme-tokens/css/presets/soft-dark-auto';
package/src/presets/soft-dark.css ADDED
@@ -0,0 +1,2 @@
1
+ /* The soft preset (dark colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
2
+ @import '@loidolt/theme-tokens/css/presets/soft-dark';
package/src/presets/soft.css ADDED
@@ -0,0 +1,2 @@
1
+ /* The soft preset. See '@loidolt/theme-tokens' definePreset() to build your own. */
2
+ @import '@loidolt/theme-tokens/css/presets/soft';
package/src/utilities.css CHANGED
@@ -32,10 +32,14 @@
32
32
  * scope has to re-declare it. Put this on the wrapper you redefine tokens on:
33
33
  *
34
34
  * <div class="ldt-theme" style="--loidolt-surface: #10212c; --loidolt-text: #dceaf2">
35
+ *
36
+ * The same goes for `font-family`, which `<html>` sets once: a subtree preset that changes the
37
+ * display face needs it re-declared here to reach running text.
35
38
  */
36
39
  .ldt-theme {
37
40
  color: var(--loidolt-text);
38
41
  background: var(--loidolt-background);
42
+ font-family: var(--loidolt-font-display);
39
43
  }
40
44
  /* Muted body voice for meta lines (author · timestamp). Unlike .ldt-utility-text it keeps
41
45
  sentence case and the body face, so names and dates stay readable. */
@@ -63,15 +67,17 @@
63
67
  .ldt-utility-text {
64
68
  color: var(--loidolt-text-muted);
65
69
  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
66
- letter-spacing: var(--loidolt-font-tracking-utility);
67
- text-transform: uppercase;
70
+ font-weight: var(--loidolt-label-weight);
71
+ letter-spacing: var(--loidolt-label-tracking);
72
+ text-transform: var(--loidolt-label-transform);
68
73
  }
69
74
  .ldt-eyebrow {
70
75
  margin: 0 0 0.4rem;
71
76
  color: var(--loidolt-text-accent);
72
77
  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
73
- letter-spacing: var(--loidolt-font-tracking-wide);
74
- text-transform: uppercase;
78
+ font-weight: var(--loidolt-label-weight);
79
+ letter-spacing: var(--loidolt-label-tracking-wide);
80
+ text-transform: var(--loidolt-label-transform);
75
81
  }
76
82
 
77
83
  /* Print-only content — a URL written out after a link, a signature line. The counterpart to