@rarui/styles 1.0.0-rc.1

package/src/themes/contract.css.ts

@@ -0,0 +1,241 @@
+import { createGlobalThemeContract } from "@vanilla-extract/css";
+
+export const vars = createGlobalThemeContract(
+  {
+    colors: {
+      surface: {
+        background: "",
+        brand: "",
+        "brand-hover": "",
+        "brand-press": "",
+        "brand-secondary": "",
+        "brand-secondary-hover": "",
+        "brand-secondary-press": "",
+        "brand-secondary-subdued": "",
+        "brand-subdued": "",
+        disabled: "",
+        error: "",
+        "error-hover": "",
+        "error-press": "",
+        "error-subdued": "",
+        hover: "",
+        info: "",
+        "info-hover": "",
+        "info-press": "",
+        "info-subdued": "",
+        invert: "",
+        "invert-disabled": "",
+        "invert-hover": "",
+        "invert-press": "",
+        "invert-secondary": "",
+        "on-brand-hover": "",
+        "on-brand-press": "",
+        "on-brand-secondary-hover": "",
+        "on-brand-secondary-press": "",
+        "on-error-hover": "",
+        "on-error-press": "",
+        "on-info-hover": "",
+        "on-info-press": "",
+        "on-success-hover": "",
+        "on-success-press": "",
+        "on-warning-hover": "",
+        "on-warning-press": "",
+        overlay: "",
+        press: "",
+        primary: "",
+        secondary: "",
+        success: "",
+        "success-hover": "",
+        "success-press": "",
+        "success-subdued": "",
+        warning: "",
+        "warning-hover": "",
+        "warning-press": "",
+        "warning-subdued": "",
+      },
+      content: {
+        brand: "",
+        "brand-alt": "",
+        "brand-secondary": "",
+        disabled: "",
+        error: "",
+        info: "",
+        invert: "",
+        "invert-disabled": "",
+        "invert-secondary": "",
+        "on-brand": "",
+        "on-brand-secondary": "",
+        "on-error": "",
+        "on-info": "",
+        "on-success": "",
+        "on-warning": "",
+        primary: "",
+        secondary: "",
+        success: "",
+        warning: "",
+        "warning-alt": "",
+      },
+      border: {
+        brand: "",
+        "brand-alt": "",
+        "brand-secondary": "",
+        disabled: "",
+        divider: "",
+        error: "",
+        info: "",
+        invert: "",
+        "invert-disabled": "",
+        primary: "",
+        secondary: "",
+        subdued: "",
+        success: "",
+        warning: "",
+      },
+    },
+    fontFamily: {
+      inter: "",
+    },
+    fontSize: {
+      hero: {
+        caption: "",
+      },
+      body: {
+        xxs: "",
+        xs: "",
+        s: "",
+        m: "",
+        l: "",
+        xl: "",
+      },
+      heading: {
+        xs: "",
+        s: "",
+        m: "",
+        l: "",
+        xl: "",
+      },
+      button: {
+        s: "",
+        m: "",
+        l: "",
+      },
+      label: {
+        s: "",
+        m: "",
+        l: "",
+      },
+    },
+    fontWeight: {
+      regular: "",
+      medium: "",
+      semiBold: "",
+      bold: "",
+    },
+    lineWeight: {
+      hero: {
+        caption: "",
+      },
+      body: {
+        xxs: "",
+        xs: "",
+        s: "",
+        m: "",
+        l: "",
+        xl: "",
+      },
+      heading: {
+        xs: "",
+        s: "",
+        m: "",
+        l: "",
+        xl: "",
+      },
+      button: {
+        s: "",
+        m: "",
+        l: "",
+      },
+      label: {
+        s: "",
+        m: "",
+        l: "",
+      },
+    },
+    elevation: {
+      none: "",
+      top: {
+        "1": "",
+        "2": "",
+        "3": "",
+        "4": "",
+        "5": "",
+      },
+      bottom: {
+        "1": "",
+        "2": "",
+        "3": "",
+        "4": "",
+        "5": "",
+      },
+    },
+    shape: {
+      border: {
+        radius: {
+          none: "",
+          "2xs": "",
+          xs: "",
+          sm: "",
+          md: "",
+          lg: "",
+          xl: "",
+          "2xl": "",
+          pill: "",
+          button: "",
+          input: "",
+        },
+        width: {
+          "1": "",
+          "2": "",
+          "3": "",
+          "4": "",
+          "5": "",
+        },
+      },
+    },
+    spacing: {
+      "4xs": "",
+      "3xs": "",
+      "2xs": "",
+      xs: "",
+      s: "",
+      md: "",
+      lg: "",
+      xl: "",
+      "2xl": "",
+      "3xl": "",
+      "4xl": "",
+      "5xl": "",
+      "6xl": "",
+      "7xl": "",
+      "8xl": "",
+    },
+    zIndex: {
+      100: "",
+      200: "",
+      300: "",
+      400: "",
+      500: "",
+      600: "",
+      700: "",
+      800: "",
+      900: "",
+    },
+    breakpoint: {
+      xs: "",
+      md: "",
+      lg: "",
+      xl: "",
+    },
+  },
+  (_value, path) => `rarui-${path.join("-")}`,
+);

package/src/themes/globals.css.ts

@@ -0,0 +1,256 @@
+import { createGlobalTheme } from "@vanilla-extract/css";
+import tokens from "@rarui/tokens/dist/js/tokens";
+
+import { vars } from "./contract.css";
+
+const colors = tokens.color.light;
+const elevation = tokens.elevation.light;
+const fontFamily = tokens.font.family;
+const fontSize = tokens.font.size;
+const fontWeight = tokens.font.weight;
+const lineWeight = tokens.line.height;
+const { spacing, breakpoint, zIndex, shape } = tokens;
+
+export const globalTheme = {
+  colors: {
+    surface: {
+      background: colors.surface.background.value,
+      brand: colors.surface.brand.value,
+      "brand-hover": colors.surface["brand-hover"].value,
+      "brand-press": colors.surface["brand-press"].value,
+      "brand-secondary": colors.surface["brand-secondary"].value,
+      "brand-secondary-hover": colors.surface["brand-secondary-hover"].value,
+      "brand-secondary-press": colors.surface["brand-secondary-press"].value,
+      "brand-secondary-subdued":
+        colors.surface["brand-secondary-subdued"].value,
+      "brand-subdued": colors.surface["brand-subdued"].value,
+      disabled: colors.surface.disabled.value,
+      error: colors.surface.error.value,
+      "error-hover": colors.surface["error-hover"].value,
+      "error-press": colors.surface["error-press"].value,
+      "error-subdued": colors.surface["error-subdued"].value,
+      hover: colors.surface.hover.value,
+      info: colors.surface.info.value,
+      "info-hover": colors.surface["info-hover"].value,
+      "info-press": colors.surface["info-press"].value,
+      "info-subdued": colors.surface["info-subdued"].value,
+      invert: colors.surface.invert.value,
+      "invert-disabled": colors.surface["invert-disabled"].value,
+      "invert-hover": colors.surface["invert-hover"].value,
+      "invert-press": colors.surface["invert-press"].value,
+      "invert-secondary": colors.surface["invert-secondary"].value,
+      "on-brand-hover": colors.surface["on-brand-hover"].value,
+      "on-brand-press": colors.surface["on-brand-press"].value,
+      "on-brand-secondary-hover":
+        colors.surface["on-brand-secondary-hover"].value,
+      "on-brand-secondary-press":
+        colors.surface["on-brand-secondary-press"].value,
+      "on-error-hover": colors.surface["on-error-hover"].value,
+      "on-error-press": colors.surface["on-error-press"].value,
+      "on-info-hover": colors.surface["on-info-hover"].value,
+      "on-info-press": colors.surface["on-info-press"].value,
+      "on-success-hover": colors.surface["on-success-hover"].value,
+      "on-success-press": colors.surface["on-success-press"].value,
+      "on-warning-hover": colors.surface["on-warning-hover"].value,
+      "on-warning-press": colors.surface["on-warning-press"].value,
+      overlay: colors.surface.overlay.value,
+      press: colors.surface.press.value,
+      primary: colors.surface.primary.value,
+      secondary: colors.surface.secondary.value,
+      success: colors.surface.success.value,
+      "success-hover": colors.surface["success-hover"].value,
+      "success-press": colors.surface["success-press"].value,
+      "success-subdued": colors.surface["success-subdued"].value,
+      warning: colors.surface.warning.value,
+      "warning-hover": colors.surface["warning-hover"].value,
+      "warning-press": colors.surface["warning-press"].value,
+      "warning-subdued": colors.surface["warning-subdued"].value,
+    },
+    content: {
+      brand: colors.content.brand.value,
+      "brand-alt": colors.content["brand-alt"].value,
+      "brand-secondary": colors.content["brand-secondary"].value,
+      disabled: colors.content.disabled.value,
+      error: colors.content.error.value,
+      info: colors.content.info.value,
+      invert: colors.content.invert.value,
+      "invert-disabled": colors.content["invert-disabled"].value,
+      "invert-secondary": colors.content["invert-secondary"].value,
+      "on-brand": colors.content["on-brand"].value,
+      "on-brand-secondary": colors.content["on-brand-secondary"].value,
+      "on-error": colors.content["on-error"].value,
+      "on-info": colors.content["on-info"].value,
+      "on-success": colors.content["on-success"].value,
+      "on-warning": colors.content["on-warning"].value,
+      primary: colors.content.primary.value,
+      secondary: colors.content.secondary.value,
+      success: colors.content.success.value,
+      warning: colors.content.warning.value,
+      "warning-alt": colors.content["warning-alt"].value,
+    },
+    border: {
+      brand: colors.border.brand.value,
+      "brand-alt": colors.border["brand-alt"].value,
+      "brand-secondary": colors.border["brand-secondary"].value,
+      disabled: colors.border.disabled.value,
+      divider: colors.border.divider.value,
+      error: colors.border.error.value,
+      info: colors.border.info.value,
+      invert: colors.border.invert.value,
+      "invert-disabled": colors.border["invert-disabled"].value,
+      primary: colors.border.primary.value,
+      secondary: colors.border.secondary.value,
+      subdued: colors.border.subdued.value,
+      success: colors.border.success.value,
+      warning: colors.border.warning.value,
+    },
+  },
+  fontFamily: {
+    inter: fontFamily.inter.value,
+  },
+  fontSize: {
+    hero: {
+      caption: fontSize.hero.value,
+    },
+    body: {
+      xxs: fontSize.body.xxs.value,
+      xs: fontSize.body.xs.value,
+      s: fontSize.body.s.value,
+      m: fontSize.body.m.value,
+      l: fontSize.body.l.value,
+      xl: fontSize.body.xl.value,
+    },
+    heading: {
+      xs: fontSize.heading.xs.value,
+      s: fontSize.heading.s.value,
+      m: fontSize.heading.m.value,
+      l: fontSize.heading.l.value,
+      xl: fontSize.heading.xl.value,
+    },
+    button: {
+      s: fontSize.button.s.value,
+      m: fontSize.button.m.value,
+      l: fontSize.button.l.value,
+    },
+    label: {
+      s: fontSize.label.s.value,
+      m: fontSize.label.m.value,
+      l: fontSize.label.l.value,
+    },
+  },
+  fontWeight: {
+    regular: fontWeight.regular.value,
+    medium: fontWeight.medium.value,
+    semiBold: fontWeight["semi-bold"].value,
+    bold: fontWeight.bold.value,
+  },
+  lineWeight: {
+    hero: {
+      caption: lineWeight.hero.value,
+    },
+    body: {
+      xxs: lineWeight.body.xxs.value,
+      xs: lineWeight.body.xs.value,
+      s: lineWeight.body.s.value,
+      m: lineWeight.body.m.value,
+      l: lineWeight.body.l.value,
+      xl: lineWeight.body.xl.value,
+    },
+    heading: {
+      xs: lineWeight.heading.xs.value,
+      s: lineWeight.heading.s.value,
+      m: lineWeight.heading.m.value,
+      l: lineWeight.heading.l.value,
+      xl: lineWeight.heading.xl.value,
+    },
+    button: {
+      s: lineWeight.button.s.value,
+      m: lineWeight.button.m.value,
+      l: lineWeight.button.l.value,
+    },
+    label: {
+      s: lineWeight.label.s.value,
+      m: lineWeight.label.m.value,
+      l: lineWeight.label.l.value,
+    },
+  },
+  elevation: {
+    none: elevation.none.value,
+    top: {
+      "1": elevation.top[1].value,
+      "2": elevation.top[2].value,
+      "3": elevation.top[3].value,
+      "4": elevation.top[4].value,
+      "5": elevation.top[5].value,
+    },
+    bottom: {
+      "1": elevation.bottom[1].value,
+      "2": elevation.bottom[2].value,
+      "3": elevation.bottom[3].value,
+      "4": elevation.bottom[4].value,
+      "5": elevation.bottom[5].value,
+    },
+  },
+  shape: {
+    border: {
+      radius: {
+        none: shape.border.radius.none.value,
+        "2xs": shape.border.radius["2xs"].value,
+        xs: shape.border.radius.xs.value,
+        sm: shape.border.radius.sm.value,
+        md: shape.border.radius.md.value,
+        lg: shape.border.radius.lg.value,
+        xl: shape.border.radius.xl.value,
+        "2xl": shape.border.radius["2xl"].value,
+        pill: shape.border.radius.pill.value,
+        button: shape.border.radius.button.value,
+        input: shape.border.radius.input.value,
+      },
+      width: {
+        "1": shape.border.width[1].value,
+        "2": shape.border.width[2].value,
+        "3": shape.border.width[3].value,
+        "4": shape.border.width[4].value,
+        "5": shape.border.width[5].value,
+      },
+    },
+  },
+  spacing: {
+    "4xs": spacing["4xs"].value,
+    "3xs": spacing["3xs"].value,
+    "2xs": spacing["2xs"].value,
+    xs: spacing.xs.value,
+    s: spacing.s.value,
+    md: spacing.md.value,
+    lg: spacing.lg.value,
+    xl: spacing.xl.value,
+    "2xl": spacing["2xl"].value,
+    "3xl": spacing["3xl"].value,
+    "4xl": spacing["4xl"].value,
+    "5xl": spacing["5xl"].value,
+    "6xl": spacing["6xl"].value,
+    "7xl": spacing["7xl"].value,
+    "8xl": spacing["8xl"].value,
+  },
+  zIndex: {
+    100: zIndex[100].value,
+    200: zIndex[200].value,
+    300: zIndex[300].value,
+    400: zIndex[400].value,
+    500: zIndex[500].value,
+    600: zIndex[600].value,
+    700: zIndex[700].value,
+    800: zIndex[800].value,
+    900: zIndex[900].value,
+  },
+  breakpoint: {
+    xs: breakpoint.xs.value,
+    md: breakpoint.md.value,
+    lg: breakpoint.lg.value,
+    xl: breakpoint.xl.value,
+  },
+};
+
+createGlobalTheme(":root", vars, globalTheme);
+
+export const varsThemeBase = vars;

package/src/themes/index.ts

@@ -0,0 +1,2 @@
+export * from "./mediaQueries";
+export * from "./globals.css";

package/src/themes/mediaQueries.ts

@@ -0,0 +1,10 @@
+import tokens from "@rarui/tokens/dist/js/tokens";
+
+const { breakpoint } = tokens;
+
+export const mediaQueries = {
+  xs: () => `screen and (min-width: ${breakpoint.xs.value})`,
+  md: () => `screen and (min-width: ${breakpoint.md.value})`,
+  lg: () => `screen and (min-width: ${breakpoint.lg.value})`,
+  xl: () => `screen and (min-width: ${breakpoint.xl.value})`,
+};

package/src/themes/rarui-theme-dark.css.ts

@@ -0,0 +1,126 @@
+import { createTheme } from "@vanilla-extract/css";
+import tokens from "@rarui/tokens/dist/js/tokens";
+
+import { vars } from "./contract.css";
+import { globalTheme } from "./globals.css";
+
+const colors = tokens.color.dark;
+const elevation = tokens.elevation.dark;
+
+const darkTheme = {
+  ...globalTheme,
+  colors: {
+    surface: {
+      background: colors.surface.background.value,
+      brand: colors.surface.brand.value,
+      "brand-hover": colors.surface["brand-hover"].value,
+      "brand-press": colors.surface["brand-press"].value,
+      "brand-secondary": colors.surface["brand-secondary"].value,
+      "brand-secondary-hover": colors.surface["brand-secondary-hover"].value,
+      "brand-secondary-press": colors.surface["brand-secondary-press"].value,
+      "brand-secondary-subdued":
+        colors.surface["brand-secondary-subdued"].value,
+      "brand-subdued": colors.surface["brand-subdued"].value,
+      disabled: colors.surface.disabled.value,
+      error: colors.surface.error.value,
+      "error-hover": colors.surface["error-hover"].value,
+      "error-press": colors.surface["error-press"].value,
+      "error-subdued": colors.surface["error-subdued"].value,
+      hover: colors.surface.hover.value,
+      info: colors.surface.info.value,
+      "info-hover": colors.surface["info-hover"].value,
+      "info-press": colors.surface["info-press"].value,
+      "info-subdued": colors.surface["info-subdued"].value,
+      invert: colors.surface.invert.value,
+      "invert-disabled": colors.surface["invert-disabled"].value,
+      "invert-hover": colors.surface["invert-hover"].value,
+      "invert-press": colors.surface["invert-press"].value,
+      "invert-secondary": colors.surface["invert-secondary"].value,
+      "on-brand-hover": colors.surface["on-brand-hover"].value,
+      "on-brand-press": colors.surface["on-brand-press"].value,
+      "on-brand-secondary-hover":
+        colors.surface["on-brand-secondary-hover"].value,
+      "on-brand-secondary-press":
+        colors.surface["on-brand-secondary-press"].value,
+      "on-error-hover": colors.surface["on-error-hover"].value,
+      "on-error-press": colors.surface["on-error-press"].value,
+      "on-info-hover": colors.surface["on-info-hover"].value,
+      "on-info-press": colors.surface["on-info-press"].value,
+      "on-success-hover": colors.surface["on-success-hover"].value,
+      "on-success-press": colors.surface["on-success-press"].value,
+      "on-warning-hover": colors.surface["on-warning-hover"].value,
+      "on-warning-press": colors.surface["on-warning-press"].value,
+      overlay: colors.surface.overlay.value,
+      press: colors.surface.press.value,
+      primary: colors.surface.primary.value,
+      secondary: colors.surface.secondary.value,
+      success: colors.surface.success.value,
+      "success-hover": colors.surface["success-hover"].value,
+      "success-press": colors.surface["success-press"].value,
+      "success-subdued": colors.surface["success-subdued"].value,
+      warning: colors.surface.warning.value,
+      "warning-hover": colors.surface["warning-hover"].value,
+      "warning-press": colors.surface["warning-press"].value,
+      "warning-subdued": colors.surface["warning-subdued"].value,
+    },
+    content: {
+      brand: colors.content.brand.value,
+      "brand-alt": colors.content["brand-alt"].value,
+      "brand-secondary": colors.content["brand-secondary"].value,
+      disabled: colors.content.disabled.value,
+      error: colors.content.error.value,
+      info: colors.content.info.value,
+      invert: colors.content.invert.value,
+      "invert-disabled": colors.content["invert-disabled"].value,
+      "invert-secondary": colors.content["invert-secondary"].value,
+      "on-brand": colors.content["on-brand"].value,
+      "on-brand-secondary": colors.content["on-brand-secondary"].value,
+      "on-error": colors.content["on-error"].value,
+      "on-info": colors.content["on-info"].value,
+      "on-success": colors.content["on-success"].value,
+      "on-warning": colors.content["on-warning"].value,
+      primary: colors.content.primary.value,
+      secondary: colors.content.secondary.value,
+      success: colors.content.success.value,
+      warning: colors.content.warning.value,
+      "warning-alt": colors.content["warning-alt"].value,
+    },
+    border: {
+      brand: colors.border.brand.value,
+      "brand-alt": colors.border["brand-alt"].value,
+      "brand-secondary": colors.border["brand-secondary"].value,
+      disabled: colors.border.disabled.value,
+      divider: colors.border.divider.value,
+      error: colors.border.error.value,
+      info: colors.border.info.value,
+      invert: colors.border.invert.value,
+      "invert-disabled": colors.border["invert-disabled"].value,
+      primary: colors.border.primary.value,
+      secondary: colors.border.secondary.value,
+      subdued: colors.border.subdued.value,
+      success: colors.border.success.value,
+      warning: colors.border.warning.value,
+    },
+  },
+  elevation: {
+    none: elevation.none.value,
+    top: {
+      "1": elevation.top[1].value,
+      "2": elevation.top[2].value,
+      "3": elevation.top[3].value,
+      "4": elevation.top[4].value,
+      "5": elevation.top[5].value,
+    },
+    bottom: {
+      "1": elevation.bottom[1].value,
+      "2": elevation.bottom[2].value,
+      "3": elevation.bottom[3].value,
+      "4": elevation.bottom[4].value,
+      "5": elevation.bottom[5].value,
+    },
+  },
+};
+
+export const variables = createTheme(vars, darkTheme);
+
+export default variables;

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src"]
+}

package/webpack.config.ts

@@ -0,0 +1,30 @@
+import path from "path";
+import { plugins, rules, configuration, utils } from "@rarui/webpack";
+
+const baseConfig = {
+  entry: {
+    "./themes/dark": "./src/themes/rarui-theme-dark.css.ts",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    library: "@rarui/styles",
+  },
+  module: { rules: [rules.cssLoaderExtractRule] },
+};
+
+const config = configuration.getConfiguration(baseConfig);
+
+delete config.plugins;
+config.plugins = [
+  plugins.vanillaExtractPlugin,
+  plugins.miniCssExtractPlugin,
+  plugins.cssHashRemoverPlugin,
+  plugins.dtsBundleGeneratorPlugin({
+    entries: [
+      `node ${utils.rootDir}/node_modules/.bin/dts-bundle-generator -o ./dist/index.d.ts ./src/index.ts`,
+      `node ${utils.rootDir}/node_modules/.bin/dts-bundle-generator -o ./dist/themes/dark.d.ts ./src/themes/rarui-theme-dark.css.ts`,
+    ],
+  }),
+];
+
+export default () => config;