@ttoss/theme 1.6.1 → 1.6.3

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 (9) hide show
  1. package/dist/esm/{chunk-U3KPB4BR.js → chunk-KSMKYJYG.js} +44 -29
  2. package/dist/esm/index.js +1 -1
  3. package/dist/esm/themes/Bruttal/Bruttal.js +1 -1
  4. package/dist/index.js +44 -29
  5. package/dist/themes/Bruttal/Bruttal.js +44 -29
  6. package/package.json +1 -1
  7. package/src/themes/Bruttal/BruttalIcons.ts +2 -0
  8. package/src/themes/Bruttal/BruttalTheme.ts +17 -8
  9. package/src/tokens/lineHeights.ts +19 -7
package/dist/esm/{chunk-U3KPB4BR.js → chunk-KSMKYJYG.js} RENAMED
@@ -103,6 +103,7 @@ import editIcon from "@iconify/icons-carbon/edit";
103
103
  import emailIcon from "@iconify/icons-carbon/email";
104
104
  import errorFilledIcon from "@iconify/icons-carbon/error-filled";
105
105
  import informationFilledIcon from "@iconify/icons-carbon/information-filled";
106
+ import languageIcon from "@iconify/icons-carbon/language";
106
107
  import menuIcon from "@iconify/icons-carbon/menu";
107
108
  import pasteIcon from "@iconify/icons-carbon/paste";
108
109
  import radioButtonCheckedIcon from "@iconify/icons-carbon/radio-button-checked";
@@ -153,6 +154,7 @@ addIcon("email", emailIcon);
153
154
  addIcon("delete", trashCanIcon);
154
155
  addIcon("error", errorFilledIcon);
155
156
  addIcon("info", informationFilledIcon);
157
+ addIcon("language", languageIcon);
156
158
  addIcon("loading", import_loading.default);
157
159
  addIcon("menu-open", menuIcon);
158
160
  addIcon("open-link", arrowUpRightIcon);
@@ -232,34 +234,38 @@ var letterSpacings = {
232
234
  };
233
235
 
234
236
  // src/tokens/lineHeights.ts
237
+ var BASE2 = 100;
238
+ var MULTIPLIER_FACTOR2 = 1.333;
239
+ var SIZE_TYPE3 = "%";
235
240
  var lineHeights = {
236
- "2xs": "0.422",
237
- xs: "0.562",
238
- sm: "calc(1 / 1.333)",
239
- base: "1",
240
- lg: "calc(1 * 1.333)",
241
- xl: "1.776",
242
- "2xl": "2.368"
241
+ "2xs": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -3, SIZE_TYPE3),
242
+ xs: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -2, SIZE_TYPE3),
243
+ sm: calcDividingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
244
+ base: "normal",
245
+ lg: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
246
+ xl: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 2, SIZE_TYPE3),
247
+ "2xl": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 3, SIZE_TYPE3),
248
+ flat: "100%"
243
249
  };
244
250
 
245
251
  // src/tokens/space.ts
246
- var SIZE_TYPE3 = "rem";
252
+ var SIZE_TYPE4 = "rem";
247
253
  var MD = 0.5;
248
- var MULTIPLIER_FACTOR2 = 1.618;
254
+ var MULTIPLIER_FACTOR3 = 1.618;
249
255
  var space = {
250
256
  none: 0,
251
- "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR2, 3),
252
- xs: calcDividingValues(MD, MULTIPLIER_FACTOR2, 2),
253
- sm: calcDividingValues(MD, MULTIPLIER_FACTOR2, 1),
254
- md: `${MD}${SIZE_TYPE3}`,
255
- lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 1),
256
- xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 2),
257
- "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 3),
258
- "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 4),
259
- "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 5),
260
- "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 6),
261
- "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 7),
262
- "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 8)
257
+ "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR3, 3),
258
+ xs: calcDividingValues(MD, MULTIPLIER_FACTOR3, 2),
259
+ sm: calcDividingValues(MD, MULTIPLIER_FACTOR3, 1),
260
+ md: `${MD}${SIZE_TYPE4}`,
261
+ lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 1),
262
+ xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 2),
263
+ "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 3),
264
+ "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 4),
265
+ "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 5),
266
+ "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 6),
267
+ "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 7),
268
+ "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 8)
263
269
  };
264
270
 
265
271
  // src/tokens/zIndices.ts
@@ -447,12 +453,7 @@ var BruttalTheme = {
447
453
  underemphasize: coreColors.gray300
448
454
  },
449
455
  fonts: {
450
- // h1: coreFonts.contrast,
451
- // h2: coreFonts.contrast,
452
- // h3: coreFonts.contrast,
453
- // h4: coreFonts.contrast,
454
- // h5: coreFonts.contrast,
455
- // h6: coreFonts.contrast,
456
+ main: coreColors.main,
456
457
  contrast: coreFonts.contrast,
457
458
  body: coreFonts.main,
458
459
  highlight: coreFonts.main,
@@ -804,7 +805,7 @@ var BruttalTheme = {
804
805
  backgroundColor: "muted",
805
806
  color: "onMuted"
806
807
  },
807
- ":disabled ~ span:has(iconify-icon)": {
808
+ ":disabled ~ * > span:has(iconify-icon)": {
808
809
  color: "onMuted"
809
810
  },
810
811
  '&[aria-invalid="true"]': {
@@ -812,7 +813,7 @@ var BruttalTheme = {
812
813
  borderColor: "danger",
813
814
  outlineColor: "danger"
814
815
  },
815
- '&[aria-invalid="true"] ~ span.error-icon': {
816
+ '&[aria-invalid="true"] ~ * > span.error-icon': {
816
817
  color: "danger"
817
818
  }
818
819
  },
@@ -866,6 +867,20 @@ var BruttalTheme = {
866
867
  }
867
868
  }
868
869
  },
870
+ headline: {
871
+ fontFamily: "contrast",
872
+ fontWeight: "bold",
873
+ lineHeight: "flat",
874
+ fontSize: "5xl",
875
+ letterSpacing: "regular"
876
+ },
877
+ subheadline: {
878
+ fontFamily: "main",
879
+ fontWeight: "bold",
880
+ lineHeight: "base",
881
+ fontSize: "xl",
882
+ letterSpacing: "regular"
883
+ },
869
884
  h1: {
870
885
  fontFamily: "contrast",
871
886
  fontWeight: "extraBold",
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { BruttalTheme } from "./chunk-U3KPB4BR.js";
2
+ import { BruttalTheme } from "./chunk-KSMKYJYG.js";
3
3
 
4
4
  // src/createTheme.ts
5
5
  import deepmerge from "deepmerge";
package/dist/esm/themes/Bruttal/Bruttal.js CHANGED
@@ -1,3 +1,3 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { BruttalFonts, BruttalTheme } from "../../chunk-U3KPB4BR.js";
2
+ import { BruttalFonts, BruttalTheme } from "../../chunk-KSMKYJYG.js";
3
3
  export { BruttalFonts, BruttalTheme };
package/dist/index.js CHANGED
@@ -118,6 +118,7 @@ var import_edit = __toESM(require("@iconify/icons-carbon/edit"));
118
118
  var import_email = __toESM(require("@iconify/icons-carbon/email"));
119
119
  var import_error_filled = __toESM(require("@iconify/icons-carbon/error-filled"));
120
120
  var import_information_filled = __toESM(require("@iconify/icons-carbon/information-filled"));
121
+ var import_language = __toESM(require("@iconify/icons-carbon/language"));
121
122
  var import_loading = __toESM(require_loading());
122
123
  var import_menu = __toESM(require("@iconify/icons-carbon/menu"));
123
124
  var import_paste = __toESM(require("@iconify/icons-carbon/paste"));
@@ -171,6 +172,7 @@ var subtractIcon = {
171
172
  (0, import_react_icons.addIcon)("delete", import_trash_can.default);
172
173
  (0, import_react_icons.addIcon)("error", import_error_filled.default);
173
174
  (0, import_react_icons.addIcon)("info", import_information_filled.default);
175
+ (0, import_react_icons.addIcon)("language", import_language.default);
174
176
  (0, import_react_icons.addIcon)("loading", import_loading.default);
175
177
  (0, import_react_icons.addIcon)("menu-open", import_menu.default);
176
178
  (0, import_react_icons.addIcon)("open-link", import_arrow_up_right.default);
@@ -247,34 +249,38 @@ var letterSpacings = {
247
249
  };
248
250
 
249
251
  // src/tokens/lineHeights.ts
252
+ var BASE2 = 100;
253
+ var MULTIPLIER_FACTOR2 = 1.333;
254
+ var SIZE_TYPE3 = "%";
250
255
  var lineHeights = {
251
- "2xs": "0.422",
252
- xs: "0.562",
253
- sm: "calc(1 / 1.333)",
254
- base: "1",
255
- lg: "calc(1 * 1.333)",
256
- xl: "1.776",
257
- "2xl": "2.368"
256
+ "2xs": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -3, SIZE_TYPE3),
257
+ xs: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -2, SIZE_TYPE3),
258
+ sm: calcDividingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
259
+ base: "normal",
260
+ lg: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
261
+ xl: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 2, SIZE_TYPE3),
262
+ "2xl": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 3, SIZE_TYPE3),
263
+ flat: "100%"
258
264
  };
259
265
 
260
266
  // src/tokens/space.ts
261
- var SIZE_TYPE3 = "rem";
267
+ var SIZE_TYPE4 = "rem";
262
268
  var MD = 0.5;
263
- var MULTIPLIER_FACTOR2 = 1.618;
269
+ var MULTIPLIER_FACTOR3 = 1.618;
264
270
  var space = {
265
271
  none: 0,
266
- "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR2, 3),
267
- xs: calcDividingValues(MD, MULTIPLIER_FACTOR2, 2),
268
- sm: calcDividingValues(MD, MULTIPLIER_FACTOR2, 1),
269
- md: `${MD}${SIZE_TYPE3}`,
270
- lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 1),
271
- xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 2),
272
- "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 3),
273
- "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 4),
274
- "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 5),
275
- "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 6),
276
- "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 7),
277
- "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 8)
272
+ "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR3, 3),
273
+ xs: calcDividingValues(MD, MULTIPLIER_FACTOR3, 2),
274
+ sm: calcDividingValues(MD, MULTIPLIER_FACTOR3, 1),
275
+ md: `${MD}${SIZE_TYPE4}`,
276
+ lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 1),
277
+ xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 2),
278
+ "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 3),
279
+ "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 4),
280
+ "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 5),
281
+ "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 6),
282
+ "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 7),
283
+ "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 8)
278
284
  };
279
285
 
280
286
  // src/tokens/zIndices.ts
@@ -462,12 +468,7 @@ var BruttalTheme = {
462
468
  underemphasize: coreColors.gray300
463
469
  },
464
470
  fonts: {
465
- // h1: coreFonts.contrast,
466
- // h2: coreFonts.contrast,
467
- // h3: coreFonts.contrast,
468
- // h4: coreFonts.contrast,
469
- // h5: coreFonts.contrast,
470
- // h6: coreFonts.contrast,
471
+ main: coreColors.main,
471
472
  contrast: coreFonts.contrast,
472
473
  body: coreFonts.main,
473
474
  highlight: coreFonts.main,
@@ -819,7 +820,7 @@ var BruttalTheme = {
819
820
  backgroundColor: "muted",
820
821
  color: "onMuted"
821
822
  },
822
- ":disabled ~ span:has(iconify-icon)": {
823
+ ":disabled ~ * > span:has(iconify-icon)": {
823
824
  color: "onMuted"
824
825
  },
825
826
  '&[aria-invalid="true"]': {
@@ -827,7 +828,7 @@ var BruttalTheme = {
827
828
  borderColor: "danger",
828
829
  outlineColor: "danger"
829
830
  },
830
- '&[aria-invalid="true"] ~ span.error-icon': {
831
+ '&[aria-invalid="true"] ~ * > span.error-icon': {
831
832
  color: "danger"
832
833
  }
833
834
  },
@@ -881,6 +882,20 @@ var BruttalTheme = {
881
882
  }
882
883
  }
883
884
  },
885
+ headline: {
886
+ fontFamily: "contrast",
887
+ fontWeight: "bold",
888
+ lineHeight: "flat",
889
+ fontSize: "5xl",
890
+ letterSpacing: "regular"
891
+ },
892
+ subheadline: {
893
+ fontFamily: "main",
894
+ fontWeight: "bold",
895
+ lineHeight: "base",
896
+ fontSize: "xl",
897
+ letterSpacing: "regular"
898
+ },
884
899
  h1: {
885
900
  fontFamily: "contrast",
886
901
  fontWeight: "extraBold",
package/dist/themes/Bruttal/Bruttal.js CHANGED
@@ -119,6 +119,7 @@ var import_edit = __toESM(require("@iconify/icons-carbon/edit"));
119
119
  var import_email = __toESM(require("@iconify/icons-carbon/email"));
120
120
  var import_error_filled = __toESM(require("@iconify/icons-carbon/error-filled"));
121
121
  var import_information_filled = __toESM(require("@iconify/icons-carbon/information-filled"));
122
+ var import_language = __toESM(require("@iconify/icons-carbon/language"));
122
123
  var import_loading = __toESM(require_loading());
123
124
  var import_menu = __toESM(require("@iconify/icons-carbon/menu"));
124
125
  var import_paste = __toESM(require("@iconify/icons-carbon/paste"));
@@ -172,6 +173,7 @@ var subtractIcon = {
172
173
  (0, import_react_icons.addIcon)("delete", import_trash_can.default);
173
174
  (0, import_react_icons.addIcon)("error", import_error_filled.default);
174
175
  (0, import_react_icons.addIcon)("info", import_information_filled.default);
176
+ (0, import_react_icons.addIcon)("language", import_language.default);
175
177
  (0, import_react_icons.addIcon)("loading", import_loading.default);
176
178
  (0, import_react_icons.addIcon)("menu-open", import_menu.default);
177
179
  (0, import_react_icons.addIcon)("open-link", import_arrow_up_right.default);
@@ -251,34 +253,38 @@ var letterSpacings = {
251
253
  };
252
254
 
253
255
  // src/tokens/lineHeights.ts
256
+ var BASE2 = 100;
257
+ var MULTIPLIER_FACTOR2 = 1.333;
258
+ var SIZE_TYPE3 = "%";
254
259
  var lineHeights = {
255
- "2xs": "0.422",
256
- xs: "0.562",
257
- sm: "calc(1 / 1.333)",
258
- base: "1",
259
- lg: "calc(1 * 1.333)",
260
- xl: "1.776",
261
- "2xl": "2.368"
260
+ "2xs": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -3, SIZE_TYPE3),
261
+ xs: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -2, SIZE_TYPE3),
262
+ sm: calcDividingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
263
+ base: "normal",
264
+ lg: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
265
+ xl: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 2, SIZE_TYPE3),
266
+ "2xl": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 3, SIZE_TYPE3),
267
+ flat: "100%"
262
268
  };
263
269
 
264
270
  // src/tokens/space.ts
265
- var SIZE_TYPE3 = "rem";
271
+ var SIZE_TYPE4 = "rem";
266
272
  var MD = 0.5;
267
- var MULTIPLIER_FACTOR2 = 1.618;
273
+ var MULTIPLIER_FACTOR3 = 1.618;
268
274
  var space = {
269
275
  none: 0,
270
- "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR2, 3),
271
- xs: calcDividingValues(MD, MULTIPLIER_FACTOR2, 2),
272
- sm: calcDividingValues(MD, MULTIPLIER_FACTOR2, 1),
273
- md: `${MD}${SIZE_TYPE3}`,
274
- lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 1),
275
- xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 2),
276
- "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 3),
277
- "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 4),
278
- "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 5),
279
- "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 6),
280
- "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 7),
281
- "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 8)
276
+ "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR3, 3),
277
+ xs: calcDividingValues(MD, MULTIPLIER_FACTOR3, 2),
278
+ sm: calcDividingValues(MD, MULTIPLIER_FACTOR3, 1),
279
+ md: `${MD}${SIZE_TYPE4}`,
280
+ lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 1),
281
+ xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 2),
282
+ "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 3),
283
+ "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 4),
284
+ "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 5),
285
+ "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 6),
286
+ "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 7),
287
+ "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 8)
282
288
  };
283
289
 
284
290
  // src/tokens/zIndices.ts
@@ -466,12 +472,7 @@ var BruttalTheme = {
466
472
  underemphasize: coreColors.gray300
467
473
  },
468
474
  fonts: {
469
- // h1: coreFonts.contrast,
470
- // h2: coreFonts.contrast,
471
- // h3: coreFonts.contrast,
472
- // h4: coreFonts.contrast,
473
- // h5: coreFonts.contrast,
474
- // h6: coreFonts.contrast,
475
+ main: coreColors.main,
475
476
  contrast: coreFonts.contrast,
476
477
  body: coreFonts.main,
477
478
  highlight: coreFonts.main,
@@ -823,7 +824,7 @@ var BruttalTheme = {
823
824
  backgroundColor: "muted",
824
825
  color: "onMuted"
825
826
  },
826
- ":disabled ~ span:has(iconify-icon)": {
827
+ ":disabled ~ * > span:has(iconify-icon)": {
827
828
  color: "onMuted"
828
829
  },
829
830
  '&[aria-invalid="true"]': {
@@ -831,7 +832,7 @@ var BruttalTheme = {
831
832
  borderColor: "danger",
832
833
  outlineColor: "danger"
833
834
  },
834
- '&[aria-invalid="true"] ~ span.error-icon': {
835
+ '&[aria-invalid="true"] ~ * > span.error-icon': {
835
836
  color: "danger"
836
837
  }
837
838
  },
@@ -885,6 +886,20 @@ var BruttalTheme = {
885
886
  }
886
887
  }
887
888
  },
889
+ headline: {
890
+ fontFamily: "contrast",
891
+ fontWeight: "bold",
892
+ lineHeight: "flat",
893
+ fontSize: "5xl",
894
+ letterSpacing: "regular"
895
+ },
896
+ subheadline: {
897
+ fontFamily: "main",
898
+ fontWeight: "bold",
899
+ lineHeight: "base",
900
+ fontSize: "xl",
901
+ letterSpacing: "regular"
902
+ },
888
903
  h1: {
889
904
  fontFamily: "contrast",
890
905
  fontWeight: "extraBold",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/theme",
3
- "version": "1.6.1",
3
+ "version": "1.6.3",
4
4
  "description": "Theme for packages.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "ttoss",
package/src/themes/Bruttal/BruttalIcons.ts CHANGED
@@ -23,6 +23,7 @@ import editIcon from '@iconify/icons-carbon/edit';
23
23
  import emailIcon from '@iconify/icons-carbon/email';
24
24
  import errorFilledIcon from '@iconify/icons-carbon/error-filled';
25
25
  import informationFilledIcon from '@iconify/icons-carbon/information-filled';
26
+ import languageIcon from '@iconify/icons-carbon/language';
26
27
  import loadingIcon from '@iconify/icons-eos-icons/loading';
27
28
  import menuIcon from '@iconify/icons-carbon/menu';
28
29
  import pasteIcon from '@iconify/icons-carbon/paste';
@@ -79,6 +80,7 @@ addIcon('email', emailIcon);
79
80
  addIcon('delete', trashCanIcon);
80
81
  addIcon('error', errorFilledIcon);
81
82
  addIcon('info', informationFilledIcon);
83
+ addIcon('language', languageIcon);
82
84
  addIcon('loading', loadingIcon);
83
85
  addIcon('menu-open', menuIcon);
84
86
  addIcon('open-link', arrowUpRightIcon);
package/src/themes/Bruttal/BruttalTheme.ts CHANGED
@@ -102,12 +102,7 @@ export const BruttalTheme: Theme = {
102
102
  underemphasize: coreColors.gray300,
103
103
  },
104
104
  fonts: {
105
- // h1: coreFonts.contrast,
106
- // h2: coreFonts.contrast,
107
- // h3: coreFonts.contrast,
108
- // h4: coreFonts.contrast,
109
- // h5: coreFonts.contrast,
110
- // h6: coreFonts.contrast,
105
+ main: coreColors.main,
111
106
  contrast: coreFonts.contrast,
112
107
  body: coreFonts.main,
113
108
  highlight: coreFonts.main,
@@ -459,7 +454,7 @@ export const BruttalTheme: Theme = {
459
454
  backgroundColor: 'muted',
460
455
  color: 'onMuted',
461
456
  },
462
- ':disabled ~ span:has(iconify-icon)': {
457
+ ':disabled ~ * > span:has(iconify-icon)': {
463
458
  color: 'onMuted',
464
459
  },
465
460
  '&[aria-invalid="true"]': {
@@ -467,7 +462,7 @@ export const BruttalTheme: Theme = {
467
462
  borderColor: 'danger',
468
463
  outlineColor: 'danger',
469
464
  },
470
- '&[aria-invalid="true"] ~ span.error-icon': {
465
+ '&[aria-invalid="true"] ~ * > span.error-icon': {
471
466
  color: 'danger',
472
467
  },
473
468
  },
@@ -521,6 +516,20 @@ export const BruttalTheme: Theme = {
521
516
  },
522
517
  },
523
518
  },
519
+ headline: {
520
+ fontFamily: 'contrast',
521
+ fontWeight: 'bold',
522
+ lineHeight: 'flat',
523
+ fontSize: '5xl',
524
+ letterSpacing: 'regular',
525
+ },
526
+ subheadline: {
527
+ fontFamily: 'main',
528
+ fontWeight: 'bold',
529
+ lineHeight: 'base',
530
+ fontSize: 'xl',
531
+ letterSpacing: 'regular',
532
+ },
524
533
  h1: {
525
534
  fontFamily: 'contrast',
526
535
  fontWeight: 'extraBold',
package/src/tokens/lineHeights.ts CHANGED
@@ -1,9 +1,21 @@
1
+ import {
2
+ calcDividingValues,
3
+ calcMultiplyingValues,
4
+ } from '../helpers/geometricCalc';
5
+
6
+ const BASE = 100;
7
+
8
+ const MULTIPLIER_FACTOR = 1.333;
9
+
10
+ const SIZE_TYPE = '%';
11
+
1
12
  export const lineHeights = {
2
- '2xs': '0.422',
3
- xs: '0.562',
4
- sm: 'calc(1 / 1.333)',
5
- base: '1',
6
- lg: 'calc(1 * 1.333)',
7
- xl: '1.776',
8
- '2xl': '2.368',
13
+ '2xs': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -3, SIZE_TYPE),
14
+ xs: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -2, SIZE_TYPE),
15
+ sm: calcDividingValues(BASE, MULTIPLIER_FACTOR, 1, SIZE_TYPE),
16
+ base: 'normal',
17
+ lg: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 1, SIZE_TYPE),
18
+ xl: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 2, SIZE_TYPE),
19
+ '2xl': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 3, SIZE_TYPE),
20
+ flat: '100%',
9
21
  };