@ibis-design/css 0.8.2 → 1.0.0-alpha.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 (35) hide show
  1. package/README.md +46 -14
  2. package/dist/bootstrap-overrides.css +81 -0
  3. package/dist/components/authLayout.css +124 -0
  4. package/dist/components/banner.css +13 -17
  5. package/dist/components/button.css +13 -13
  6. package/dist/components/card.css +55 -0
  7. package/dist/components/cardLayout.css +71 -0
  8. package/dist/components/checkbox.css +29 -11
  9. package/dist/components/chips.css +8 -8
  10. package/dist/components/dashboardLayout.css +92 -0
  11. package/dist/components/dropdown.css +34 -16
  12. package/dist/components/dropdownButton.css +42 -28
  13. package/dist/components/formLayout.css +88 -0
  14. package/dist/components/navBottom.css +32 -0
  15. package/dist/components/navButton.css +233 -0
  16. package/dist/components/navDrawer.css +168 -0
  17. package/dist/components/navRail.css +135 -0
  18. package/dist/components/navShell.css +314 -0
  19. package/dist/components/pillTab.css +7 -12
  20. package/dist/components/radio.css +14 -13
  21. package/dist/components/switch.css +5 -8
  22. package/dist/components/textInput.css +12 -15
  23. package/dist/components/textarea.css +7 -13
  24. package/dist/components/textlink.css +6 -14
  25. package/dist/components/tipIndicator.css +4 -10
  26. package/dist/components/toaster.css +21 -27
  27. package/dist/components/topBar.css +52 -0
  28. package/dist/design-tokens.css +210 -86
  29. package/dist/tailwind.preset.js +1 -1
  30. package/dist/tailwind.theme.js +42 -2
  31. package/package.json +34 -31
  32. package/src/lib/assemble-bootstrap-overrides.ts +23 -0
  33. package/src/lib/assemble-design-tokens.ts +22 -0
  34. package/src/lib/set-theme.ts +79 -0
  35. package/src/lib/themes.ts +74 -0
package/src/lib/set-theme.ts ADDED
@@ -0,0 +1,79 @@
1
+ import {
2
+ DEFAULT_BRAND,
3
+ DEFAULT_COLOR_MODE,
4
+ type BrandId,
5
+ type ColorModeId,
6
+ toThemeId,
7
+ type ThemeId,
8
+ } from "./themes.ts";
9
+
10
+ export {
11
+ DEFAULT_BRAND,
12
+ DEFAULT_COLOR_MODE,
13
+ DEFAULT_THEME_ID,
14
+ parseThemeId,
15
+ toThemeId,
16
+ type BrandId,
17
+ type ColorModeId,
18
+ type ThemeId,
19
+ } from "./themes.ts";
20
+
21
+ export type ThemeOptions = {
22
+ brand?: BrandId;
23
+ colorMode?: ColorModeId;
24
+ /** When true, also sets `data-bs-theme` on `<html>` for Bootstrap 5.3 components. */
25
+ syncBootstrapTheme?: boolean;
26
+ };
27
+
28
+ const isBrandId = (value: string): value is BrandId => value === "ib" || value === "alc";
29
+
30
+ const isColorModeId = (value: string): value is ColorModeId =>
31
+ value === "light" || value === "dark";
32
+
33
+ /**
34
+ * Applies brand and color mode to `document.documentElement` for CSS token switching.
35
+ *
36
+ * @param options - Brand and color mode; defaults to Ibis light
37
+ * @example
38
+ * setTheme({ brand: 'alc', colorMode: 'dark' });
39
+ */
40
+ export const setTheme = (options: ThemeOptions = {}): ThemeId => {
41
+ const brand = options.brand ?? DEFAULT_BRAND;
42
+ const colorMode = options.colorMode ?? DEFAULT_COLOR_MODE;
43
+
44
+ if (typeof document !== "undefined") {
45
+ const root = document.documentElement;
46
+ root.dataset.brand = brand;
47
+ root.dataset.colorMode = colorMode;
48
+ delete root.dataset.theme;
49
+
50
+ if (options.syncBootstrapTheme) {
51
+ root.dataset.bsTheme = colorMode;
52
+ }
53
+ }
54
+
55
+ return toThemeId(brand, colorMode);
56
+ };
57
+
58
+ /**
59
+ * Reads the active brand and color mode from the document root.
60
+ *
61
+ * @returns Current brand and color mode, or defaults when not in a browser
62
+ */
63
+ export const getTheme = (): { brand: BrandId; colorMode: ColorModeId; themeId: ThemeId } => {
64
+ if (typeof document === "undefined") {
65
+ return {
66
+ brand: DEFAULT_BRAND,
67
+ colorMode: DEFAULT_COLOR_MODE,
68
+ themeId: toThemeId(DEFAULT_BRAND, DEFAULT_COLOR_MODE),
69
+ };
70
+ }
71
+
72
+ const brandRaw = document.documentElement.dataset.brand;
73
+ const modeRaw = document.documentElement.dataset.colorMode;
74
+
75
+ const brand = brandRaw && isBrandId(brandRaw) ? brandRaw : DEFAULT_BRAND;
76
+ const colorMode = modeRaw && isColorModeId(modeRaw) ? modeRaw : DEFAULT_COLOR_MODE;
77
+
78
+ return { brand, colorMode, themeId: toThemeId(brand, colorMode) };
79
+ };
package/src/lib/themes.ts ADDED
@@ -0,0 +1,74 @@
1
+ export type BrandId = "ib" | "alc";
2
+
3
+ export type ColorModeId = "light" | "dark";
4
+
5
+ /** Composite theme id used for Style Dictionary source files and RN JSON exports. */
6
+ export type ThemeId = `${BrandId}-${ColorModeId}`;
7
+
8
+ export type ThemeDefinition = {
9
+ id: ThemeId;
10
+ brand: BrandId;
11
+ colorMode: ColorModeId;
12
+ /** Selector passed to Style Dictionary css/variables `options.selector`. */
13
+ cssSelector: string;
14
+ };
15
+
16
+ const themeSelector = (brand: BrandId, colorMode: ColorModeId): string =>
17
+ `[data-brand="${brand}"][data-color-mode="${colorMode}"]`;
18
+
19
+ export const THEMES: ThemeDefinition[] = [
20
+ {
21
+ id: "ib-light",
22
+ brand: "ib",
23
+ colorMode: "light",
24
+ cssSelector: ':root, [data-brand="ib"][data-color-mode="light"]',
25
+ },
26
+ {
27
+ id: "ib-dark",
28
+ brand: "ib",
29
+ colorMode: "dark",
30
+ cssSelector: themeSelector("ib", "dark"),
31
+ },
32
+ {
33
+ id: "alc-light",
34
+ brand: "alc",
35
+ colorMode: "light",
36
+ cssSelector: themeSelector("alc", "light"),
37
+ },
38
+ {
39
+ id: "alc-dark",
40
+ brand: "alc",
41
+ colorMode: "dark",
42
+ cssSelector: themeSelector("alc", "dark"),
43
+ },
44
+ ];
45
+
46
+ export const DEFAULT_BRAND: BrandId = "ib";
47
+
48
+ export const DEFAULT_COLOR_MODE: ColorModeId = "light";
49
+
50
+ export const DEFAULT_THEME_ID: ThemeId = `${DEFAULT_BRAND}-${DEFAULT_COLOR_MODE}`;
51
+
52
+ /**
53
+ * @param brand - Ibis or Alchemy
54
+ * @param colorMode - Light or dark
55
+ * @returns Composite theme id for token JSON / RN export filenames
56
+ */
57
+ export const toThemeId = (brand: BrandId, colorMode: ColorModeId): ThemeId =>
58
+ `${brand}-${colorMode}`;
59
+
60
+ /**
61
+ * @param themeId - Composite id such as `ib-dark`
62
+ * @returns Brand and color mode parsed from the id
63
+ * @throws When the id is not a valid theme id
64
+ */
65
+ export const parseThemeId = (themeId: string): { brand: BrandId; colorMode: ColorModeId } => {
66
+ const match = /^(ib|alc)-(light|dark)$/.exec(themeId);
67
+ if (!match?.[1] || !match[2]) {
68
+ throw new Error(`Invalid theme id: ${themeId}`);
69
+ }
70
+ return {
71
+ brand: match[1] as BrandId,
72
+ colorMode: match[2] as ColorModeId,
73
+ };
74
+ };