@lucasmiqueias/blip-tokens
Version:
Design token system inspired by BLiP's design language
496 lines (495 loc) • 11.5 kB
JavaScript
var c = Object.defineProperty;
var l = (r, e, s) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[e] = s;
var a = (r, e, s) => l(r, typeof e != "symbol" ? e + "" : e, s);
import * as n from "react";
const d = {
brand: "#0096FA",
light: {
primary: "#1E6BF1",
secondary: "#292929",
surface: {
0: "#FFFFFF",
1: "#F6F6F6",
2: "#EDEDED",
3: "#E3E3E3",
4: "#141414"
},
content: {
default: "#282828",
disable: "#595959",
ghost: "#8C8C8C",
bright: "#FFFFFF",
din: "#000000"
},
border: {
1: "rgba(0, 0, 0, 0.2)",
2: "rgba(0, 0, 0, 0.16)",
3: "rgba(0, 0, 0, 0.06)"
},
semantic: {
positive: "#007A42",
negative: "#A80B0B",
info: "#80E3EB",
system: "#B2DFFD",
focus: "#C226FB",
success: "#84EBBC",
warning: "#FDE99B",
error: "#FABEBE",
delete: "#E60F0F"
},
extended: {
blue: "#1968F0",
"blue-bright": "#B2DFFD",
ocean: "#00D3E4",
"ocean-bright": "#80E3EB",
green: "#35DE90",
"green-bright": "#84EBBC",
yellow: "#FBCF23",
"yellow-bright": "#FDE99B",
orange: "#F06305",
"orange-bright": "#FCAA73",
red: "#E60F0F",
"red-bright": "#F99F9F",
pink: "#FB4BC1",
"pink-bright": "#FD9BDC",
gray: "#666666",
"gray-bright": "#C7C7C7"
},
actions: {
hover: "rgba(0, 0, 0, 0.08)",
pressed: "rgba(0, 0, 0, 0.16)"
}
},
dark: {
primary: "#498BFF",
secondary: "#FFFFFF",
surface: {
0: "#424242",
1: "#393939",
2: "#1F1F1F",
3: "#141414",
4: "#0A0A0A"
},
content: {
default: "#FFFFFF",
disable: "#949494",
ghost: "#666666",
bright: "#FFFFFF",
din: "#000000"
},
border: {
1: "rgba(255, 255, 255, 0.2)",
2: "rgba(255, 255, 255, 0.16)",
3: "rgba(255, 255, 255, 0.06)"
},
semantic: {
positive: "#6BFFBC",
negative: "#FFB8B8",
info: "#004F56",
system: "#003C64",
focus: "#C226FB",
success: "#355E4B",
warning: "#60593B",
error: "#7B3D3D",
delete: "#B60C0C"
},
extended: {
blue: "#1968F0",
"blue-bright": "#B2DFFD",
ocean: "#00D3E4",
"ocean-bright": "#80E3EB",
green: "#35DE90",
"green-bright": "#84EBBC",
yellow: "#FBCF23",
"yellow-bright": "#FDE99B",
orange: "#F06305",
"orange-bright": "#FCAA73",
red: "#E60F0F",
"red-bright": "#F99F9F",
pink: "#FB4BC1",
"pink-bright": "#FD9BDC",
gray: "#666666",
"gray-bright": "#C7C7C7"
},
actions: {
hover: "rgba(255, 255, 255, 0.16)",
pressed: "rgba(255, 255, 255, 0.08)"
}
}
}, h = {
colors: d
}, g = {
0: "0px",
1: "8px",
2: "16px",
3: "24px",
4: "32px",
5: "40px",
6: "48px",
7: "56px",
8: "64px",
9: "72px",
10: "80px",
11: "88px",
12: "96px",
"0-5": "4px"
}, m = {
none: "0px",
sm: "2px",
base: "4px",
md: "6px",
lg: "8px",
xl: "12px",
"2xl": "16px",
"3xl": "24px",
full: "9999px"
}, p = {
height: {
xs: "24px",
sm: "32px",
md: "40px",
lg: "48px",
xl: "56px"
}
}, x = {
xs: "12px",
sm: "16px",
md: "20px",
lg: "24px",
xl: "32px",
"2xl": "40px"
}, f = {
xs: "475px",
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px"
}, u = {
0: 0,
10: 10,
20: 20,
30: 30,
40: 40,
50: 50,
auto: "auto",
dropdown: 1e3,
sticky: 1020,
fixed: 1030,
"modal-backdrop": 1040,
modal: 1050,
popover: 1060,
tooltip: 1070,
toast: 1080
}, v = {
spacing: g,
radius: m,
components: p,
icons: x,
containers: f,
zIndex: u
}, b = {
xs: "12px",
sm: "14px",
base: "16px",
lg: "18px",
xl: "20px",
"2xl": "24px",
"3xl": "30px",
"4xl": "36px",
"5xl": "48px",
"6xl": "60px",
"7xl": "72px",
"8xl": "96px",
"9xl": "128px"
}, F = {
sans: [
"Nunito Sans",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
"sans-serif"
],
serif: [
"Georgia",
"Cambria",
"Times New Roman",
"Times",
"serif"
],
mono: [
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace"
]
}, y = {
thin: 100,
extralight: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
}, w = {
none: 1,
tight: 1.25,
snug: 1.375,
normal: 1.5,
relaxed: 1.625,
loose: 2
}, T = {
fontSizes: b,
fontFamilies: F,
fontWeights: y,
lineHeights: w
}, B = {
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
none: "none"
}, E = {
shadows: B
}, C = h, D = v, S = T, k = E, P = {
colors: C,
spacing: D,
typography: S,
shadows: k
}, L = {
// Colors
brand: "var(--color-brand)",
// Surfaces
surface: {
0: "var(--surface-0)",
1: "var(--surface-1)",
2: "var(--surface-2)",
3: "var(--surface-3)",
4: "var(--surface-4)",
positive: "var(--surface-positive)",
negative: "var(--surface-negative)",
primary: "var(--surface-primary)"
},
// Content
content: {
default: "var(--content-default)",
disable: "var(--content-disable)",
ghost: "var(--content-ghost)",
bright: "var(--content-bright)",
din: "var(--content-din)",
muted: "var(--content-muted)"
},
// Borders
border: {
1: "var(--border-1)",
2: "var(--border-2)",
3: "var(--border-3)"
},
// Status colors
status: {
positive: "var(--color-positive)",
negative: "var(--color-negative)",
info: "var(--color-info)",
system: "var(--color-system)",
focus: "var(--color-focus)",
success: "var(--color-success)",
warning: "var(--color-warning)",
error: "var(--color-error)",
delete: "var(--color-delete)"
},
// Spacing
spacing: {
0: "var(--spacing-0)",
1: "var(--spacing-1)",
2: "var(--spacing-2)",
3: "var(--spacing-3)",
4: "var(--spacing-4)",
5: "var(--spacing-5)",
6: "var(--spacing-6)",
8: "var(--spacing-8)",
10: "var(--spacing-10)",
12: "var(--spacing-12)"
},
// Border radius
radius: {
none: "var(--radius-none)",
sm: "var(--radius-sm)",
base: "var(--radius-base)",
md: "var(--radius-md)",
lg: "var(--radius-lg)",
xl: "var(--radius-xl)",
"2xl": "var(--radius-2xl)",
"3xl": "var(--radius-3xl)",
full: "var(--radius-full)"
},
// Typography
fontSize: {
xs: "var(--font-size-xs)",
sm: "var(--font-size-sm)",
base: "var(--font-size-base)",
lg: "var(--font-size-lg)",
xl: "var(--font-size-xl)",
"2xl": "var(--font-size-2xl)",
"3xl": "var(--font-size-3xl)",
"4xl": "var(--font-size-4xl)",
"5xl": "var(--font-size-5xl)"
},
fontWeight: {
thin: "var(--font-weight-thin)",
light: "var(--font-weight-light)",
normal: "var(--font-weight-normal)",
medium: "var(--font-weight-medium)",
semibold: "var(--font-weight-semibold)",
bold: "var(--font-weight-bold)",
extrabold: "var(--font-weight-extrabold)"
},
fontFamily: {
sans: "var(--font-family-sans)",
serif: "var(--font-family-serif)",
mono: "var(--font-family-mono)"
},
// Shadows
shadow: {
sm: "var(--shadow-sm)",
md: "var(--shadow-md)",
lg: "var(--shadow-lg)",
xl: "var(--shadow-xl)",
"2xl": "var(--shadow-2xl)",
inner: "var(--shadow-inner)",
none: "var(--shadow-none)"
},
// Actions
action: {
hover: "var(--action-hover)",
pressed: "var(--action-pressed)"
}
};
class M {
constructor() {
a(this, "currentTheme", "auto");
a(this, "systemPreference", "light");
a(this, "listeners", []);
a(this, "handleSystemPreferenceChange", (e) => {
this.systemPreference = e.matches ? "dark" : "light", this.currentTheme === "auto" && (this.applyTheme(), this.notifyListeners());
});
this.init();
}
init() {
this.detectSystemPreference(), typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").addListener(this.handleSystemPreferenceChange.bind(this)), this.loadSavedTheme(), this.applyTheme();
}
detectSystemPreference() {
typeof window < "u" && window.matchMedia && (this.systemPreference = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
}
loadSavedTheme() {
if (typeof window < "u" && window.localStorage) {
const e = localStorage.getItem("blip-theme");
e && ["light", "dark", "auto"].includes(e) && (this.currentTheme = e);
}
}
saveTheme(e) {
typeof window < "u" && window.localStorage && localStorage.setItem("blip-theme", e);
}
applyTheme() {
if (typeof document > "u") return;
const e = document.documentElement;
this.currentTheme === "auto" ? (e.removeAttribute("data-theme"), e.setAttribute("data-theme-mode", "auto")) : (e.setAttribute("data-theme", this.currentTheme), e.removeAttribute("data-theme-mode"));
}
notifyListeners() {
this.listeners.forEach((e) => e(this.currentTheme));
}
/**
* Set the current theme
*/
setTheme(e) {
this.currentTheme = e, this.saveTheme(e), this.applyTheme(), this.notifyListeners();
}
/**
* Get the current theme setting
*/
getTheme() {
return this.currentTheme;
}
/**
* Get the effective theme (resolves 'auto' to actual theme)
*/
getEffectiveTheme() {
return this.currentTheme === "auto" ? this.systemPreference : this.currentTheme;
}
/**
* Get the system preference
*/
getSystemPreference() {
return this.systemPreference;
}
/**
* Toggle between light and dark themes
*/
toggleTheme() {
const e = this.getEffectiveTheme();
this.setTheme(e === "light" ? "dark" : "light");
}
/**
* Subscribe to theme changes
*/
subscribe(e) {
return this.listeners.push(e), () => {
const s = this.listeners.indexOf(e);
s > -1 && this.listeners.splice(s, 1);
};
}
/**
* Check if dark mode is currently active
*/
isDarkMode() {
return this.getEffectiveTheme() === "dark";
}
/**
* Check if light mode is currently active
*/
isLightMode() {
return this.getEffectiveTheme() === "light";
}
}
const t = new M();
function I() {
const [r, e] = n.useState(t.getTheme()), [s, o] = n.useState(
t.getEffectiveTheme()
);
return n.useEffect(() => t.subscribe((i) => {
e(i), o(t.getEffectiveTheme());
}), []), {
theme: r,
effectiveTheme: s,
setTheme: t.setTheme.bind(t),
toggleTheme: t.toggleTheme.bind(t),
isDarkMode: t.isDarkMode.bind(t),
isLightMode: t.isLightMode.bind(t),
systemPreference: t.getSystemPreference()
};
}
const J = (r) => typeof document > "u" ? "" : getComputedStyle(document.documentElement).getPropertyValue(r);
export {
C as colors,
L as cssVars,
P as default,
J as getCSSVariable,
k as shadows,
D as spacing,
t as themeManager,
P as tokens,
S as typography,
I as useTheme
};