@julseb-lib/react 0.0.50 → 0.0.51

package/src/data/styles/all-font-families.ts

@@ -0,0 +1,16 @@
+import type { Variable } from "../types"
+
+export const allFontFamilies: Array<Variable> = [
+    {
+        name: "Font family body",
+        variable: "FontFamilies.Body",
+        css: "var(--font-family-body)",
+        value: '"Lato", sans-serif',
+    },
+    {
+        name: "Font family code",
+        variable: "FontFamilies.Code",
+        css: "var(--font-family-code)",
+        value: "monospace",
+    },
+]

package/src/data/styles/all-font-sizes.ts

@@ -0,0 +1,82 @@
+import type { Variable } from "../types"
+
+export const allFontSizes: Array<Variable> = [
+    {
+        name: "Display h1",
+        variable: "FontSizes.Display.H1",
+        css: "var(--font-size-display-h1)",
+        value: "5rem",
+    },
+    {
+        name: "Display h2",
+        variable: "FontSizes.Display.H2",
+        css: "var(--font-size-display-h2)",
+        value: "4rem",
+    },
+    {
+        name: "Display h3",
+        variable: "FontSizes.Display.H3",
+        css: "var(--font-size-display-h3)",
+        value: "3.5rem",
+    },
+    {
+        name: "Display h4",
+        variable: "FontSizes.Display.H4",
+        css: "var(--font-size-display-h4)",
+        value: "3rem",
+    },
+    {
+        name: "Display h5",
+        variable: "FontSizes.Display.H5",
+        css: "var(--font-size-display-h5)",
+        value: "2.5rem",
+    },
+    {
+        name: "H1",
+        variable: "FontSizes.Titles.H1",
+        css: "var(--font-size-h1)",
+        value: "2.5rem",
+    },
+    {
+        name: "H2",
+        variable: "FontSizes.Titles.H2",
+        css: "var(--font-size-h2)",
+        value: "2rem",
+    },
+    {
+        name: "H3",
+        variable: "FontSizes.Titles.H3",
+        css: "var(--font-size-h3)",
+        value: "1.8rem",
+    },
+    {
+        name: "H4",
+        variable: "FontSizes.Titles.H4",
+        css: "var(--font-size-h4)",
+        value: "1.5rem",
+    },
+    {
+        name: "H5",
+        variable: "FontSizes.Titles.H5",
+        css: "var(--font-size-h5)",
+        value: "1.3rem",
+    },
+    {
+        name: "H6",
+        variable: "FontSizes.Titles.H6",
+        css: "var(--font-size-h6)",
+        value: "1.1rem",
+    },
+    {
+        name: "Body",
+        variable: "FontSizes.Body",
+        css: "var(--font-size-body)",
+        value: "1rem",
+    },
+    {
+        name: "Small",
+        variable: "FontSizes.Small",
+        css: "var(--font-size-small)",
+        value: "0.875rem",
+    },
+]

package/src/data/styles/all-font-weights.ts

@@ -0,0 +1,22 @@
+import type { Variable } from "../types"
+
+export const allFontWeights: Array<Variable> = [
+    {
+        name: "Regular",
+        variable: "FontWeights.Regular",
+        css: "var(--font-weight-regular)",
+        value: 400,
+    },
+    {
+        name: "Bold",
+        variable: "FontWeights.Bold",
+        css: "var(--font-weight-bold)",
+        value: 700,
+    },
+    {
+        name: "Black",
+        variable: "FontWeights.Black",
+        css: "var(--font-weight-black)",
+        value: 900,
+    },
+]

package/src/data/styles/all-layouts.ts

@@ -0,0 +1,60 @@
+import type { Variable } from "../types"
+
+export const allLayouts: Array<Variable & { valueTablet: string }> = [
+    {
+        name: "Main default",
+        variable: "Layouts.Main.Default",
+        css: "var(--main-default)",
+        value: "600px",
+        valueTablet: "100%",
+    },
+    {
+        name: "Main large",
+        variable: "Layouts.Main.Large",
+        css: "var(--main-large)",
+        value: "800px",
+        valueTablet: "100%",
+    },
+    {
+        name: "Main form",
+        variable: "Layouts.Main.Form",
+        css: "var(--main-form)",
+        value: "400px",
+        valueTablet: "100%",
+    },
+    {
+        name: "Aside default",
+        variable: "Layouts.Aside.Default",
+        css: "var(--aside-default)",
+        value: "250px",
+        valueTablet: "100%",
+    },
+    {
+        name: "Aside small",
+        variable: "Layouts.Aside.Small",
+        css: "var(--aside-small)",
+        value: "200px",
+        valueTablet: "100%",
+    },
+    {
+        name: "Wrapper 1 col",
+        variable: "Layouts.Wrapper.OneCol",
+        css: "var(--wrapper-1-col)",
+        value: "1fr auto 1fr",
+        valueTablet: "5vw 1fr 5vw",
+    },
+    {
+        name: "Wrapper 2 cols",
+        variable: "Layouts.Wrapper.TwoCols",
+        css: "var(--wrapper-2-cols)",
+        value: "1fr auto auto 1fr",
+        valueTablet: "5vw 1fr 5vw",
+    },
+    {
+        name: "Wrapper 3 cols",
+        variable: "Layouts.Wrapper.ThreeCols",
+        css: "var(--wrapper-3-cols)",
+        value: "1fr auto auto auto 1fr",
+        valueTablet: "5vw 1fr 5vw",
+    },
+]

package/src/data/styles/all-line-heights.ts

@@ -0,0 +1,16 @@
+import type { Variable } from "../types"
+
+export const allLineHeights: Array<Variable> = [
+    {
+        name: "Line height",
+        variable: "LineHeights.Regular",
+        css: "var(--line-height)",
+        value: 1.5,
+    },
+    {
+        name: "Line height code",
+        variable: "LineHeights.Code",
+        css: "var(--line-height-code)",
+        value: 1.8,
+    },
+]

package/src/data/styles/all-overlays.ts

@@ -0,0 +1,43 @@
+/*=============================================== All overlays ===============================================*/
+
+import { OVERLAYS, LIB_TOKENS } from "../../lib"
+import type { Variable } from "../types"
+
+export const allOverlays: Array<Variable> = [
+    {
+        name: "Overlay Black 50",
+        variable: "OVERLAYS.BLACK_50",
+        css: OVERLAYS.BLACK_50,
+        value: LIB_TOKENS.overlays["black-50"],
+    },
+    {
+        name: "Overlay Black 80",
+        variable: "OVERLAYS.BLACK_80",
+        css: OVERLAYS.BLACK_80,
+        value: LIB_TOKENS.overlays["black-80"],
+    },
+    {
+        name: "Overlay White 50",
+        variable: "OVERLAYS.WHITE_50",
+        css: OVERLAYS.WHITE_50,
+        value: LIB_TOKENS.overlays["white-50"],
+    },
+    {
+        name: "Overlay White 80",
+        variable: "OVERLAYS.WHITE_80",
+        css: OVERLAYS.WHITE_80,
+        value: LIB_TOKENS.overlays["white-80"],
+    },
+    {
+        name: "Overlay Gradient black",
+        variable: "OVERLAYS.GRADIENT_BLACK",
+        css: OVERLAYS.GRADIENT_BLACK,
+        value: LIB_TOKENS.overlays["gradient-black"],
+    },
+    {
+        name: "Overlay Gradient white",
+        variable: "OVERLAYS.GRADIENT_WHITE",
+        css: OVERLAYS.GRADIENT_WHITE,
+        value: LIB_TOKENS.overlays["gradient-white"],
+    },
+]

package/src/data/styles/all-radiuses.ts

@@ -0,0 +1,55 @@
+/*=============================================== All radiuses ===============================================*/
+
+import { RADIUSES, LIB_TOKENS } from "../../lib"
+import type { Variable } from "../types"
+
+export const allRadiuses: Array<Variable> = [
+    {
+        name: "XXL",
+        variable: "RADIUSES.XXL",
+        css: RADIUSES.XXL,
+        value: LIB_TOKENS.radiuses.xxl,
+    },
+    {
+        name: "XL",
+        variable: "RADIUSES.XL",
+        css: RADIUSES.XL,
+        value: LIB_TOKENS.radiuses.xl,
+    },
+    {
+        name: "L",
+        variable: "RADIUSES.L",
+        css: RADIUSES.L,
+        value: LIB_TOKENS.radiuses.l,
+    },
+    {
+        name: "M",
+        variable: "RADIUSES.M",
+        css: RADIUSES.M,
+        value: LIB_TOKENS.radiuses.m,
+    },
+    {
+        name: "S",
+        variable: "RADIUSES.S",
+        css: RADIUSES.S,
+        value: LIB_TOKENS.radiuses.s,
+    },
+    {
+        name: "XS",
+        variable: "RADIUSES.XS",
+        css: RADIUSES.XS,
+        value: LIB_TOKENS.radiuses.xs,
+    },
+    {
+        name: "Round",
+        variable: "RADIUSES.ROUND",
+        css: RADIUSES.ROUND,
+        value: LIB_TOKENS.radiuses.round,
+    },
+    {
+        name: "Circle",
+        variable: "RADIUSES.CIRCLE",
+        css: RADIUSES.CIRCLE,
+        value: LIB_TOKENS.radiuses.circle,
+    },
+]

package/src/data/styles/all-shadows.ts

@@ -0,0 +1,43 @@
+/*=============================================== All shadows ===============================================*/
+
+import { SHADOWS, LIB_TOKENS } from "../../lib"
+import type { Variable } from "../types"
+
+export const allShadows: Array<Variable> = [
+    {
+        name: "XXL",
+        variable: "SHADOWS.XXL",
+        css: SHADOWS.XXL,
+        value: LIB_TOKENS.shadows.xxl,
+    },
+    {
+        name: "XL",
+        variable: "SHADOWS.XL",
+        css: SHADOWS.XL,
+        value: LIB_TOKENS.shadows.xl,
+    },
+    {
+        name: "L",
+        variable: "SHADOWS.L",
+        css: SHADOWS.L,
+        value: LIB_TOKENS.shadows.l,
+    },
+    {
+        name: "M",
+        variable: "SHADOWS.M",
+        css: SHADOWS.M,
+        value: LIB_TOKENS.shadows.m,
+    },
+    {
+        name: "S",
+        variable: "SHADOWS.S",
+        css: SHADOWS.S,
+        value: LIB_TOKENS.shadows.s,
+    },
+    {
+        name: "XS",
+        variable: "SHADOWS.XS",
+        css: SHADOWS.XS,
+        value: LIB_TOKENS.shadows.xs,
+    },
+]

package/src/data/styles/all-spacers.ts

@@ -0,0 +1,49 @@
+/*=============================================== All spacers ===============================================*/
+
+import { LIB_TOKENS, SPACERS } from "../../lib"
+import type { Variable } from "../types"
+
+export const allSpacers: Array<Variable> = [
+    {
+        name: "XXL",
+        variable: "SPACERS.XXL",
+        css: SPACERS.XXL,
+        value: LIB_TOKENS.spacers.xxl,
+    },
+    {
+        name: "XL",
+        variable: "SPACERS.XL",
+        css: SPACERS.XL,
+        value: LIB_TOKENS.spacers.xl,
+    },
+    {
+        name: "L",
+        variable: "SPACERS.L",
+        css: SPACERS.L,
+        value: LIB_TOKENS.spacers.l,
+    },
+    {
+        name: "M",
+        variable: "SPACERS.M",
+        css: SPACERS.M,
+        value: LIB_TOKENS.spacers.m,
+    },
+    {
+        name: "S",
+        variable: "SPACERS.S",
+        css: SPACERS.S,
+        value: LIB_TOKENS.spacers.s,
+    },
+    {
+        name: "XS",
+        variable: "SPACERS.XS",
+        css: SPACERS.XS,
+        value: LIB_TOKENS.spacers.xs,
+    },
+    {
+        name: "XXS",
+        variable: "SPACERS.XXS",
+        css: SPACERS.XXS,
+        value: LIB_TOKENS.spacers.xxs,
+    },
+]

package/src/data/styles/all-transition.ts

@@ -0,0 +1,22 @@
+import type { Variable } from "../types"
+
+export const allTransitions: Array<Variable> = [
+    {
+        name: "Short",
+        variable: "Transitions.Short",
+        css: "var(--transition-short)",
+        value: "all 0.2s ease",
+    },
+    {
+        name: "Long",
+        variable: "Transitions.Long",
+        css: "var(--transition-long)",
+        value: "all 0.5s ease",
+    },
+    {
+        name: "Bezier",
+        variable: "Transitions.Bezier",
+        css: "var(--transition-bezier)",
+        value: "all 0.5s cubic-bezier(0.25, 0.75, 0, 0.66)",
+    },
+]

package/src/data/styles/index.ts

@@ -0,0 +1,13 @@
+/*=============================================== Exports ===============================================*/
+
+export * from "./all-colors"
+export * from "./all-font-families"
+export * from "./all-font-sizes"
+export * from "./all-font-weights"
+export * from "./all-layouts"
+export * from "./all-line-heights"
+export * from "./all-overlays"
+export * from "./all-radiuses"
+export * from "./all-shadows"
+export * from "./all-spacers"
+export * from "./all-transition"