From 49e8019c279463977b2c28eaaed60c7ae5b98741 Mon Sep 17 00:00:00 2001 From: Rares Munteanu Date: Wed, 3 Dec 2025 17:07:34 +0100 Subject: [PATCH 1/6] Build Figma vars --- .github/workflows/update-s2a-styles.js | 261 ++++++++ .github/workflows/update-s2a-styles.yaml | 31 + libs/styles/deps/tokens.primitives.css | 108 ++++ libs/styles/deps/tokens.primitives.dark.css | 121 ++++ libs/styles/deps/tokens.primitives.light.css | 121 ++++ libs/styles/deps/tokens.semantic.css | 72 +++ libs/styles/deps/tokens.semantic.dark.css | 44 ++ libs/styles/deps/tokens.semantic.light.css | 44 ++ libs/styles/styles-s2a.css | 608 +++++++++++++++++++ package-lock.json | 251 +++++++- package.json | 5 +- 11 files changed, 1650 insertions(+), 16 deletions(-) create mode 100644 .github/workflows/update-s2a-styles.js create mode 100644 .github/workflows/update-s2a-styles.yaml create mode 100644 libs/styles/deps/tokens.primitives.css create mode 100644 libs/styles/deps/tokens.primitives.dark.css create mode 100644 libs/styles/deps/tokens.primitives.light.css create mode 100644 libs/styles/deps/tokens.semantic.css create mode 100644 libs/styles/deps/tokens.semantic.dark.css create mode 100644 libs/styles/deps/tokens.semantic.light.css create mode 100644 libs/styles/styles-s2a.css diff --git a/.github/workflows/update-s2a-styles.js b/.github/workflows/update-s2a-styles.js new file mode 100644 index 00000000000..e54d5cee03d --- /dev/null +++ b/.github/workflows/update-s2a-styles.js @@ -0,0 +1,261 @@ +const { execSync } = require('child_process'); +const fs = require('fs'); +const fsp = require('fs/promises'); +const path = require('path'); +const postcss = require('postcss'); + +// Run locally: npm run build:s2a (build only) +// Run in CI: Called by Github action (build + PR) + +const BRANCH = 'update-s2a-styles'; +const TITLE = '[AUTOMATED-PR] Update S2A style tokens'; +const TARGET_FILE = './libs/styles/styles-s2a.css'; +const DEPS_DIR = './libs/styles/deps'; + +// S2A Build Logic +function trimWhitespace(str) { + return str.replace(/\s/g, ''); +} + +function isS2aVar(decl) { + return decl.startsWith('--s2a-'); +} + +function isTokensFile(f) { + return f.isFile() + && f.name.startsWith('tokens.') + && f.name.endsWith('.css'); +} + +async function getCssFiles(dir) { + const dirEntries = await fsp.readdir(dir, { withFileTypes: true }); + return dirEntries + .filter(isTokensFile) + .map((f) => path.join(dir, f.name)); +} + +function getSelectorMode(sel) { + const s = trimWhitespace(sel); + if (s === ':root') return 'light'; + if (s === '.dark') return 'dark'; + const match = s.match(/^:root\[data-theme\s*=\s*("|')(\w+)\1?\]$/); + return match ? match[2] : 'light'; +} + +function extractDeclsFromRule(rule) { + return rule.nodes.filter((node) => node.type === 'decl'); +} + +function limitDecimals(str) { + return str.replace(/(\d+\.\d{4})\d*/g, '$1'); +} + +async function buildS2AStyles() { + const depsDir = path.resolve(DEPS_DIR); + const targetFile = path.resolve(TARGET_FILE); + const cssFiles = await getCssFiles(depsDir); + + const rootDecls = []; + const darkDecls = []; + const updatedVars = []; + const newVars = []; + const deletedVars = []; + + const extractRules = (ast) => ast.nodes.filter((node) => node.type === 'rule'); + + for (const file of cssFiles) { + const code = await fsp.readFile(file, 'utf8'); + const ast = postcss.parse(code); + + for (const rule of extractRules(ast)) { + const sel = trimWhitespace(rule.selector); + const mode = getSelectorMode(sel); + const targetDecls = mode === 'dark' ? darkDecls : rootDecls; + + for (const decl of extractDeclsFromRule(rule)) { + if (isS2aVar(decl.prop)) { + targetDecls.push({ ...decl, value: limitDecimals(decl.value) }); + } + } + } + } + + const rootDeclMap = {}; + for (const decl of rootDecls) { + rootDeclMap[decl.prop] = decl.value; + } + + const filteredDarkDecls = darkDecls.filter( + (darkDecl) => !(darkDecl.prop in rootDeclMap + && rootDeclMap[darkDecl.prop] === darkDecl.value), + ); + + let cssText; + try { + cssText = await fsp.readFile(targetFile, 'utf8'); + } catch (e) { + console.error(`Error: ${targetFile} not found, cannot patch its --s2a- variables`); + throw e; + } + + const ast = postcss.parse(cssText); + + function patchDeclarationsForSelector(selector, varsMap) { + let foundRule = null; + for (const node of ast.nodes) { + if (node.type === 'rule' && trimWhitespace(node.selector) === selector) { + foundRule = node; + break; + } + } + if (!foundRule) return; + + const oldVarsIdx = {}; + foundRule.nodes.forEach((n, i) => { + if (n.type === 'decl' && n.prop.startsWith('--s2a-')) oldVarsIdx[n.prop] = i; + }); + + Object.entries(varsMap).forEach(([prop, value]) => { + if (prop in oldVarsIdx) { + if (value !== foundRule.nodes[oldVarsIdx[prop]].value) { + updatedVars.push(`${prop}: ${foundRule.nodes[oldVarsIdx[prop]].value} -> ${value}`); + } + foundRule.nodes[oldVarsIdx[prop]].value = value; + } else { + const newDecl = postcss.decl({ prop, value }); + newDecl.raws.before = newVars.length > 0 ? '\n ' : '\n\n '; + foundRule.append(newDecl); + foundRule.raws.semicolon = true; + newVars.push(`${prop}: ${value}`); + } + }); + + foundRule.walkDecls((decl) => { + if (isS2aVar(decl.prop) && !(decl.prop in varsMap)) { + deletedVars.push(`${decl.prop}: ${decl.value}`); + decl.remove(); + } + }); + } + + const rootVars = {}; + for (const decl of rootDecls) rootVars[decl.prop] = decl.value; + const darkVars = {}; + for (const decl of filteredDarkDecls) darkVars[decl.prop] = decl.value; + + patchDeclarationsForSelector(':root', rootVars); + patchDeclarationsForSelector('.dark', darkVars); + + const finalCss = ast.toResult().css; + await fsp.writeFile(targetFile, `${finalCss.trim()}\n`, 'utf8'); + + const hasChanges = updatedVars.length > 0 || newVars.length > 0 || deletedVars.length > 0; + + const summary = `Synchronized --s2a- variables in ${targetFile}. + +**Updated variables:** +${updatedVars.length ? updatedVars.join('\n') : 'none'} + +**Added variables:** +${newVars.length ? newVars.join('\n') : 'none'} + +**Deleted variables:** +${deletedVars.length ? deletedVars.join('\n') : 'none'}`; + + console.log(summary); + + return { hasChanges, summary }; +} + +// Workflow PR Logic +const execSyncSafe = (command) => { + try { + execSync(command); + } catch (error) { + console.log(`Skipped command: ${command}`); + } +}; + +const createAndPushBranch = ({ filePath, branch }) => { + execSync('git config --global user.name "GitHub Action"'); + execSync('git config --global user.email "action@github.com"'); + execSync('git fetch'); + execSync('git checkout stage'); + execSyncSafe(`git branch -D ${branch}`); + execSync(`git checkout -b ${branch}`); + execSync(`git add ${filePath}`); + execSyncSafe('git commit -m "Update S2A style tokens"'); + execSync(`git push --force origin ${branch}`); +}; + +const main = async ({ github, context }) => { + try { + const { hasChanges, summary } = await buildS2AStyles(); + + if (!hasChanges) { + console.log('No changes detected in S2A styles. Skipping PR creation.'); + return; + } + + const { data: openPRs } = await github.rest.pulls.list({ + owner: context.repo.owner, + repo: context.repo.repo, + state: 'open', + }); + + const existingPR = openPRs.find((pr) => pr.head.ref === BRANCH); + if (existingPR) { + console.log(`PR already exists for branch ${BRANCH}. Execution stopped.`); + return; + } + + createAndPushBranch({ + filePath: TARGET_FILE, + branch: BRANCH, + }); + + const pr = await github.rest.pulls.create({ + owner: context.repo.owner, + repo: context.repo.repo, + title: TITLE, + head: BRANCH, + base: 'stage', + body: summary, + }); + + await github.rest.issues.addLabels({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: pr.data.number, + labels: ['high-impact'], + }); + + await github.rest.pulls.requestReviewers({ + owner: context.repo.owner, + repo: context.repo.repo, + pull_number: pr.data.number, + reviewers: [ + 'overmyheadandbody', + 'mokimo', + 'robert-bogos', + 'narcis-radu', + ], + assignees: ['SilviuLCF'], + }); + + console.log(`PR created: ${pr.data.html_url}`); + } catch (error) { + console.error('An error occurred while running S2A styles update workflow:', error); + throw error; + } +}; + +// Direct Execution (npm run build:s2a) +if (require.main === module) { + buildS2AStyles().catch((err) => { + console.error('Error:', err); + process.exit(1); + }); +} + +module.exports = main; diff --git a/.github/workflows/update-s2a-styles.yaml b/.github/workflows/update-s2a-styles.yaml new file mode 100644 index 00000000000..c3085f6c825 --- /dev/null +++ b/.github/workflows/update-s2a-styles.yaml @@ -0,0 +1,31 @@ +name: Update S2A Styles + +on: + schedule: + - cron: '0 0 * * *' + workflow_dispatch: + +jobs: + update: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Install dependencies + run: npm ci + + - name: Update S2A styles and create PR if needed + uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea + with: + script: | + const updateS2AStyles = require('./.github/workflows/update-s2a-styles.js') + await updateS2AStyles({ github, context }) + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/libs/styles/deps/tokens.primitives.css b/libs/styles/deps/tokens.primitives.css new file mode 100644 index 00000000000..90ac2f6c950 --- /dev/null +++ b/libs/styles/deps/tokens.primitives.css @@ -0,0 +1,108 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --s2a-border-radius-0: 0; + --s2a-border-radius-2: 2px; + --s2a-border-radius-4: 4px; + --s2a-border-radius-8: 8px; + --s2a-border-radius-16: 16px; + --s2a-border-radius-32: 32px; + --s2a-border-radius-round: 999px; + --s2a-border-width-1: 1px; + --s2a-border-width-2: 2px; + --s2a-border-width-4: 4px; + --s2a-border-width-8: 8px; + --s2a-opacity-12: 0.12; + --s2a-opacity-16: 0.16; + --s2a-opacity-24: 0.24; + --s2a-opacity-32: 0.32; + --s2a-opacity-48: 0.48; + --s2a-opacity-64: 0.64; + --s2a-opacity-72: 0.72; + --s2a-opacity-84: 0.84; + --s2a-opacity-100: 1; + --s2a-opacity-00: 0; + --s2a-opacity-08: 0.08; + --s2a-shadow-level-1-x: 0; + --s2a-shadow-level-1-y: 1px; + --s2a-shadow-level-1-blur: 6px; + --s2a-shadow-level-1-spread: 0; + --s2a-shadow-level-1-color: rgb(0 0 0 / 12%); + --s2a-shadow-level-2-x: 0; + --s2a-shadow-level-2-y: 2px; + --s2a-shadow-level-2-blur: 8px; + --s2a-shadow-level-2-spread: 0; + --s2a-shadow-level-2-color: rgb(0 0 0 / 16%); + --s2a-shadow-level-3-x: 0; + --s2a-shadow-level-3-y: 4px; + --s2a-shadow-level-3-blur: 12px; + --s2a-shadow-level-3-spread: 0; + --s2a-shadow-level-3-color: rgb(0 0 0 / 16%); + --s2a-shadow-level-4-x: 0; + --s2a-shadow-level-4-y: 6px; + --s2a-shadow-level-4-blur: 16px; + --s2a-shadow-level-4-spread: 0; + --s2a-shadow-level-4-color: rgb(0 0 0 / 16%); + --s2a-spacing-0: 0; + --s2a-spacing-2: 2px; + --s2a-spacing-4: 4px; + --s2a-spacing-8: 8px; + --s2a-spacing-12: 12px; + --s2a-spacing-16: 16px; + --s2a-spacing-24: 24px; + --s2a-spacing-32: 32px; + --s2a-spacing-40: 40px; + --s2a-spacing-48: 48px; + --s2a-spacing-64: 64px; + --s2a-spacing-80: 80px; + --s2a-spacing-96: 96px; + --s2a-spacing-104: 104px; + --s2a-typography-font-family-adobe-clean: "Adobe Clean"; + --s2a-typography-font-weight-black: 900; + --s2a-typography-font-weight-extrabold: 800; + --s2a-typography-font-weight-bold: 700; + --s2a-typography-font-weight-medium: 500; + --s2a-typography-font-weight-regular: 400; + --s2a-typography-font-size-10: 0.625rem; + --s2a-typography-font-size-11: 0.6875rem; + --s2a-typography-font-size-12: 0.75rem; + --s2a-typography-font-size-14: 0.875rem; + --s2a-typography-font-size-16: 1rem; + --s2a-typography-font-size-18: 1.125rem; + --s2a-typography-font-size-20: 1.25rem; + --s2a-typography-font-size-22: 1.375rem; + --s2a-typography-font-size-25: 1.5625rem; + --s2a-typography-font-size-28: 1.75rem; + --s2a-typography-font-size-32: 2rem; + --s2a-typography-font-size-36: 2.25rem; + --s2a-typography-font-size-40: 2.5rem; + --s2a-typography-font-size-45: 2.8125rem; + --s2a-typography-font-size-48: 3rem; + --s2a-typography-font-size-51: 3.1875rem; + --s2a-typography-font-size-58: 3.625rem; + --s2a-typography-font-size-65: 4.0625rem; + --s2a-typography-font-size-73: 4.5625rem; + --s2a-typography-font-size-82: 5.125rem; + --s2a-typography-line-height-12: 1.2; + --s2a-typography-line-height-14: 1.272727; + --s2a-typography-line-height-16: 1.333333; + --s2a-typography-line-height-18: 1.285714; + --s2a-typography-line-height-20: 1.25; + --s2a-typography-line-height-22: 1.222222; + --s2a-typography-line-height-24: 1.2; + --s2a-typography-line-height-26: 1.181818; + --s2a-typography-line-height-30: 1.2; + --s2a-typography-line-height-32: 1.142857; + --s2a-typography-line-height-36: 1.125; + --s2a-typography-line-height-42: 1.166667; + --s2a-typography-line-height-46: 1.15; + --s2a-typography-line-height-52: 1.155556; + --s2a-typography-line-height-54: 1.125; + --s2a-typography-line-height-58: 1.137255; + --s2a-typography-line-height-66: 1.137931; + --s2a-typography-line-height-74: 1.138462; + --s2a-typography-line-height-84: 1.150685; + --s2a-typography-line-height-95: 1.158537; +} diff --git a/libs/styles/deps/tokens.primitives.dark.css b/libs/styles/deps/tokens.primitives.dark.css new file mode 100644 index 00000000000..a68d2cb5e16 --- /dev/null +++ b/libs/styles/deps/tokens.primitives.dark.css @@ -0,0 +1,121 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root[data-theme="dark"] { + --s2a-color-gray-25: #111; + --s2a-color-gray-50: #1b1b1b; + --s2a-color-gray-75: #222; + --s2a-color-gray-100: #2c2c2c; + --s2a-color-gray-200: #323232; + --s2a-color-gray-300: #393939; + --s2a-color-gray-400: #444; + --s2a-color-gray-500: #6d6d6d; + --s2a-color-gray-600: #8a8a8a; + --s2a-color-gray-700: #afafaf; + --s2a-color-gray-800: #dbdbdb; + --s2a-color-gray-900: #f2f2f2; + --s2a-color-gray-1000: #fff; + --s2a-color-green-100: #001e17; + --s2a-color-green-200: #00261d; + --s2a-color-green-300: #003326; + --s2a-color-green-400: #004430; + --s2a-color-green-500: #02573a; + --s2a-color-green-600: #036a43; + --s2a-color-green-700: #047c4b; + --s2a-color-green-800: #068c52; + --s2a-color-green-900: #099d59; + --s2a-color-green-1000: #0eaf62; + --s2a-color-green-1100: #18c16e; + --s2a-color-green-1200: #39d786; + --s2a-color-green-1300: #7ee7ac; + --s2a-color-green-1400: #bdf1d0; + --s2a-color-green-1500: #e5faec; + --s2a-color-green-1600: #fff; + --s2a-color-blue-100: #0e173f; + --s2a-color-blue-200: #0f1c52; + --s2a-color-blue-300: #0c2175; + --s2a-color-blue-400: #122d9a; + --s2a-color-blue-500: #1a3ac3; + --s2a-color-blue-600: #2549e5; + --s2a-color-blue-700: #345bf8; + --s2a-color-blue-800: #456efe; + --s2a-color-blue-900: #5681ff; + --s2a-color-blue-1000: #6995fe; + --s2a-color-blue-1100: #7ca9fc; + --s2a-color-blue-1200: #98c0fc; + --s2a-color-blue-1300: #b5d5fd; + --s2a-color-blue-1400: #d5e7fe; + --s2a-color-blue-1500: #eef5ff; + --s2a-color-blue-1600: #fff; + --s2a-color-red-100: #360a03; + --s2a-color-red-200: #440d05; + --s2a-color-red-300: #571107; + --s2a-color-red-400: #73180b; + --s2a-color-red-500: #931f11; + --s2a-color-red-600: #b12617; + --s2a-color-red-700: #cd2e1d; + --s2a-color-red-800: #e63623; + --s2a-color-red-900: #fc432e; + --s2a-color-red-1000: #ff6756; + --s2a-color-red-1100: #ff8678; + --s2a-color-red-1200: #ffa79d; + --s2a-color-red-1300: #ffc4bd; + --s2a-color-red-1400: #ffdedb; + --s2a-color-red-1500: #fff2f0; + --s2a-color-red-1600: #fff; + --s2a-color-orange-100: #311000; + --s2a-color-orange-200: #3d1500; + --s2a-color-orange-300: #501b00; + --s2a-color-orange-400: #6a2400; + --s2a-color-orange-500: #872f00; + --s2a-color-orange-600: #a23b00; + --s2a-color-orange-700: #b94900; + --s2a-color-orange-800: #cd5600; + --s2a-color-orange-900: #e06400; + --s2a-color-orange-1000: #f37500; + --s2a-color-orange-1100: #ff8900; + --s2a-color-orange-1200: #ffad2d; + --s2a-color-orange-1300: #ffc974; + --s2a-color-orange-1400: #ffe1b2; + --s2a-color-orange-1500: #fff3e1; + --s2a-color-orange-1600: #fff; + --s2a-color-yellow-100: #251700; + --s2a-color-yellow-200: #2f1d00; + --s2a-color-yellow-300: #3d2700; + --s2a-color-yellow-400: #533400; + --s2a-color-yellow-500: #6b4300; + --s2a-color-yellow-600: #825200; + --s2a-color-yellow-700: #976100; + --s2a-color-yellow-800: #a96e00; + --s2a-color-yellow-900: #ba7c00; + --s2a-color-yellow-1000: #cb8d00; + --s2a-color-yellow-1100: #da9f00; + --s2a-color-yellow-1200: #ebb700; + --s2a-color-yellow-1300: #f9ce00; + --s2a-color-yellow-1400: #ffe656; + --s2a-color-yellow-1500: #fff6c3; + --s2a-color-yellow-1600: #fff; + --s2a-color-transparent-black-12: rgb(0 0 0 / 12%); + --s2a-color-transparent-black-16: rgb(0 0 0 / 16%); + --s2a-color-transparent-black-24: rgb(0 0 0 / 24%); + --s2a-color-transparent-black-32: rgb(0 0 0 / 32%); + --s2a-color-transparent-black-48: rgb(0 0 0 / 48%); + --s2a-color-transparent-black-64: rgb(0 0 0 / 64%); + --s2a-color-transparent-black-72: rgb(0 0 0 / 72%); + --s2a-color-transparent-black-84: rgb(0 0 0 / 84%); + --s2a-color-transparent-black-00: rgb(0 0 0 / 0); + --s2a-color-transparent-black-04: rgb(0 0 0 / 4%); + --s2a-color-transparent-black-08: rgb(0 0 0 / 8%); + --s2a-color-transparent-white-12: rgb(255 255 255 / 12%); + --s2a-color-transparent-white-16: rgb(255 255 255 / 16%); + --s2a-color-transparent-white-24: rgb(255 255 255 / 24%); + --s2a-color-transparent-white-32: rgb(255 255 255 / 32%); + --s2a-color-transparent-white-48: rgb(255 255 255 / 48%); + --s2a-color-transparent-white-64: rgb(255 255 255 / 64%); + --s2a-color-transparent-white-72: rgb(255 255 255 / 72%); + --s2a-color-transparent-white-84: rgb(255 255 255 / 84%); + --s2a-color-transparent-white-00: rgb(255 255 255 / 0); + --s2a-color-transparent-white-04: rgb(255 255 255 / 4%); + --s2a-color-transparent-white-08: rgb(255 255 255 / 8%); +} diff --git a/libs/styles/deps/tokens.primitives.light.css b/libs/styles/deps/tokens.primitives.light.css new file mode 100644 index 00000000000..e27bba52a3d --- /dev/null +++ b/libs/styles/deps/tokens.primitives.light.css @@ -0,0 +1,121 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root[data-theme="light"] { + --s2a-color-gray-25: #fff; + --s2a-color-gray-50: #f8f8f8; + --s2a-color-gray-75: #f3f3f3; + --s2a-color-gray-100: #e9e9e9; + --s2a-color-gray-200: #e1e1e1; + --s2a-color-gray-300: #dadada; + --s2a-color-gray-400: #c6c6c6; + --s2a-color-gray-500: #8f8f8f; + --s2a-color-gray-600: #717171; + --s2a-color-gray-700: #505050; + --s2a-color-gray-800: #292929; + --s2a-color-gray-900: #131313; + --s2a-color-gray-1000: #000; + --s2a-color-green-100: #edfcf1; + --s2a-color-green-200: #d7f7e1; + --s2a-color-green-300: #adeec5; + --s2a-color-green-400: #6be3a2; + --s2a-color-green-500: #2bd17d; + --s2a-color-green-600: #12b867; + --s2a-color-green-700: #0ba45d; + --s2a-color-green-800: #079355; + --s2a-color-green-900: #05834e; + --s2a-color-green-1000: #036e45; + --s2a-color-green-1100: #025d3c; + --s2a-color-green-1200: #014c34; + --s2a-color-green-1300: #003d2c; + --s2a-color-green-1400: #002e22; + --s2a-color-green-1500: #002119; + --s2a-color-green-1600: #000f0c; + --s2a-color-blue-100: #eefafe; + --s2a-color-blue-200: #d9f4fd; + --s2a-color-blue-300: #b7e7fc; + --s2a-color-blue-400: #8ad5ff; + --s2a-color-blue-500: #5cc0ff; + --s2a-color-blue-600: #30a7fe; + --s2a-color-blue-700: #1d95e7; + --s2a-color-blue-800: #1286cd; + --s2a-color-blue-900: #0b78b3; + --s2a-color-blue-1000: #046691; + --s2a-color-blue-1100: #005779; + --s2a-color-blue-1200: #004762; + --s2a-color-blue-1300: #00394e; + --s2a-color-blue-1400: #002b3b; + --s2a-color-blue-1500: #001f2b; + --s2a-color-blue-1600: #000e14; + --s2a-color-red-100: #fff6f5; + --s2a-color-red-200: #ffebe8; + --s2a-color-red-300: #ffd6d1; + --s2a-color-red-400: #ffbcb4; + --s2a-color-red-500: #ff9d91; + --s2a-color-red-600: #ff7665; + --s2a-color-red-700: #ff513d; + --s2a-color-red-800: #f03823; + --s2a-color-red-900: #d73220; + --s2a-color-red-1000: #b72818; + --s2a-color-red-1100: #9c2113; + --s2a-color-red-1200: #811b0e; + --s2a-color-red-1300: #68150a; + --s2a-color-red-1400: #501006; + --s2a-color-red-1500: #3b0b04; + --s2a-color-red-1600: #1d0502; + --s2a-color-orange-100: #fff6e7; + --s2a-color-orange-200: #ffeccf; + --s2a-color-orange-300: #ffda9e; + --s2a-color-orange-400: #ffc15e; + --s2a-color-orange-500: #ffa213; + --s2a-color-orange-600: #fc7d00; + --s2a-color-orange-700: #e86a00; + --s2a-color-orange-800: #d45b00; + --s2a-color-orange-900: #c24e00; + --s2a-color-orange-1000: #a73e00; + --s2a-color-orange-1100: #903300; + --s2a-color-orange-1200: #762900; + --s2a-color-orange-1300: #5f2000; + --s2a-color-orange-1400: #491800; + --s2a-color-orange-1500: #341200; + --s2a-color-orange-1600: #190800; + --s2a-color-yellow-100: #fff8cc; + --s2a-color-yellow-200: #fff197; + --s2a-color-yellow-300: #ffde2c; + --s2a-color-yellow-400: #f5c700; + --s2a-color-yellow-500: #e6af00; + --s2a-color-yellow-600: #d29500; + --s2a-color-yellow-700: #c18300; + --s2a-color-yellow-800: #af7400; + --s2a-color-yellow-900: #9e6600; + --s2a-color-yellow-1000: #865500; + --s2a-color-yellow-1100: #724800; + --s2a-color-yellow-1200: #5d3b00; + --s2a-color-yellow-1300: #4b2f00; + --s2a-color-yellow-1400: #382300; + --s2a-color-yellow-1500: #281900; + --s2a-color-yellow-1600: #120b00; + --s2a-color-transparent-black-12: rgb(0 0 0 / 12%); + --s2a-color-transparent-black-16: rgb(0 0 0 / 16%); + --s2a-color-transparent-black-24: rgb(0 0 0 / 24%); + --s2a-color-transparent-black-32: rgb(0 0 0 / 32%); + --s2a-color-transparent-black-48: rgb(0 0 0 / 48%); + --s2a-color-transparent-black-64: rgb(0 0 0 / 64%); + --s2a-color-transparent-black-72: rgb(0 0 0 / 72%); + --s2a-color-transparent-black-84: rgb(0 0 0 / 84%); + --s2a-color-transparent-black-00: rgb(0 0 0 / 0); + --s2a-color-transparent-black-04: rgb(0 0 0 / 4%); + --s2a-color-transparent-black-08: rgb(0 0 0 / 8%); + --s2a-color-transparent-white-12: rgb(255 255 255 / 12%); + --s2a-color-transparent-white-16: rgb(255 255 255 / 16%); + --s2a-color-transparent-white-24: rgb(255 255 255 / 24%); + --s2a-color-transparent-white-32: rgb(255 255 255 / 32%); + --s2a-color-transparent-white-48: rgb(255 255 255 / 48%); + --s2a-color-transparent-white-64: rgb(255 255 255 / 64%); + --s2a-color-transparent-white-72: rgb(255 255 255 / 72%); + --s2a-color-transparent-white-84: rgb(255 255 255 / 84%); + --s2a-color-transparent-white-00: rgb(255 255 255 / 0); + --s2a-color-transparent-white-04: rgb(255 255 255 / 4%); + --s2a-color-transparent-white-08: rgb(255 255 255 / 8%); +} diff --git a/libs/styles/deps/tokens.semantic.css b/libs/styles/deps/tokens.semantic.css new file mode 100644 index 00000000000..e77c2727fbf --- /dev/null +++ b/libs/styles/deps/tokens.semantic.css @@ -0,0 +1,72 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --s2a-border-radius-none: var(--s2a-border-radius-0); + --s2a-border-radius-2xs: var(--s2a-border-radius-2); + --s2a-border-radius-xs: var(--s2a-border-radius-4); + --s2a-border-radius-sm: var(--s2a-border-radius-8); + --s2a-border-radius-md: var(--s2a-border-radius-16); + --s2a-border-radius-lg: var(--s2a-border-radius-32); + --s2a-border-radius-full: var(--s2a-border-radius-round); + --s2a-border-width-sm: var(--s2a-border-width-1); + --s2a-border-width-md: var(--s2a-border-width-2); + --s2a-border-width-lg: var(--s2a-border-width-4); + --s2a-border-width-xl: var(--s2a-border-width-8); + --s2a-opacity-disabled: var(--s2a-opacity-48); + --s2a-spacing-none: var(--s2a-spacing-0); + --s2a-spacing-3xs: var(--s2a-spacing-2); + --s2a-spacing-2xs: var(--s2a-spacing-4); + --s2a-spacing-xs: var(--s2a-spacing-8); + --s2a-spacing-sm: var(--s2a-spacing-12); + --s2a-spacing-md: var(--s2a-spacing-16); + --s2a-spacing-lg: var(--s2a-spacing-24); + --s2a-spacing-xl: var(--s2a-spacing-32); + --s2a-spacing-2xl: var(--s2a-spacing-40); + --s2a-spacing-3xl: var(--s2a-spacing-48); + --s2a-spacing-4xl: var(--s2a-spacing-64); + --s2a-spacing-5xl: var(--s2a-spacing-80); + --s2a-spacing-6xl: var(--s2a-spacing-96); + --s2a-spacing-7xl: var(--s2a-spacing-104); + --s2a-typography-font-size-3xs: var(--s2a-typography-font-size-10); + --s2a-typography-font-size-2xs: var(--s2a-typography-font-size-11); + --s2a-typography-font-size-xs: var(--s2a-typography-font-size-12); + --s2a-typography-font-size-sm: var(--s2a-typography-font-size-14); + --s2a-typography-font-size-md: var(--s2a-typography-font-size-16); + --s2a-typography-font-size-lg: var(--s2a-typography-font-size-18); + --s2a-typography-font-size-xl: var(--s2a-typography-font-size-20); + --s2a-typography-font-size-2xl: var(--s2a-typography-font-size-22); + --s2a-typography-font-size-3xl: var(--s2a-typography-font-size-25); + --s2a-typography-font-size-4xl: var(--s2a-typography-font-size-28); + --s2a-typography-font-size-5xl: var(--s2a-typography-font-size-32); + --s2a-typography-font-size-6xl: var(--s2a-typography-font-size-36); + --s2a-typography-font-size-7xl: var(--s2a-typography-font-size-40); + --s2a-typography-font-size-8xl: var(--s2a-typography-font-size-45); + --s2a-typography-font-size-9xl: var(--s2a-typography-font-size-48); + --s2a-typography-font-size-10xl: var(--s2a-typography-font-size-51); + --s2a-typography-font-size-11xl: var(--s2a-typography-font-size-58); + --s2a-typography-font-size-12xl: var(--s2a-typography-font-size-65); + --s2a-typography-font-size-13xl: var(--s2a-typography-font-size-73); + --s2a-typography-font-size-14xl: var(--s2a-typography-font-size-82); + --s2a-typography-line-height-3xs: var(--s2a-typography-line-height-12); + --s2a-typography-line-height-2xs: var(--s2a-typography-line-height-14); + --s2a-typography-line-height-xs: var(--s2a-typography-line-height-16); + --s2a-typography-line-height-sm: var(--s2a-typography-line-height-18); + --s2a-typography-line-height-md: var(--s2a-typography-line-height-20); + --s2a-typography-line-height-lg: var(--s2a-typography-line-height-22); + --s2a-typography-line-height-xl: var(--s2a-typography-line-height-24); + --s2a-typography-line-height-2xl: var(--s2a-typography-line-height-26); + --s2a-typography-line-height-3xl: var(--s2a-typography-line-height-30); + --s2a-typography-line-height-4xl: var(--s2a-typography-line-height-32); + --s2a-typography-line-height-5xl: var(--s2a-typography-line-height-36); + --s2a-typography-line-height-6xl: var(--s2a-typography-line-height-42); + --s2a-typography-line-height-7xl: var(--s2a-typography-line-height-46); + --s2a-typography-line-height-8xl: var(--s2a-typography-line-height-52); + --s2a-typography-line-height-9xl: var(--s2a-typography-line-height-54); + --s2a-typography-line-height-10xl: var(--s2a-typography-line-height-58); + --s2a-typography-line-height-11xl: var(--s2a-typography-line-height-66); + --s2a-typography-line-height-12xl: var(--s2a-typography-line-height-74); + --s2a-typography-line-height-13xl: var(--s2a-typography-line-height-84); + --s2a-typography-line-height-14xl: var(--s2a-typography-line-height-95); +} diff --git a/libs/styles/deps/tokens.semantic.dark.css b/libs/styles/deps/tokens.semantic.dark.css new file mode 100644 index 00000000000..3b713e592d0 --- /dev/null +++ b/libs/styles/deps/tokens.semantic.dark.css @@ -0,0 +1,44 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root[data-theme="dark"] { + --s2a-color-background-utility-error-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-highlight: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-highlight-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-info: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-info-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-success: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-success-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-warning: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-warning-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-brand-adobe-red: #eb1000; + --s2a-color-brand-cc-3dar: #99e83f; + --s2a-color-brand-cc-il: #ff9a00; + --s2a-color-brand-cc-ppafx: #99f; + --s2a-color-brand-cc-ps: #3a18ff; + --s2a-color-background-utility-error: var(--s2a-color-red-900); + --s2a-color-background-default: var(--s2a-color-gray-25); + --s2a-color-background-default-hover: var(--s2a-color-gray-25); + --s2a-color-background-subtle: var(--s2a-color-gray-50); + --s2a-color-background-subtle-hover: var(--s2a-color-gray-50); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-knockout: var(--s2a-color-gray-25); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-brand: var(--s2a-color-brand-adobe-red); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-utility-error: var(--s2a-color-red-900); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-default: var(--s2a-color-gray-1000); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-default-hover: var(--s2a-color-gray-900); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-subtle: var(--s2a-color-gray-300); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-subtle-hover: var(--s2a-color-gray-400); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-knockout: var(--s2a-color-gray-1000); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-brand: var(--s2a-color-brand-adobe-red); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-disabled: var(--s2a-color-gray-400); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-content-utility-error: var(--s2a-color-red-900); + --s2a-color-content-default: var(--s2a-color-gray-800); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-content-default-hover: var(--s2a-color-gray-900); + --s2a-color-content-subtle: var(--s2a-color-gray-50); + --s2a-color-content-subtle-hover: var(--s2a-color-gray-75); + --s2a-color-content-strong: var(--s2a-color-gray-900); + --s2a-color-content-knockout: var(--s2a-color-gray-1000); + --s2a-color-content-brand: var(--s2a-color-brand-adobe-red); + --s2a-color-content-disabled: var(--s2a-color-gray-400); +} diff --git a/libs/styles/deps/tokens.semantic.light.css b/libs/styles/deps/tokens.semantic.light.css new file mode 100644 index 00000000000..560f6783074 --- /dev/null +++ b/libs/styles/deps/tokens.semantic.light.css @@ -0,0 +1,44 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root[data-theme="light"] { + --s2a-color-background-utility-error-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-highlight: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-highlight-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-info: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-info-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-success: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-success-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-warning: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-utility-warning-knockout: #fff; /** Placeholder token: awaiting design definition for final value */ + --s2a-color-brand-adobe-red: #eb1000; + --s2a-color-brand-cc-3dar: #99e83f; + --s2a-color-brand-cc-il: #ff9a00; + --s2a-color-brand-cc-ppafx: #99f; + --s2a-color-brand-cc-ps: #3a18ff; + --s2a-color-background-utility-error: var(--s2a-color-red-900); + --s2a-color-background-default: var(--s2a-color-gray-25); + --s2a-color-background-default-hover: var(--s2a-color-gray-25); + --s2a-color-background-subtle: var(--s2a-color-gray-50); + --s2a-color-background-subtle-hover: var(--s2a-color-gray-50); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-knockout: var(--s2a-color-gray-1000); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-background-brand: var(--s2a-color-brand-adobe-red); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-utility-error: var(--s2a-color-red-900); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-default: var(--s2a-color-gray-800); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-default-hover: var(--s2a-color-gray-900); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-subtle: var(--s2a-color-gray-300); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-subtle-hover: var(--s2a-color-gray-400); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-knockout: var(--s2a-color-gray-25); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-brand: var(--s2a-color-brand-adobe-red); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-border-disabled: var(--s2a-color-gray-400); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-content-utility-error: var(--s2a-color-red-900); + --s2a-color-content-default: var(--s2a-color-gray-800); /** Placeholder token: awaiting design definition for final value */ + --s2a-color-content-default-hover: var(--s2a-color-gray-900); + --s2a-color-content-subtle: var(--s2a-color-gray-700); + --s2a-color-content-subtle-hover: var(--s2a-color-gray-800); + --s2a-color-content-strong: var(--s2a-color-gray-900); + --s2a-color-content-knockout: var(--s2a-color-gray-25); + --s2a-color-content-brand: var(--s2a-color-brand-adobe-red); + --s2a-color-content-disabled: var(--s2a-color-gray-400); +} diff --git a/libs/styles/styles-s2a.css b/libs/styles/styles-s2a.css new file mode 100644 index 00000000000..91365840f42 --- /dev/null +++ b/libs/styles/styles-s2a.css @@ -0,0 +1,608 @@ +:root { + /* tokens.primitives */ + --s2a-border-radius-0: 0; + --s2a-border-radius-2: 2px; + --s2a-border-radius-4: 4px; + --s2a-border-radius-8: 8px; + --s2a-border-radius-16: 16px; + --s2a-border-radius-32: 32px; + --s2a-border-radius-round: 999px; + --s2a-border-width-1: 1px; + --s2a-border-width-2: 2px; + --s2a-border-width-4: 4px; + --s2a-border-width-8: 8px; + --s2a-opacity-12: 0.12; + --s2a-opacity-16: 0.16; + --s2a-opacity-24: 0.24; + --s2a-opacity-32: 0.32; + --s2a-opacity-48: 0.48; + --s2a-opacity-64: 0.64; + --s2a-opacity-72: 0.72; + --s2a-opacity-84: 0.84; + --s2a-opacity-100: 1; + --s2a-opacity-00: 0; + --s2a-opacity-08: 0.08; + --s2a-shadow-level-1-x: 0; + --s2a-shadow-level-1-y: 1px; + --s2a-shadow-level-1-blur: 6px; + --s2a-shadow-level-1-spread: 0; + --s2a-shadow-level-1-color: rgb(0 0 0 / 12%); + --s2a-shadow-level-2-x: 0; + --s2a-shadow-level-2-y: 2px; + --s2a-shadow-level-2-blur: 8px; + --s2a-shadow-level-2-spread: 0; + --s2a-shadow-level-2-color: rgb(0 0 0 / 16%); + --s2a-shadow-level-3-x: 0; + --s2a-shadow-level-3-y: 4px; + --s2a-shadow-level-3-blur: 12px; + --s2a-shadow-level-3-spread: 0; + --s2a-shadow-level-3-color: rgb(0 0 0 / 16%); + --s2a-shadow-level-4-x: 0; + --s2a-shadow-level-4-y: 6px; + --s2a-shadow-level-4-blur: 16px; + --s2a-shadow-level-4-spread: 0; + --s2a-shadow-level-4-color: rgb(0 0 0 / 16%); + --s2a-spacing-0: 0; + --s2a-spacing-2: 2px; + --s2a-spacing-4: 4px; + --s2a-spacing-8: 8px; + --s2a-spacing-12: 12px; + --s2a-spacing-16: 16px; + --s2a-spacing-24: 24px; + --s2a-spacing-32: 32px; + --s2a-spacing-40: 40px; + --s2a-spacing-48: 48px; + --s2a-spacing-64: 64px; + --s2a-spacing-80: 80px; + --s2a-spacing-96: 96px; + --s2a-spacing-104: 104px; + --s2a-typography-font-family-adobe-clean: "Adobe Clean"; + --s2a-typography-font-weight-black: 900; + --s2a-typography-font-weight-extrabold: 800; + --s2a-typography-font-weight-bold: 700; + --s2a-typography-font-weight-medium: 500; + --s2a-typography-font-weight-regular: 400; + --s2a-typography-font-size-10: 0.625rem; + --s2a-typography-font-size-11: 0.6875rem; + --s2a-typography-font-size-12: 0.75rem; + --s2a-typography-font-size-14: 0.875rem; + --s2a-typography-font-size-16: 1rem; + --s2a-typography-font-size-18: 1.125rem; + --s2a-typography-font-size-20: 1.25rem; + --s2a-typography-font-size-22: 1.375rem; + --s2a-typography-font-size-25: 1.5625rem; + --s2a-typography-font-size-28: 1.75rem; + --s2a-typography-font-size-32: 2rem; + --s2a-typography-font-size-36: 2.25rem; + --s2a-typography-font-size-40: 2.5rem; + --s2a-typography-font-size-45: 2.8125rem; + --s2a-typography-font-size-48: 3rem; + --s2a-typography-font-size-51: 3.1875rem; + --s2a-typography-font-size-58: 3.625rem; + --s2a-typography-font-size-65: 4.0625rem; + --s2a-typography-font-size-73: 4.5625rem; + --s2a-typography-font-size-82: 5.125rem; + --s2a-typography-line-height-12: 1.2; + --s2a-typography-line-height-14: 1.2727; + --s2a-typography-line-height-16: 1.3333; + --s2a-typography-line-height-18: 1.2857; + --s2a-typography-line-height-20: 1.25; + --s2a-typography-line-height-22: 1.2222; + --s2a-typography-line-height-24: 1.2; + --s2a-typography-line-height-26: 1.1818; + --s2a-typography-line-height-30: 1.2; + --s2a-typography-line-height-32: 1.1428; + --s2a-typography-line-height-36: 1.125; + --s2a-typography-line-height-42: 1.1666; + --s2a-typography-line-height-46: 1.15; + --s2a-typography-line-height-52: 1.1555; + --s2a-typography-line-height-54: 1.125; + --s2a-typography-line-height-58: 1.1372; + --s2a-typography-line-height-66: 1.1379; + --s2a-typography-line-height-74: 1.1384; + --s2a-typography-line-height-84: 1.1506; + --s2a-typography-line-height-95: 1.1585; + + /* tokens.primitives.light */ + --s2a-color-gray-25: #fff; + --s2a-color-gray-50: #f8f8f8; + --s2a-color-gray-75: #f3f3f3; + --s2a-color-gray-100: #e9e9e9; + --s2a-color-gray-200: #e1e1e1; + --s2a-color-gray-300: #dadada; + --s2a-color-gray-400: #c6c6c6; + --s2a-color-gray-500: #8f8f8f; + --s2a-color-gray-600: #717171; + --s2a-color-gray-700: #505050; + --s2a-color-gray-800: #292929; + --s2a-color-gray-900: #131313; + --s2a-color-gray-1000: #000; + --s2a-color-green-100: #edfcf1; + --s2a-color-green-200: #d7f7e1; + --s2a-color-green-300: #adeec5; + --s2a-color-green-400: #6be3a2; + --s2a-color-green-500: #2bd17d; + --s2a-color-green-600: #12b867; + --s2a-color-green-700: #0ba45d; + --s2a-color-green-800: #079355; + --s2a-color-green-900: #05834e; + --s2a-color-green-1000: #036e45; + --s2a-color-green-1100: #025d3c; + --s2a-color-green-1200: #014c34; + --s2a-color-green-1300: #003d2c; + --s2a-color-green-1400: #002e22; + --s2a-color-green-1500: #002119; + --s2a-color-green-1600: #000f0c; + --s2a-color-blue-100: #eefafe; + --s2a-color-blue-200: #d9f4fd; + --s2a-color-blue-300: #b7e7fc; + --s2a-color-blue-400: #8ad5ff; + --s2a-color-blue-500: #5cc0ff; + --s2a-color-blue-600: #30a7fe; + --s2a-color-blue-700: #1d95e7; + --s2a-color-blue-800: #1286cd; + --s2a-color-blue-900: #0b78b3; + --s2a-color-blue-1000: #046691; + --s2a-color-blue-1100: #005779; + --s2a-color-blue-1200: #004762; + --s2a-color-blue-1300: #00394e; + --s2a-color-blue-1400: #002b3b; + --s2a-color-blue-1500: #001f2b; + --s2a-color-blue-1600: #000e14; + --s2a-color-red-100: #fff6f5; + --s2a-color-red-200: #ffebe8; + --s2a-color-red-300: #ffd6d1; + --s2a-color-red-400: #ffbcb4; + --s2a-color-red-500: #ff9d91; + --s2a-color-red-600: #ff7665; + --s2a-color-red-700: #ff513d; + --s2a-color-red-800: #f03823; + --s2a-color-red-900: #d73220; + --s2a-color-red-1000: #b72818; + --s2a-color-red-1100: #9c2113; + --s2a-color-red-1200: #811b0e; + --s2a-color-red-1300: #68150a; + --s2a-color-red-1400: #501006; + --s2a-color-red-1500: #3b0b04; + --s2a-color-red-1600: #1d0502; + --s2a-color-orange-100: #fff6e7; + --s2a-color-orange-200: #ffeccf; + --s2a-color-orange-300: #ffda9e; + --s2a-color-orange-400: #ffc15e; + --s2a-color-orange-500: #ffa213; + --s2a-color-orange-600: #fc7d00; + --s2a-color-orange-700: #e86a00; + --s2a-color-orange-800: #d45b00; + --s2a-color-orange-900: #c24e00; + --s2a-color-orange-1000: #a73e00; + --s2a-color-orange-1100: #903300; + --s2a-color-orange-1200: #762900; + --s2a-color-orange-1300: #5f2000; + --s2a-color-orange-1400: #491800; + --s2a-color-orange-1500: #341200; + --s2a-color-orange-1600: #190800; + --s2a-color-yellow-100: #fff8cc; + --s2a-color-yellow-200: #fff197; + --s2a-color-yellow-300: #ffde2c; + --s2a-color-yellow-400: #f5c700; + --s2a-color-yellow-500: #e6af00; + --s2a-color-yellow-600: #d29500; + --s2a-color-yellow-700: #c18300; + --s2a-color-yellow-800: #af7400; + --s2a-color-yellow-900: #9e6600; + --s2a-color-yellow-1000: #865500; + --s2a-color-yellow-1100: #724800; + --s2a-color-yellow-1200: #5d3b00; + --s2a-color-yellow-1300: #4b2f00; + --s2a-color-yellow-1400: #382300; + --s2a-color-yellow-1500: #281900; + --s2a-color-yellow-1600: #120b00; + --s2a-color-transparent-black-12: rgb(0 0 0 / 12%); + --s2a-color-transparent-black-16: rgb(0 0 0 / 16%); + --s2a-color-transparent-black-24: rgb(0 0 0 / 24%); + --s2a-color-transparent-black-32: rgb(0 0 0 / 32%); + --s2a-color-transparent-black-48: rgb(0 0 0 / 48%); + --s2a-color-transparent-black-64: rgb(0 0 0 / 64%); + --s2a-color-transparent-black-72: rgb(0 0 0 / 72%); + --s2a-color-transparent-black-84: rgb(0 0 0 / 84%); + --s2a-color-transparent-black-00: rgb(0 0 0 / 0); + --s2a-color-transparent-black-04: rgb(0 0 0 / 4%); + --s2a-color-transparent-black-08: rgb(0 0 0 / 8%); + --s2a-color-transparent-white-12: rgb(255 255 255 / 12%); + --s2a-color-transparent-white-16: rgb(255 255 255 / 16%); + --s2a-color-transparent-white-24: rgb(255 255 255 / 24%); + --s2a-color-transparent-white-32: rgb(255 255 255 / 32%); + --s2a-color-transparent-white-48: rgb(255 255 255 / 48%); + --s2a-color-transparent-white-64: rgb(255 255 255 / 64%); + --s2a-color-transparent-white-72: rgb(255 255 255 / 72%); + --s2a-color-transparent-white-84: rgb(255 255 255 / 84%); + --s2a-color-transparent-white-00: rgb(255 255 255 / 0); + --s2a-color-transparent-white-04: rgb(255 255 255 / 4%); + --s2a-color-transparent-white-08: rgb(255 255 255 / 8%); + + /* tokens.semantic */ + --s2a-border-radius-none: var(--s2a-border-radius-0); + --s2a-border-radius-2xs: var(--s2a-border-radius-2); + --s2a-border-radius-xs: var(--s2a-border-radius-4); + --s2a-border-radius-sm: var(--s2a-border-radius-8); + --s2a-border-radius-md: var(--s2a-border-radius-16); + --s2a-border-radius-lg: var(--s2a-border-radius-32); + --s2a-border-radius-full: var(--s2a-border-radius-round); + --s2a-border-width-sm: var(--s2a-border-width-1); + --s2a-border-width-md: var(--s2a-border-width-2); + --s2a-border-width-lg: var(--s2a-border-width-4); + --s2a-border-width-xl: var(--s2a-border-width-8); + --s2a-opacity-disabled: var(--s2a-opacity-48); + --s2a-spacing-none: var(--s2a-spacing-0); + --s2a-spacing-3xs: var(--s2a-spacing-2); + --s2a-spacing-2xs: var(--s2a-spacing-4); + --s2a-spacing-xs: var(--s2a-spacing-8); + --s2a-spacing-sm: var(--s2a-spacing-12); + --s2a-spacing-md: var(--s2a-spacing-16); + --s2a-spacing-lg: var(--s2a-spacing-24); + --s2a-spacing-xl: var(--s2a-spacing-32); + --s2a-spacing-2xl: var(--s2a-spacing-40); + --s2a-spacing-3xl: var(--s2a-spacing-48); + --s2a-spacing-4xl: var(--s2a-spacing-64); + --s2a-spacing-5xl: var(--s2a-spacing-80); + --s2a-spacing-6xl: var(--s2a-spacing-96); + --s2a-spacing-7xl: var(--s2a-spacing-104); + --s2a-typography-font-size-3xs: var(--s2a-typography-font-size-10); + --s2a-typography-font-size-2xs: var(--s2a-typography-font-size-11); + --s2a-typography-font-size-xs: var(--s2a-typography-font-size-12); + --s2a-typography-font-size-sm: var(--s2a-typography-font-size-14); + --s2a-typography-font-size-md: var(--s2a-typography-font-size-16); + --s2a-typography-font-size-lg: var(--s2a-typography-font-size-18); + --s2a-typography-font-size-xl: var(--s2a-typography-font-size-20); + --s2a-typography-font-size-2xl: var(--s2a-typography-font-size-22); + --s2a-typography-font-size-3xl: var(--s2a-typography-font-size-25); + --s2a-typography-font-size-4xl: var(--s2a-typography-font-size-28); + --s2a-typography-font-size-5xl: var(--s2a-typography-font-size-32); + --s2a-typography-font-size-6xl: var(--s2a-typography-font-size-36); + --s2a-typography-font-size-7xl: var(--s2a-typography-font-size-40); + --s2a-typography-font-size-8xl: var(--s2a-typography-font-size-45); + --s2a-typography-font-size-9xl: var(--s2a-typography-font-size-48); + --s2a-typography-font-size-10xl: var(--s2a-typography-font-size-51); + --s2a-typography-font-size-11xl: var(--s2a-typography-font-size-58); + --s2a-typography-font-size-12xl: var(--s2a-typography-font-size-65); + --s2a-typography-font-size-13xl: var(--s2a-typography-font-size-73); + --s2a-typography-font-size-14xl: var(--s2a-typography-font-size-82); + --s2a-typography-line-height-3xs: var(--s2a-typography-line-height-12); + --s2a-typography-line-height-2xs: var(--s2a-typography-line-height-14); + --s2a-typography-line-height-xs: var(--s2a-typography-line-height-16); + --s2a-typography-line-height-sm: var(--s2a-typography-line-height-18); + --s2a-typography-line-height-md: var(--s2a-typography-line-height-20); + --s2a-typography-line-height-lg: var(--s2a-typography-line-height-22); + --s2a-typography-line-height-xl: var(--s2a-typography-line-height-24); + --s2a-typography-line-height-2xl: var(--s2a-typography-line-height-26); + --s2a-typography-line-height-3xl: var(--s2a-typography-line-height-30); + --s2a-typography-line-height-4xl: var(--s2a-typography-line-height-32); + --s2a-typography-line-height-5xl: var(--s2a-typography-line-height-36); + --s2a-typography-line-height-6xl: var(--s2a-typography-line-height-42); + --s2a-typography-line-height-7xl: var(--s2a-typography-line-height-46); + --s2a-typography-line-height-8xl: var(--s2a-typography-line-height-52); + --s2a-typography-line-height-9xl: var(--s2a-typography-line-height-54); + --s2a-typography-line-height-10xl: var(--s2a-typography-line-height-58); + --s2a-typography-line-height-11xl: var(--s2a-typography-line-height-66); + --s2a-typography-line-height-12xl: var(--s2a-typography-line-height-74); + --s2a-typography-line-height-13xl: var(--s2a-typography-line-height-84); + --s2a-typography-line-height-14xl: var(--s2a-typography-line-height-95); + + /* tokens.semantic.light */ + --s2a-color-background-utility-error-knockout: #fff; + --s2a-color-background-utility-highlight: #fff; + --s2a-color-background-utility-highlight-knockout: #fff; + --s2a-color-background-utility-info: #fff; + --s2a-color-background-utility-info-knockout: #fff; + --s2a-color-background-utility-success: #fff; + --s2a-color-background-utility-success-knockout: #fff; + --s2a-color-background-utility-warning: #fff; + --s2a-color-background-utility-warning-knockout: #fff; + --s2a-color-brand-adobe-red: #eb1000; + --s2a-color-brand-cc-3dar: #99e83f; + --s2a-color-brand-cc-il: #ff9a00; + --s2a-color-brand-cc-ppafx: #99f; + --s2a-color-brand-cc-ps: #3a18ff; + --s2a-color-background-utility-error: var(--s2a-color-red-900); + --s2a-color-background-default: var(--s2a-color-gray-25); + --s2a-color-background-default-hover: var(--s2a-color-gray-25); + --s2a-color-background-subtle: var(--s2a-color-gray-50); + --s2a-color-background-subtle-hover: var(--s2a-color-gray-50); + --s2a-color-background-knockout: var(--s2a-color-gray-1000); + --s2a-color-background-brand: var(--s2a-color-brand-adobe-red); + --s2a-color-border-utility-error: var(--s2a-color-red-900); + --s2a-color-border-default: var(--s2a-color-gray-800); + --s2a-color-border-default-hover: var(--s2a-color-gray-900); + --s2a-color-border-subtle: var(--s2a-color-gray-300); + --s2a-color-border-subtle-hover: var(--s2a-color-gray-400); + --s2a-color-border-knockout: var(--s2a-color-gray-25); + --s2a-color-border-brand: var(--s2a-color-brand-adobe-red); + --s2a-color-border-disabled: var(--s2a-color-gray-400); + --s2a-color-content-utility-error: var(--s2a-color-red-900); + --s2a-color-content-default: var(--s2a-color-gray-800); + --s2a-color-content-default-hover: var(--s2a-color-gray-900); + --s2a-color-content-subtle: var(--s2a-color-gray-700); + --s2a-color-content-subtle-hover: var(--s2a-color-gray-800); + --s2a-color-content-strong: var(--s2a-color-gray-900); + --s2a-color-content-knockout: var(--s2a-color-gray-25); + --s2a-color-content-brand: var(--s2a-color-brand-adobe-red); + --s2a-color-content-disabled: var(--s2a-color-gray-400); + + /* Milo-specific declarations */ + --scroll-padding-block: 0; + --body-font-family: var(--s2a-typography-font-family-adobe-clean), adobe-clean, 'Trebuchet MS', sans-serif; + + /* Grid sizes */ + --grid-container-width: 83.4%; + --grid-column-width: calc(var(--grid-container-width) / 12); + --grid-margins-width: calc((100% - var(--grid-container-width)) / 2); + --grid-margins-width-10: calc((100vw - (var(--grid-column-width) * 10)) / 2); + --grid-margins-width-8: calc((100vw - (var(--grid-column-width) * 8)) / 2); + --grid-margins-width-6: calc((100vw - (var(--grid-column-width) * 6)) / 2); + + /* Regional font variations */ + &:lang(ar) { + --body-font-family: adobe-arabic, myriad-arabic, var(--body-font-family), adobe-clean, 'Trebuchet MS', sans-serif; + --font-size-multiplier: 1.25; + } + + &:lang(ko-KR), + &:lang(ko) { + --body-font-family: adobe-clean-han-korean, var(--body-font-family), adobe-clean, 'Trebuchet MS', sans-serif; + + word-break: keep-all; + } + + &:lang(ja-JP), + &:lang(ja) { + --body-font-family: adobe-clean-han-japanese, var(--body-font-family), adobe-clean, 'Trebuchet MS', sans-serif; + } + + &:lang(zh-TW) { + --body-font-family: adobe-clean-han-traditional, var(--body-font-family), adobe-clean, 'Trebuchet MS', sans-serif; + } + + &:lang(zh-CN) { + --body-font-family: adobe-clean-han-simplified-c, var(--body-font-family), adobe-clean, 'Trebuchet MS', sans-serif; + } + + &:lang(zh-HK) { + --body-font-family: adobe-clean-han-traditional, var(--body-font-family), adobe-clean, 'Trebuchet MS', sans-serif; + } + + &:lang(th) { + --body-font-family: adobe-clean-thai, var(--body-font-family), adobe-clean, 'Trebuchet MS', sans-serif; + } +} + +.dark { + /* tokens.primitives.dark */ + --s2a-color-gray-25: #111; + --s2a-color-gray-50: #1b1b1b; + --s2a-color-gray-75: #222; + --s2a-color-gray-100: #2c2c2c; + --s2a-color-gray-200: #323232; + --s2a-color-gray-300: #393939; + --s2a-color-gray-400: #444; + --s2a-color-gray-500: #6d6d6d; + --s2a-color-gray-600: #8a8a8a; + --s2a-color-gray-700: #afafaf; + --s2a-color-gray-800: #dbdbdb; + --s2a-color-gray-900: #f2f2f2; + --s2a-color-gray-1000: #fff; + --s2a-color-green-100: #001e17; + --s2a-color-green-200: #00261d; + --s2a-color-green-300: #003326; + --s2a-color-green-400: #004430; + --s2a-color-green-500: #02573a; + --s2a-color-green-600: #036a43; + --s2a-color-green-700: #047c4b; + --s2a-color-green-800: #068c52; + --s2a-color-green-900: #099d59; + --s2a-color-green-1000: #0eaf62; + --s2a-color-green-1100: #18c16e; + --s2a-color-green-1200: #39d786; + --s2a-color-green-1300: #7ee7ac; + --s2a-color-green-1400: #bdf1d0; + --s2a-color-green-1500: #e5faec; + --s2a-color-green-1600: #fff; + --s2a-color-blue-100: #0e173f; + --s2a-color-blue-200: #0f1c52; + --s2a-color-blue-300: #0c2175; + --s2a-color-blue-400: #122d9a; + --s2a-color-blue-500: #1a3ac3; + --s2a-color-blue-600: #2549e5; + --s2a-color-blue-700: #345bf8; + --s2a-color-blue-800: #456efe; + --s2a-color-blue-900: #5681ff; + --s2a-color-blue-1000: #6995fe; + --s2a-color-blue-1100: #7ca9fc; + --s2a-color-blue-1200: #98c0fc; + --s2a-color-blue-1300: #b5d5fd; + --s2a-color-blue-1400: #d5e7fe; + --s2a-color-blue-1500: #eef5ff; + --s2a-color-blue-1600: #fff; + --s2a-color-red-100: #360a03; + --s2a-color-red-200: #440d05; + --s2a-color-red-300: #571107; + --s2a-color-red-400: #73180b; + --s2a-color-red-500: #931f11; + --s2a-color-red-600: #b12617; + --s2a-color-red-700: #cd2e1d; + --s2a-color-red-800: #e63623; + --s2a-color-red-900: #fc432e; + --s2a-color-red-1000: #ff6756; + --s2a-color-red-1100: #ff8678; + --s2a-color-red-1200: #ffa79d; + --s2a-color-red-1300: #ffc4bd; + --s2a-color-red-1400: #ffdedb; + --s2a-color-red-1500: #fff2f0; + --s2a-color-red-1600: #fff; + --s2a-color-orange-100: #311000; + --s2a-color-orange-200: #3d1500; + --s2a-color-orange-300: #501b00; + --s2a-color-orange-400: #6a2400; + --s2a-color-orange-500: #872f00; + --s2a-color-orange-600: #a23b00; + --s2a-color-orange-700: #b94900; + --s2a-color-orange-800: #cd5600; + --s2a-color-orange-900: #e06400; + --s2a-color-orange-1000: #f37500; + --s2a-color-orange-1100: #ff8900; + --s2a-color-orange-1200: #ffad2d; + --s2a-color-orange-1300: #ffc974; + --s2a-color-orange-1400: #ffe1b2; + --s2a-color-orange-1500: #fff3e1; + --s2a-color-orange-1600: #fff; + --s2a-color-yellow-100: #251700; + --s2a-color-yellow-200: #2f1d00; + --s2a-color-yellow-300: #3d2700; + --s2a-color-yellow-400: #533400; + --s2a-color-yellow-500: #6b4300; + --s2a-color-yellow-600: #825200; + --s2a-color-yellow-700: #976100; + --s2a-color-yellow-800: #a96e00; + --s2a-color-yellow-900: #ba7c00; + --s2a-color-yellow-1000: #cb8d00; + --s2a-color-yellow-1100: #da9f00; + --s2a-color-yellow-1200: #ebb700; + --s2a-color-yellow-1300: #f9ce00; + --s2a-color-yellow-1400: #ffe656; + --s2a-color-yellow-1500: #fff6c3; + --s2a-color-yellow-1600: #fff; + + /* tokens.semantic.dark */ + --s2a-color-background-knockout: var(--s2a-color-gray-25); + --s2a-color-border-default: var(--s2a-color-gray-1000); + --s2a-color-border-knockout: var(--s2a-color-gray-1000); + --s2a-color-content-subtle: var(--s2a-color-gray-50); + --s2a-color-content-subtle-hover: var(--s2a-color-gray-75); + --s2a-color-content-knockout: var(--s2a-color-gray-1000); + + /* Milo-specific declarations */ +} + +html { + scroll-padding-block: var(--scroll-padding-block); +} + +body { + display: block; + font-family: var(--body-font-family); + font-size: var(--s2a-typography-font-size-md); + line-height: var(--s2a-typography-line-height-md); + background-color: var(--s2a-color-background-default); + color: #fff; /* TODO: Replace with a variable */ + margin: 0; + word-wrap: break-word; + -webkit-font-smoothing: antialiased; + opacity: 1 !important; /* Fix Target hiding */ +} + +body:has(.dialog-modal) #onetrust-consent-sdk { + display: none; +} + +img { + max-width: 100%; + height: auto; +} + +blockquote { + margin: 0 0 var(--spacing-s) 0; +} + +a { + color: var(--link-color); + text-decoration: underline; + + &:hover { + color: var(--link-hover-color); + } + + &:is(.auto-block, .fragment) { + display: none; + } + + &.quiet, + &.quiet:is(:hover, :focus, :active) { + text-decoration: none; + } + + &.static, + &.static:is(:hover, :focus, :active) { + color: var(--text-color); /* TODO: Replace with an S2A variable */ + } +} + +h1, h2, h3, h4, h5, h6 { + scroll-margin-top: var(--feds-totalheight-nav); /* TODO: Replace with the eventual Gnav variable */ + + span.hidden { + display: none; + } + + strong { + font-weight: inherit; + } + + a, + a:is(:hover, :focus, :active) { + color: currentColor; + } +} + +.container { + width: var(--grid-container-width); + margin: 0 auto; +} + +.hide-block { + display: none !important; +} + +.disable-scroll { + overflow: hidden; +} + +[class^="heading-"], +[class^="body-"], +[class^="detail-"] { + margin: 0; +} + +.static-links a:not([class*="button"]) { + color: inherit; +} + +.dark { + a { + color: var(--link-color-dark); /* TODO: Replace with an S2A variable */ + + &.static, + &.static:is(:hover, :focus, :active) { + color: var(--color-white); /* TODO: Replace with an S2A variable */ + } + } +} + +/* Tablet and above */ +@media (min-width: 600px) { + :root { + + } +} + +/* Desktop and above */ +@media (min-width: 1200px) { + :root { + + } +} + +/* Desktop XL and beyond */ +@media (min-width: 1680px) { + :root { + + } +} diff --git a/package-lock.json b/package-lock.json index 4cb536f258b..6ab21c1a319 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,8 @@ "eslint-plugin-react-hooks": "^4.6.0", "microbundle": "0.15.1", "playwright": "^1.44.1", + "postcss": "^8.5.6", + "postcss-cli": "^11.0.1", "sinon": "13.0.1", "stylelint": "14.6.0", "stylelint-config-prettier": "9.0.3", @@ -9037,9 +9039,9 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", "dev": true, "funding": [ { @@ -9630,9 +9632,9 @@ "dev": true }, "node_modules/picocolors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "dev": true }, "node_modules/picomatch": { @@ -9821,9 +9823,9 @@ } }, "node_modules/postcss": { - "version": "8.4.39", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", - "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", + "version": "8.5.6", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", + "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", "dev": true, "funding": [ { @@ -9840,9 +9842,9 @@ } ], "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.0.1", - "source-map-js": "^1.2.0" + "nanoid": "^3.3.11", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" @@ -9861,6 +9863,121 @@ "postcss": "^8.2.2" } }, + "node_modules/postcss-cli": { + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-11.0.1.tgz", + "integrity": "sha512-0UnkNPSayHKRe/tc2YGW6XnSqqOA9eqpiRMgRlV1S6HdGi16vwJBx7lviARzbV1HpQHqLLRH3o8vTcB0cLc+5g==", + "dev": true, + "dependencies": { + "chokidar": "^3.3.0", + "dependency-graph": "^1.0.0", + "fs-extra": "^11.0.0", + "picocolors": "^1.0.0", + "postcss-load-config": "^5.0.0", + "postcss-reporter": "^7.0.0", + "pretty-hrtime": "^1.0.3", + "read-cache": "^1.0.0", + "slash": "^5.0.0", + "tinyglobby": "^0.2.12", + "yargs": "^17.0.0" + }, + "bin": { + "postcss": "index.js" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-cli/node_modules/dependency-graph": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz", + "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-cli/node_modules/lilconfig": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, + "node_modules/postcss-cli/node_modules/postcss-load-config": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-5.1.0.tgz", + "integrity": "sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "lilconfig": "^3.1.1", + "yaml": "^2.4.2" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "jiti": ">=1.21.0", + "postcss": ">=8.0.9", + "tsx": "^4.8.1" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + }, + "postcss": { + "optional": true + }, + "tsx": { + "optional": true + } + } + }, + "node_modules/postcss-cli/node_modules/slash": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", + "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==", + "dev": true, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/postcss-cli/node_modules/yaml": { + "version": "2.8.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", + "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", + "dev": true, + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14.6" + }, + "funding": { + "url": "https://github.com/sponsors/eemeli" + } + }, "node_modules/postcss-colormin": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz", @@ -10335,6 +10452,32 @@ "postcss": "^8.2.15" } }, + "node_modules/postcss-reporter": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.1.0.tgz", + "integrity": "sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "picocolors": "^1.0.0", + "thenby": "^1.3.4" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/postcss-resolve-nested-selector": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", @@ -10437,6 +10580,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/pretty-hrtime": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", + "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/progress": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", @@ -10644,6 +10796,24 @@ "node": ">= 0.8" } }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/read-cache/node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -11571,9 +11741,9 @@ } }, "node_modules/source-map-js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", - "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "dev": true, "engines": { "node": ">=0.10.0" @@ -12202,6 +12372,12 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/thenby": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz", + "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==", + "dev": true + }, "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -12218,6 +12394,51 @@ "globrex": "^0.1.2" } }, + "node_modules/tinyglobby": { + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", + "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "dev": true, + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index cc99a8ff85e..9f56f015ca4 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "build:htm-preact": "microbundle ./build/htm-preact.js -o ./libs/deps/htm-preact.js -f modern --no-sourcemap --target web; mv ./libs/deps/htm-preact.modern.mjs ./libs/deps/htm-preact.js", "build:preact-debug": "microbundle ./build/htm-preact-debug.js -o ./libs/deps/htm-preact-debug.js -f modern --no-sourcemap --target web; mv ./libs/deps/htm-preact-debug.modern.mjs ./libs/deps/htm-preact-debug.js", "build:gnav-profile": "microbundle ./libs/blocks/global-navigation/blocks/profile/profile-wrapper.js -o ./build/profile-wrapper-build.js -f umd --external none --no-sourcemap --target web; mv ./build/profile-wrapper-build.umd.js ./build/profile.js", - "build:echarts": "cp node_modules/echarts/dist/echarts.common.min.js libs/deps/echarts.common.min.js" + "build:echarts": "cp node_modules/echarts/dist/echarts.common.min.js libs/deps/echarts.common.min.js", + "build:s2a": "node .github/workflows/update-s2a-styles.js" }, "repository": { "type": "git", @@ -62,6 +63,8 @@ "eslint-plugin-react-hooks": "^4.6.0", "microbundle": "0.15.1", "playwright": "^1.44.1", + "postcss": "^8.5.6", + "postcss-cli": "^11.0.1", "sinon": "13.0.1", "stylelint": "14.6.0", "stylelint-config-prettier": "9.0.3", From 99f9cb5bf4a4dbb7b43e8b2898b33138e8533d99 Mon Sep 17 00:00:00 2001 From: Rares Munteanu Date: Tue, 16 Dec 2025 14:40:23 +0100 Subject: [PATCH 2/6] Update tokens.primitives.css --- libs/styles/deps/tokens.primitives.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/styles/deps/tokens.primitives.css b/libs/styles/deps/tokens.primitives.css index 90ac2f6c950..77363506273 100644 --- a/libs/styles/deps/tokens.primitives.css +++ b/libs/styles/deps/tokens.primitives.css @@ -6,7 +6,7 @@ --s2a-border-radius-0: 0; --s2a-border-radius-2: 2px; --s2a-border-radius-4: 4px; - --s2a-border-radius-8: 8px; + --s2a-border-radius-8: 80px; --s2a-border-radius-16: 16px; --s2a-border-radius-32: 32px; --s2a-border-radius-round: 999px; From 07d3370d3ff63a46724a1675b390711d6c0c59f0 Mon Sep 17 00:00:00 2001 From: Rares Munteanu Date: Tue, 16 Dec 2025 14:42:56 +0100 Subject: [PATCH 3/6] Update update-s2a-styles.js --- .github/workflows/update-s2a-styles.js | 38 +++++++++++++------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/.github/workflows/update-s2a-styles.js b/.github/workflows/update-s2a-styles.js index e54d5cee03d..fa436737c1c 100644 --- a/.github/workflows/update-s2a-styles.js +++ b/.github/workflows/update-s2a-styles.js @@ -223,25 +223,25 @@ const main = async ({ github, context }) => { body: summary, }); - await github.rest.issues.addLabels({ - owner: context.repo.owner, - repo: context.repo.repo, - issue_number: pr.data.number, - labels: ['high-impact'], - }); - - await github.rest.pulls.requestReviewers({ - owner: context.repo.owner, - repo: context.repo.repo, - pull_number: pr.data.number, - reviewers: [ - 'overmyheadandbody', - 'mokimo', - 'robert-bogos', - 'narcis-radu', - ], - assignees: ['SilviuLCF'], - }); + // await github.rest.issues.addLabels({ + // owner: context.repo.owner, + // repo: context.repo.repo, + // issue_number: pr.data.number, + // labels: ['high-impact'], + // }); + + // await github.rest.pulls.requestReviewers({ + // owner: context.repo.owner, + // repo: context.repo.repo, + // pull_number: pr.data.number, + // reviewers: [ + // 'overmyheadandbody', + // 'mokimo', + // 'robert-bogos', + // 'narcis-radu', + // ], + // assignees: ['SilviuLCF'], + // }); console.log(`PR created: ${pr.data.html_url}`); } catch (error) { From 6df9562b3206e11e376a25cd75729566d43f671e Mon Sep 17 00:00:00 2001 From: Rares Munteanu Date: Tue, 16 Dec 2025 14:55:06 +0100 Subject: [PATCH 4/6] Update tokens.primitives.css --- libs/styles/deps/tokens.primitives.css | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/styles/deps/tokens.primitives.css b/libs/styles/deps/tokens.primitives.css index 77363506273..7acfd1c9bb7 100644 --- a/libs/styles/deps/tokens.primitives.css +++ b/libs/styles/deps/tokens.primitives.css @@ -3,6 +3,7 @@ */ :root { + --s2a-invalid-var: none; --s2a-border-radius-0: 0; --s2a-border-radius-2: 2px; --s2a-border-radius-4: 4px; From d732c689a75ade4b4a07041c07ac2327e8ac9e43 Mon Sep 17 00:00:00 2001 From: Rares Munteanu Date: Tue, 16 Dec 2025 14:56:11 +0100 Subject: [PATCH 5/6] Update styles-s2a.css --- libs/styles/styles-s2a.css | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/styles/styles-s2a.css b/libs/styles/styles-s2a.css index 91365840f42..0606f004445 100644 --- a/libs/styles/styles-s2a.css +++ b/libs/styles/styles-s2a.css @@ -1,5 +1,6 @@ :root { /* tokens.primitives */ + --s2a-rares: cyan; --s2a-border-radius-0: 0; --s2a-border-radius-2: 2px; --s2a-border-radius-4: 4px; From 3ff240233f7ed7d7e04bf761cf1ca25190510995 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Tue, 16 Dec 2025 13:57:12 +0000 Subject: [PATCH 6/6] Update S2A style tokens --- libs/styles/styles-s2a.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/libs/styles/styles-s2a.css b/libs/styles/styles-s2a.css index 0606f004445..22b0f9ef971 100644 --- a/libs/styles/styles-s2a.css +++ b/libs/styles/styles-s2a.css @@ -1,10 +1,9 @@ :root { /* tokens.primitives */ - --s2a-rares: cyan; --s2a-border-radius-0: 0; --s2a-border-radius-2: 2px; --s2a-border-radius-4: 4px; - --s2a-border-radius-8: 8px; + --s2a-border-radius-8: 80px; --s2a-border-radius-16: 16px; --s2a-border-radius-32: 32px; --s2a-border-radius-round: 999px; @@ -374,6 +373,8 @@ &:lang(th) { --body-font-family: adobe-clean-thai, var(--body-font-family), adobe-clean, 'Trebuchet MS', sans-serif; } + + --s2a-invalid-var: none; } .dark {