From 855c94563df2fd740320c78fe40afee126ff47b4 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Wed, 18 Jan 2023 15:48:10 +0330 Subject: [PATCH] refactor(uniquely/soffit-site-pwa): build with esbuild --- uniquely/soffit-site-pwa/CHANGELOG.md | 44 -- uniquely/soffit-site-pwa/esbuild.mjs | 144 ++++ uniquely/soffit-site-pwa/package.json | 30 +- .../{ => res}/image/favicon.ico | Bin .../{ => res}/image/icon-180.png | Bin .../{ => res}/image/icon-192-maskable.png | Bin .../{ => res}/image/icon-192.png | Bin .../{ => res}/image/icon-512-maskable.png | Bin .../{ => res}/image/icon-512.png | Bin .../{ => res}/image/soffit.jpg | Bin uniquely/soffit-site-pwa/{ => res}/index.html | 10 +- .../soffit-site-pwa/{ => res}/l10n/en-US.json | 0 .../soffit-site-pwa/{ => res}/l10n/fa-IR.json | 0 .../soffit-site-pwa/{ => res}/manifest.json | 0 uniquely/soffit-site-pwa/{ => res}/robots.txt | 0 uniquely/soffit-site-pwa/rollup.config.js | 78 -- .../src/{pwa-root.ts => alwatr-pwa.ts} | 9 +- uniquely/soffit-site-pwa/style/body.css | 60 -- .../soffit-site-pwa/style/helper/colors.css | 180 ----- .../soffit-site-pwa/style/helper/demo.css | 273 ------- .../style/helper/typography.css | 105 --- uniquely/soffit-site-pwa/style/index.css | 13 - .../soffit-site-pwa/style/mdc-grid-temp.css | 718 ------------------ uniquely/soffit-site-pwa/style/safe-area.css | 23 - .../soffit-site-pwa/style/tokens/color.css | 124 --- .../style/tokens/elevation-extra.css | 97 --- .../soffit-site-pwa/style/tokens/motion.css | 16 - .../style/tokens/palette-hct.css | 122 --- .../style/tokens/palette-hsl.css | 122 --- .../soffit-site-pwa/style/tokens/radius.css | 8 - .../style/tokens/scrollbar.css | 14 - .../soffit-site-pwa/style/tokens/spacing.css | 58 -- .../soffit-site-pwa/style/tokens/surface.css | 50 -- .../style/tokens/typography.css | 117 --- .../soffit-site-pwa/style/tokens/z-index.css | 14 - .../soffit-site-pwa/web-dev-server.config.js | 10 +- yarn.lock | 5 + 37 files changed, 168 insertions(+), 2276 deletions(-) delete mode 100644 uniquely/soffit-site-pwa/CHANGELOG.md create mode 100755 uniquely/soffit-site-pwa/esbuild.mjs rename uniquely/soffit-site-pwa/{ => res}/image/favicon.ico (100%) rename uniquely/soffit-site-pwa/{ => res}/image/icon-180.png (100%) rename uniquely/soffit-site-pwa/{ => res}/image/icon-192-maskable.png (100%) rename uniquely/soffit-site-pwa/{ => res}/image/icon-192.png (100%) rename uniquely/soffit-site-pwa/{ => res}/image/icon-512-maskable.png (100%) rename uniquely/soffit-site-pwa/{ => res}/image/icon-512.png (100%) rename uniquely/soffit-site-pwa/{ => res}/image/soffit.jpg (100%) rename uniquely/soffit-site-pwa/{ => res}/index.html (90%) rename uniquely/soffit-site-pwa/{ => res}/l10n/en-US.json (100%) rename uniquely/soffit-site-pwa/{ => res}/l10n/fa-IR.json (100%) rename uniquely/soffit-site-pwa/{ => res}/manifest.json (100%) rename uniquely/soffit-site-pwa/{ => res}/robots.txt (100%) delete mode 100644 uniquely/soffit-site-pwa/rollup.config.js rename uniquely/soffit-site-pwa/src/{pwa-root.ts => alwatr-pwa.ts} (72%) delete mode 100644 uniquely/soffit-site-pwa/style/body.css delete mode 100644 uniquely/soffit-site-pwa/style/helper/colors.css delete mode 100644 uniquely/soffit-site-pwa/style/helper/demo.css delete mode 100644 uniquely/soffit-site-pwa/style/helper/typography.css delete mode 100644 uniquely/soffit-site-pwa/style/index.css delete mode 100644 uniquely/soffit-site-pwa/style/mdc-grid-temp.css delete mode 100644 uniquely/soffit-site-pwa/style/safe-area.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/color.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/elevation-extra.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/motion.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/palette-hct.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/palette-hsl.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/radius.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/scrollbar.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/spacing.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/surface.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/typography.css delete mode 100644 uniquely/soffit-site-pwa/style/tokens/z-index.css diff --git a/uniquely/soffit-site-pwa/CHANGELOG.md b/uniquely/soffit-site-pwa/CHANGELOG.md deleted file mode 100644 index 3200a8dcda..0000000000 --- a/uniquely/soffit-site-pwa/CHANGELOG.md +++ /dev/null @@ -1,44 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# [0.27.0](https://github.com/AliMD/alwatr/compare/v0.26.0...v0.27.0) (2022-12-29) - -### Bug Fixes - -- **page-chat:** colors ([35b1bf3](https://github.com/AliMD/alwatr/commit/35b1bf3b18fc96efd0ddf81452301973e2bce3b6)) -- **page-chat:** demo ([1c0d965](https://github.com/AliMD/alwatr/commit/1c0d965b8773627afbcc905cf18c5acf11f0ac9c)) -- **pwa-root:** build issues ([677b05d](https://github.com/AliMD/alwatr/commit/677b05d292187e8aee28c674150bdb264ac0b4c6)) -- **ui-kit:** font sizes ([2569644](https://github.com/AliMD/alwatr/commit/25696442da35ba570682c31157489d5802153fbf)) -- **ui/demo-pwa:** \_signalListenerList ([60d39b0](https://github.com/AliMD/alwatr/commit/60d39b0af925152feec56d011a1c7b1477134bf7)) -- **ui/style:** body font ([91f6611](https://github.com/AliMD/alwatr/commit/91f66113747f665da3ee585c9787145eb71a1b07)) -- **ui:** root sizes ([2bdf2d5](https://github.com/AliMD/alwatr/commit/2bdf2d5712905d75491f61a5d94322395987b6ab)) - -### Features - -- **chat-\*:** scrollbar and gaps ([c91e2d6](https://github.com/AliMD/alwatr/commit/c91e2d6ec5a4dcc80b2ae71f800dae46cdd8c1f8)) -- **chat-bubble:** rewrite with new styles ([f4c5f01](https://github.com/AliMD/alwatr/commit/f4c5f0154935a1df77493f309ac9ce9b072ce5a2)) -- **chat-list:** new element for list of chats ([3ddae05](https://github.com/AliMD/alwatr/commit/3ddae05cd0bcebb855327f0f449d3ee7c7e576cd)) -- **chat-list:** scrollbar style ([a02074d](https://github.com/AliMD/alwatr/commit/a02074d894d3d812bfe8fb63be37f0edde931c00)) -- **chat:** use new color system ([045b188](https://github.com/AliMD/alwatr/commit/045b18891ca8b9ba0a556be6c621747cb8d0a639)) -- **chat:** use new spacing system ([4e0d44e](https://github.com/AliMD/alwatr/commit/4e0d44e419973e28d5584e609f8efbc68f07fcd2)) -- **chat:** use system shape var ([dcff276](https://github.com/AliMD/alwatr/commit/dcff276ec28e345306f1a278a69bd64c05c5e130)) -- **demo-pwa:** page-chat ([138c4ab](https://github.com/AliMD/alwatr/commit/138c4ab67c342e5682eb12f76a073883a218b4bb)) -- **icon-button:** enhance styles and motion ([4b4a301](https://github.com/AliMD/alwatr/commit/4b4a301f53a059cc5faa4a75b22fc079f750bc38)) -- new ui design system ([8c9c8ba](https://github.com/AliMD/alwatr/commit/8c9c8ba29c477838f3e7034b902f4e0dafabd17c)) -- **page-chat:** new demo ([451d63f](https://github.com/AliMD/alwatr/commit/451d63fc0b904bb780c898c2909b1d7a116b353f)) -- **pwa-root:** style ([20a6fdc](https://github.com/AliMD/alwatr/commit/20a6fdcfdb66561e345e75bac2b0cf8e45818b42)) -- **tokens:** new motions ([48f3745](https://github.com/AliMD/alwatr/commit/48f374562a9f8f87abc7e8033036c819080a39e3)) -- **tokens:** z-zindex ([62926a7](https://github.com/AliMD/alwatr/commit/62926a7b8497f7231093e3bddb129993151f8929)) -- **ui-kit/chat-text-input:** translations ([3d03d3d](https://github.com/AliMD/alwatr/commit/3d03d3d56d9fef34b35c76568fb9d7ec7069f1ee)) -- **ui-kit:** material style tokens ([39ff343](https://github.com/AliMD/alwatr/commit/39ff343301b49f645b8b06da2e0e9c79566353ce)) -- **ui/chat:** new alwatr-chat element ([f711e12](https://github.com/AliMD/alwatr/commit/f711e12317a263d6e1d4bfc52dae54348cf64923)) -- **ui/demo-pwa/page-chat:** new demo ([7f98b8a](https://github.com/AliMD/alwatr/commit/7f98b8a14c999d17ce30364f48234498b166994f)) -- **ui/demo-pwa/style:** state tokens ([ef3913c](https://github.com/AliMD/alwatr/commit/ef3913c746f0f9b5a34ba9ccc88c1b2d1894dac9)) -- **ui/demo-pwa:** improve ([0eeb244](https://github.com/AliMD/alwatr/commit/0eeb2447ece26708c912e845c0f3b2fbd019614a)) -- **ui/demo-pwa:** use `alwatr-chat-text-input` ([0f5bfd1](https://github.com/AliMD/alwatr/commit/0f5bfd16b7c7973375c97f0a8b03d1e0b39bf148)) -- **ui/demo-pwa:** use icon button ([738571c](https://github.com/AliMD/alwatr/commit/738571c3b3d8cab16b3d1c50e1cca56a1da220f2)) -- **ui/tokens:** new spacing columns ([c46d1cd](https://github.com/AliMD/alwatr/commit/c46d1cd0ad58aaeef43bfc7628e844f611b0b969)) -- **ui/tokens:** spacing system ([cfd6b0e](https://github.com/AliMD/alwatr/commit/cfd6b0ee46472902c6ab52ab1002fc36eb37e489)) -- **ui:** global style ([6800205](https://github.com/AliMD/alwatr/commit/6800205215129d82b6afbfad2adbfb02a107c1a9)) diff --git a/uniquely/soffit-site-pwa/esbuild.mjs b/uniquely/soffit-site-pwa/esbuild.mjs new file mode 100755 index 0000000000..8fb338c6fb --- /dev/null +++ b/uniquely/soffit-site-pwa/esbuild.mjs @@ -0,0 +1,144 @@ +#!/usr/bin/env node +/* eslint-disable no-undef */ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ + +import {promises as fs, existsSync} from 'node:fs'; + +import {createLogger} from '@alwatr/logger'; +import * as esbuild from 'esbuild'; + +import packageJson from './package.json' assert {type: 'json'}; + +const logger = createLogger('alwatr-pwa-build'); +const banner = '/* ..:: Alwatr UI Demo ::.. */\n'; + +const srcDir = 'src'; +const resDir = 'res'; +const outDir = 'dist'; +const srcFilename = 'alwatr-pwa'; + +const cleanMode = process.argv.includes('--clean'); +const watchMode = process.argv.includes('--watch'); +const debugMode = process.argv.includes('--debug'); + +logger.logOther(banner); + +logger.logProperty('cleanMode', cleanMode); +logger.logProperty('watchMode', watchMode); +logger.logProperty('debugMode', debugMode); + +if (cleanMode) { + logger.logMethod('clean build'); + await fs.rm(outDir, {recursive: true, force: true}); +} + +const copyPromise = fs.cp(resDir, outDir, {recursive: true, force: true, verbatimSymlinks: true}); + +const esBuild = esbuild.build({ + entryPoints: [`${srcDir}/${srcFilename}.ts`], + + logLevel: 'info', + platform: 'browser', + target: 'es2018', + format: 'esm', + conditions: debugMode ? ['development'] : undefined, + + minify: true, + treeShaking: true, + sourcemap: true, + sourcesContent: debugMode, + bundle: true, + splitting: true, + charset: 'ascii', + legalComments: 'none', + metafile: true, + + define: { + _ALWATR_VERSION_: `'${packageJson.version}'`, + }, + // drop: ['debugger'], + + loader: { + '.png': 'copy', + '.jpg': 'copy', + '.woff': 'copy', + '.woff2': 'copy', + }, + + banner: { + js: banner, + css: banner, + }, + + outbase: srcDir, + outdir: outDir, + assetNames: 'asset/[name]-[hash]', + entryNames: watchMode ? '[name]' : '[dir]/[name]-[hash]', + chunkNames: 'chunks/[name]-[hash]', + + incremental: watchMode, + watch: watchMode, +}); + +async function makeHtml() { + logger.logMethod('makeHtml'); + + let htmlContent = await fs.readFile(`${resDir}/index.html`, {encoding: 'utf-8'}); + + const metafile = (await esBuild).metafile; + const outFiles = Object.keys(metafile.outputs); + + const jsFilename = outFiles + .find((filename) => filename.includes(srcFilename) && filename.endsWith('.js')) + .substring(outDir.length + 1); + + const cssFilename = outFiles + .find((filename) => filename.includes(srcFilename) && filename.endsWith('.css')) + .substring(outDir.length + 1); + + logger.logProperty('jsFilename', jsFilename); + logger.logProperty('cssFilename', cssFilename); + + if (!existsSync(`${outDir}/${jsFilename}`)) { + logger.error('makeHtml', 'js_filename_not_found', {jsFilename}); + throw new Error('js_filename_not_found'); + } + + if (!existsSync(`${outDir}/${cssFilename}`)) { + logger.error('makeHtml', 'css_filename_not_found', {cssFilename}); + throw new Error('css_filename_not_found'); + } + + htmlContent = htmlContent + .replace('alwatr-pwa.css', cssFilename) + .replace('alwatr-pwa.js', jsFilename) + ; + + await copyPromise; // wait to cp done + await fs.writeFile(`${outDir}/index.html`, htmlContent, {encoding: 'utf-8', flag: 'w'}); +} + +if (!watchMode) { + makeHtml(); +} + +if (debugMode) { + console.log(await esbuild.analyzeMetafile((await esBuild).metafile)); +} + +/* + TODO: + - Assets hash + - PostCSS css file + - lit css loader + - PostCSS lit internal styles + - Dynamic from @alwatr/build + - sideEffects + https://esbuild.github.io/api/#ignore-annotations + https://webpack.js.org/guides/tree-shaking/ + - readme + https://esbuild.github.io/api/#write + https://github.com/fakundo/esbuild-plugin-replace-regex/blob/master/src/index.js#L30 + https://github.com/zandaqo/esbuild-plugin-lit/blob/master/css-loader.ts + https://github.com/chialab/rna/tree/main/packages/esbuild-plugin-html +*/ diff --git a/uniquely/soffit-site-pwa/package.json b/uniquely/soffit-site-pwa/package.json index 8e0d19d480..b229642927 100644 --- a/uniquely/soffit-site-pwa/package.json +++ b/uniquely/soffit-site-pwa/package.json @@ -20,40 +20,26 @@ "directory": "ui/soffit-site-pwa" }, "scripts": { - "b": "yarn build", - "cb": "run-s clean build", + "b": "yarn build --debug", + "cb": "yarn build --debug --clean", "s": "yarn start", "w": "yarn watch", "start": "NODE_OPTIONS=--enable-source-maps run-s clean build serve", - "clean": "rimraf dist build .tsbuildinfo **/*.{d.ts,map} src/**/*.{js,cjs,mjs}", - "build": "run-s build:ts build:es", - "build:ts": "tsc --build", - "build:es": "rimraf dist && rollup -c", + "clean": "rimraf dist build .tsbuildinfo", + "build": "./esbuild.mjs", + "build:tsc": "tsc --build", "serve": "wds", - "watch": "run-s clean build:ts && run-p watch:ts serve", - "watch:ts": "yarn build:ts --watch --preserveWatchOutput" + "watch": "run-p watch:es serve", + "watch:es": "yarn build --clean --watch --debug" }, "devDependencies": { "@alwatr/element": "^0.27.0", "@alwatr/ui-kit": "^0.27.0", - "@babel/core": "^7.20.12", - "@babel/preset-env": "^7.20.2", - "@rollup/plugin-babel": "^6.0.3", - "@rollup/plugin-node-resolve": "^15.0.1", - "@rollup/plugin-terser": "^0.3.0", "@web/dev-server": "^0.1.35", - "@web/dev-server-esbuild": "^0.3.3", - "@web/rollup-plugin-copy": "^0.3.0", - "@web/rollup-plugin-html": "^1.11.0", - "@web/rollup-plugin-polyfills-loader": "^1.3.1", "@webcomponents/webcomponentsjs": "^2.7.0", "lit-analyzer": "^1.2.1", "npm-run-all": "^4.1.5", - "rimraf": "^4.0.4", - "rollup": "^3.10.0", - "rollup-plugin-minify-html-literals": "^1.2.6", - "rollup-plugin-summary": "^2.0.0", - "rollup-plugin-workbox": "^6.2.0", + "rimraf": "^4.1.0", "ts-lit-plugin": "^1.2.1", "tslib": "^2.4.1", "typescript": "^4.9.4" diff --git a/uniquely/soffit-site-pwa/image/favicon.ico b/uniquely/soffit-site-pwa/res/image/favicon.ico similarity index 100% rename from uniquely/soffit-site-pwa/image/favicon.ico rename to uniquely/soffit-site-pwa/res/image/favicon.ico diff --git a/uniquely/soffit-site-pwa/image/icon-180.png b/uniquely/soffit-site-pwa/res/image/icon-180.png similarity index 100% rename from uniquely/soffit-site-pwa/image/icon-180.png rename to uniquely/soffit-site-pwa/res/image/icon-180.png diff --git a/uniquely/soffit-site-pwa/image/icon-192-maskable.png b/uniquely/soffit-site-pwa/res/image/icon-192-maskable.png similarity index 100% rename from uniquely/soffit-site-pwa/image/icon-192-maskable.png rename to uniquely/soffit-site-pwa/res/image/icon-192-maskable.png diff --git a/uniquely/soffit-site-pwa/image/icon-192.png b/uniquely/soffit-site-pwa/res/image/icon-192.png similarity index 100% rename from uniquely/soffit-site-pwa/image/icon-192.png rename to uniquely/soffit-site-pwa/res/image/icon-192.png diff --git a/uniquely/soffit-site-pwa/image/icon-512-maskable.png b/uniquely/soffit-site-pwa/res/image/icon-512-maskable.png similarity index 100% rename from uniquely/soffit-site-pwa/image/icon-512-maskable.png rename to uniquely/soffit-site-pwa/res/image/icon-512-maskable.png diff --git a/uniquely/soffit-site-pwa/image/icon-512.png b/uniquely/soffit-site-pwa/res/image/icon-512.png similarity index 100% rename from uniquely/soffit-site-pwa/image/icon-512.png rename to uniquely/soffit-site-pwa/res/image/icon-512.png diff --git a/uniquely/soffit-site-pwa/image/soffit.jpg b/uniquely/soffit-site-pwa/res/image/soffit.jpg similarity index 100% rename from uniquely/soffit-site-pwa/image/soffit.jpg rename to uniquely/soffit-site-pwa/res/image/soffit.jpg diff --git a/uniquely/soffit-site-pwa/index.html b/uniquely/soffit-site-pwa/res/index.html similarity index 90% rename from uniquely/soffit-site-pwa/index.html rename to uniquely/soffit-site-pwa/res/index.html index 129abaf500..fc222edcea 100644 --- a/uniquely/soffit-site-pwa/index.html +++ b/uniquely/soffit-site-pwa/res/index.html @@ -6,14 +6,8 @@ بازرگانی سافیت - - + + diff --git a/uniquely/soffit-site-pwa/l10n/en-US.json b/uniquely/soffit-site-pwa/res/l10n/en-US.json similarity index 100% rename from uniquely/soffit-site-pwa/l10n/en-US.json rename to uniquely/soffit-site-pwa/res/l10n/en-US.json diff --git a/uniquely/soffit-site-pwa/l10n/fa-IR.json b/uniquely/soffit-site-pwa/res/l10n/fa-IR.json similarity index 100% rename from uniquely/soffit-site-pwa/l10n/fa-IR.json rename to uniquely/soffit-site-pwa/res/l10n/fa-IR.json diff --git a/uniquely/soffit-site-pwa/manifest.json b/uniquely/soffit-site-pwa/res/manifest.json similarity index 100% rename from uniquely/soffit-site-pwa/manifest.json rename to uniquely/soffit-site-pwa/res/manifest.json diff --git a/uniquely/soffit-site-pwa/robots.txt b/uniquely/soffit-site-pwa/res/robots.txt similarity index 100% rename from uniquely/soffit-site-pwa/robots.txt rename to uniquely/soffit-site-pwa/res/robots.txt diff --git a/uniquely/soffit-site-pwa/rollup.config.js b/uniquely/soffit-site-pwa/rollup.config.js deleted file mode 100644 index d03adc17c6..0000000000 --- a/uniquely/soffit-site-pwa/rollup.config.js +++ /dev/null @@ -1,78 +0,0 @@ -import resolve from '@rollup/plugin-node-resolve'; -import terser from '@rollup/plugin-terser'; -import {copy} from '@web/rollup-plugin-copy'; -import {rollupPluginHTML} from '@web/rollup-plugin-html'; -import minifyHTML from 'rollup-plugin-minify-html-literals'; -import summary from 'rollup-plugin-summary'; -import {generateSW} from 'rollup-plugin-workbox'; - -import {workboxConfig} from './workbox.config.js'; - -function onwarn(warning) { - if (warning.code !== 'THIS_IS_UNDEFINED') { - console.error(`(!) ${warning.message}`); - } -} - -// Configure an instance of @web/rollup-plugin-html -const htmlPlugin = rollupPluginHTML({ - rootDir: './', - flattenOutput: false, - serviceWorkerPath: 'dist/sw.js', - injectServiceWorker: true, - extractAssets: true, -}); - -/** @type {import('rollup').RollupOptions} */ -const options = { - // Entry point for application build; can specify a glob to build multiple - // HTML files for non-SPA app - input: 'index.html', - onwarn, - treeshake: true, - plugins: [ - htmlPlugin, - // Resolve bare module specifiers to relative paths - resolve(), - // Minify HTML template literals - minifyHTML.default({ - failOnError: true, - }), - // Minify JS - terser({ - ecma: 2019, - module: true, - warnings: true, - format: { - comments: false, - }, - mangle: { - properties: { - regex: /^__/, - }, - }, - }), - // Print bundle summary - summary({ - showBrotliSize: true, - showGzippedSize: true, - }), - // Optional: copy any static assets to build directory - copy({ - patterns: ['image/**/*', 'l10n/**/*', 'robots.txt'], - }), - generateSW(workboxConfig, ({swDest, count, size}) => console.log('📦', swDest, '#️⃣ ', count, '🐘', size)), - ], - // Specifies two JS output configurations, modern and legacy, which the HTML plugin will - // automatically choose between; the legacy build is compiled to ES5 - // and SystemJS modules - output: { - format: 'esm', - chunkFileNames: '[name].js', - entryFileNames: '[name].js', - dir: 'dist', - }, - preserveEntrySignatures: false, -}; - -export default options; diff --git a/uniquely/soffit-site-pwa/src/pwa-root.ts b/uniquely/soffit-site-pwa/src/alwatr-pwa.ts similarity index 72% rename from uniquely/soffit-site-pwa/src/pwa-root.ts rename to uniquely/soffit-site-pwa/src/alwatr-pwa.ts index 42d6b8ba05..ec3f9b33b4 100644 --- a/uniquely/soffit-site-pwa/src/pwa-root.ts +++ b/uniquely/soffit-site-pwa/src/alwatr-pwa.ts @@ -1,6 +1,11 @@ -import {AlwatrRootElement, html, customElement} from '@alwatr/element'; +import {html, customElement} from '@alwatr/element'; +import {AlwatrPwaElement} from '@alwatr/element/pwa-element.js'; import {l10n} from '@alwatr/i18n'; +import '@alwatr/ui-kit/style/theme/palette-300.css'; +import '@alwatr/ui-kit/style/theme/color.css'; +import '@alwatr/font/vazirmatn.css'; + import './page-home.js'; import type {PropertyValues} from '@alwatr/element'; @@ -16,7 +21,7 @@ declare global { * Alwatr PWA Root Element */ @customElement('alwatr-pwa-root') -export class AlwatrPwaRoot extends AlwatrRootElement { +export class AlwatrPwaRoot extends AlwatrPwaElement { protected override _routes: RoutesConfig = { map: (route) => route.sectionList[0]?.toString(), list: { diff --git a/uniquely/soffit-site-pwa/style/body.css b/uniquely/soffit-site-pwa/style/body.css deleted file mode 100644 index 7a6b621fc7..0000000000 --- a/uniquely/soffit-site-pwa/style/body.css +++ /dev/null @@ -1,60 +0,0 @@ -html, -body { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - box-sizing: border-box; -} - -html { - font-size: 62.5%; /* 10px */ - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-size-adjust: 100%; -} - -body { - contain: layout size style; - text-rendering: optimizeLegibility; - font-smoothing: antialiased; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - word-wrap: break-word; - text-size-adjust: none; - -webkit-text-size-adjust: none; - -webkit-user-drag: none; - -ms-content-zooming: none; - -ms-touch-action: pan-x pan-y pinch-zoom; - touch-action: pan-x pan-y pinch-zoom; - transform: translateZ(0); - overflow: hidden; - overflow: clip; - overscroll-behavior-y: none; - - /* Theme */ - color: var(--sys-color-on-background); - background-color: var(--sys-color-background); - font-family: var(--sys-typescale-body-medium-font-family-name); - font-weight: var(--sys-typescale-body-medium-font-weight); - font-size: var(--sys-typescale-body-medium-font-size); - letter-spacing: var(--sys-typescale-body-medium-letter-spacing); - line-height: var(--sys-typescale-body-medium-line-height); -} - -.noscript { - text-align: center; - font-size: 2rem; - padding: 4rem 2rem; -} - -.noscript p { - margin: 0.5em 0; -} - -body.no-scroll { - overflow: hidden; -} diff --git a/uniquely/soffit-site-pwa/style/helper/colors.css b/uniquely/soffit-site-pwa/style/helper/colors.css deleted file mode 100644 index 49df998a61..0000000000 --- a/uniquely/soffit-site-pwa/style/helper/colors.css +++ /dev/null @@ -1,180 +0,0 @@ -.primary { - background-color: var(--sys-color-primary); -} -.primary-text { - color: var(--sys-color-primary); -} -.on-primary { - background-color: var(--sys-color-on-primary); -} -.on-primary-text { - color: var(--sys-color-on-primary); -} -.primary-container { - background-color: var(--sys-color-primary-container); -} -.primary-container-text { - color: var(--sys-color-primary-container); -} -.on-primary-container { - background-color: var(--sys-color-on-primary-container); -} -.on-primary-container-text { - color: var(--sys-color-on-primary-container); -} -.secondary { - background-color: var(--sys-color-secondary); -} -.secondary-text { - color: var(--sys-color-secondary); -} -.on-secondary { - background-color: var(--sys-color-on-secondary); -} -.on-secondary-text { - color: var(--sys-color-on-secondary); -} -.secondary-container { - background-color: var(--sys-color-secondary-container); -} -.secondary-container-text { - color: var(--sys-color-secondary-container); -} -.on-secondary-container { - background-color: var(--sys-color-on-secondary-container); -} -.on-secondary-container-text { - color: var(--sys-color-on-secondary-container); -} -.tertiary { - background-color: var(--sys-color-tertiary); -} -.tertiary-text { - color: var(--sys-color-tertiary); -} -.on-tertiary { - background-color: var(--sys-color-on-tertiary); -} -.on-tertiary-text { - color: var(--sys-color-on-tertiary); -} -.tertiary-container { - background-color: var(--sys-color-tertiary-container); -} -.tertiary-container-text { - color: var(--sys-color-tertiary-container); -} -.on-tertiary-container { - background-color: var(--sys-color-on-tertiary-container); -} -.on-tertiary-container-text { - color: var(--sys-color-on-tertiary-container); -} -.error { - background-color: var(--sys-color-error); -} -.error-text { - color: var(--sys-color-error); -} -.error-container { - background-color: var(--sys-color-error-container); -} -.error-container-text { - color: var(--sys-color-error-container); -} -.on-error { - background-color: var(--sys-color-on-error); -} -.on-error-text { - color: var(--sys-color-on-error); -} -.on-error-container { - background-color: var(--sys-color-on-error-container); -} -.on-error-container-text { - color: var(--sys-color-on-error-container); -} -.background { - background-color: var(--sys-color-background); -} -.background-text { - color: var(--sys-color-background); -} -.on-background { - background-color: var(--sys-color-on-background); -} -.on-background-text { - color: var(--sys-color-on-background); -} -.surface { - background-color: var(--sys-color-surface); -} -.surface-text { - color: var(--sys-color-surface); -} -.on-surface { - background-color: var(--sys-color-on-surface); -} -.on-surface-text { - color: var(--sys-color-on-surface); -} -.surface-variant { - background-color: var(--sys-color-surface-variant); -} -.surface-variant-text { - color: var(--sys-color-surface-variant); -} -.on-surface-variant { - background-color: var(--sys-color-on-surface-variant); -} -.on-surface-variant-text { - color: var(--sys-color-on-surface-variant); -} -.outline { - background-color: var(--sys-color-outline); -} -.outline-text { - color: var(--sys-color-outline); -} -.inverse-on-surface { - background-color: var(--sys-color-inverse-on-surface); -} -.inverse-on-surface-text { - color: var(--sys-color-inverse-on-surface); -} -.inverse-surface { - background-color: var(--sys-color-inverse-surface); -} -.inverse-surface-text { - color: var(--sys-color-inverse-surface); -} -.inverse-primary { - background-color: var(--sys-color-inverse-primary); -} -.inverse-primary-text { - color: var(--sys-color-inverse-primary); -} -.shadow { - background-color: var(--sys-color-shadow); -} -.shadow-text { - color: var(--sys-color-shadow); -} -.surface-tint { - background-color: var(--sys-color-surface-tint); -} -.surface-tint-text { - color: var(--sys-color-surface-tint); -} -.outline-variant { - background-color: var(--sys-color-outline-variant); -} -.outline-variant-text { - color: var(--sys-color-outline-variant); -} -.scrim { - background-color: var(--sys-color-scrim); -} -.scrim-text { - color: var(--sys-color-scrim); -} diff --git a/uniquely/soffit-site-pwa/style/helper/demo.css b/uniquely/soffit-site-pwa/style/helper/demo.css deleted file mode 100644 index 8e5c452361..0000000000 --- a/uniquely/soffit-site-pwa/style/helper/demo.css +++ /dev/null @@ -1,273 +0,0 @@ -body { - padding: calc(2 * var(--sys-spacing-track)); -} - -.container { - display: flex; - gap: calc(2 * var(--sys-spacing-track)); - height: 100%; - overflow-y: auto; -} - -.row { - flex-grow: 1; -} - -.box { - height: calc(6 * var(--sys-spacing-track)); -} - -.row:nth-child(1) .box:nth-child(1) { - background-color: hsl(var(--ref-palette-primary0)); -} -.row:nth-child(1) .box:nth-child(2) { - background-color: hsl(var(--ref-palette-primary10)); -} -.row:nth-child(1) .box:nth-child(3) { - background-color: hsl(var(--ref-palette-primary20)); -} -.row:nth-child(1) .box:nth-child(4) { - background-color: hsl(var(--ref-palette-primary25)); - display: none; -} -.row:nth-child(1) .box:nth-child(5) { - background-color: hsl(var(--ref-palette-primary30)); -} -.row:nth-child(1) .box:nth-child(6) { - background-color: hsl(var(--ref-palette-primary35)); - display: none; -} -.row:nth-child(1) .box:nth-child(7) { - background-color: hsl(var(--ref-palette-primary40)); -} -.row:nth-child(1) .box:nth-child(8) { - background-color: hsl(var(--ref-palette-primary50)); -} -.row:nth-child(1) .box:nth-child(9) { - background-color: hsl(var(--ref-palette-primary60)); -} -.row:nth-child(1) .box:nth-child(10) { - background-color: hsl(var(--ref-palette-primary70)); -} -.row:nth-child(1) .box:nth-child(11) { - background-color: hsl(var(--ref-palette-primary80)); -} -.row:nth-child(1) .box:nth-child(12) { - background-color: hsl(var(--ref-palette-primary90)); -} -.row:nth-child(1) .box:nth-child(13) { - background-color: hsl(var(--ref-palette-primary95)); -} -.row:nth-child(1) .box:nth-child(14) { - background-color: hsl(var(--ref-palette-primary98)); -} -.row:nth-child(1) .box:nth-child(15) { - background-color: hsl(var(--ref-palette-primary99)); -} -.row:nth-child(1) .box:nth-child(16) { - background-color: hsl(var(--ref-palette-primary100)); -} - -.row:nth-child(2) .box:nth-child(1) { - background-color: hsl(var(--ref-palette-secondary0)); -} -.row:nth-child(2) .box:nth-child(2) { - background-color: hsl(var(--ref-palette-secondary10)); -} -.row:nth-child(2) .box:nth-child(3) { - background-color: hsl(var(--ref-palette-secondary20)); -} -.row:nth-child(2) .box:nth-child(4) { - background-color: hsl(var(--ref-palette-secondary25)); - display: none; -} -.row:nth-child(2) .box:nth-child(5) { - background-color: hsl(var(--ref-palette-secondary30)); -} -.row:nth-child(2) .box:nth-child(6) { - background-color: hsl(var(--ref-palette-secondary35)); - display: none; -} -.row:nth-child(2) .box:nth-child(7) { - background-color: hsl(var(--ref-palette-secondary40)); -} -.row:nth-child(2) .box:nth-child(8) { - background-color: hsl(var(--ref-palette-secondary50)); -} -.row:nth-child(2) .box:nth-child(9) { - background-color: hsl(var(--ref-palette-secondary60)); -} -.row:nth-child(2) .box:nth-child(10) { - background-color: hsl(var(--ref-palette-secondary70)); -} -.row:nth-child(2) .box:nth-child(11) { - background-color: hsl(var(--ref-palette-secondary80)); -} -.row:nth-child(2) .box:nth-child(12) { - background-color: hsl(var(--ref-palette-secondary90)); -} -.row:nth-child(2) .box:nth-child(13) { - background-color: hsl(var(--ref-palette-secondary95)); -} -.row:nth-child(2) .box:nth-child(14) { - background-color: hsl(var(--ref-palette-secondary98)); -} -.row:nth-child(2) .box:nth-child(15) { - background-color: hsl(var(--ref-palette-secondary99)); -} -.row:nth-child(2) .box:nth-child(16) { - background-color: hsl(var(--ref-palette-secondary100)); -} - -.row:nth-child(3) .box:nth-child(1) { - background-color: hsl(var(--ref-palette-tertiary0)); -} -.row:nth-child(3) .box:nth-child(2) { - background-color: hsl(var(--ref-palette-tertiary10)); -} -.row:nth-child(3) .box:nth-child(3) { - background-color: hsl(var(--ref-palette-tertiary20)); -} -.row:nth-child(3) .box:nth-child(4) { - background-color: hsl(var(--ref-palette-tertiary25)); - display: none; -} -.row:nth-child(3) .box:nth-child(5) { - background-color: hsl(var(--ref-palette-tertiary30)); -} -.row:nth-child(3) .box:nth-child(6) { - background-color: hsl(var(--ref-palette-tertiary35)); - display: none; -} -.row:nth-child(3) .box:nth-child(7) { - background-color: hsl(var(--ref-palette-tertiary40)); -} -.row:nth-child(3) .box:nth-child(8) { - background-color: hsl(var(--ref-palette-tertiary50)); -} -.row:nth-child(3) .box:nth-child(9) { - background-color: hsl(var(--ref-palette-tertiary60)); -} -.row:nth-child(3) .box:nth-child(10) { - background-color: hsl(var(--ref-palette-tertiary70)); -} -.row:nth-child(3) .box:nth-child(11) { - background-color: hsl(var(--ref-palette-tertiary80)); -} -.row:nth-child(3) .box:nth-child(12) { - background-color: hsl(var(--ref-palette-tertiary90)); -} -.row:nth-child(3) .box:nth-child(13) { - background-color: hsl(var(--ref-palette-tertiary95)); -} -.row:nth-child(3) .box:nth-child(14) { - background-color: hsl(var(--ref-palette-tertiary98)); -} -.row:nth-child(3) .box:nth-child(15) { - background-color: hsl(var(--ref-palette-tertiary99)); -} -.row:nth-child(3) .box:nth-child(16) { - background-color: hsl(var(--ref-palette-tertiary100)); -} - -.row:nth-child(4) .box:nth-child(1) { - background-color: hsl(var(--ref-palette-neutral0)); -} -.row:nth-child(4) .box:nth-child(2) { - background-color: hsl(var(--ref-palette-neutral10)); -} -.row:nth-child(4) .box:nth-child(3) { - background-color: hsl(var(--ref-palette-neutral20)); -} -.row:nth-child(4) .box:nth-child(4) { - background-color: hsl(var(--ref-palette-neutral25)); - display: none; -} -.row:nth-child(4) .box:nth-child(5) { - background-color: hsl(var(--ref-palette-neutral30)); -} -.row:nth-child(4) .box:nth-child(6) { - background-color: hsl(var(--ref-palette-neutral35)); - display: none; -} -.row:nth-child(4) .box:nth-child(7) { - background-color: hsl(var(--ref-palette-neutral40)); -} -.row:nth-child(4) .box:nth-child(8) { - background-color: hsl(var(--ref-palette-neutral50)); -} -.row:nth-child(4) .box:nth-child(9) { - background-color: hsl(var(--ref-palette-neutral60)); -} -.row:nth-child(4) .box:nth-child(10) { - background-color: hsl(var(--ref-palette-neutral70)); -} -.row:nth-child(4) .box:nth-child(11) { - background-color: hsl(var(--ref-palette-neutral80)); -} -.row:nth-child(4) .box:nth-child(12) { - background-color: hsl(var(--ref-palette-neutral90)); -} -.row:nth-child(4) .box:nth-child(13) { - background-color: hsl(var(--ref-palette-neutral95)); -} -.row:nth-child(4) .box:nth-child(14) { - background-color: hsl(var(--ref-palette-neutral98)); -} -.row:nth-child(4) .box:nth-child(15) { - background-color: hsl(var(--ref-palette-neutral99)); -} -.row:nth-child(4) .box:nth-child(16) { - background-color: hsl(var(--ref-palette-neutral100)); -} - -.row:nth-child(5) .box:nth-child(1) { - background-color: hsl(var(--ref-palette-neutral-variant0)); -} -.row:nth-child(5) .box:nth-child(2) { - background-color: hsl(var(--ref-palette-neutral-variant10)); -} -.row:nth-child(5) .box:nth-child(3) { - background-color: hsl(var(--ref-palette-neutral-variant20)); -} -.row:nth-child(5) .box:nth-child(4) { - background-color: hsl(var(--ref-palette-neutral-variant25)); - display: none; -} -.row:nth-child(5) .box:nth-child(5) { - background-color: hsl(var(--ref-palette-neutral-variant30)); -} -.row:nth-child(5) .box:nth-child(6) { - background-color: hsl(var(--ref-palette-neutral-variant35)); - display: none; -} -.row:nth-child(5) .box:nth-child(7) { - background-color: hsl(var(--ref-palette-neutral-variant40)); -} -.row:nth-child(5) .box:nth-child(8) { - background-color: hsl(var(--ref-palette-neutral-variant50)); -} -.row:nth-child(5) .box:nth-child(9) { - background-color: hsl(var(--ref-palette-neutral-variant60)); -} -.row:nth-child(5) .box:nth-child(10) { - background-color: hsl(var(--ref-palette-neutral-variant70)); -} -.row:nth-child(5) .box:nth-child(11) { - background-color: hsl(var(--ref-palette-neutral-variant80)); -} -.row:nth-child(5) .box:nth-child(12) { - background-color: hsl(var(--ref-palette-neutral-variant90)); -} -.row:nth-child(5) .box:nth-child(13) { - background-color: hsl(var(--ref-palette-neutral-variant95)); -} -.row:nth-child(5) .box:nth-child(14) { - background-color: hsl(var(--ref-palette-neutral-variant98)); -} -.row:nth-child(5) .box:nth-child(15) { - background-color: hsl(var(--ref-palette-neutral-variant99)); -} -.row:nth-child(5) .box:nth-child(16) { - background-color: hsl(var(--ref-palette-neutral-variant100)); -} diff --git a/uniquely/soffit-site-pwa/style/helper/typography.css b/uniquely/soffit-site-pwa/style/helper/typography.css deleted file mode 100644 index f6db49d972..0000000000 --- a/uniquely/soffit-site-pwa/style/helper/typography.css +++ /dev/null @@ -1,105 +0,0 @@ -.display-large { - font-family: var(--sys-typescale-display-large-font-family-name); - font-weight: var(--sys-typescale-display-large-font-weight); - font-size: var(--sys-typescale-display-large-font-size); - letter-spacing: var(--sys-typescale-display-large-letter-spacing); - line-height: var(--sys-typescale-display-large-line-height); -} -.display-medium { - font-family: var(--sys-typescale-display-medium-font-family-name); - font-weight: var(--sys-typescale-display-medium-font-weight); - font-size: var(--sys-typescale-display-medium-font-size); - letter-spacing: var(--sys-typescale-display-medium-letter-spacing); - line-height: var(--sys-typescale-display-medium-line-height); -} -.display-small { - font-family: var(--sys-typescale-display-small-font-family-name); - font-weight: var(--sys-typescale-display-small-font-weight); - font-size: var(--sys-typescale-display-small-font-size); - letter-spacing: var(--sys-typescale-display-small-letter-spacing); - line-height: var(--sys-typescale-display-small-line-height); -} -.headline-large { - font-family: var(--sys-typescale-headline-large-font-family-name); - font-weight: var(--sys-typescale-headline-large-font-weight); - font-size: var(--sys-typescale-headline-large-font-size); - letter-spacing: var(--sys-typescale-headline-large-letter-spacing); - line-height: var(--sys-typescale-headline-large-line-height); -} -.headline-medium { - font-family: var(--sys-typescale-headline-medium-font-family-name); - font-weight: var(--sys-typescale-headline-medium-font-weight); - font-size: var(--sys-typescale-headline-medium-font-size); - letter-spacing: var(--sys-typescale-headline-medium-letter-spacing); - line-height: var(--sys-typescale-headline-medium-line-height); -} -.headline-small { - font-family: var(--sys-typescale-headline-small-font-family-name); - font-weight: var(--sys-typescale-headline-small-font-weight); - font-size: var(--sys-typescale-headline-small-font-size); - letter-spacing: var(--sys-typescale-headline-small-letter-spacing); - line-height: var(--sys-typescale-headline-small-line-height); -} -.body-large { - font-family: var(--sys-typescale-body-large-font-family-name); - font-weight: var(--sys-typescale-body-large-font-weight); - font-size: var(--sys-typescale-body-large-font-size); - letter-spacing: var(--sys-typescale-body-large-letter-spacing); - line-height: var(--sys-typescale-body-large-line-height); -} -.body-medium { - font-family: var(--sys-typescale-body-medium-font-family-name); - font-weight: var(--sys-typescale-body-medium-font-weight); - font-size: var(--sys-typescale-body-medium-font-size); - letter-spacing: var(--sys-typescale-body-medium-letter-spacing); - line-height: var(--sys-typescale-body-medium-line-height); -} -.body-small { - font-family: var(--sys-typescale-body-small-font-family-name); - font-weight: var(--sys-typescale-body-small-font-weight); - font-size: var(--sys-typescale-body-small-font-size); - letter-spacing: var(--sys-typescale-body-small-letter-spacing); - line-height: var(--sys-typescale-body-small-line-height); -} -.label-large { - font-family: var(--sys-typescale-label-large-font-family-name); - font-weight: var(--sys-typescale-label-large-font-weight); - font-size: var(--sys-typescale-label-large-font-size); - letter-spacing: var(--sys-typescale-label-large-letter-spacing); - line-height: var(--sys-typescale-label-large-line-height); -} -.label-medium { - font-family: var(--sys-typescale-label-medium-font-family-name); - font-weight: var(--sys-typescale-label-medium-font-weight); - font-size: var(--sys-typescale-label-medium-font-size); - letter-spacing: var(--sys-typescale-label-medium-letter-spacing); - line-height: var(--sys-typescale-label-medium-line-height); -} -.label-small { - font-family: var(--sys-typescale-label-small-font-family-name); - font-weight: var(--sys-typescale-label-small-font-weight); - font-size: var(--sys-typescale-label-small-font-size); - letter-spacing: var(--sys-typescale-label-small-letter-spacing); - line-height: var(--sys-typescale-label-small-line-height); -} -.title-large { - font-family: var(--sys-typescale-title-large-font-family-name); - font-weight: var(--sys-typescale-title-large-font-weight); - font-size: var(--sys-typescale-title-large-font-size); - letter-spacing: var(--sys-typescale-title-large-letter-spacing); - line-height: var(--sys-typescale-title-large-line-height); -} -.title-medium { - font-family: var(--sys-typescale-title-medium-font-family-name); - font-weight: var(--sys-typescale-title-medium-font-weight); - font-size: var(--sys-typescale-title-medium-font-size); - letter-spacing: var(--sys-typescale-title-medium-letter-spacing); - line-height: var(--sys-typescale-title-medium-line-height); -} -.title-small { - font-family: var(--sys-typescale-title-small-font-family-name); - font-weight: var(--sys-typescale-title-small-font-weight); - font-size: var(--sys-typescale-title-small-font-size); - letter-spacing: var(--sys-typescale-title-small-letter-spacing); - line-height: var(--sys-typescale-title-small-line-height); -} diff --git a/uniquely/soffit-site-pwa/style/index.css b/uniquely/soffit-site-pwa/style/index.css deleted file mode 100644 index ad7ec7e992..0000000000 --- a/uniquely/soffit-site-pwa/style/index.css +++ /dev/null @@ -1,13 +0,0 @@ -/* TODO: Refactor pwa build to esbuild and move the styles to ui-kit */ - -@import url('tokens/palette-hct.css'); -@import url('tokens/color.css'); -@import url('tokens/typography.css'); -@import url('tokens/radius.css'); -@import url('tokens/motion.css'); -@import url('tokens/surface.css'); -@import url('tokens/spacing.css'); -@import url('tokens/scrollbar.css'); -@import url('tokens/z-index.css'); -@import url('safe-area.css'); -@import url('body.css'); diff --git a/uniquely/soffit-site-pwa/style/mdc-grid-temp.css b/uniquely/soffit-site-pwa/style/mdc-grid-temp.css deleted file mode 100644 index 13181ab404..0000000000 --- a/uniquely/soffit-site-pwa/style/mdc-grid-temp.css +++ /dev/null @@ -1,718 +0,0 @@ -/** - https://m2.material.io/develop/web/supporting/layout-grid -*/ -:root { - --mdc-layout-grid-margin-desktop: 24px; - --mdc-layout-grid-gutter-desktop: 24px; - --mdc-layout-grid-column-width-desktop: 72px; - --mdc-layout-grid-margin-tablet: 16px; - --mdc-layout-grid-gutter-tablet: 16px; - --mdc-layout-grid-column-width-tablet: 72px; - --mdc-layout-grid-margin-phone: 16px; - --mdc-layout-grid-gutter-phone: 16px; - --mdc-layout-grid-column-width-phone: 72px; -} - -@media (min-width: 840px) { - .mdc-layout-grid { - box-sizing: border-box; - margin: 0 auto; - padding: 24px; - padding: var(--mdc-layout-grid-margin-desktop, 24px); - } -} -@media (min-width: 600px) and (max-width: 839px) { - .mdc-layout-grid { - box-sizing: border-box; - margin: 0 auto; - padding: 16px; - padding: var(--mdc-layout-grid-margin-tablet, 16px); - } -} -@media (max-width: 599px) { - .mdc-layout-grid { - box-sizing: border-box; - margin: 0 auto; - padding: 16px; - padding: var(--mdc-layout-grid-margin-phone, 16px); - } -} - -@media (min-width: 840px) { - .mdc-layout-grid__inner { - display: flex; - flex-flow: row wrap; - align-items: stretch; - margin: -12px; - margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2 * -1); - } - @supports (display: grid) { - .mdc-layout-grid__inner { - display: grid; - margin: 0; - grid-gap: 24px; - grid-gap: var(--mdc-layout-grid-gutter-desktop, 24px); - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - } -} -@media (min-width: 600px) and (max-width: 839px) { - .mdc-layout-grid__inner { - display: flex; - flex-flow: row wrap; - align-items: stretch; - margin: -8px; - margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2 * -1); - } - @supports (display: grid) { - .mdc-layout-grid__inner { - display: grid; - margin: 0; - grid-gap: 16px; - grid-gap: var(--mdc-layout-grid-gutter-tablet, 16px); - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - } -} -@media (max-width: 599px) { - .mdc-layout-grid__inner { - display: flex; - flex-flow: row wrap; - align-items: stretch; - margin: -8px; - margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2 * -1); - } - @supports (display: grid) { - .mdc-layout-grid__inner { - display: grid; - margin: 0; - grid-gap: 16px; - grid-gap: var(--mdc-layout-grid-gutter-phone, 16px); - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - } -} - -@media (min-width: 840px) { - .mdc-layout-grid__cell { - width: calc(33.3333333333% - 24px); - width: calc(33.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px)); - box-sizing: border-box; - margin: 12px; - margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2); - } - @supports (display: grid) { - .mdc-layout-grid__cell { - width: auto; - grid-column-end: span 4; - } - } - @supports (display: grid) { - .mdc-layout-grid__cell { - margin: 0; - } - } - .mdc-layout-grid__cell--span-1, - .mdc-layout-grid__cell--span-1-desktop { - width: calc(8.3333333333% - 24px); - width: calc(8.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-1, - .mdc-layout-grid__cell--span-1-desktop { - width: auto; - grid-column-end: span 1; - } - } - - .mdc-layout-grid__cell--span-2, - .mdc-layout-grid__cell--span-2-desktop { - width: calc(16.6666666667% - 24px); - width: calc(16.6666666667% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-2, - .mdc-layout-grid__cell--span-2-desktop { - width: auto; - grid-column-end: span 2; - } - } - - .mdc-layout-grid__cell--span-3, - .mdc-layout-grid__cell--span-3-desktop { - width: calc(25% - 24px); - width: calc(25% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-3, - .mdc-layout-grid__cell--span-3-desktop { - width: auto; - grid-column-end: span 3; - } - } - - .mdc-layout-grid__cell--span-4, - .mdc-layout-grid__cell--span-4-desktop { - width: calc(33.3333333333% - 24px); - width: calc(33.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-4, - .mdc-layout-grid__cell--span-4-desktop { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-5, - .mdc-layout-grid__cell--span-5-desktop { - width: calc(41.6666666667% - 24px); - width: calc(41.6666666667% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-5, - .mdc-layout-grid__cell--span-5-desktop { - width: auto; - grid-column-end: span 5; - } - } - - .mdc-layout-grid__cell--span-6, - .mdc-layout-grid__cell--span-6-desktop { - width: calc(50% - 24px); - width: calc(50% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-6, - .mdc-layout-grid__cell--span-6-desktop { - width: auto; - grid-column-end: span 6; - } - } - - .mdc-layout-grid__cell--span-7, - .mdc-layout-grid__cell--span-7-desktop { - width: calc(58.3333333333% - 24px); - width: calc(58.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-7, - .mdc-layout-grid__cell--span-7-desktop { - width: auto; - grid-column-end: span 7; - } - } - - .mdc-layout-grid__cell--span-8, - .mdc-layout-grid__cell--span-8-desktop { - width: calc(66.6666666667% - 24px); - width: calc(66.6666666667% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-8, - .mdc-layout-grid__cell--span-8-desktop { - width: auto; - grid-column-end: span 8; - } - } - - .mdc-layout-grid__cell--span-9, - .mdc-layout-grid__cell--span-9-desktop { - width: calc(75% - 24px); - width: calc(75% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-9, - .mdc-layout-grid__cell--span-9-desktop { - width: auto; - grid-column-end: span 9; - } - } - - .mdc-layout-grid__cell--span-10, - .mdc-layout-grid__cell--span-10-desktop { - width: calc(83.3333333333% - 24px); - width: calc(83.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-10, - .mdc-layout-grid__cell--span-10-desktop { - width: auto; - grid-column-end: span 10; - } - } - - .mdc-layout-grid__cell--span-11, - .mdc-layout-grid__cell--span-11-desktop { - width: calc(91.6666666667% - 24px); - width: calc(91.6666666667% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-11, - .mdc-layout-grid__cell--span-11-desktop { - width: auto; - grid-column-end: span 11; - } - } - - .mdc-layout-grid__cell--span-12, - .mdc-layout-grid__cell--span-12-desktop { - width: calc(100% - 24px); - width: calc(100% - var(--mdc-layout-grid-gutter-desktop, 24px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-12, - .mdc-layout-grid__cell--span-12-desktop { - width: auto; - grid-column-end: span 12; - } - } -} -@media (min-width: 600px) and (max-width: 839px) { - .mdc-layout-grid__cell { - width: calc(50% - 16px); - width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px)); - box-sizing: border-box; - margin: 8px; - margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2); - } - @supports (display: grid) { - .mdc-layout-grid__cell { - width: auto; - grid-column-end: span 4; - } - } - @supports (display: grid) { - .mdc-layout-grid__cell { - margin: 0; - } - } - .mdc-layout-grid__cell--span-1, - .mdc-layout-grid__cell--span-1-tablet { - width: calc(12.5% - 16px); - width: calc(12.5% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-1, - .mdc-layout-grid__cell--span-1-tablet { - width: auto; - grid-column-end: span 1; - } - } - - .mdc-layout-grid__cell--span-2, - .mdc-layout-grid__cell--span-2-tablet { - width: calc(25% - 16px); - width: calc(25% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-2, - .mdc-layout-grid__cell--span-2-tablet { - width: auto; - grid-column-end: span 2; - } - } - - .mdc-layout-grid__cell--span-3, - .mdc-layout-grid__cell--span-3-tablet { - width: calc(37.5% - 16px); - width: calc(37.5% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-3, - .mdc-layout-grid__cell--span-3-tablet { - width: auto; - grid-column-end: span 3; - } - } - - .mdc-layout-grid__cell--span-4, - .mdc-layout-grid__cell--span-4-tablet { - width: calc(50% - 16px); - width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-4, - .mdc-layout-grid__cell--span-4-tablet { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-5, - .mdc-layout-grid__cell--span-5-tablet { - width: calc(62.5% - 16px); - width: calc(62.5% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-5, - .mdc-layout-grid__cell--span-5-tablet { - width: auto; - grid-column-end: span 5; - } - } - - .mdc-layout-grid__cell--span-6, - .mdc-layout-grid__cell--span-6-tablet { - width: calc(75% - 16px); - width: calc(75% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-6, - .mdc-layout-grid__cell--span-6-tablet { - width: auto; - grid-column-end: span 6; - } - } - - .mdc-layout-grid__cell--span-7, - .mdc-layout-grid__cell--span-7-tablet { - width: calc(87.5% - 16px); - width: calc(87.5% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-7, - .mdc-layout-grid__cell--span-7-tablet { - width: auto; - grid-column-end: span 7; - } - } - - .mdc-layout-grid__cell--span-8, - .mdc-layout-grid__cell--span-8-tablet { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-8, - .mdc-layout-grid__cell--span-8-tablet { - width: auto; - grid-column-end: span 8; - } - } - - .mdc-layout-grid__cell--span-9, - .mdc-layout-grid__cell--span-9-tablet { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-9, - .mdc-layout-grid__cell--span-9-tablet { - width: auto; - grid-column-end: span 8; - } - } - - .mdc-layout-grid__cell--span-10, - .mdc-layout-grid__cell--span-10-tablet { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-10, - .mdc-layout-grid__cell--span-10-tablet { - width: auto; - grid-column-end: span 8; - } - } - - .mdc-layout-grid__cell--span-11, - .mdc-layout-grid__cell--span-11-tablet { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-11, - .mdc-layout-grid__cell--span-11-tablet { - width: auto; - grid-column-end: span 8; - } - } - - .mdc-layout-grid__cell--span-12, - .mdc-layout-grid__cell--span-12-tablet { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-12, - .mdc-layout-grid__cell--span-12-tablet { - width: auto; - grid-column-end: span 8; - } - } -} -@media (max-width: 599px) { - .mdc-layout-grid__cell { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - box-sizing: border-box; - margin: 8px; - margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2); - } - @supports (display: grid) { - .mdc-layout-grid__cell { - width: auto; - grid-column-end: span 4; - } - } - @supports (display: grid) { - .mdc-layout-grid__cell { - margin: 0; - } - } - .mdc-layout-grid__cell--span-1, - .mdc-layout-grid__cell--span-1-phone { - width: calc(25% - 16px); - width: calc(25% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-1, - .mdc-layout-grid__cell--span-1-phone { - width: auto; - grid-column-end: span 1; - } - } - - .mdc-layout-grid__cell--span-2, - .mdc-layout-grid__cell--span-2-phone { - width: calc(50% - 16px); - width: calc(50% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-2, - .mdc-layout-grid__cell--span-2-phone { - width: auto; - grid-column-end: span 2; - } - } - - .mdc-layout-grid__cell--span-3, - .mdc-layout-grid__cell--span-3-phone { - width: calc(75% - 16px); - width: calc(75% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-3, - .mdc-layout-grid__cell--span-3-phone { - width: auto; - grid-column-end: span 3; - } - } - - .mdc-layout-grid__cell--span-4, - .mdc-layout-grid__cell--span-4-phone { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-4, - .mdc-layout-grid__cell--span-4-phone { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-5, - .mdc-layout-grid__cell--span-5-phone { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-5, - .mdc-layout-grid__cell--span-5-phone { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-6, - .mdc-layout-grid__cell--span-6-phone { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-6, - .mdc-layout-grid__cell--span-6-phone { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-7, - .mdc-layout-grid__cell--span-7-phone { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-7, - .mdc-layout-grid__cell--span-7-phone { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-8, - .mdc-layout-grid__cell--span-8-phone { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-8, - .mdc-layout-grid__cell--span-8-phone { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-9, - .mdc-layout-grid__cell--span-9-phone { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-9, - .mdc-layout-grid__cell--span-9-phone { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-10, - .mdc-layout-grid__cell--span-10-phone { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-10, - .mdc-layout-grid__cell--span-10-phone { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-11, - .mdc-layout-grid__cell--span-11-phone { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-11, - .mdc-layout-grid__cell--span-11-phone { - width: auto; - grid-column-end: span 4; - } - } - - .mdc-layout-grid__cell--span-12, - .mdc-layout-grid__cell--span-12-phone { - width: calc(100% - 16px); - width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); - } - @supports (display: grid) { - .mdc-layout-grid__cell--span-12, - .mdc-layout-grid__cell--span-12-phone { - width: auto; - grid-column-end: span 4; - } - } -} -.mdc-layout-grid__cell--order-1 { - order: 1; -} -.mdc-layout-grid__cell--order-2 { - order: 2; -} -.mdc-layout-grid__cell--order-3 { - order: 3; -} -.mdc-layout-grid__cell--order-4 { - order: 4; -} -.mdc-layout-grid__cell--order-5 { - order: 5; -} -.mdc-layout-grid__cell--order-6 { - order: 6; -} -.mdc-layout-grid__cell--order-7 { - order: 7; -} -.mdc-layout-grid__cell--order-8 { - order: 8; -} -.mdc-layout-grid__cell--order-9 { - order: 9; -} -.mdc-layout-grid__cell--order-10 { - order: 10; -} -.mdc-layout-grid__cell--order-11 { - order: 11; -} -.mdc-layout-grid__cell--order-12 { - order: 12; -} -.mdc-layout-grid__cell--align-top { - align-self: flex-start; -} -@supports (display: grid) { - .mdc-layout-grid__cell--align-top { - align-self: start; - } -} -.mdc-layout-grid__cell--align-middle { - align-self: center; -} -.mdc-layout-grid__cell--align-bottom { - align-self: flex-end; -} -@supports (display: grid) { - .mdc-layout-grid__cell--align-bottom { - align-self: end; - } -} - -@media (min-width: 840px) { - .mdc-layout-grid--fixed-column-width { - width: 1176px; - width: calc( - var(--mdc-layout-grid-column-width-desktop, 72px) * 12 + - var(--mdc-layout-grid-gutter-desktop, 24px) * 11 + - var(--mdc-layout-grid-margin-desktop, 24px) * 2 - ); - } -} -@media (min-width: 600px) and (max-width: 839px) { - .mdc-layout-grid--fixed-column-width { - width: 720px; - width: calc( - var(--mdc-layout-grid-column-width-tablet, 72px) * 8 + - var(--mdc-layout-grid-gutter-tablet, 16px) * 7 + - var(--mdc-layout-grid-margin-tablet, 16px) * 2 - ); - } -} -@media (max-width: 599px) { - .mdc-layout-grid--fixed-column-width { - width: 368px; - width: calc( - var(--mdc-layout-grid-column-width-phone, 72px) * 4 + - var(--mdc-layout-grid-gutter-phone, 16px) * 3 + - var(--mdc-layout-grid-margin-phone, 16px) * 2 - ); - } -} - -.mdc-layout-grid--align-left { - margin-right: auto; - margin-left: 0; -} - -.mdc-layout-grid--align-right { - margin-right: 0; - margin-left: auto; -} - -/*# sourceMappingURL=mdc.layout-grid.css.map*/ diff --git a/uniquely/soffit-site-pwa/style/safe-area.css b/uniquely/soffit-site-pwa/style/safe-area.css deleted file mode 100644 index e02c856926..0000000000 --- a/uniquely/soffit-site-pwa/style/safe-area.css +++ /dev/null @@ -1,23 +0,0 @@ -@supports (padding-top: 20px) { - :root { - --ion-safe-area-top: var(--ion-statusbar-padding); - } -} - -@supports (padding-top: constant(safe-area-inset-top)) { - :root { - --ion-safe-area-top: constant(safe-area-inset-top); - --ion-safe-area-bottom: constant(safe-area-inset-bottom); - --ion-safe-area-left: constant(safe-area-inset-left); - --ion-safe-area-right: constant(safe-area-inset-right); - } -} - -@supports (padding-top: env(safe-area-inset-top)) { - :root { - --ion-safe-area-top: env(safe-area-inset-top); - --ion-safe-area-bottom: env(safe-area-inset-bottom); - --ion-safe-area-left: env(safe-area-inset-left); - --ion-safe-area-right: env(safe-area-inset-right); - } -} diff --git a/uniquely/soffit-site-pwa/style/tokens/color.css b/uniquely/soffit-site-pwa/style/tokens/color.css deleted file mode 100644 index b417ecbabd..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/color.css +++ /dev/null @@ -1,124 +0,0 @@ -:root { - /* theme light */ - --sys-color-primary-hsl: var(--ref-palette-primary40); - --sys-color-on-primary-hsl: var(--ref-palette-primary100); - --sys-color-primary-container-hsl: var(--ref-palette-primary90); - --sys-color-on-primary-container-hsl: var(--ref-palette-primary10); - - --sys-color-secondary-hsl: var(--ref-palette-secondary40); - --sys-color-on-secondary-hsl: var(--ref-palette-secondary100); - --sys-color-secondary-container-hsl: var(--ref-palette-secondary90); - --sys-color-on-secondary-container-hsl: var(--ref-palette-secondary10); - - --sys-color-tertiary-hsl: var(--ref-palette-tertiary40); - --sys-color-on-tertiary-hsl: var(--ref-palette-tertiary100); - --sys-color-tertiary-container-hsl: var(--ref-palette-tertiary90); - --sys-color-on-tertiary-container-hsl: var(--ref-palette-tertiary10); - - --sys-color-background-hsl: var(--ref-palette-neutral99); - --sys-color-on-background-hsl: var(--ref-palette-neutral10); - - --sys-color-surface-hsl: var(--ref-palette-neutral99); - --sys-color-on-surface-hsl: var(--ref-palette-neutral10); - - --sys-color-surface-variant-hsl: var(--ref-palette-neutral-variant90); - --sys-color-on-surface-variant-hsl: var(--ref-palette-neutral-variant30); - - --sys-color-outline-hsl: var(--ref-palette-neutral-variant50); - --sys-color-outline-variant-hsl: var(--ref-palette-neutral-variant80); - - --sys-color-error-hsl: var(--ref-palette-error40); - --sys-color-error-container-hsl: var(--ref-palette-error90); - --sys-color-on-error-hsl: var(--ref-palette-error100); - --sys-color-on-error-container-hsl: var(--ref-palette-error10); - - --sys-color-inverse-primary-hsl: var(--ref-palette-primary80); - --sys-color-inverse-surface-hsl: var(--ref-palette-neutral20); - --sys-color-inverse-on-surface-hsl: var(--ref-palette-neutral95); - - --sys-color-surface-tint-hsl: var(--sys-color-primary-hsl); - --sys-color-shadow-hsl: var(--ref-palette-neutral0); - --sys-color-scrim-hsl: var(--ref-palette-neutral0); - - /* make colors from hsl vars */ - --sys-color-primary: hsl(var(--sys-color-primary-hsl)); - --sys-color-on-primary: hsl(var(--sys-color-on-primary-hsl)); - --sys-color-primary-container: hsl(var(--sys-color-primary-container-hsl)); - --sys-color-on-primary-container: hsl(var(--sys-color-on-primary-container-hsl)); - - --sys-color-secondary: hsl(var(--sys-color-secondary-hsl)); - --sys-color-on-secondary: hsl(var(--sys-color-on-secondary-hsl)); - --sys-color-secondary-container: hsl(var(--sys-color-secondary-container-hsl)); - --sys-color-on-secondary-container: hsl(var(--sys-color-on-secondary-container-hsl)); - - --sys-color-tertiary: hsl(var(--sys-color-tertiary-hsl)); - --sys-color-on-tertiary: hsl(var(--sys-color-on-tertiary-hsl)); - --sys-color-tertiary-container: hsl(var(--sys-color-tertiary-container-hsl)); - --sys-color-on-tertiary-container: hsl(var(--sys-color-on-tertiary-container-hsl)); - - --sys-color-background: hsl(var(--sys-color-background-hsl)); - --sys-color-on-background: hsl(var(--sys-color-on-background-hsl)); - - --sys-color-surface: hsl(var(--sys-color-surface-hsl)); - --sys-color-on-surface: hsl(var(--sys-color-on-surface-hsl)); - - --sys-color-surface-variant: hsl(var(--sys-color-surface-variant-hsl)); - --sys-color-on-surface-variant: hsl(var(--sys-color-on-surface-variant-hsl)); - - --sys-color-outline: hsl(var(--sys-color-outline-hsl)); - --sys-color-outline-variant: hsl(var(--sys-color-outline-variant-hsl)); - - --sys-color-error: hsl(var(--sys-color-error-hsl)); - --sys-color-error-container: hsl(var(--sys-color-error-container-hsl)); - --sys-color-on-error: hsl(var(--sys-color-on-error-hsl)); - --sys-color-on-error-container: hsl(var(--sys-color-on-error-container-hsl)); - - --sys-color-inverse-primary: hsl(var(--sys-color-inverse-primary-hsl)); - --sys-color-inverse-surface: hsl(var(--sys-color-inverse-surface-hsl)); - --sys-color-inverse-on-surface: hsl(var(--sys-color-inverse-on-surface-hsl)); - - --sys-color-surface-tint: hsl(var(--sys-color-surface-tint-hsl)); - --sys-color-shadow: hsl(var(--sys-color-shadow-hsl)); - --sys-color-scrim: hsl(var(--sys-color-scrim-hsl)); -} - -@media (prefers-color-scheme: dark) { - :root { - /* theme dark */ - --sys-color-primary-hsl: var(--ref-palette-primary80); - --sys-color-on-primary-hsl: var(--ref-palette-primary20); - --sys-color-primary-container-hsl: var(--ref-palette-primary30); - --sys-color-on-primary-container-hsl: var(--ref-palette-primary90); - - --sys-color-secondary-hsl: var(--ref-palette-secondary80); - --sys-color-on-secondary-hsl: var(--ref-palette-secondary20); - --sys-color-secondary-container-hsl: var(--ref-palette-secondary30); - --sys-color-on-secondary-container-hsl: var(--ref-palette-secondary90); - - --sys-color-tertiary-hsl: var(--ref-palette-tertiary80); - --sys-color-on-tertiary-hsl: var(--ref-palette-tertiary20); - --sys-color-tertiary-container-hsl: var(--ref-palette-tertiary30); - --sys-color-on-tertiary-container-hsl: var(--ref-palette-tertiary90); - - --sys-color-background-hsl: var(--ref-palette-neutral10); - --sys-color-on-background-hsl: var(--ref-palette-neutral90); - - --sys-color-surface-hsl: var(--ref-palette-neutral10); - --sys-color-on-surface-hsl: var(--ref-palette-neutral90); - - --sys-color-surface-variant-hsl: var(--ref-palette-neutral-variant30); - --sys-color-on-surface-variant-hsl: var(--ref-palette-neutral-variant80); - - --sys-color-outline-hsl: var(--ref-palette-neutral-variant60); - --sys-color-outline-variant-hsl: var(--ref-palette-neutral-variant30); - - --sys-color-error-hsl: var(--ref-palette-error80); - --sys-color-error-container-hsl: var(--ref-palette-error30); - --sys-color-on-error-hsl: var(--ref-palette-error20); - --sys-color-on-error-container-hsl: var(--ref-palette-error90); - - --sys-color-inverse-primary-hsl: var(--ref-palette-primary40); - --sys-color-inverse-surface-hsl: var(--ref-palette-neutral90); - --sys-color-inverse-on-surface-hsl: var(--ref-palette-neutral20); - } -} diff --git a/uniquely/soffit-site-pwa/style/tokens/elevation-extra.css b/uniquely/soffit-site-pwa/style/tokens/elevation-extra.css deleted file mode 100644 index 121c40a38e..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/elevation-extra.css +++ /dev/null @@ -1,97 +0,0 @@ -:root { - --sys-surface-elevation-6: - 0px 3px 5px -1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 6px 10px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 1px 18px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-7: - 0px 4px 5px -2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 7px 10px 1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 2px 16px 1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-8: - 0px 5px 5px -3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 8px 10px 1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 3px 14px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-9: - 0px 5px 6px -3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 9px 12px 1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 3px 16px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-10: - 0px 6px 6px -3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 10px 14px 1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 4px 18px 3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-11: - 0px 6px 7px -4px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 11px 15px 1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 4px 20px 3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-12: - 0px 7px 8px -4px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 12px 17px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 5px 22px 4px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-13: - 0px 7px 8px -4px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 13px 19px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 5px 24px 4px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-14: - 0px 7px 9px -4px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 14px 21px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 5px 26px 4px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-15: - 0px 8px 9px -5px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 15px 22px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 6px 28px 5px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-16: - 0px 8px 10px -5px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 16px 24px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 6px 30px 5px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-17: - 0px 8px 11px -5px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 17px 26px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 6px 32px 5px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-18: - 0px 9px 11px -5px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 18px 28px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 7px 34px 6px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-19: - 0px 9px 12px -6px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 19px 29px 2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 7px 36px 6px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-20: - 0px 10px 13px -6px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 20px 31px 3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 8px 38px 7px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-21: - 0px 10px 13px -6px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 21px 33px 3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 8px 40px 7px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-22: - 0px 10px 14px -6px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 22px 35px 3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 8px 42px 7px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-23: - 0px 11px 14px -7px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 23px 36px 3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 9px 44px 8px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-24: - 0px 11px 15px -7px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 24px 38px 3px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 9px 46px 8px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; -} diff --git a/uniquely/soffit-site-pwa/style/tokens/motion.css b/uniquely/soffit-site-pwa/style/tokens/motion.css deleted file mode 100644 index fb1e2100bc..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/motion.css +++ /dev/null @@ -1,16 +0,0 @@ -:root { - --ref-motion-duration-frame: 16.66666666666666667ms; - - --sys-motion-duration-none: calc(2 * var(--ref-motion-duration-frame)); - --sys-motion-duration-small-in: calc(8 * var(--ref-motion-duration-frame)); - --sys-motion-duration-small-out: calc(6 * var(--ref-motion-duration-frame)); - --sys-motion-duration-medium-in: calc(16 * var(--ref-motion-duration-frame)); - --sys-motion-duration-medium-out: calc(12 * var(--ref-motion-duration-frame)); - --sys-motion-duration-large-in: calc(18 * var(--ref-motion-duration-frame)); - --sys-motion-duration-large-out: calc(16 * var(--ref-motion-duration-frame)); - - --sys-motion-easing-linear: cubic-bezier(0.4, 0, 0.6, 1); - --sys-motion-easing-incoming: cubic-bezier(0, 0, 0.2, 1); - --sys-motion-easing-exiting: cubic-bezier(0.4, 0, 1, 1); - --sys-motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); -} diff --git a/uniquely/soffit-site-pwa/style/tokens/palette-hct.css b/uniquely/soffit-site-pwa/style/tokens/palette-hct.css deleted file mode 100644 index 6f58f4dba3..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/palette-hct.css +++ /dev/null @@ -1,122 +0,0 @@ -:root { - --ref-palette-primary-hue: 300; - --ref-palette-primary-chroma: 48%; /* maximum 48 */ - --ref-palette-secondary-hue: var(--ref-palette-primary-hue); - --ref-palette-secondary-chroma: 16%; - --ref-palette-tertiary-hue: calc(var(--ref-palette-primary-hue) + 60); - --ref-palette-tertiary-chroma: 24%; - --ref-palette-neutral-hue: var(--ref-palette-primary-hue); - --ref-palette-neutral-chroma: 4; - --ref-palette-neutral-variant-hue: var(--ref-palette-primary-hue); - --ref-palette-neutral-variant-chroma: 8; - --ref-palette-error-hue: 25; - --ref-palette-error-chroma: 84; - - /* primary */ - --ref-palette-primary0: 0, 0%, 0%; - --ref-palette-primary10: 262.8, 100%, 18%; - --ref-palette-primary20: 259.8, 59.4%, 28%; - --ref-palette-primary25: 258.6, 50%, 32.9%; - --ref-palette-primary30: 258.1, 43%, 37.8%; - --ref-palette-primary35: 257.9, 38.5%, 42.7%; - --ref-palette-primary40: 257.6, 35%, 47.6%; - --ref-palette-primary50: 257.9, 40.5%, 57.8%; - --ref-palette-primary60: 257.5, 55.3%, 68.4%; - --ref-palette-primary70: 257.6, 86.8%, 79.2%; - --ref-palette-primary80: 257.9, 100%, 86.9%; - --ref-palette-primary90: 261.2, 100%, 93.3%; - --ref-palette-primary95: 270, 100%, 96.5%; - --ref-palette-primary98: 292.5, 100%, 98.4%; - --ref-palette-primary99: 300, 100%, 99.2%; - --ref-palette-primary100: 0, 0%, 100%; - - /* secondary */ - --ref-palette-secondary0: 0, 0%, 0%; - --ref-palette-secondary10: 256.7, 26.5%, 13.3%; - --ref-palette-secondary20: 258, 18.2%, 21.6%; - --ref-palette-secondary25: 258, 15.2%, 25.9%; - --ref-palette-secondary30: 258, 12.8%, 30.6%; - --ref-palette-secondary35: 260, 11.7%, 35.1%; - --ref-palette-secondary40: 260, 10.3%, 39.8%; - --ref-palette-secondary50: 260.9, 9.1%, 49.6%; - --ref-palette-secondary60: 260.9, 11.2%, 59.8%; - --ref-palette-secondary70: 262.5, 15.8%, 70.2%; - --ref-palette-secondary80: 264, 25.8%, 81%; - --ref-palette-secondary90: 263.1, 65%, 92.2%; - --ref-palette-secondary95: 270, 100%, 96.5%; - --ref-palette-secondary98: 292.5, 100%, 98.4%; - --ref-palette-secondary99: 300, 100%, 99.2%; - --ref-palette-secondary100: 0, 0%, 100%; - - /* tertiary */ - --ref-palette-tertiary0: 0, 0%, 0%; - --ref-palette-tertiary10: 338.2, 50.8%, 12.7%; - --ref-palette-tertiary20: 340.5, 33.3%, 21.8%; - --ref-palette-tertiary25: 341.1, 28.4%, 26.3%; - --ref-palette-tertiary30: 340.5, 25.3%, 31%; - --ref-palette-tertiary35: 341.4, 23.1%, 35.7%; - --ref-palette-tertiary40: 342.3, 21.2%, 40.8%; - --ref-palette-tertiary50: 342.1, 18.7%, 50.8%; - --ref-palette-tertiary60: 343.2, 25.3%, 61.2%; - --ref-palette-tertiary70: 343, 37.1%, 72%; - --ref-palette-tertiary80: 343.9, 65.1%, 83.1%; - --ref-palette-tertiary90: 345.8, 100%, 92.5%; - --ref-palette-tertiary95: 347.4, 100%, 96.3%; - --ref-palette-tertiary98: 0, 100%, 98.6%; - --ref-palette-tertiary99: 300, 100%, 99.2%; - --ref-palette-tertiary100: 0, 0%, 100%; - - /* neutral */ - --ref-palette-neutral0: 0, 0%, 0%; - --ref-palette-neutral10: 260, 5.3%, 11.2%; - --ref-palette-neutral20: 280, 3%, 19.4%; - --ref-palette-neutral25: 280, 2.5%, 23.7%; - --ref-palette-neutral30: 270, 2.8%, 28.2%; - --ref-palette-neutral35: 276, 3%, 32.7%; - --ref-palette-neutral40: 276, 2.6%, 37.5%; - --ref-palette-neutral50: 285, 1.7%, 47.1%; - --ref-palette-neutral60: 288, 2.3%, 57.1%; - --ref-palette-neutral70: 300, 2.4%, 67.5%; - --ref-palette-neutral80: 300, 4.5%, 78.2%; - --ref-palette-neutral90: 300, 9.1%, 89.2%; - --ref-palette-neutral95: 310, 23.1%, 94.9%; - --ref-palette-neutral98: 300, 55.6%, 98.2%; - --ref-palette-neutral99: 300, 100%, 99.2%; - --ref-palette-neutral100: 0, 0%, 100%; - - /* neutral-variant */ - --ref-palette-neutral-variant0: 0, 0%, 0%; - --ref-palette-neutral-variant10: 262.5, 13.3%, 11.8%; - --ref-palette-neutral-variant20: 262.5, 7.8%, 20%; - --ref-palette-neutral-variant25: 260, 7.2%, 24.5%; - --ref-palette-neutral-variant30: 266.7, 6.1%, 28.8%; - --ref-palette-neutral-variant35: 266.7, 5.3%, 33.5%; - --ref-palette-neutral-variant40: 266.7, 4.6%, 38.2%; - --ref-palette-neutral-variant50: 270, 4.1%, 47.8%; - --ref-palette-neutral-variant60: 270, 4.7%, 58%; - --ref-palette-neutral-variant70: 272.7, 6.8%, 68.4%; - --ref-palette-neutral-variant80: 272.7, 10.3%, 79%; - --ref-palette-neutral-variant90: 278.2, 21.6%, 90%; - --ref-palette-neutral-variant95: 275, 54.5%, 95.7%; - --ref-palette-neutral-variant98: 292.5, 100%, 98.4%; - --ref-palette-neutral-variant99: 300, 100%, 99.2%; - --ref-palette-neutral-variant100: 0, 0%, 100%; - - /* error */ - --ref-palette-error0: 0, 0%, 0%; - --ref-palette-error10: 358.2, 100%, 12.7%; - --ref-palette-error20: 357.1, 100%, 20.6%; - --ref-palette-error25: 356.7, 100%, 24.7%; - --ref-palette-error30: 355.9, 100%, 28.8%; - --ref-palette-error35: 356.6, 92%, 34.3%; - --ref-palette-error40: 0, 75.5%, 41.6%; - --ref-palette-error50: 2.4, 72.5%, 52.9%; - --ref-palette-error60: 3.6, 100%, 64.3%; - --ref-palette-error70: 5.5, 100%, 74.5%; - --ref-palette-error80: 6.4, 100%, 83.5%; - --ref-palette-error90: 5.9, 100%, 92%; - --ref-palette-error95: 8.6, 100%, 95.9%; - --ref-palette-error98: 7.5, 100%, 98.4%; - --ref-palette-error99: 300, 100%, 99.2%; - --ref-palette-error100: 0, 0%, 100%; -} diff --git a/uniquely/soffit-site-pwa/style/tokens/palette-hsl.css b/uniquely/soffit-site-pwa/style/tokens/palette-hsl.css deleted file mode 100644 index bc7927dab3..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/palette-hsl.css +++ /dev/null @@ -1,122 +0,0 @@ -:root { - --ref-palette-primary-hue: 260; - --ref-palette-primary-chroma: 48%; /* maximum 48 */ - --ref-palette-secondary-hue: var(--ref-palette-primary-hue); - --ref-palette-secondary-chroma: 16%; - --ref-palette-tertiary-hue: calc(var(--ref-palette-primary-hue) + 60); - --ref-palette-tertiary-chroma: 24%; - --ref-palette-neutral-hue: var(--ref-palette-primary-hue); - --ref-palette-neutral-chroma: 4%; - --ref-palette-neutral-variant-hue: var(--ref-palette-primary-hue); - --ref-palette-neutral-variant-chroma: 8%; - --ref-palette-error-hue: 25; - --ref-palette-error-chroma: 84%; - - /* primary */ - --ref-palette-primary0: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 0%; - --ref-palette-primary10: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 10%; - --ref-palette-primary20: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 20%; - --ref-palette-primary25: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 25%; - --ref-palette-primary30: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 30%; - --ref-palette-primary35: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 35%; - --ref-palette-primary40: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 40%; - --ref-palette-primary50: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 50%; - --ref-palette-primary60: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 60%; - --ref-palette-primary70: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 70%; - --ref-palette-primary80: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 80%; - --ref-palette-primary90: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 90%; - --ref-palette-primary95: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 95%; - --ref-palette-primary98: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 98%; - --ref-palette-primary99: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 99%; - --ref-palette-primary100: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 100%; - - /* secondary */ - --ref-palette-secondary0: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 0%; - --ref-palette-secondary10: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 10%; - --ref-palette-secondary20: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 20%; - --ref-palette-secondary25: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 25%; - --ref-palette-secondary30: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 30%; - --ref-palette-secondary35: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 35%; - --ref-palette-secondary40: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 40%; - --ref-palette-secondary50: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 50%; - --ref-palette-secondary60: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 60%; - --ref-palette-secondary70: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 70%; - --ref-palette-secondary80: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 80%; - --ref-palette-secondary90: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 90%; - --ref-palette-secondary95: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 95%; - --ref-palette-secondary98: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 98%; - --ref-palette-secondary99: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 99%; - --ref-palette-secondary100: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 100%; - - /* tertiary */ - --ref-palette-tertiary0: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 0%; - --ref-palette-tertiary10: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 10%; - --ref-palette-tertiary20: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 20%; - --ref-palette-tertiary25: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 25%; - --ref-palette-tertiary30: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 30%; - --ref-palette-tertiary35: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 35%; - --ref-palette-tertiary40: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 40%; - --ref-palette-tertiary50: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 50%; - --ref-palette-tertiary60: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 60%; - --ref-palette-tertiary70: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 70%; - --ref-palette-tertiary80: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 80%; - --ref-palette-tertiary90: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 90%; - --ref-palette-tertiary95: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 95%; - --ref-palette-tertiary98: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 98%; - --ref-palette-tertiary99: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 99%; - --ref-palette-tertiary100: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 100%; - - /* neutral */ - --ref-palette-neutral0: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 0%; - --ref-palette-neutral10: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 10%; - --ref-palette-neutral20: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 20%; - --ref-palette-neutral25: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 25%; - --ref-palette-neutral30: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 30%; - --ref-palette-neutral35: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 35%; - --ref-palette-neutral40: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 40%; - --ref-palette-neutral50: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 50%; - --ref-palette-neutral60: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 60%; - --ref-palette-neutral70: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 70%; - --ref-palette-neutral80: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 80%; - --ref-palette-neutral90: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 90%; - --ref-palette-neutral95: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 95%; - --ref-palette-neutral98: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 98%; - --ref-palette-neutral99: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 99%; - --ref-palette-neutral100: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 100%; - - /* neutral-variant */ - --ref-palette-neutral-variant0: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 0%; - --ref-palette-neutral-variant10: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 10%; - --ref-palette-neutral-variant20: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 20%; - --ref-palette-neutral-variant25: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 25%; - --ref-palette-neutral-variant30: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 30%; - --ref-palette-neutral-variant35: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 35%; - --ref-palette-neutral-variant40: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 40%; - --ref-palette-neutral-variant50: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 50%; - --ref-palette-neutral-variant60: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 60%; - --ref-palette-neutral-variant70: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 70%; - --ref-palette-neutral-variant80: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 80%; - --ref-palette-neutral-variant90: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 90%; - --ref-palette-neutral-variant95: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 95%; - --ref-palette-neutral-variant98: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 98%; - --ref-palette-neutral-variant99: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 99%; - --ref-palette-neutral-variant100: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 100%; - - /* error */ - --ref-palette-error0: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 0%; - --ref-palette-error10: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 10%; - --ref-palette-error20: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 20%; - --ref-palette-error25: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 25%; - --ref-palette-error30: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 30%; - --ref-palette-error35: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 35%; - --ref-palette-error40: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 40%; - --ref-palette-error50: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 50%; - --ref-palette-error60: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 60%; - --ref-palette-error70: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 70%; - --ref-palette-error80: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 80%; - --ref-palette-error90: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 90%; - --ref-palette-error95: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 95%; - --ref-palette-error98: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 98%; - --ref-palette-error99: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 99%; - --ref-palette-error100: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 100%; -} diff --git a/uniquely/soffit-site-pwa/style/tokens/radius.css b/uniquely/soffit-site-pwa/style/tokens/radius.css deleted file mode 100644 index 396da21c98..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/radius.css +++ /dev/null @@ -1,8 +0,0 @@ -:root { - --sys-radius-none: 2px; - --sys-radius-xsmall: 4px; - --sys-radius-small: 8px; - --sys-radius-medium: 12px; - --sys-radius-large: 16px; - --sys-radius-xlarge: 28px; -} diff --git a/uniquely/soffit-site-pwa/style/tokens/scrollbar.css b/uniquely/soffit-site-pwa/style/tokens/scrollbar.css deleted file mode 100644 index cc1b9dc3cd..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/scrollbar.css +++ /dev/null @@ -1,14 +0,0 @@ -:root { - --sys-scrollbar-background: transparent; - --sys-scrollbar-color: rgba(0, 0, 0, var(--sys-surface-state-opacity-hover)); - --sys-scrollbar-color-hover: rgba(0, 0, 0, var(--sys-surface-state-opacity-pressed)); - --sys-scrollbar-size: 3px; - --sys-scrollbar-radius: calc(var(--sys-scrollbar-size) / 2); -} - -@media (prefers-color-scheme: dark) { - :root { - --sys-scrollbar-color: rgba(255, 255, 255, var(--sys-surface-state-opacity-hover)); - --sys-scrollbar-color-hover: rgba(255, 255, 255, var(--sys-surface-state-opacity-pressed)); - } -} diff --git a/uniquely/soffit-site-pwa/style/tokens/spacing.css b/uniquely/soffit-site-pwa/style/tokens/spacing.css deleted file mode 100644 index 94acb891ab..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/spacing.css +++ /dev/null @@ -1,58 +0,0 @@ -/* https://material.io/design/layout/spacing-methods.html */ -:root { - --sys-spacing-track: 0.8rem; - - --sys-breakpoint-handset: 600px; - --sys-breakpoint-tablet: 840px; - --sys-breakpoint-laptop: 1240px; - --sys-breakpoint-large-screen: 1440px; - - --sys-spacing-column-1: calc( - (100vw - var(--sys-spacing-side-padding) * 2 - var(--sys-spacing-gutter) * (var(--sys-column-count) - 1)) - / var(--sys-column-count) - ); - --sys-spacing-column-2: calc(var(--sys-spacing-column-1) * 2 + var(--sys-spacing-gutter)); - --sys-spacing-column-3: calc(var(--sys-spacing-column-1) * 3 + var(--sys-spacing-gutter) * 2); - --sys-spacing-column-4: calc(var(--sys-spacing-column-1) * 4 + var(--sys-spacing-gutter) * 3); - - /* < 600px */ - --sys-column-count: 4; - --sys-spacing-side-padding: var(--sys-spacing-track); - --sys-spacing-gutter: calc(2 * var(--sys-spacing-track)); -} - -/* >= 600 */ -@media only screen and (min-width: 600px) { - :root { - --sys-column-count: 8; - --sys-spacing-side-padding: calc(3 * var(--sys-spacing-track)); - --sys-spacing-gutter: calc(3 * var(--sys-spacing-track)); - } -} - -/* >= 840px */ -@media only screen and (min-width: 840px) { - :root { - --sys-column-count: 12; - /* --sys-spacing-side-padding: calc(3 * var(--sys-spacing-track)); - --sys-spacing-gutter: calc(3 * var(--sys-spacing-track)); */ - } -} - -/* >= 1200px */ -@media only screen and (min-width: 1200px) { - :root { - /* --sys-column-count: 12; */ - --sys-spacing-side-padding: calc(4 * var(--sys-spacing-track)); - --sys-spacing-gutter: calc(4 * var(--sys-spacing-track)); - } -} - -/* >= 1440px */ -/* @media only screen and (min-width: 1440px) { - :root { - --sys-column-count: 12; - --sys-spacing-side-padding: calc(4 * var(--sys-spacing-track)); - --sys-spacing-gutter: calc(4 * var(--sys-spacing-track)); - } -} */ diff --git a/uniquely/soffit-site-pwa/style/tokens/surface.css b/uniquely/soffit-site-pwa/style/tokens/surface.css deleted file mode 100644 index b342611824..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/surface.css +++ /dev/null @@ -1,50 +0,0 @@ -:root { - --sys-surface-tint-opacity-1: 0.05; - --sys-surface-tint-opacity-2: 0.08; - --sys-surface-tint-opacity-3: 0.11; - --sys-surface-tint-opacity-4: 0.12; - --sys-surface-tint-opacity-5: 0.14; - - --sys-surface-state-opacity-dragged: 0.159; - --sys-surface-state-opacity-pressed: 0.119; - --sys-surface-state-opacity-focus: 0.119; - --sys-surface-state-opacity-hover: 0.079; - - --sys-surface-disabled-opacity: 0.38; - --sys-surface-disabled-outlined-opacity: 0.12; - - --sys-surface-elevation-opacity-1: 0.2; - --sys-surface-elevation-opacity-2: 0.14; - --sys-surface-elevation-opacity-3: 0.12; - - --sys-surface-elevation-0: - 0px 0px 0px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 0px 0px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 0px 0px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-1: - 0px 2px 1px -1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 1px 1px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 1px 3px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-2: - 0px 3px 1px -2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 2px 2px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 1px 5px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-3: - 0px 3px 3px -2px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 3px 4px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 1px 8px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-4: - 0px 2px 4px -1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 4px 5px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 1px 10px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; - --sys-surface-elevation-5: - 0px 3px 5px -1px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-1)), - 0px 5px 8px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-2)), - 0px 1px 14px 0px hsla(var(--sys-color-shadow-hsl), var(--sys-surface-elevation-opacity-3)) - ; -} diff --git a/uniquely/soffit-site-pwa/style/tokens/typography.css b/uniquely/soffit-site-pwa/style/tokens/typography.css deleted file mode 100644 index 047a38e314..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/typography.css +++ /dev/null @@ -1,117 +0,0 @@ -:root { - /* references */ - --ref-font-weight-regular: 400; - --ref-font-weight-medium: 500; - --ref-font-weight-bold: 700; - - --ref-font-family-system: - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Open Sans', - 'Helvetica Neue', - 'Arial', - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji', - 'Segoe UI Symbol' - ; - --sys-font-family-plain: var(--font-vazirmatn), var(--ref-font-family-system); - --sys-font-family-brand: var(--font-vazirmatn), var(--ref-font-family-system); - - /* display - large */ - --sys-typescale-display-large-font-family-name: var(--sys-font-family-brand); - --sys-typescale-display-large-font-weight: var(--ref-font-weight-regular); - --sys-typescale-display-large-font-size: 5.7rem; - --sys-typescale-display-large-line-height: 6.4rem; - --sys-typescale-display-large-letter-spacing: -0.025rem; - /* display - medium */ - --sys-typescale-display-medium-font-family-name: var(--sys-font-family-brand); - --sys-typescale-display-medium-font-weight: var(--ref-font-weight-regular); - --sys-typescale-display-medium-font-size: 4.5rem; - --sys-typescale-display-medium-line-height: 5.2rem; - --sys-typescale-display-medium-letter-spacing: 0rem; - /* display - small */ - --sys-typescale-display-small-font-family-name: var(--sys-font-family-brand); - --sys-typescale-display-small-font-weight: var(--ref-font-weight-regular); - --sys-typescale-display-small-font-size: 3.6rem; - --sys-typescale-display-small-line-height: 4.4rem; - --sys-typescale-display-small-letter-spacing: 0rem; - /* headline - large */ - --sys-typescale-headline-large-font-family-name: var(--sys-font-family-brand); - --sys-typescale-headline-large-font-weight: var(--ref-font-weight-regular); - --sys-typescale-headline-large-font-size: 3.2rem; - --sys-typescale-headline-large-line-height: 4rem; - --sys-typescale-headline-large-letter-spacing: 0rem; - /* headline - medium */ - --sys-typescale-headline-medium-font-family-name: var(--sys-font-family-brand); - --sys-typescale-headline-medium-font-weight: var(--ref-font-weight-regular); - --sys-typescale-headline-medium-font-size: 2.8rem; - --sys-typescale-headline-medium-line-height: 3.6rem; - --sys-typescale-headline-medium-letter-spacing: 0rem; - /* headline - small */ - --sys-typescale-headline-small-font-family-name: var(--sys-font-family-brand); - --sys-typescale-headline-small-font-weight: var(--ref-font-weight-regular); - --sys-typescale-headline-small-font-size: 2.4rem; - --sys-typescale-headline-small-line-height: 3.2rem; - --sys-typescale-headline-small-letter-spacing: 0rem; - /* body - large */ - --sys-typescale-body-large-font-family-name: var(--sys-font-family-plain); - --sys-typescale-body-large-font-weight: var(--ref-font-weight-regular); - --sys-typescale-body-large-font-size: 1.6rem; - --sys-typescale-body-large-line-height: 2.4rem; - --sys-typescale-body-large-letter-spacing: 0.05rem; - /* body - medium */ - --sys-typescale-body-medium-font-family-name: var(--sys-font-family-plain); - --sys-typescale-body-medium-font-weight: var(--ref-font-weight-regular); - --sys-typescale-body-medium-font-size: 1.4rem; - --sys-typescale-body-medium-line-height: 2rem; - --sys-typescale-body-medium-letter-spacing: 0.025rem; - /* body - small */ - --sys-typescale-body-small-font-family-name: var(--sys-font-family-plain); - --sys-typescale-body-small-font-weight: var(--ref-font-weight-regular); - --sys-typescale-body-small-font-size: 1.2rem; - --sys-typescale-body-small-line-height: 1.6rem; - --sys-typescale-body-small-letter-spacing: 0.04rem; - /* label - large */ - --sys-typescale-label-large-font-family-name: var(--sys-font-family-plain); - --sys-typescale-label-large-font-weight: var(--ref-font-weight-medium); - --sys-typescale-label-large-font-size: 1.4rem; - --sys-typescale-label-large-line-height: 2rem; - --sys-typescale-label-large-letter-spacing: 0.01rem; - /* label - medium */ - --sys-typescale-label-medium-font-family-name: var(--sys-font-family-plain); - --sys-typescale-label-medium-font-weight: var(--ref-font-weight-medium); - --sys-typescale-label-medium-font-size: 1.2rem; - --sys-typescale-label-medium-line-height: 1.6rem; - --sys-typescale-label-medium-letter-spacing: 0.05rem; - /* label - small */ - --sys-typescale-label-small-font-family-name: var(--sys-font-family-plain); - --sys-typescale-label-small-font-weight: var(--ref-font-weight-medium); - --sys-typescale-label-small-font-size: 1.1rem; - --sys-typescale-label-small-line-height: 1.6rem; - --sys-typescale-label-small-letter-spacing: 0.05rem; - /* title - large */ - --sys-typescale-title-large-font-family-name: var(--sys-font-family-brand); - --sys-typescale-title-large-font-weight: var(--ref-font-weight-regular); - --sys-typescale-title-large-font-size: 2.2rem; - --sys-typescale-title-large-line-height: 2.8rem; - --sys-typescale-title-large-letter-spacing: 0rem; - /* title - medium */ - --sys-typescale-title-medium-font-family-name: var(--sys-font-family-plain); - --sys-typescale-title-medium-font-weight: var(--ref-font-weight-medium); - --sys-typescale-title-medium-font-size: 1.6rem; - --sys-typescale-title-medium-line-height: 2.4rem; - --sys-typescale-title-medium-letter-spacing: 0.015rem; - /* title - small */ - --sys-typescale-title-small-font-family-name: var(--sys-font-family-plain); - --sys-typescale-title-small-font-weight: var(--ref-font-weight-medium); - --sys-typescale-title-small-font-size: 1.4rem; - --sys-typescale-title-small-line-height: 2rem; - --sys-typescale-title-small-letter-spacing: 0.01rem; -} diff --git a/uniquely/soffit-site-pwa/style/tokens/z-index.css b/uniquely/soffit-site-pwa/style/tokens/z-index.css deleted file mode 100644 index 24178f5bf7..0000000000 --- a/uniquely/soffit-site-pwa/style/tokens/z-index.css +++ /dev/null @@ -1,14 +0,0 @@ -:root { - --sys-zindex-bottomness: -900; - --sys-zindex-below: -1; - --sys-zindex-default: 1; - --sys-zindex-above: 2; - --sys-zindex-dropdown: 100; - --sys-zindex-sticky: 200; - --sys-zindex-fixed: 300; - --sys-zindex-backdrop: 400; - --sys-zindex-modal: 500; - --sys-zindex-popover: 600; - --sys-zindex-tooltip: 700; - --sys-zindex-topness: 900; -} diff --git a/uniquely/soffit-site-pwa/web-dev-server.config.js b/uniquely/soffit-site-pwa/web-dev-server.config.js index 82dc099165..ecf4297fd2 100644 --- a/uniquely/soffit-site-pwa/web-dev-server.config.js +++ b/uniquely/soffit-site-pwa/web-dev-server.config.js @@ -5,15 +5,9 @@ const config = { port: 8080, open: true, watch: true, + // debug: true, + rootDir: 'dist', appIndex: 'index.html', - nodeResolve: { - exportConditions: ['development'], - }, - esbuildTarget: 'auto', - // in a monorepo you need to set set the root dir to resolve modules - rootDir: '.', - // debug: false, - preserveSymlinks: true, plugins: [], middleware: [(context, next) => { // if file not found, return app index.html diff --git a/yarn.lock b/yarn.lock index 5aef178f5d..b23ee81b8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7850,6 +7850,11 @@ rimraf@^3.0.0, rimraf@^3.0.2: dependencies: glob "^7.1.3" +rimraf@^4.0.4: + version "4.1.1" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-4.1.1.tgz#ec29817863e5d82d22bca82f9dc4325be2f1e72b" + integrity sha512-Z4Y81w8atcvaJuJuBB88VpADRH66okZAuEm+Jtaufa+s7rZmIz+Hik2G53kGaNytE7lsfXyWktTmfVz0H9xuDg== + rimraf@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-4.1.0.tgz#c503e3b75b0da4e276846b45cace9a93d16a4903"