@hiscovega/grisso 1.0.6 → 1.0.7

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 (17) hide show
  1. package/README.md +37 -9
  2. package/dist/grisso.css +1 -1
  3. package/lib/defaults.js +7 -0
  4. package/lib/generators.d.ts +7 -7
  5. package/lib/generators.js +46 -6
  6. package/lib/partials/backgrounds.js +8 -8
  7. package/lib/partials/borders.js +19 -19
  8. package/lib/partials/effects.js +4 -4
  9. package/lib/partials/flex-and-grid.js +46 -46
  10. package/lib/partials/icons.js +2 -2
  11. package/lib/partials/layout.js +23 -23
  12. package/lib/partials/sizing.js +9 -9
  13. package/lib/partials/spacing.js +15 -15
  14. package/lib/partials/typography.js +17 -17
  15. package/lib/tokens.js +1 -0
  16. package/lib/types.d.ts +3 -0
  17. package/package.json +1 -1
package/lib/partials/sizing.js CHANGED
@@ -29,7 +29,7 @@ const fractions = [
29
29
  [11, 12],
30
30
  ];
31
31
  export default function sizing(config) {
32
- const { breakpoints } = config;
32
+ const { breakpoints, states } = config;
33
33
  let css = "";
34
34
  // width
35
35
  const width = {
@@ -41,12 +41,12 @@ export default function sizing(config) {
41
41
  max: "max-content",
42
42
  fit: "fit-content",
43
43
  };
44
- css += complexClass("w-", "width", width, breakpoints);
44
+ css += complexClass("w-", "width", width, breakpoints, states);
45
45
  for (const [n, d] of fractions) {
46
- css += simpleClass(`w-${n}/${d}`, "width", fractionPercent(n, d), breakpoints);
46
+ css += simpleClass(`w-${n}/${d}`, "width", fractionPercent(n, d), breakpoints, states);
47
47
  }
48
- css += complexClass("min-w-", "min-width", width, breakpoints);
49
- css += complexClass("max-w-", "max-width", width, breakpoints);
48
+ css += complexClass("min-w-", "min-width", width, breakpoints, states);
49
+ css += complexClass("max-w-", "max-width", width, breakpoints, states);
50
50
  // height
51
51
  const height = {
52
52
  auto: "auto",
@@ -57,11 +57,11 @@ export default function sizing(config) {
57
57
  max: "max-content",
58
58
  fit: "fit-content",
59
59
  };
60
- css += complexClass("h-", "height", height, breakpoints);
60
+ css += complexClass("h-", "height", height, breakpoints, states);
61
61
  for (const [n, d] of fractions) {
62
- css += simpleClass(`h-${n}/${d}`, "height", fractionPercent(n, d), breakpoints);
62
+ css += simpleClass(`h-${n}/${d}`, "height", fractionPercent(n, d), breakpoints, states);
63
63
  }
64
- css += complexClass("min-h-", "min-height", height, breakpoints);
65
- css += complexClass("max-h-", "max-height", height, breakpoints);
64
+ css += complexClass("min-h-", "min-height", height, breakpoints, states);
65
+ css += complexClass("max-h-", "max-height", height, breakpoints, states);
66
66
  return css;
67
67
  }
package/lib/partials/spacing.js CHANGED
@@ -1,24 +1,24 @@
1
1
  import { complexClass } from "../generators.js";
2
2
  import { omit } from "../utils.js";
3
3
  export default function spacingPartial(config) {
4
- const { breakpoints, spacing } = config;
4
+ const { breakpoints, states, spacing } = config;
5
5
  let css = "";
6
6
  // margin (incluye "auto")
7
- css += complexClass("m-", "margin", spacing, breakpoints);
8
- css += complexClass("mt-", "margin-top", spacing, breakpoints);
9
- css += complexClass("mr-", "margin-right", spacing, breakpoints);
10
- css += complexClass("mb-", "margin-bottom", spacing, breakpoints);
11
- css += complexClass("ml-", "margin-left", spacing, breakpoints);
12
- css += complexClass("mx-", "margin-inline", spacing, breakpoints);
13
- css += complexClass("my-", "margin-block", spacing, breakpoints);
7
+ css += complexClass("m-", "margin", spacing, breakpoints, states);
8
+ css += complexClass("mt-", "margin-top", spacing, breakpoints, states);
9
+ css += complexClass("mr-", "margin-right", spacing, breakpoints, states);
10
+ css += complexClass("mb-", "margin-bottom", spacing, breakpoints, states);
11
+ css += complexClass("ml-", "margin-left", spacing, breakpoints, states);
12
+ css += complexClass("mx-", "margin-inline", spacing, breakpoints, states);
13
+ css += complexClass("my-", "margin-block", spacing, breakpoints, states);
14
14
  // padding (sin "auto")
15
15
  const padding = omit(spacing, "auto");
16
- css += complexClass("p-", "padding", padding, breakpoints);
17
- css += complexClass("pt-", "padding-top", padding, breakpoints);
18
- css += complexClass("pr-", "padding-right", padding, breakpoints);
19
- css += complexClass("pb-", "padding-bottom", padding, breakpoints);
20
- css += complexClass("pl-", "padding-left", padding, breakpoints);
21
- css += complexClass("px-", "padding-inline", padding, breakpoints);
22
- css += complexClass("py-", "padding-block", padding, breakpoints);
16
+ css += complexClass("p-", "padding", padding, breakpoints, states);
17
+ css += complexClass("pt-", "padding-top", padding, breakpoints, states);
18
+ css += complexClass("pr-", "padding-right", padding, breakpoints, states);
19
+ css += complexClass("pb-", "padding-bottom", padding, breakpoints, states);
20
+ css += complexClass("pl-", "padding-left", padding, breakpoints, states);
21
+ css += complexClass("px-", "padding-inline", padding, breakpoints, states);
22
+ css += complexClass("py-", "padding-block", padding, breakpoints, states);
23
23
  return css;
24
24
  }
package/lib/partials/typography.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { complexClass, customClass, simpleClass } from "../generators.js";
2
2
  import { omit } from "../utils.js";
3
3
  export default function typography(config) {
4
- const { breakpoints, foregroundColors, spacing } = config;
4
+ const { breakpoints, states, foregroundColors, spacing } = config;
5
5
  let css = "";
6
6
  // text-color
7
- css += complexClass("text-", "color", foregroundColors, breakpoints);
7
+ css += complexClass("text-", "color", foregroundColors, breakpoints, states);
8
8
  // text-align
9
9
  const textAlign = {
10
10
  left: "left",
@@ -14,7 +14,7 @@ export default function typography(config) {
14
14
  start: "start",
15
15
  end: "end",
16
16
  };
17
- css += complexClass("text-", "text-align", textAlign, breakpoints);
17
+ css += complexClass("text-", "text-align", textAlign, breakpoints, states);
18
18
  // text-transform
19
19
  const textTransform = {
20
20
  uppercase: "uppercase",
@@ -22,18 +22,18 @@ export default function typography(config) {
22
22
  capitalize: "capitalize",
23
23
  "normal-case": "none",
24
24
  };
25
- css += complexClass("", "text-transform", textTransform, breakpoints);
25
+ css += complexClass("", "text-transform", textTransform, breakpoints, states);
26
26
  // text-overflow
27
27
  const textOverflow = {
28
28
  ellipsis: "ellipsis",
29
29
  clip: "clip",
30
30
  };
31
- css += complexClass("text-", "text-overflow", textOverflow, breakpoints);
31
+ css += complexClass("text-", "text-overflow", textOverflow, breakpoints, states);
32
32
  css += customClass("truncate", {
33
33
  overflow: "hidden",
34
34
  "text-overflow": "ellipsis",
35
35
  "white-space": "nowrap",
36
- }, breakpoints);
36
+ }, breakpoints, undefined, states);
37
37
  // vertical-align
38
38
  const verticalAlign = {
39
39
  baseline: "baseline",
@@ -45,7 +45,7 @@ export default function typography(config) {
45
45
  sub: "sub",
46
46
  super: "super",
47
47
  };
48
- css += complexClass("align-", "vertical-align", verticalAlign, breakpoints);
48
+ css += complexClass("align-", "vertical-align", verticalAlign, breakpoints, states);
49
49
  // white-space
50
50
  const whiteSpace = {
51
51
  normal: "normal",
@@ -55,30 +55,30 @@ export default function typography(config) {
55
55
  "pre-wrap": "pre-wrap",
56
56
  "break-spaces": "break-spaces",
57
57
  };
58
- css += complexClass("whitespace-", "white-space", whiteSpace, breakpoints);
58
+ css += complexClass("whitespace-", "white-space", whiteSpace, breakpoints, states);
59
59
  // word-break
60
60
  const wordBreak = {
61
61
  all: "break-all",
62
62
  keep: "keep-all",
63
63
  };
64
- css += complexClass("break-", "word-break", wordBreak, breakpoints);
65
- css += simpleClass("break-words", "overflow-wrap", "break-word", breakpoints);
66
- css += customClass("break-normal", { "overflow-wrap": "normal", "word-break": "normal" }, breakpoints);
64
+ css += complexClass("break-", "word-break", wordBreak, breakpoints, states);
65
+ css += simpleClass("break-words", "overflow-wrap", "break-word", breakpoints, states);
66
+ css += customClass("break-normal", { "overflow-wrap": "normal", "word-break": "normal" }, breakpoints, undefined, states);
67
67
  // font-smoothing
68
68
  css += customClass("antialiased", {
69
69
  "-webkit-font-smoothing": "antialiased",
70
70
  "-moz-osx-font-smoothing": "grayscale",
71
- }, breakpoints);
71
+ }, breakpoints, undefined, states);
72
72
  css += customClass("subpixel-antialiased", {
73
73
  "-webkit-font-smoothing": "auto",
74
74
  "-moz-osx-font-smoothing": "auto",
75
- }, breakpoints);
75
+ }, breakpoints, undefined, states);
76
76
  // font-style
77
77
  const fontStyle = {
78
78
  italic: "italic",
79
79
  "not-italic": "normal",
80
80
  };
81
- css += complexClass("", "font-style", fontStyle, breakpoints);
81
+ css += complexClass("", "font-style", fontStyle, breakpoints, states);
82
82
  // font-weight
83
83
  const fontWeight = {
84
84
  thin: "100",
@@ -91,7 +91,7 @@ export default function typography(config) {
91
91
  extrabold: "800",
92
92
  black: "900",
93
93
  };
94
- css += complexClass("font-", "font-weight", fontWeight, breakpoints);
94
+ css += complexClass("font-", "font-weight", fontWeight, breakpoints, states);
95
95
  // letter-spacing
96
96
  const letterSpacing = {
97
97
  tighter: "-0.05em",
@@ -101,7 +101,7 @@ export default function typography(config) {
101
101
  wider: "0.05em",
102
102
  widest: "0.1em",
103
103
  };
104
- css += complexClass("tracking-", "letter-spacing", letterSpacing, breakpoints);
104
+ css += complexClass("tracking-", "letter-spacing", letterSpacing, breakpoints, states);
105
105
  // line-height
106
106
  const lineHeight = omit(spacing, "auto", "zero");
107
107
  const extendedLineHeight = {
@@ -113,6 +113,6 @@ export default function typography(config) {
113
113
  relaxed: "1.625",
114
114
  loose: "2",
115
115
  };
116
- css += complexClass("leading-", "line-height", extendedLineHeight, breakpoints);
116
+ css += complexClass("leading-", "line-height", extendedLineHeight, breakpoints, states);
117
117
  return css;
118
118
  }
package/lib/tokens.js CHANGED
@@ -31,6 +31,7 @@ const SECTION_LABELS = {
31
31
  const NON_TOKEN_KEYS = new Set([
32
32
  "columns",
33
33
  "breakpoints",
34
+ "states",
34
35
  "safelist",
35
36
  "extend",
36
37
  ]);
package/lib/types.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  /** Mapa de breakpoints: nombre → media query */
2
2
  export type Breakpoints = Record<string, string>;
3
+ /** Mapa de states: nombre → pseudo-clase CSS (e.g. hover → ":hover") */
4
+ export type States = Record<string, string>;
3
5
  /** Mapa de tokens: nombre → valor CSS */
4
6
  export type TokenMap = Record<string, string>;
5
7
  /** Mapa de declaraciones CSS: propiedad → valor */
@@ -8,6 +10,7 @@ export type Declarations = Record<string, string>;
8
10
  export interface GrissoConfig {
9
11
  columns: number;
10
12
  breakpoints: Breakpoints;
13
+ states: States;
11
14
  spacing: TokenMap;
12
15
  brandColors: TokenMap;
13
16
  foregroundColors: TokenMap;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hiscovega/grisso",
3
3
  "description": "Griddo CSS utility class library",
4
- "version": "1.0.6",
4
+ "version": "1.0.7",
5
5
  "license": "UNLICENSED",
6
6
  "private": false,
7
7
  "type": "module",