fix(bin): add generateTheme bin script for making .css file

seems like the best path to SSR
tone-row · Feb 27, 2021 · 0584a31 · 0584a31 · vercel · Feb 27, 2021
1 parent 36e42bb
commit 0584a31
Show file tree

Hide file tree

Showing 12 changed files with 454 additions and 304 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "export": "next export",
-    "start": "next start"
+    "start": "next start",
+    "theme": "generateTheme styles/slang.config.json styles/slang.css"
   },
   "dependencies": {
     "@tone-row/slang": "0.0.0-development",

diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -1,19 +1,12 @@
 import "../styles/globals.css";
+import "../styles/slang.css";
 import DocsLayout from "../components/DocsLayout";
-import { config } from "../styles/slang.config";
-import { getThemeCss } from "@tone-row/slang";
-import Head from "next/head";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <>
-      <Head>
-        <style>{getThemeCss(config)}</style>
-      </Head>
-      <DocsLayout>
-        <Component {...pageProps} />
-      </DocsLayout>
-    </>
+    <DocsLayout>
+      <Component {...pageProps} />
+    </DocsLayout>
   );
 }
 

diff --git a/docs/styles/slang.config.json b/docs/styles/slang.config.json
@@ -0,0 +1,34 @@
+{
+  "baseFontFamily": "Neue Montreal",
+  "baseFontSizePx": 19.25,
+  "baseFontSizeMobilePx": 16.84,
+  "baseFontLineHeight": 1.29,
+  "baseFontLineHeightMobile": 1.26,
+  "baseContainerSizePx": 654,
+  "baseSpacingPx": 22.4,
+  "baseVerticalSpacingDivisor": 3,
+  "baseHorizontalSpacingDivisor": 90,
+  "baseSpacingScale": 1.1,
+  "errorCorrectionTopPx": -1.32,
+  "errorCorrectionTopScale": 1.5,
+  "errorCorrectionBottomPx": 1.67,
+  "errorCorrectionBottomScale": 1.486,
+  "typeScaleBase": 1.421,
+  "typeScaleBaseMobile": 1.16,
+  "inverseTypeScaleLineHeight": 0.96,
+  "inverseTypeScaleLineHeightMobile": 0.969,
+  "mappingToUserAgentHeaders": 4,
+  "smallestBorderRadiusPx": 3,
+  "fluidMinScreenSizePx": 375,
+  "fluidMaxScreenSizePx": 1200,
+  "colorStore": {
+    "palette": {
+      "white": ["#ffffff", "#fafafa", "#dcdcdc"],
+      "black": ["#000000"]
+    },
+    "colors": {
+      "background": "var(--palette-white-0)",
+      "foreground": "var(--palette-black-0)"
+    }
+  }
+}
diff --git a/docs/styles/slang.config.ts b/docs/styles/slang.config.ts
diff --git a/docs/styles/slang.css b/docs/styles/slang.css
@@ -0,0 +1,115 @@
+:root {
+	--base-font-family:Neue Montreal;
+	--base-font-size-px:19.25px;
+	--base-font-size:19.25;
+	--base-font-size-mobile-px:16.84px;
+	--base-font-size-mobile:16.84;
+	--base-font-line-height:1.29;
+	--base-font-line-height-mobile:1.26;
+	--base-container-size-px:654px;
+	--base-container-size:654;
+	--base-spacing-px:22.4px;
+	--base-spacing:22.4;
+	--base-vertical-spacing-divisor:3;
+	--base-horizontal-spacing-divisor:90;
+	--base-spacing-scale:1.1;
+	--error-correction-top-px:-1.32px;
+	--error-correction-top:-1.32;
+	--error-correction-top-scale:1.5;
+	--error-correction-bottom-px:1.67px;
+	--error-correction-bottom:1.67;
+	--error-correction-bottom-scale:1.486;
+	--type-scale-base:1.421;
+	--type-scale-base-mobile:1.16;
+	--inverse-type-scale-line-height:0.96;
+	--inverse-type-scale-line-height-mobile:0.969;
+	--mapping-to-user-agent-headers:4;
+	--smallest-border-radius-px:3px;
+	--smallest-border-radius:3;
+	--fluid-min-screen-size-px:375px;
+	--fluid-min-screen-size:375;
+	--fluid-max-screen-size-px:1200px;
+	--fluid-max-screen-size:1200;
+	--space-v-px:7.466666666666666px;
+	--space-v:7.466666666666666;
+	--space-h-px:7.266666666666667px;
+	--space-h:7.266666666666667;
+	--multiplier--3:0.3485120239580994;
+	--multiplier--2:0.4952355860444593;
+	--multiplier--1:0.7037297677691766;
+	--multiplier-0:1;
+	--multiplier-1:1.421;
+	--multiplier-2:2.019241;
+	--multiplier-3:2.8693414610000003;
+	--multiplier-4:4.077334216081001;
+	--multiplier-5:5.793891921051102;
+	--multiplier-6:8.233120419813616;
+	--multiplier-7:11.699264116555149;
+	--multiplier-8:16.624654309624866;
+	--mobile-multiplier--3:0.6406576735413507;
+	--mobile-multiplier--2:0.7431629013079668;
+	--mobile-multiplier--1:0.8620689655172414;
+	--mobile-multiplier-0:1;
+	--mobile-multiplier-1:1.16;
+	--mobile-multiplier-2:1.3456;
+	--mobile-multiplier-3:1.5608959999999996;
+	--mobile-multiplier-4:1.8106393599999995;
+	--mobile-multiplier-5:2.100341657599999;
+	--mobile-multiplier-6:2.436396322815999;
+	--mobile-multiplier-7:2.8262197344665587;
+	--mobile-multiplier-8:3.2784148919812077;
+	--lh-multiplier--3:1.1302806712962965;
+	--lh-multiplier--2:1.0850694444444444;
+	--lh-multiplier--1:1.0416666666666667;
+	--lh-multiplier-0:1;
+	--lh-multiplier-1:0.96;
+	--lh-multiplier-2:0.9216;
+	--lh-multiplier-3:0.8847359999999999;
+	--lh-multiplier-4:0.8493465599999999;
+	--lh-multiplier-5:0.8153726975999999;
+	--lh-multiplier-6:0.7827577896959999;
+	--lh-multiplier-7:0.7514474781081598;
+	--lh-multiplier-8:0.7213895789838334;
+	--lh-mobile-multiplier--3:1.0990783899076186;
+	--lh-mobile-multiplier--2:1.0650069598204825;
+	--lh-mobile-multiplier--1:1.0319917440660475;
+	--lh-mobile-multiplier-0:1;
+	--lh-mobile-multiplier-1:0.969;
+	--lh-mobile-multiplier-2:0.9389609999999999;
+	--lh-mobile-multiplier-3:0.9098532089999999;
+	--lh-mobile-multiplier-4:0.8816477595209999;
+	--lh-mobile-multiplier-5:0.8543166789758488;
+	--lh-mobile-multiplier-6:0.8278328619275975;
+	--lh-mobile-multiplier-7:0.802170043207842;
+	--lh-mobile-multiplier-8:0.7773027718683989;
+	--error-top-multiplier--3:0.2962962962962963;
+	--error-top-multiplier--2:0.4444444444444444;
+	--error-top-multiplier--1:0.6666666666666666;
+	--error-top-multiplier-0:1;
+	--error-top-multiplier-1:1.5;
+	--error-top-multiplier-2:2.25;
+	--error-top-multiplier-3:3.375;
+	--error-top-multiplier-4:5.0625;
+	--error-top-multiplier-5:7.59375;
+	--error-top-multiplier-6:11.390625;
+	--error-top-multiplier-7:17.0859375;
+	--error-top-multiplier-8:25.62890625;
+	--error-bottom-multiplier--3:0.30474989996096935;
+	--error-bottom-multiplier--2:0.4528583513420005;
+	--error-bottom-multiplier--1:0.6729475100942126;
+	--error-bottom-multiplier-0:1;
+	--error-bottom-multiplier-1:1.486;
+	--error-bottom-multiplier-2:2.208196;
+	--error-bottom-multiplier-3:3.281379256;
+	--error-bottom-multiplier-4:4.876129574416;
+	--error-bottom-multiplier-5:7.245928547582176;
+	--error-bottom-multiplier-6:10.767449821707114;
+	--error-bottom-multiplier-7:16.00043043505677;
+	--error-bottom-multiplier-8:23.776639626494358;
+	--palette-white-0:#ffffff;
+	--palette-white-1:#fafafa;
+	--palette-white-2:#dcdcdc;
+	--palette-black-0:#000000;
+	--color-background:var(--palette-white-0);
+	--color-foreground:var(--palette-black-0);
+ }
diff --git a/slang/package.json b/slang/package.json
@@ -3,6 +3,9 @@
   "version": "0.0.0-development",
   "main": "build/index.js",
   "module": "build/index.es.js",
+  "bin": {
+    "generateTheme": "build/generateTheme.js"
+  },
   "types": "build/index.d.ts",
   "repository": {
     "url": "https://github.com/tone-row/slang"

diff --git a/slang/rollup.config.js b/slang/rollup.config.js
@@ -5,29 +5,43 @@ import typescript from "rollup-plugin-typescript2";
 import postcss from "rollup-plugin-postcss";
 import packageJson from "./package.json";
 
-export default {
-  input: "./src/index.ts",
-  output: [
-    {
-      file: packageJson.main,
-      format: "cjs",
-      sourcemap: true,
-    },
-    {
-      file: packageJson.module,
-      format: "esm",
-      sourcemap: true,
-    },
-  ],
-  plugins: [
-    peerDepsExternal(),
-    postcss({
-      extract: false,
-      autoModules: true,
-      use: ["sass"],
-    }),
-    resolve(),
-    commonjs(),
-    typescript(),
-  ],
-};
+export default [
+  {
+    input: "./src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      postcss({
+        extract: false,
+        autoModules: true,
+        use: ["sass"],
+      }),
+      resolve(),
+      commonjs(),
+      typescript(),
+    ],
+  },
+  {
+    input: "./src/generateTheme.ts",
+    output: [
+      {
+        banner: "#!/usr/bin/env node",
+        file: packageJson.bin.generateTheme,
+        format: "cjs",
+        sourcemap: true,
+      },
+    ],
+    plugins: [resolve(), typescript()],
+  },
+];