@canopy-iiif/app 0.10.8 → 0.10.10

package/ui/tailwind-canopy-iiif-preset.js

@@ -6,7 +6,6 @@
  * Tailwind theme.extend values to those variables for easy use in utilities.
  */
 const plugin = require("tailwindcss/plugin");
-const path = require("path");
 const {loadCanopyTheme} = require("./theme");
 
 function compileVarsCss() {
@@ -17,91 +16,9 @@ function compileVarsCss() {
     }
     return theme.css;
   }
-  try {
-    const sass = require("sass");
-    const entry = path.join(__dirname, "styles", "variables.emit.scss");
-    const out = sass.compile(entry, {style: "expanded"});
-    return out && out.css ? out.css : "";
-  } catch (_) {
-    return "";
-  }
 }
 
 module.exports = {
-  theme: {
-    container: {center: true, padding: "1rem"},
-    extend: {
-      colors: {
-        brand: {
-          DEFAULT: "var(--color-brand-default)",
-          50: "var(--color-brand-50)",
-          100: "var(--color-brand-100)",
-          200: "var(--color-brand-200)",
-          300: "var(--color-brand-300)",
-          400: "var(--color-brand-400)",
-          500: "var(--color-brand-500)",
-          600: "var(--color-brand-600)",
-          700: "var(--color-brand-700)",
-          800: "var(--color-brand-800)",
-          900: "var(--color-brand-900)",
-        },
-        gray: {
-          DEFAULT: "var(--color-gray-default)",
-          50: "var(--color-gray-50)",
-          100: "var(--color-gray-100)",
-          200: "var(--color-gray-200)",
-          300: "var(--color-gray-300)",
-          400: "var(--color-gray-400)",
-          500: "var(--color-gray-500)",
-          600: "var(--color-gray-600)",
-          700: "var(--color-gray-700)",
-          800: "var(--color-gray-800)",
-          900: "var(--color-gray-900)",
-        },
-        muted: "var(--color-gray-muted)",
-        white: "#ffffff",
-        black: "#000000",
-      },
-      fontFamily: {
-        mono: ["var(--font-mono)"],
-        sans: ["var(--font-sans)"],
-        serif: ["var(--font-serif)"],
-      },
-      maxWidth: {
-        content: "var(--max-w-content)",
-        wide: "var(--max-w-wide)",
-      },
-      fontSize: {
-        xs: ["var(--font-size-xs)", {lineHeight: "var(--line-height-xs)"}],
-        sm: ["var(--font-size-sm)", {lineHeight: "var(--line-height-sm)"}],
-        base: [
-          "var(--font-size-base)",
-          {lineHeight: "var(--line-height-base)"},
-        ],
-        lg: ["var(--font-size-lg)", {lineHeight: "var(--line-height-lg)"}],
-        xl: ["var(--font-size-xl)", {lineHeight: "var(--line-height-xl)"}],
-        "2xl": ["var(--font-size-2xl)", {lineHeight: "var(--line-height-2xl)"}],
-        "3xl": ["var(--font-size-3xl)", {lineHeight: "var(--line-height-3xl)"}],
-      },
-      borderRadius: {
-        sm: "var(--radius-sm)",
-        DEFAULT: "var(--radius-default)",
-        md: "var(--radius-md)",
-      },
-      boxShadow: {
-        sm: "var(--shadow-sm)",
-        DEFAULT: "var(--shadow)",
-        md: "var(--shadow-md)",
-        lg: "var(--shadow-lg)",
-      },
-      transitionDuration: {
-        canopyFast: "var(--duration-fast)",
-      },
-      transitionTimingFunction: {
-        canopy: "var(--easing-standard)",
-      },
-    },
-  },
   plugins: [
     // Inject CSS variables (tokens) derived from Sass variables
     plugin(function ({addBase, postcss}) {

package/ui/theme.js

@@ -8,8 +8,6 @@ const DEFAULT_GRAY = "slate";
 const DEFAULT_APPEARANCE = "light";
 const DEBUG_FLAG_RAW = String(process.env.CANOPY_DEBUG_THEME || "");
 const DEBUG_ENABLED = /^(1|true|yes|on)$/i.test(DEBUG_FLAG_RAW.trim());
-const SASS_STYLES_DIR = path.join(__dirname, "styles");
-const SASS_VARIABLES_ENTRY = path.join(SASS_STYLES_DIR, "_variables.scss");
 
 function debugLog(...args) {
   if (!DEBUG_ENABLED) return;
@@ -18,31 +16,6 @@ function debugLog(...args) {
   } catch (_) {}
 }
 
-function loadSassVariableTokens() {
-  try {
-    if (!fs.existsSync(SASS_VARIABLES_ENTRY)) return {map: {}, css: ""};
-    const sass = require("sass");
-    const source = `@use 'sass:meta';\n@use 'sass:string';\n@use 'variables';\n$__canopy_tokens: meta.module-variables('variables');\n@function canopy-token-name($name) {\n  $identifier: #{$name};\n  @if $identifier == null or $identifier == '' {\n    @return null;\n  }\n  @if string.slice($identifier, 1, 1) == '_' {\n    @return null;\n  }\n  @return '--#{$identifier}';\n}\n@mixin canopy-emit-tokens() {\n  @each $name, $value in $__canopy_tokens {\n    $css-name: canopy-token-name($name);\n    @if $css-name {\n      #{$css-name}: #{meta.inspect($value)};\n    }\n  }\n}\n:root {\n  @include canopy-emit-tokens();\n}\n:host {\n  @include canopy-emit-tokens();\n}\n`;
-    const result = sass.compileString(source, {
-      loadPaths: [SASS_STYLES_DIR],
-      style: "expanded",
-    });
-    const css = (result && result.css ? result.css : "").trim();
-    const vars = {};
-    const regex = /--([A-Za-z0-9_-]+)\s*:\s*([^;]+);/g;
-    let match;
-    while ((match = regex.exec(css))) {
-      vars[`--${match[1]}`] = match[2].trim();
-    }
-    return {map: vars, css};
-  } catch (error) {
-    debugLog(
-      "failed to compile Sass variables",
-      error && error.message ? error.message : error
-    );
-    return {map: {}, css: ""};
-  }
-}
 const LEVELS = [
   "50",
   "100",
@@ -267,12 +240,8 @@ function loadCanopyTheme(options = {}) {
     });
   }
 
-  const sassTokens = loadSassVariableTokens();
   const dynamicVars = buildVariablesMap(accentScale, grayScale, {appearance});
-  const mergedVars = {
-    ...(sassTokens && sassTokens.map ? sassTokens.map : {}),
-    ...dynamicVars,
-  };
+  const mergedVars = dynamicVars;
   const css = variablesToCss(mergedVars);
   const sassConfig = buildSassConfig(accentScale, grayScale);