diff --git a/.eslintrc b/.eslintrc index 7d074d18..9a230a22 100644 --- a/.eslintrc +++ b/.eslintrc @@ -116,7 +116,9 @@ { "files": "**/*.{ts,tsx}", "rules": { - "react/require-default-props": "off" + "react/require-default-props": "off", + "no-shadow": "off", + "@typescript-eslint/no-shadow": "error", } } ], diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 98aa909a..d263959a 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -1,7 +1,7 @@ # .github/workflows/chromatic.yml # Workflow name -name: 'Chromatic build on main' +name: "Chromatic build on main" # Event for the workflow on: @@ -14,17 +14,24 @@ jobs: chromatic-deployment: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - with: - fetch-depth: 0 # 👈 Required to retrieve git history - - uses: actions/setup-node@v3 + - name: Checkout branch + uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v4 with: - node-version-file: '.node-version' - - run: | - npm config set "@fortawesome:registry" https://npm.fontawesome.com/ - npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - - run: yarn + node-version-file: ".node-version" + + - name: Setup Yarn + uses: volta-cli/action@v4 + + - name: Setup env + run: echo "FONTAWESOME_NPM_AUTH_TOKEN=${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}" > .env + + - name: Install dependencies + run: yarn install + - name: Publish to Chromatic - uses: chromaui/action@v1 + uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} diff --git a/.github/workflows/create-new-release.yml b/.github/workflows/create-new-release.yml index 89a75991..e5d0175d 100644 --- a/.github/workflows/create-new-release.yml +++ b/.github/workflows/create-new-release.yml @@ -7,24 +7,32 @@ jobs: name: Create new release runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v3 + - name: Checkout branch + uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v4 with: - node-version-file: '.node-version' - - run: | - npm config set "@fortawesome:registry" https://npm.fontawesome.com/ - npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - - run: yarn install + node-version-file: ".node-version" + + - name: Setup Yarn + uses: volta-cli/action@v4 + + - name: Setup env + run: echo "FONTAWESOME_NPM_AUTH_TOKEN=${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}" > .env + + - name: Install dependencies + run: yarn install - name: Initialize mandatory git config - uses: fregante/setup-git-user@v1 + uses: fregante/setup-git-user@v2 # Build assets - run: yarn build - run: npm pack - name: Extract Package Version id: extract_version - uses: Saionaro/extract-package-version@v1.1.1 + uses: Saionaro/extract-package-version@v1.2.1 - name: Create Release id: create_release diff --git a/.github/workflows/gh-pages-deploy.yml b/.github/workflows/gh-pages-deploy.yml index c849b419..fa5f3d78 100644 --- a/.github/workflows/gh-pages-deploy.yml +++ b/.github/workflows/gh-pages-deploy.yml @@ -1,46 +1,48 @@ - name: Deploy to github pages - on: - workflow_dispatch: - push: - branches: - - main - - # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages - permissions: - contents: read - pages: write - id-token: write - - jobs: - gh-pages-deploy: - name: Deploying to gh-pages - runs-on: ubuntu-latest - steps: - - name: Checkout branch - uses: actions/checkout@v3 - - - name: Setup node - uses: actions/setup-node@v3 - with: - node-version-file: '.node-version' - cache: 'yarn' - - - name: Configure npm - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && - npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - - - name: Install dependencies - run: yarn install - - - name: Build - run: yarn build-storybook - - - name: Upload - uses: actions/upload-pages-artifact@v3 - with: - path: 'storybook-static' - - - name: Deploy - uses: actions/deploy-pages@v4 - with: - token: ${{ github.token }} +name: Deploy to github pages +on: + workflow_dispatch: + push: + branches: + - main + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +jobs: + gh-pages-deploy: + name: Deploying to gh-pages + runs-on: ubuntu-latest + steps: + - name: Checkout branch + uses: actions/checkout@v4 + + - name: Setup node + uses: actions/setup-node@v4 + with: + node-version-file: ".node-version" + cache: "yarn" + + - name: Setup Yarn + uses: volta-cli/action@v4 + + - name: Setup env + run: echo "FONTAWESOME_NPM_AUTH_TOKEN=${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}" > .env + + - name: Install dependencies + run: yarn install + + - name: Build + run: yarn build-storybook + + - name: Upload + uses: actions/upload-pages-artifact@v4 + with: + path: "storybook-static" + + - name: Deploy + uses: actions/deploy-pages@v4 + with: + token: ${{ github.token }} diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 69bea941..a7a807d0 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -6,12 +6,22 @@ jobs: js-lint: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v3 + - name: Checkout branch + uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v4 with: - node-version-file: '.node-version' - - run: | - npm config set "@fortawesome:registry" https://npm.fontawesome.com/ - npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - - run: yarn - - run: yarn lint + node-version-file: ".node-version" + + - name: Setup Yarn + uses: volta-cli/action@v4 + + - name: Setup env + run: echo "FONTAWESOME_NPM_AUTH_TOKEN=${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}" > .env + + - name: Install dependencies + run: yarn install + + - name: Lint + run: yarn lint diff --git a/.github/workflows/prepare-hotfix.yml b/.github/workflows/prepare-hotfix.yml index 04143462..f7fb4d38 100644 --- a/.github/workflows/prepare-hotfix.yml +++ b/.github/workflows/prepare-hotfix.yml @@ -4,7 +4,7 @@ on: workflow_dispatch: inputs: version: - description: 'The version you want to release.' + description: "The version you want to release." required: true jobs: @@ -12,18 +12,27 @@ jobs: name: Prepare hotfix runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - name: Checkout branch + uses: actions/checkout@v4 with: fetch-depth: 0 - - uses: actions/setup-node@v3 + + - name: Setup Node + uses: actions/setup-node@v4 with: - node-version-file: '.node-version' + node-version-file: ".node-version" + + - name: Setup Yarn + uses: volta-cli/action@v4 + + - name: Setup env + run: echo "FONTAWESOME_NPM_AUTH_TOKEN=${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}" > .env - name: Create hotfix branch run: git checkout -b hotfix/${{ github.event.inputs.version }} - name: Initialize mandatory git config - uses: fregante/setup-git-user@v1 + uses: fregante/setup-git-user@v2 - name: Bump version in package.json run: yarn version --new-version ${{ github.event.inputs.version }} --no-git-tag-version @@ -56,4 +65,3 @@ jobs: head: hotfix/${{ github.event.inputs.version }} base: develop title: Merge hotfix/${{ github.event.inputs.version }} into develop branch - diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml index 1d5b420f..5e65d586 100644 --- a/.github/workflows/prepare-release.yml +++ b/.github/workflows/prepare-release.yml @@ -4,7 +4,7 @@ on: workflow_dispatch: inputs: version: - description: 'The version you want to release.' + description: "The version you want to release." required: true jobs: @@ -12,21 +12,30 @@ jobs: name: Prepare release runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - name: Checkout branch + uses: actions/checkout@v4 with: fetch-depth: 0 - - uses: actions/setup-node@v3 + + - name: Setup Node + uses: actions/setup-node@v4 with: - node-version-file: '.node-version' + node-version-file: ".node-version" + + - name: Setup Yarn + uses: volta-cli/action@v4 + + - name: Setup env + run: echo "FONTAWESOME_NPM_AUTH_TOKEN=${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}" > .env - name: Create release branch run: git checkout -b release/${{ github.event.inputs.version }} - name: Initialize mandatory git config - uses: fregante/setup-git-user@v1 + uses: fregante/setup-git-user@v2 - name: Bump version in package.json - run: yarn version --new-version ${{ github.event.inputs.version }} --no-git-tag-version + run: yarn version ${{ github.event.inputs.version }} - name: Commit manifest files id: make-commit @@ -56,4 +65,3 @@ jobs: head: release/${{ github.event.inputs.version }} base: develop title: Merge release/${{ github.event.inputs.version }} into develop branch - diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 366a0013..630d807c 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -6,12 +6,22 @@ jobs: js-test: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v3 + - name: Checkout branch + uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v4 with: - node-version-file: '.node-version' - - run: | - npm config set "@fortawesome:registry" https://npm.fontawesome.com/ - npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - - run: yarn - - run: yarn test + node-version-file: ".node-version" + + - name: Setup Yarn + uses: volta-cli/action@v4 + + - name: Setup env + run: echo "FONTAWESOME_NPM_AUTH_TOKEN=${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}" > .env + + - name: Install dependencies + run: yarn install + + - name: Test + run: yarn test diff --git a/.gitignore b/.gitignore index 51b7ff7c..a340b354 100644 --- a/.gitignore +++ b/.gitignore @@ -21,10 +21,12 @@ lib .env.test.local .env.production.local .npmrc +.yarn .env # Ignore Jetbrains IDE settings /.idea +/.vscode npm-debug.log* yarn-debug.log* diff --git a/.node-version b/.node-version index 87ec8842..bc78e9f2 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -18.18.2 +20.12.1 diff --git a/.storybook/main.js b/.storybook/main.js index 322c3164..9ae688e9 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -7,7 +7,7 @@ const config = { configFile: true } } - }, '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-backgrounds', '@storybook/addon-controls', '@storybook/addon-links', '@storybook/addon-storysource', '@storybook/addon-mdx-gfm', '@storybook/addon-webpack5-compiler-babel', ({ + }, '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-backgrounds', '@storybook/addon-controls', '@storybook/addon-links', '@storybook/addon-storysource', '@storybook/addon-webpack5-compiler-babel', ({ name: "@storybook/addon-styling-webpack", options: { diff --git a/.storybook/manager.js b/.storybook/manager.js index 472bd212..9c961f82 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,4 +1,4 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import userInterviewsTheme from './user-interviews-theme'; diff --git a/.storybook/preview.js b/.storybook/preview.js index 5975d49d..05817b2e 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -13,22 +13,22 @@ const preview = { ], parameters: { backgrounds: { - default: '$ux-white', + default: '--ux-white', values: [ { - name: '$ux-white', + name: '--ux-white', value: colors.UX_WHITE, }, { - name: '$ux-cream', + name: '--ux-cream', value: colors.UX_CREAM, }, { - name: '$ux-emerald-600', + name: '--ux-emerald-600', value: colors.UX_EMERALD_600, }, { - name: '$ux-neutral-800', + name: '--ux-neutral-800', value: colors.UX_NEUTRAL_800, } ], diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 00000000..bb54892d --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1,10 @@ +nodeLinker: node-modules + +injectEnvironmentFiles: + - .env? + +npmScopes: + fortawesome: + npmAlwaysAuth: true + npmRegistryServer: "https://npm.fontawesome.com/" + npmAuthToken: ${FONTAWESOME_NPM_AUTH_TOKEN} diff --git a/bin/migrate-stack b/bin/migrate-stack new file mode 100755 index 00000000..9b5c74d9 --- /dev/null +++ b/bin/migrate-stack @@ -0,0 +1,9 @@ +#!/bin/bash + +volta install node@20.12.1 +volta install yarn@4.2.1 +volta setup +touch .env + +FONTAWESOME_NPM_AUTH_TOKEN=$(echo "$FONTAWESOME_NPM_AUTH_TOKEN" | sed -n 's/.*authToken=//p' .npmrc) +echo "FONTAWESOME_NPM_AUTH_TOKEN=${FONTAWESOME_NPM_AUTH_TOKEN}" >> .env diff --git a/bin/unlink-rs b/bin/unlink-rs index 8279d9f9..53e5d925 100755 --- a/bin/unlink-rs +++ b/bin/unlink-rs @@ -10,4 +10,4 @@ fi cd $RAILS_SERVER_PATH yalc remove @user-interviews/ui-design-system yalc installations clean @user-interviews/ui-design-system -yarn --check-files +yarn diff --git a/package.json b/package.json index 6c968dd4..d564b09e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@user-interviews/ui-design-system", - "version": "2.8.0", + "version": "3.0.0", "dependencies": { "@tiptap/core": "^2.0.3", "@tiptap/extension-bold": "^2.0.3", @@ -19,18 +19,16 @@ "@tiptap/pm": "^2.0.3", "@tiptap/react": "^2.0.3", "@tiptap/suggestion": "^2.1.13", - "@typescript-eslint/eslint-plugin": "^2", - "@typescript-eslint/parser": "^2", - "react-bootstrap": "^2.5.0", - "react-currency-input-field": "^3.6.10", - "react-loading-skeleton": "^3.1.0", - "react-router-dom": "^5.2.0", - "react-select": "^5.0.0", - "react-toggle": "4.1.1", - "react-transition-group": "^4.3.0", - "sanitize-html": "^2.12.1", + "react-bootstrap": "^2.10.2", + "react-currency-input-field": "^3.8.0", + "react-loading-skeleton": "^3.4.0", + "react-router-dom": "^5.3.4", + "react-select": "^5.8.0", + "react-toggle": "^4.1.3", + "react-transition-group": "^4.4.5", + "sanitize-html": "^2.13.0", "tippy.js": "^6.3.7", - "uuid": "^7.0.2" + "uuid": "^7.0.3" }, "scripts": { "build": "NODE_ENV=production babel src --out-dir lib --copy-files --extensions '.js,.jsx,.ts,.tsx' && tsc", @@ -70,98 +68,99 @@ "bootstrap": "5.1", "classnames": "^2.2.5", "prop-types": "^15.6.1", - "react": "^16.12.0", + "react": "^18.2.0", "react-copy-to-clipboard": "^5.0.2", - "react-dom": "^16.12.0", + "react-dom": "^18.3", "react-modal": "^3.12.1", "react-popper": "^2.2.3", - "react-tracking": "^8.1.0" + "react-tracking": "^9.3" }, "devDependencies": { - "@babel/cli": "^7.8.4", - "@babel/core": "^7.8.4", + "@babel/cli": "^7.24.5", + "@babel/core": "^7.24.5", "@babel/plugin-proposal-class-properties": "^7.18.6", - "@babel/plugin-proposal-object-rest-spread": "^7.8.3", + "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-proposal-private-methods": "^7.18.6", - "@babel/plugin-proposal-private-property-in-object": "^7.21.0", - "@babel/plugin-transform-runtime": "^7.12.1", - "@babel/preset-env": "^7.8.4", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.5", "@babel/preset-react": "^7.24.1", - "@babel/preset-typescript": "^7.22.5", - "@babel/runtime": "^7.12.5", - "@fortawesome/fontawesome-svg-core": "^1.2.28", - "@fortawesome/free-brands-svg-icons": "^5.15.3", - "@fortawesome/pro-regular-svg-icons": "^6.4.0", - "@fortawesome/pro-solid-svg-icons": "^6.4.0", + "@babel/preset-typescript": "^7.24.1", + "@babel/runtime": "^7.24.5", + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-brands-svg-icons": "^6.5.2", + "@fortawesome/pro-regular-svg-icons": "^6.5.2", + "@fortawesome/pro-solid-svg-icons": "^6.5.2", "@fortawesome/react-fontawesome": "^0.2.0", - "@popperjs/core": "^2.5.3", - "@storybook/addon-a11y": "^8.0.5", - "@storybook/addon-actions": "^8.0.5", - "@storybook/addon-backgrounds": "^8.0.5", - "@storybook/addon-controls": "^8.0.5", - "@storybook/addon-docs": "^8.0.5", - "@storybook/addon-jest": "^8.0.5", - "@storybook/addon-links": "^8.0.5", - "@storybook/addon-mdx-gfm": "^8.0.5", - "@storybook/addon-storysource": "^8.0.5", + "@popperjs/core": "^2.11.8", + "@storybook/addon-a11y": "^8.0.9", + "@storybook/addon-actions": "^8.0.9", + "@storybook/addon-backgrounds": "^8.0.9", + "@storybook/addon-controls": "^8.0.9", + "@storybook/addon-docs": "^8.0.9", + "@storybook/addon-jest": "^8.0.9", + "@storybook/addon-links": "^8.0.9", + "@storybook/addon-storysource": "^8.0.9", "@storybook/addon-styling-webpack": "^1.0.0", "@storybook/addon-webpack5-compiler-babel": "^3.0.3", - "@storybook/addons": "^7.6.17", - "@storybook/react": "^8.0.5", - "@storybook/react-webpack5": "^8.0.5", - "@testing-library/jest-dom": "^6.1.3", - "@testing-library/react": "^12.1.2", - "@testing-library/react-hooks": "^3.2.1", - "@testing-library/user-event": "^13.5.0", - "@types/jest": "^29.5.5", - "@types/react-dom": "^16.0.0", + "@storybook/react": "^8.0.9", + "@storybook/react-webpack5": "^8.0.9", + "@testing-library/dom": "^10.1.0", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^15.0.6", + "@testing-library/react-hooks": "^8.0.1", + "@testing-library/user-event": "^14.5.2", + "@types/jest": "^29.5.12", + "@types/react-dom": "^18.3.0", + "@types/react-toggle": "^4", "@types/testing-library__jest-dom": "^6.0.0", - "babel-eslint": "^10.0.3", - "babel-jest": "^27.4.6", - "babel-loader": "^8.0.6", - "babel-plugin-module-resolver": "^5.0.0", + "@typescript-eslint/eslint-plugin": "^6.21.0", + "@typescript-eslint/parser": "^6.21.0", + "babel-eslint": "^10.1.0", + "babel-jest": "^29.7.0", + "babel-loader": "^9.1.3", + "babel-plugin-module-resolver": "^5.0.2", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "babel-preset-react": "^6.24.1", - "bootstrap": "5.1", - "chromatic": "^6.7.0", - "classnames": "^2.2.5", - "css-loader": "^6.8.1", + "bootstrap": "5.1.3", + "chromatic": "^6.24.1", + "classnames": "^2.5.1", + "css-loader": "^6.11.0", "eslint": "^7.32.0", - "eslint-config-airbnb": "^18.0.1", - "eslint-config-react-app": "^5.2.1", - "eslint-plugin-babel": "^5.3.0", + "eslint-config-airbnb": "^18.2.1", + "eslint-plugin-babel": "^5.3.1", "eslint-plugin-flowtype": "^4.7.0", - "eslint-plugin-import": "^2.20.1", - "eslint-plugin-jsx-a11y": "^6.2.3", - "eslint-plugin-react": "^7.18.3", - "eslint-plugin-react-hooks": "^2.5.1", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-jsx-a11y": "^6.8.0", + "eslint-plugin-react": "^7.34.1", + "eslint-plugin-react-hooks": "^4.6.2", "eslint-utils": "^1.4.3", "file-loader": "^6.2.0", - "jest": "^27.4.6", - "jest-css-modules-transform": "^4.3.0", - "node-sass": "^8.0.0", - "nodemon": "^3.0.1", - "prop-types": "^15.6.1", - "react": "^18.0.2", - "react-copy-to-clipboard": "^5.0.2", - "react-dom": "^18.0.2", - "react-modal": "^3.12.1", - "react-popper": "^2.2.3", - "react-test-renderer": "^18.0.2", - "react-tracking": "8.1.0", - "sass-loader": "^10.4.1", - "storybook": "^8.0.5", + "jest": "^29.7.0", + "jest-css-modules-transform": "^4.4.2", + "jest-environment-jsdom": "^29.7.0", + "node-sass": "^9.0.0", + "nodemon": "^3.1.0", + "prop-types": "^15.8.1", + "react": "^18.3.1", + "react-copy-to-clipboard": "^5.1.0", + "react-dom": "^18.3.1", + "react-modal": "^3.16.1", + "react-popper": "^2.3.0", + "react-test-renderer": "^18.3.1", + "react-tracking": "^9.3.2", + "sass-loader": "^14.2.1", + "storybook": "^8.0.9", "storybook-addon-designs": "6.3.1", - "style-loader": "^1.1.3", + "style-loader": "^1.3.0", "typescript": "^4.9.5", - "webpack": "^5.80.0", + "webpack": "^5.91.0", "yalc": "^1.0.0-pre.53" }, "resolutions": { "@babel/helper-create-regexp-features-plugin": "^7.22.15", "istanbul-lib-instrument": "^6.0.0", "jackspeak": "2.1.1", - "make-dir": "4.0.0", "normalize-package-data": "^3.0.0", "semver": "^7.5.3" }, @@ -171,8 +170,8 @@ "scss" ], "engines": { - "node": ">= 16 < 19", - "yarn": "^ 1.22" + "node": "^ 20.12", + "yarn": "^ 4.2" }, "main": "lib/index", "types": "lib/index", @@ -193,9 +192,9 @@ }, "readme": "https://github.com/user-interviews/ui-design-system#readme", "homepage": "https://github.com/user-interviews/ui-design-system", - "_id": "@user-interviews/ui-design-system@1.32.0", + "_id": "@user-interviews/ui-design-system@3.0", "volta": { - "node": "18.18.2", - "yarn": "1.22.21" + "node": "20.12.1", + "yarn": "4.2.1" } } diff --git a/scss/baseline.scss b/scss/baseline.scss index 38601dad..958f856e 100644 --- a/scss/baseline.scss +++ b/scss/baseline.scss @@ -1,8 +1,5 @@ -@import './colors/palette'; -@import './typography'; - body { - font-family: $synth-font-family; - font-size: $synth-font-size-base; - color: $ux-gray-900; + font-family: var(--synth-font-family); + font-size: var(--synth-font-size-base); + color: var(--ux-gray-900); } diff --git a/scss/borders.scss b/scss/borders.scss deleted file mode 100644 index d0067d50..00000000 --- a/scss/borders.scss +++ /dev/null @@ -1 +0,0 @@ -$ux-border-radius: 4px; diff --git a/scss/box_shadow.scss b/scss/box_shadow.scss deleted file mode 100644 index e28d22fa..00000000 --- a/scss/box_shadow.scss +++ /dev/null @@ -1,15 +0,0 @@ -$ux-navbar-shadow-color: rgba( 0, 0, 0, 0.26 ); - -$ux-box-shadow: 0 2px 5px $ux-navbar-shadow-color; -$ux-box-shadow-light: 0 1px 1px $ux-navbar-shadow-color; - -$ux-box-shadow-card: 0 2px 4px rgba(0,0,0,0.1); - -$ux-box-shadow-table-sticky-column-left: 2px 0px 1px 0px rgba(0, 0, 0, 0.05); -$ux-box-shadow-table-sticky-column-right: -2px 0px 1px 0px rgba(0, 0, 0, 0.05); - -$ux-box-shadow-top: 0 -2px 5px $ux-navbar-shadow-color; -$ux-box-shadow-top-light: 0 -1px 1px $ux-navbar-shadow-color; - -$ux-drawer-box-shadow-right: -4px 4px 8px rgba(0,0,0,.1); -$ux-drawer-box-shadow-left: 4px 4px 8px rgba(0,0,0,.1); diff --git a/scss/buttons.scss b/scss/buttons.scss index bddc9cc4..fa373f11 100644 --- a/scss/buttons.scss +++ b/scss/buttons.scss @@ -1,38 +1,36 @@ @import './colors'; .btn-link--neutral { - color: $ux-gray-500; + color: var(--ux-gray-500); &:hover { - color: $ux-gray-700; + color: var(--ux-gray-700); } } .btn-outline-secondary { - color: $ux-blue; - border-color: $ux-blue; + color: var(--ux-blue); + border-color: var(--ux-blue); &:hover { - background-color: $ux-blue; - color: $ux-white; + background-color: var(--ux-blue); + color: var(--ux-white); } } $synthesis-primary: $synth-primary-cta-blue; $primary: $ux-emerald-600; -$danger: $ux-red; -$warning: $ux-yellow-400; @mixin btn-focus-outline { box-shadow: none !important; - outline: 2px solid $ux-blue-500; + outline: 2px solid var(--ux-blue-500); outline-offset: 2px; } @mixin btn-focus-outline--dark-bg { box-shadow: none !important; - outline: 2px solid $ux-white; + outline: 2px solid var(--ux-white); outline-offset: 2px; } @@ -133,11 +131,11 @@ $warning: $ux-yellow-400; $btn-outline-primary-hover-border, $btn-outline-primary-hover-color, ); - border-color: $btn-outline-primary-border; + border-color: var(--btn-outline-primary-border); &:active { - background-color: $btn-outline-primary-active-background; - border-color: $btn-outline-primary-active-border-color; + background-color: var(--btn-outline-primary-active-background); + border-color: var(--btn-outline-primary-active-border-color); } &:focus-visible { @@ -170,11 +168,11 @@ $warning: $ux-yellow-400; $btn-outline-primary-hover-border, $btn-outline-primary-hover-color, ); - border-color: $btn-outline-primary-border; + border-color: var(--btn-outline-primary-border); &:active { - background-color: $btn-outline-primary-active-background; - border-color: $btn-outline-primary-active-border-color; + background-color: var(--btn-outline-primary-active-background); + border-color: var(--btn-outline-primary-active-border-color); } &:focus-visible { @@ -225,153 +223,7 @@ $warning: $ux-yellow-400; &:active, &.btn-tertiary:focus { box-shadow: none; - border-color: $synth-hyperlink-color; - } -} - -@mixin btn-danger { - $btn-danger-background: $danger; - $btn-danger-border: $danger; - $btn-danger-color: $ux-white; - - $btn-danger-hover-background: $ux-red-600; - $btn-danger-hover-border: $ux-red-600; - $btn-danger-hover-color: $ux-white; - - $btn-danger-active-background: $ux-red-700; - $btn-danger-active-border: $ux-red-700; - $btn-danger-active-color: $ux-white; - - @include button-variant( - $btn-danger-background, - $btn-danger-border, - $btn-danger-color, - - $btn-danger-hover-background, - $btn-danger-hover-border, - $btn-danger-hover-color, - - $btn-danger-active-background, - $btn-danger-active-border, - $btn-danger-active-color, - ); - - &:focus-visible { - @include btn-focus-outline; - } - - &:active, &:focus { - @include btn-remove-bootstrap-focus-outline; - } -} - -@mixin btn-outline-danger { - $btn-outline-danger-color: $danger; - $btn-outline-danger-color-hover: $ux-white; - - $btn-outline-danger-hover-background: $ux-red-600; - $btn-outline-danger-hover-border: $ux-red-600; - $btn-outline-danger-hover-color: $ux-white; - - $btn-outline-danger-border: $danger; - - $btn-outline-danger-active-background: $ux-red-700; - $btn-outline-danger-active-border-color: $ux-red-700; - - @include button-outline-variant( - $btn-outline-danger-color, - $btn-outline-danger-color-hover, - - $btn-outline-danger-hover-background, - $btn-outline-danger-hover-border, - $btn-outline-danger-hover-color, - ); - border-color: $btn-outline-danger-border; - - &:active { - background-color: $btn-outline-danger-active-background; - border-color: $btn-outline-danger-active-border-color; - } - - &:focus-visible { - @include btn-focus-outline; - } - - &:active, &:focus { - @include btn-remove-bootstrap-focus-outline; - } -} - -@mixin btn-warning { - $btn-warning-background: $warning; - $btn-warning-border: $warning; - $btn-warning-color: $ux-yellow-900; - - $btn-warning-hover-background: $ux-yellow-500; - $btn-warning-hover-border: $ux-yellow-500; - $btn-warning-hover-color: $ux-yellow-900; - - $btn-warning-active-background: $ux-yellow-600; - $btn-warning-active-border: $ux-yellow-600; - $btn-warning-active-color: $ux-yellow-900; - - @include button-variant( - $btn-warning-background, - $btn-warning-border, - $btn-warning-color, - - $btn-warning-hover-background, - $btn-warning-hover-border, - $btn-warning-hover-color, - - $btn-warning-active-background, - $btn-warning-active-border, - $btn-warning-active-color, - ); - - &:focus-visible { - @include btn-focus-outline; - } - - &:active, &:focus { - @include btn-remove-bootstrap-focus-outline; - } -} - -@mixin btn-outline-warning { - $btn-outline-warning-color: $ux-yellow-900; - $btn-outline-warning-color-hover: $ux-yellow-900; - - $btn-outline-warning-hover-background: $warning; - $btn-outline-warning-hover-border: $warning; - $btn-outline-warning-hover-color: $ux-yellow-900; - - $btn-outline-warning-border: $ux-yellow-500; - - $btn-outline-warning-active-background: $ux-yellow-500; - $btn-outline-warning-active-border-color: $ux-yellow-500; - - @include button-outline-variant( - $btn-outline-warning-color, - $btn-outline-warning-color-hover, - - $btn-outline-warning-hover-background, - $btn-outline-warning-hover-border, - $btn-outline-warning-hover-color, - ); - border-color: $btn-outline-warning-border; - - &:active { - background-color: $btn-outline-warning-active-background; - border-color: $btn-outline-warning-active-border-color; - } - - &:focus-visible { - @include btn-focus-outline; - } - - &:active, &:focus { - @include btn-remove-bootstrap-focus-outline; + border-color: var(--synth-hyperlink-color); } } @@ -403,7 +255,7 @@ $warning: $ux-yellow-400; ); &:disabled { - color: $ux-gray-500; + color: var(--ux-gray-500); } &:focus-visible { @@ -436,17 +288,17 @@ $warning: $ux-yellow-400; $btn-outline-transparent-hover-border, $btn-outline-transparent-hover-color, ); - border-color: $btn-outline-transparent-border; + border-color: var(--btn-outline-transparent-border); &:active { - background-color: $btn-outline-transparent-active-background; - border-color: $btn-outline-transparent-active-border-color; + background-color: var(--btn-outline-transparent-active-background); + border-color: var(--btn-outline-transparent-active-border-color); } &:disabled { - background-color: $ux-gray-300; + background-color: var(--ux-gray-300); border: $ux-gray-400; - color: $ux-gray-800; + color: var(--ux-gray-800); } &:focus-visible { @@ -486,7 +338,7 @@ $warning: $ux-yellow-400; ); &:disabled { - color: $ux-white; + color: var(--ux-white); } &:focus-visible { @@ -526,7 +378,7 @@ $warning: $ux-yellow-400; ); &:disabled { - color: $ux-white; + color: var(--ux-white); } &:focus-visible { @@ -566,7 +418,7 @@ $warning: $ux-yellow-400; ); &:disabled { - color: $ux-white; + color: var(--ux-white); } &:focus-visible { @@ -606,7 +458,7 @@ $warning: $ux-yellow-400; ); &:disabled { - color: $ux-white; + color: var(--ux-white); } &:focus-visible { @@ -648,7 +500,7 @@ $warning: $ux-yellow-400; text-decoration: none; &:disabled { - color: $ux-blue; + color: var(--ux-blue); opacity: 0.5; } diff --git a/scss/colors.scss b/scss/colors.scss index 1e0f86d2..046df629 100644 --- a/scss/colors.scss +++ b/scss/colors.scss @@ -1,4 +1,3 @@ -@import './colors/flash'; @import './colors/inputs'; @import './colors/mod_rainbow'; @import './colors/palette'; diff --git a/scss/colors/flash.scss b/scss/colors/flash.scss deleted file mode 100644 index 42eea263..00000000 --- a/scss/colors/flash.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import './palette'; - -$ux-flash-error: $ux-red-100; -$ux-flash-error-border: $ux-red-200; diff --git a/scss/colors/mod_rainbow.scss b/scss/colors/mod_rainbow.scss index ceb40310..fa19ffd9 100644 --- a/scss/colors/mod_rainbow.scss +++ b/scss/colors/mod_rainbow.scss @@ -1,35 +1,35 @@ -@mixin mod-rainbow($selector: '', $lighten: 0%, $color: $ux-white) { +@mixin mod-rainbow($selector: '', $lighten: 0%, $color: #fff) { &.ui-mod #{$selector} { color: $color; } &.ui-mod--0 #{$selector} { - background-color: $ux-gray-300; - color: $ux-gray-800; + background-color: var(--ux-gray-300); + color: var(--ux-gray-800); } &.ui-mod--1 #{$selector} { - background-color: $ux-green-300; - color: $ux-green-900; + background-color: var(--ux-green-300); + color: var(--ux-green-900); } &.ui-mod--2 #{$selector} { - background-color: $ux-orange-200; - color: $ux-orange-900; + background-color: var(--ux-orange-200); + color: var(--ux-orange-900); } &.ui-mod--3 #{$selector} { - background-color: $ux-yellow-300; - color: $ux-yellow-900; + background-color: var(--ux-yellow-300); + color: var(--ux-yellow-900); } &.ui-mod--4 #{$selector} { - background-color: $ux-red-200; - color: $ux-red-900; + background-color: var(--ux-red-200); + color: var(--ux-red-900); } &.ui-mod--5 #{$selector} { - background-color: $ux-purple-200; - color: $ux-purple-900; + background-color: var(--ux-purple-200); + color: var(--ux-purple-900); } } diff --git a/scss/colors/palette.scss b/scss/colors/palette.scss index ae38e77e..60a0d196 100644 --- a/scss/colors/palette.scss +++ b/scss/colors/palette.scss @@ -1,146 +1,39 @@ -// When updating this file, please export the color variable in variables.scss -// so it is available in src/Styles/palette.js +// DEPRECATED -- use css_properties.scss +// The only reason these variables still exist is because they are currently in use by Sass mixins. +// They can be iteratively removed as we continue to kill Sass. + -$ux-black: #000000; $ux-blue: #3F6DCA; -$ux-cream: #F8F4F2; $ux-emerald: #158D71; $ux-gray: #A1A1A1; -$ux-green: #04713C; -$ux-light-blue: #7CCBF2; -$ux-navy: #011936; -$ux-orange: #F59C27; -$ux-purple: #725CCC; $ux-red: #E03131; -$ux-sand: #DABDA2; $ux-teal: #0E4749; $ux-yellow: #F3CE14; $ux-white: #FFFFFF; - $brand-color-facebook: #3577ea; $brand-color-google: #DB3236; $brand-color-google-alt: #2D8CFF; $brand-color-linkedin: #0077B5; $brand-color-office365: #2372BA; $brand-color-twitter: #1B95E0; -$brand-color-yahoo: #6001d2; - -$ux-blue-100: #F1F5FE; -$ux-blue-200: #BDD1FB; $ux-blue-300: #A6C0F5; -$ux-blue-400: #7497DF; $ux-blue-500: $ux-blue; $ux-blue-600: #2854AF; -$ux-blue-700: #143C8D; $ux-blue-800: #0B2D72; -$ux-blue-900: #031D52; - -$ux-emerald-100: #BFDDD5; -$ux-emerald-200: #91CABB; -$ux-emerald-300: #65B8A2; -$ux-emerald-400: #3EA388; -$ux-emerald-500: $ux-emerald; $ux-emerald-600: #177863; $ux-emerald-700: #156152; $ux-emerald-800: #0D4A3E; -$ux-emerald-900: #073B31; - -$ux-gray-100: #F9F9F9; -$ux-gray-200: #F1F1F1; $ux-gray-300: #E1E1E1; $ux-gray-400: #D1D1D1; -$ux-gray-500: $ux-gray; -$ux-gray-600: #818181; $ux-gray-700: #616161; $ux-gray-800: #444444; $ux-gray-900: #101010; - -$ux-green-100: #D4F6E5; -$ux-green-200: #A3F9CF; -$ux-green-300: #70E2AB; -$ux-green-400: #40CC88; -$ux-green-500: #21B36C; -$ux-green-600: #09914F; -$ux-green-700: $ux-green; -$ux-green-800: #015029; -$ux-green-900: #003119; - -$ux-navy-100: #C4D0DF; -$ux-navy-200: #A3BAD2; -$ux-navy-300: #7396BA; -$ux-navy-400: #40669C; -$ux-navy-500: #234574; -$ux-navy-600: #16325A; -$ux-navy-700: $ux-navy; -$ux-navy-800: #01152D; -$ux-navy-900: #021020; - -$ux-neutral-100: $ux-white; -$ux-neutral-200: $ux-cream; -$ux-neutral-300: #E6E2E0; -$ux-neutral-400: #CECBC9; -$ux-neutral-500: #B5B0AB; -$ux-neutral-600: #9A938D; -$ux-neutral-700: #817874; -$ux-neutral-800: #33312F; -$ux-neutral-900: $ux-black; - -$ux-orange-100: #FDEAD2; -$ux-orange-200: #FCDFB9; -$ux-orange-300: #FAC988; -$ux-orange-400: #F7B258; -$ux-orange-500: $ux-orange; -$ux-orange-600: #E18C28; -$ux-orange-700: #AE6608; -$ux-orange-800: #7D4A06; -$ux-orange-900: #3D2200; - -$ux-red-100: #FAE1E1; -$ux-red-200: #F3BDBD; -$ux-red-300: #EB7A7A; -$ux-red-400: #E44E4E; -$ux-red-500: $ux-red; $ux-red-600: #C71F1F; $ux-red-700: #B11B1B; -$ux-red-800: #9B1818; -$ux-red-900: #470404; - -$ux-sand-100: #ECE1D4; -$ux-sand-200: #E8DAC9; -$ux-sand-300: #E5D2BD; -$ux-sand-400: #DFC7AF; -$ux-sand-500: $ux-sand; -$ux-sand-600: #D4B191; -$ux-sand-700: #CFAA86; -$ux-sand-800: #C59B72; -$ux-sand-900: #BA8E5E; - -$ux-teal-100: #CAE1E2; -$ux-teal-200: #A2CBCD; -$ux-teal-300: #85A9AA; -$ux-teal-400: #408F91; -$ux-teal-500: #2A7779; $ux-teal-600: #1C5D5F; $ux-teal-700: $ux-teal; $ux-teal-800: #093C3F; -$ux-teal-900: #083236; - -$ux-yellow-100: #FFF1AB; -$ux-yellow-200: #FFEB85; -$ux-yellow-300: #FFE356; $ux-yellow-400: #FBDA36; $ux-yellow-500: $ux-yellow; $ux-yellow-600: #E1BE0C; -$ux-yellow-700: #CAA900; -$ux-yellow-800: #A98D01; $ux-yellow-900: #453A00; - -$ux-purple-100: #EAE6FA; -$ux-purple-200: #DCD7F1; -$ux-purple-300: #BDB3E5; -$ux-purple-400: #9382D9; -$ux-purple-500: $ux-purple; -$ux-purple-600: #5642A6; -$ux-purple-700: #42308C; -$ux-purple-800: #34227A; -$ux-purple-900: #120640; diff --git a/scss/colors/synthesis-palette.scss b/scss/colors/synthesis-palette.scss index 3eae6c1c..24867737 100644 --- a/scss/colors/synthesis-palette.scss +++ b/scss/colors/synthesis-palette.scss @@ -1,38 +1,9 @@ -// stoplight color system -$synth-success-green-dark: #015029; -$synth-success-green-medium: #09914f; -$synth-success-green-light: #d4f6e5; +// DEPRECATED -- use css_properties.scss +// The only reason these variables still exist is because they are currently in use by Sass mixins. +// They can be iteratively removed as we continue to kill Sass. -$synth-error-red-dark: #c71f1f; -$synth-error-red-medium: #e03131; -$synth-error-red-light: #fae1e1; - -$synth-warning-amber-dark: #fbda36; -$synth-warning-amber-medium: #ffe356; -$synth-warning-amber-light: #fff1ab; -$synth-warning-amber-alternate: #f16e00; - -// neutrals -$synth-alert-bg-neutral: #f4f4f4; -$synth-div-stroke-neutral: #dedede; -$synth-header-neutral: #fbfbfb; -$synth-page-neutral: #fdfdfd; -$synth-text-neutral: #1b1b1b; $synth-unselected-neutral: #5b5b5b; -$synth-unselected-tab: #767676; - -// main schema - visual hierarchy -$synth-accent-green: #158d71; $synth-dark-background-selected-blue: #162c4e; $synth-dark-background-pressed-blue: #010812; -$synth-hover-state: #eef9f6; -$synth-indicator-stroke-green: #91cabb; -$synth-navbar-blue: #010812; $synth-primary-cta-blue: #162c4e; -$synth-selected-state-green: #c6e2db; - -// feedback and signifier colors $synth-hyperlink-color: #3f6dca; - -$synth-hover-blue: #e5ecff; -$synth-header-gray-blue: #eef2f8; diff --git a/scss/css_properties.scss b/scss/css_properties.scss index e776c5f6..c0a7a429 100644 --- a/scss/css_properties.scss +++ b/scss/css_properties.scss @@ -1,232 +1,258 @@ -@import 'borders'; -@import 'box_shadow'; -@import 'colors'; -@import 'elevations'; @import 'spacing'; -@import 'typography'; -@import 'z_stack'; :root { - --ux-border-radius: #{$ux-border-radius}; - - --ux-navbar-shadow-color: #{$ux-navbar-shadow-color}; - --ux-box-shadow: #{$ux-box-shadow}; - --ux-box-shadow-light: #{$ux-box-shadow-light}; - --ux-box-shadow-card: #{$ux-box-shadow-card}; - --ux-box-shadow-table-sticky-column-left: #{$ux-box-shadow-table-sticky-column-left}; - --ux-box-shadow-table-sticky-column-right: #{$ux-box-shadow-table-sticky-column-right}; - --ux-box-shadow-top: #{$ux-box-shadow-top}; - --ux-box-shadow-top-light: #{$ux-box-shadow-top-light}; - --ux-drawer-box-shadow-right: #{$ux-drawer-box-shadow-right}; - --ux-drawer-box-shadow-left: #{$ux-drawer-box-shadow-left}; - - --ux-elevations-00: #{$ux-elevations-00}; - --ux-elevations-10: #{$ux-elevations-10}; - --ux-elevations-20: #{$ux-elevations-20}; - --ux-elevations-30: #{$ux-elevations-30}; - --ux-elevations-40: #{$ux-elevations-40}; - --ux-elevations-50: #{$ux-elevations-50}; - - --ux-black: #{$ux-black}; - --ux-blue: #{$ux-blue}; - --ux-cream: #{$ux-cream}; - --ux-emerald: #{$ux-emerald}; - --ux-gray: #{$ux-gray}; - --ux-green: #{$ux-green}; - --ux-light-blue: #{$ux-light-blue}; - --ux-navy: #{$ux-navy}; - --ux-orange: #{$ux-orange}; - --ux-purple: #{$ux-purple}; - --ux-red: #{$ux-red}; - --ux-sand: #{$ux-sand}; - --ux-teal: #{$ux-teal}; - --ux-yellow: #{$ux-yellow}; - --ux-white: #{$ux-white}; - --brand-color-facebook: #{$brand-color-facebook}; - --brand-color-google: #{$brand-color-google}; - --brand-color-google-alt: #{$brand-color-google-alt}; - --brand-color-linkedin: #{$brand-color-linkedin}; - --brand-color-office365: #{$brand-color-office365}; - --brand-color-twitter: #{$brand-color-twitter}; - --brand-color-yahoo: #{$brand-color-yahoo}; - --ux-blue-100: #{$ux-blue-100}; - --ux-blue-200: #{$ux-blue-200}; - --ux-blue-300: #{$ux-blue-300}; - --ux-blue-400: #{$ux-blue-400}; - --ux-blue-500: #{$ux-blue-500}; - --ux-blue-600: #{$ux-blue-600}; - --ux-blue-700: #{$ux-blue-700}; - --ux-blue-800: #{$ux-blue-800}; - --ux-blue-900: #{$ux-blue-900}; - --ux-emerald-100: #{$ux-emerald-100}; - --ux-emerald-200: #{$ux-emerald-200}; - --ux-emerald-300: #{$ux-emerald-300}; - --ux-emerald-400: #{$ux-emerald-400}; - --ux-emerald-500: #{$ux-emerald-500}; - --ux-emerald-600: #{$ux-emerald-600}; - --ux-emerald-700: #{$ux-emerald-700}; - --ux-emerald-800: #{$ux-emerald-800}; - --ux-emerald-900: #{$ux-emerald-900}; - --ux-gray-100: #{$ux-gray-100}; - --ux-gray-200: #{$ux-gray-200}; - --ux-gray-300: #{$ux-gray-300}; - --ux-gray-400: #{$ux-gray-400}; - --ux-gray-500: #{$ux-gray-500}; - --ux-gray-600: #{$ux-gray-600}; - --ux-gray-700: #{$ux-gray-700}; - --ux-gray-800: #{$ux-gray-800}; - --ux-gray-900: #{$ux-gray-900}; - --ux-green-100: #{$ux-green-100}; - --ux-green-200: #{$ux-green-200}; - --ux-green-300: #{$ux-green-300}; - --ux-green-400: #{$ux-green-400}; - --ux-green-500: #{$ux-green-500}; - --ux-green-600: #{$ux-green-600}; - --ux-green-700: #{$ux-green-700}; - --ux-green-800: #{$ux-green-800}; - --ux-green-900: #{$ux-green-900}; - --ux-navy-100: #{$ux-navy-100}; - --ux-navy-200: #{$ux-navy-200}; - --ux-navy-300: #{$ux-navy-300}; - --ux-navy-400: #{$ux-navy-400}; - --ux-navy-500: #{$ux-navy-500}; - --ux-navy-600: #{$ux-navy-600}; - --ux-navy-700: #{$ux-navy-700}; - --ux-navy-800: #{$ux-navy-800}; - --ux-navy-900: #{$ux-navy-900}; - --ux-neutral-100: #{$ux-neutral-100}; - --ux-neutral-200: #{$ux-neutral-200}; - --ux-neutral-300: #{$ux-neutral-300}; - --ux-neutral-400: #{$ux-neutral-400}; - --ux-neutral-500: #{$ux-neutral-500}; - --ux-neutral-600: #{$ux-neutral-600}; - --ux-neutral-700: #{$ux-neutral-700}; - --ux-neutral-800: #{$ux-neutral-800}; - --ux-neutral-900: #{$ux-neutral-900}; - --ux-orange-100: #{$ux-orange-100}; - --ux-orange-200: #{$ux-orange-200}; - --ux-orange-300: #{$ux-orange-300}; - --ux-orange-400: #{$ux-orange-400}; - --ux-orange-500: #{$ux-orange-500}; - --ux-orange-600: #{$ux-orange-600}; - --ux-orange-700: #{$ux-orange-700}; - --ux-orange-800: #{$ux-orange-800}; - --ux-orange-900: #{$ux-orange-900}; - --ux-red-100: #{$ux-red-100}; - --ux-red-200: #{$ux-red-200}; - --ux-red-300: #{$ux-red-300}; - --ux-red-400: #{$ux-red-400}; - --ux-red-500: #{$ux-red-500}; - --ux-red-600: #{$ux-red-600}; - --ux-red-700: #{$ux-red-700}; - --ux-red-800: #{$ux-red-800}; - --ux-red-900: #{$ux-red-900}; - --ux-sand-100: #{$ux-sand-100}; - --ux-sand-200: #{$ux-sand-200}; - --ux-sand-300: #{$ux-sand-300}; - --ux-sand-400: #{$ux-sand-400}; - --ux-sand-500: #{$ux-sand-500}; - --ux-sand-600: #{$ux-sand-600}; - --ux-sand-700: #{$ux-sand-700}; - --ux-sand-800: #{$ux-sand-800}; - --ux-sand-900: #{$ux-sand-900}; - --ux-teal-100: #{$ux-teal-100}; - --ux-teal-200: #{$ux-teal-200}; - --ux-teal-300: #{$ux-teal-300}; - --ux-teal-400: #{$ux-teal-400}; - --ux-teal-500: #{$ux-teal-500}; - --ux-teal-600: #{$ux-teal-600}; - --ux-teal-700: #{$ux-teal-700}; - --ux-teal-800: #{$ux-teal-800}; - --ux-teal-900: #{$ux-teal-900}; - --ux-yellow-100: #{$ux-yellow-100}; - --ux-yellow-200: #{$ux-yellow-200}; - --ux-yellow-300: #{$ux-yellow-300}; - --ux-yellow-400: #{$ux-yellow-400}; - --ux-yellow-500: #{$ux-yellow-500}; - --ux-yellow-600: #{$ux-yellow-600}; - --ux-yellow-700: #{$ux-yellow-700}; - --ux-yellow-800: #{$ux-yellow-800}; - --ux-yellow-900: #{$ux-yellow-900}; - --ux-purple-100: #{$ux-purple-100}; - --ux-purple-200: #{$ux-purple-200}; - --ux-purple-300: #{$ux-purple-300}; - --ux-purple-400: #{$ux-purple-400}; - --ux-purple-500: #{$ux-purple-500}; - --ux-purple-600: #{$ux-purple-600}; - --ux-purple-700: #{$ux-purple-700}; - --ux-purple-800: #{$ux-purple-800}; - --ux-purple-900: #{$ux-purple-900}; - - --synth-spacing-1: #{$synth-spacing-1}; - --synth-spacing-2: #{$synth-spacing-2}; - --synth-spacing-3: #{$synth-spacing-3}; - --synth-spacing-4: #{$synth-spacing-4}; - --synth-spacing-5: #{$synth-spacing-5}; - --synth-spacing-6: #{$synth-spacing-6}; - --synth-spacing-7: #{$synth-spacing-7}; - --synth-spacing-8: #{$synth-spacing-8}; - --synth-spacing-9: #{$synth-spacing-9}; - --synth-spacing-10: #{$synth-spacing-10}; - --synth-spacing-11: #{$synth-spacing-11}; - --synth-spacing-12: #{$synth-spacing-12}; - - --synth-success-green-dark: #{$synth-success-green-dark}; - --synth-success-green-medium: #{$synth-success-green-medium}; - --synth-success-green-light: #{$synth-success-green-light}; - --synth-error-red-dark: #{$synth-error-red-dark}; - --synth-error-red-medium: #{$synth-error-red-medium}; - --synth-error-red-light: #{$synth-error-red-light}; - --synth-warning-amber-dark: #{$synth-warning-amber-dark}; - --synth-warning-amber-medium: #{$synth-warning-amber-medium}; - --synth-warning-amber-light: #{$synth-warning-amber-light}; - --synth-warning-amber-alternate: #{$synth-warning-amber-alternate}; - --synth-alert-bg-neutral: #{$synth-alert-bg-neutral}; - --synth-div-stroke-neutral: #{$synth-div-stroke-neutral}; - --synth-header-neutral: #{$synth-header-neutral}; - --synth-page-neutral: #{$synth-page-neutral}; - --synth-text-neutral: #{$synth-text-neutral}; - --synth-unselected-neutral: #{$synth-unselected-neutral}; - --synth-unselected-tab: #{$synth-unselected-tab}; - --synth-accent-green: #{$synth-accent-green}; - --synth-dark-background-selected-blue: #{$synth-dark-background-selected-blue}; - --synth-dark-background-pressed-blue: #{$synth-dark-background-pressed-blue}; - --synth-hover-state: #{$synth-hover-state}; - --synth-indicator-stroke-green: #{$synth-indicator-stroke-green}; - --synth-navbar-blue: #{$synth-navbar-blue}; - --synth-primary-cta-blue: #{$synth-primary-cta-blue}; - --synth-selected-state-green: #{$synth-selected-state-green}; - --synth-hyperlink-color: #{$synth-hyperlink-color}; - --synth-hover-blue: #{$synth-hover-blue}; - --synth-header-gray-blue: #{$synth-header-gray-blue}; - - --synth-font-family: #{$synth-font-family}; - --synth-font-weight-regular: #{$synth-font-weight-regular}; - --synth-font-weight-medium: #{$synth-font-weight-medium}; - --synth-font-weight-bold: #{$synth-font-weight-bold}; - --synth-font-size-base: #{$synth-font-size-base}; - - --z-index-1050: #{$z-index-1050}; - --z-index-1045: #{$z-index-1045}; - --z-index-1040: #{$z-index-1040}; - --z-index-1030: #{$z-index-1030}; - --z-index-1025: #{$z-index-1025}; - --z-index-1020: #{$z-index-1020}; - --z-index-115: #{$z-index-115}; - --z-index-100: #{$z-index-100}; - --z-index-30: #{$z-index-30}; - --z-index-20: #{$z-index-20}; - --z-index-11: #{$z-index-11}; - --z-index-10: #{$z-index-10}; - --z-index-3: #{$z-index-3}; - --z-index-2: #{$z-index-2}; - --z-index-1: #{$z-index-1}; - --z-index-popover: #{$z-index-popover}; - --z-index-flash: #{$z-index-flash}; - --z-index-drawer: #{$z-index-drawer}; - --z-index-modal-backdrop: #{$z-index-modal-backdrop}; - --z-index-fixed: #{$z-index-fixed}; - --z-index-overlay: #{$z-index-overlay}; - --z-index-table-cell-sticky-column: #{$z-index-table-cell-sticky-column}; - --z-index-table-foot-sticky-row: #{$z-index-table-foot-sticky-row}; + --ux-border-radius: 4px; + + --ux-navbar-shadow-color: #{rgba( 0, 0, 0, 0.26 )}; + --ux-box-shadow: #{0 2px 5px rgba( 0, 0, 0, 0.26 )}; + --ux-box-shadow-light: #{0 1px 1px rgba( 0, 0, 0, 0.26 )}; + --ux-box-shadow-card: #{0 2px 4px rgba(0,0,0,0.1)}; + --ux-box-shadow-table-sticky-column-left: 2px 0px 1px 0px rgba(0, 0, 0, 0.05); + --ux-box-shadow-table-sticky-column-right: -2px 0px 1px 0px rgba(0, 0, 0, 0.05); + --ux-box-shadow-top: 0 -2px 5px rgba( 0, 0, 0, 0.26 ); + --ux-box-shadow-top-light: 0 -1px 1px rgba( 0, 0, 0, 0.26 ); + --ux-drawer-box-shadow-right: -4px 4px 8px rgba(0,0,0,.1); + --ux-drawer-box-shadow-left: 4px 4px 8px rgba(0,0,0,.1); + + --ux-elevations-00: 0rem 0rem 0rem rgba(0, 0, 0, 0.1); + --ux-elevations-10: 0rem 0.06rem 0.12rem rgba(0, 0, 0, 0.1); + --ux-elevations-20: 0rem 0.13rem 0.3rem rgba(0, 0, 0, 0.1); + --ux-elevations-30: 0rem 0.3rem 0.5rem rgba(0, 0, 0, 0.1); + --ux-elevations-40: 0rem 0.4rem 0.8rem rgba(0, 0, 0, 0.1); + --ux-elevations-50: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.1); + + --ux-black: #000000; + --ux-blue: #3F6DCA; + --ux-cream: #F8F4F2; + --ux-emerald: #158D71; + --ux-gray: #A1A1A1; + --ux-green: #04713C; + --ux-light-blue: #7CCBF2; + --ux-navy: #011936; + --ux-orange: #F59C27; + --ux-purple: #725CCC; + --ux-red: #E03131; + --ux-sand: #DABDA2; + --ux-teal: #0E4749; + --ux-yellow: #F3CE14; + --ux-white: #FFFFFF; + + --brand-color-facebook: #3577ea; + --brand-color-google: #DB3236; + --brand-color-google-alt: #2D8CFF; + --brand-color-linkedin: #0077B5; + --brand-color-office365: #2372BA; + --brand-color-twitter: #1B95E0; + --brand-color-yahoo: #6001d2; + + --ux-blue-100: #F1F5FE; + --ux-blue-200: #BDD1FB; + --ux-blue-300: #A6C0F5; + --ux-blue-400: #7497DF; + --ux-blue-500: var(--ux-blue); + --ux-blue-600: #2854AF; + --ux-blue-700: #143C8D; + --ux-blue-800: #0B2D72; + --ux-blue-900: #031D52; + + --ux-emerald-100: #BFDDD5; + --ux-emerald-200: #91CABB; + --ux-emerald-300: #65B8A2; + --ux-emerald-400: #3EA388; + --ux-emerald-500: var(--ux-emerald); + --ux-emerald-600: #177863; + --ux-emerald-700: #156152; + --ux-emerald-800: #0D4A3E; + --ux-emerald-900: #073B31; + + --ux-gray-100: #F9F9F9; + --ux-gray-200: #F1F1F1; + --ux-gray-300: #E1E1E1; + --ux-gray-400: #D1D1D1; + --ux-gray-500: var(--ux-gray); + --ux-gray-600: #818181; + --ux-gray-700: #616161; + --ux-gray-800: #444444; + --ux-gray-900: #101010; + + --ux-green-100: #D4F6E5; + --ux-green-200: #A3F9CF; + --ux-green-300: #70E2AB; + --ux-green-400: #40CC88; + --ux-green-500: #21B36C; + --ux-green-600: #09914F; + --ux-green-700: var(--ux-green); + --ux-green-800: #015029; + --ux-green-900: #003119; + + --ux-navy-100: #C4D0DF; + --ux-navy-200: #A3BAD2; + --ux-navy-300: #7396BA; + --ux-navy-400: #40669C; + --ux-navy-500: #234574; + --ux-navy-600: #16325A; + --ux-navy-700: var(--ux-navy); + --ux-navy-800: #01152D; + --ux-navy-900: #021020; + + --ux-neutral-100: var(--ux-white); + --ux-neutral-200: var(--ux-cream); + --ux-neutral-300: #E6E2E0; + --ux-neutral-400: #CECBC9; + --ux-neutral-500: #B5B0AB; + --ux-neutral-600: #9A938D; + --ux-neutral-700: #817874; + --ux-neutral-800: #33312F; + --ux-neutral-900: var(--ux-black); + + --ux-orange-100: #FDEAD2; + --ux-orange-200: #FCDFB9; + --ux-orange-300: #FAC988; + --ux-orange-400: #F7B258; + --ux-orange-500: var(--ux-orange); + --ux-orange-600: #E18C28; + --ux-orange-700: #AE6608; + --ux-orange-800: #7D4A06; + --ux-orange-900: #3D2200; + + --ux-red-100: #FAE1E1; + --ux-red-200: #F3BDBD; + --ux-red-300: #EB7A7A; + --ux-red-400: #E44E4E; + --ux-red-500: var(--ux-red); + --ux-red-600: #C71F1F; + --ux-red-700: #B11B1B; + --ux-red-800: #9B1818; + --ux-red-900: #470404; + + --ux-sand-100: #ECE1D4; + --ux-sand-200: #E8DAC9; + --ux-sand-300: #E5D2BD; + --ux-sand-400: #DFC7AF; + --ux-sand-500: var(--ux-sand); + --ux-sand-600: #D4B191; + --ux-sand-700: #CFAA86; + --ux-sand-800: #C59B72; + --ux-sand-900: #BA8E5E; + + --ux-teal-100: #CAE1E2; + --ux-teal-200: #A2CBCD; + --ux-teal-300: #85A9AA; + --ux-teal-400: #408F91; + --ux-teal-500: #2A7779; + --ux-teal-600: #1C5D5F; + --ux-teal-700: var(--ux-teal); + --ux-teal-800: #093C3F; + --ux-teal-900: #083236; + + --ux-yellow-100: #FFF1AB; + --ux-yellow-200: #FFEB85; + --ux-yellow-300: #FFE356; + --ux-yellow-400: #FBDA36; + --ux-yellow-500: var(--ux-yellow); + --ux-yellow-600: #E1BE0C; + --ux-yellow-700: #CAA900; + --ux-yellow-800: #A98D01; + --ux-yellow-900: #453A00; + + --ux-purple-100: #EAE6FA; + --ux-purple-200: #DCD7F1; + --ux-purple-300: #BDB3E5; + --ux-purple-400: #9382D9; + --ux-purple-500: var(--ux-purple); + --ux-purple-600: #5642A6; + --ux-purple-700: #42308C; + --ux-purple-800: #34227A; + --ux-purple-900: #120640; + + + --synth-spacing-base: 4px; + + // Increments of 4 according to the 4 pixel grid system + --synth-spacing-1: var(--synth-spacing-base); // 4px + --synth-spacing-2: calc(var(--synth-spacing-base) * 2); // 8px + --synth-spacing-3: calc(var(--synth-spacing-base) * 3); // 12px + --synth-spacing-4: calc(var(--synth-spacing-base) * 4); // 16px + --synth-spacing-5: calc(var(--synth-spacing-base) * 5); // 20px + --synth-spacing-6: calc(var(--synth-spacing-base) * 6); // 24px + --synth-spacing-7: calc(var(--synth-spacing-base) * 7); // 28px + --synth-spacing-8: calc(var(--synth-spacing-base) * 8); // 32px + --synth-spacing-9: calc(var(--synth-spacing-base) * 9); // 36px + --synth-spacing-10: calc(var(--synth-spacing-base) * 10); // 40px + --synth-spacing-11: calc(var(--synth-spacing-base) * 11); // 44px + --synth-spacing-12: calc(var(--synth-spacing-base) * 12); // 48px + + // stoplight color system + --synth-success-green-dark: #015029; + --synth-success-green-medium: #09914f; + --synth-success-green-light: #d4f6e5; + + --synth-error-red-dark: #c71f1f; + --synth-error-red-medium: #e03131; + --synth-error-red-light: #fae1e1; + + --synth-warning-amber-dark: #fbda36; + --synth-warning-amber-medium: #ffe356; + --synth-warning-amber-light: #fff1ab; + --synth-warning-amber-alternate: #f16e00; + + // neutrals + --synth-alert-bg-neutral: #f4f4f4; + --synth-div-stroke-neutral: #dedede; + --synth-header-neutral: #fbfbfb; + --synth-page-neutral: #fdfdfd; + --synth-text-neutral: #1b1b1b; + --synth-unselected-neutral: #5b5b5b; + --synth-unselected-tab: #767676; + + // main schema - visual hierarchy + --synth-accent-green: #158d71; + --synth-dark-background-selected-blue: #162c4e; + --synth-dark-background-pressed-blue: #010812; + --synth-hover-state: #eef9f6; + --synth-indicator-stroke-green: #91cabb; + --synth-navbar-blue: #010812; + --synth-primary-cta-blue: #162c4e; + --synth-selected-state-green: #c6e2db; + + // feedback and signifier colors + --synth-hyperlink-color: #3f6dca; + + --synth-hover-blue: #e5ecff; + --synth-header-gray-blue: #eef2f8; + + --synth-font-family: Inter, sans-serif; + --synth-font-weight-regular: 400; + --synth-font-weight-medium: 500; + --synth-font-weight-bold: 700; + --synth-font-size-base: 0.875rem; + + // By Level + --z-index-1050: 1050; + --z-index-1045: 1045; + --z-index-1040: 1040; + --z-index-1030: 1030; + --z-index-1025: 1025; + --z-index-1020: 1020; + + --z-index-115: 115; + --z-index-100: 100; + + --z-index-30: 30; + --z-index-20: 20; + --z-index-11: 11; + --z-index-10: 10; + --z-index-3: 3; + --z-index-2: 2; + --z-index-1: 1; + + // By Purpose + --z-index-popover: var(--z-index-1050); + --z-index-flash: var(--z-index-1045); + --z-index-drawer: var(--z-index-1040); + --z-index-modal-backdrop: var(--z-index-1040); // Matches bootstrap --z-index-modal-backdrop + --z-index-fixed: var(--z-index-1030); //Matches bootstrap --z-index-fixed + --z-index-overlay: calc(var(--z-index-fixed) - 1); // Sits just under --z-index-fixed + --z-index-table-cell-sticky-column: var(--z-index-10); // Sits under --z-index-table-foot-sticky-row + --z-index-table-foot-sticky-row: var(--z-index-11); // Sits above var(--z-index-table-cell-sticky-column) } diff --git a/scss/elevations.scss b/scss/elevations.scss deleted file mode 100644 index 69097ec2..00000000 --- a/scss/elevations.scss +++ /dev/null @@ -1,6 +0,0 @@ -$ux-elevations-00: 0rem 0rem 0rem rgba(0, 0, 0, 0.1); -$ux-elevations-10: 0rem 0.06rem 0.12rem rgba(0, 0, 0, 0.1); -$ux-elevations-20: 0rem 0.13rem 0.3rem rgba(0, 0, 0, 0.1); -$ux-elevations-30: 0rem 0.3rem 0.5rem rgba(0, 0, 0, 0.1); -$ux-elevations-40: 0rem 0.4rem 0.8rem rgba(0, 0, 0, 0.1); -$ux-elevations-50: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.1); \ No newline at end of file diff --git a/scss/forms/form_control_label.scss b/scss/forms/form_control_label.scss index 878ed1f3..e220813a 100644 --- a/scss/forms/form_control_label.scss +++ b/scss/forms/form_control_label.scss @@ -1,11 +1,10 @@ -@import '../borders'; @import '../colors'; @import '../typography'; .FormControlLabel { @include synth-font-type-30; align-items: center; - color: $ux-gray-900; + color: var(--ux-gray-900); display: flex; margin-bottom: 8px; @@ -40,29 +39,29 @@ } &--bordered { - border: 1px solid $ux-gray-400; - border-radius: $ux-border-radius; + border: 1px solid var(--ux-gray-400); + border-radius: var(--ux-border-radius); padding: 16px; cursor: pointer; &:hover { - background-color: $ux-blue-100; + background-color: var(--ux-blue-100); } &.FormControlLabel--active { - background-color: $ux-blue-100; - border-color: $ux-blue-400; - color: $ux-blue-700; + background-color: var(--ux-blue-100); + border-color: var(--ux-blue-400); + color: var(--ux-blue-700); } } &--disabled { - background-color: $ux-gray-100; + background-color: var(--ux-gray-100); cursor: not-allowed; - color: $ux-gray-400; + color: var(--ux-gray-400); .FormControlLabel__children { - color: $ux-gray-400; + color: var(--ux-gray-400); } } diff --git a/scss/forms/form_group.scss b/scss/forms/form_group.scss index 6a06e51e..6e8f8286 100644 --- a/scss/forms/form_group.scss +++ b/scss/forms/form_group.scss @@ -1,4 +1,3 @@ -@import '../borders'; @import '../colors'; @import '../lists'; @import '../typography'; @@ -10,8 +9,8 @@ margin: 8px 0; &--bordered { - border: 1px solid $ux-gray-400; - border-radius: $ux-border-radius; + border: 1px solid var(--ux-gray-400); + border-radius: var(--ux-border-radius); padding: 16px; .InputLabel { @@ -20,19 +19,19 @@ &__helper-text { @include synth-font-type-30; - color: $ux-gray-900; + color: var(--ux-gray-900); } } } &--is-invalid { input, select, textarea { - border-color: $ux-red; + border-color: var(--ux-red); } .Input { // important because Input.scss focus style also sets this border - border-color: $ux-red-600 !important; + border-color: var(--ux-red-600) !important; } } @@ -57,7 +56,7 @@ &__helper-text { @include synth-font-type-20; - color: $ux-gray-900; + color: var(--ux-gray-900); margin: 0 0 12px; &--pre { @@ -67,7 +66,7 @@ &__invalid-feedback { @include synth-font-type-20--medium; - color: $ux-red; + color: var(--ux-red); padding: 6px 0; margin: 0; diff --git a/scss/forms/input_label.scss b/scss/forms/input_label.scss index 40c49734..999faba0 100644 --- a/scss/forms/input_label.scss +++ b/scss/forms/input_label.scss @@ -10,7 +10,7 @@ &__helper-text { @include synth-font-type-10--uppercase; - color: $ux-gray-900; + color: var(--ux-gray-900); } } diff --git a/scss/global.scss b/scss/global.scss index 03c97518..d7b38108 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -1,3 +1,4 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); -@import './theme'; @import './baseline'; +@import './css_properties.scss'; +@import './theme'; diff --git a/scss/spacing.scss b/scss/spacing.scss index 75c5b550..f4d330cf 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -1,12 +1,3 @@ -// TODO: deprecate after swapping for synth spacing vars -$ux-spacing-10: 4px; -$ux-spacing-20: 8px; -$ux-spacing-30: 12px; -$ux-spacing-40: 16px; -$ux-spacing-50: 24px; -$ux-spacing-60: 32px; -$ux-spacing-70: 48px; - $synth-spacing-base: 4px; // Increments of 4 according to the 4 pixel grid system diff --git a/scss/theme.scss b/scss/theme.scss index f6fa42c3..957abfd0 100644 --- a/scss/theme.scss +++ b/scss/theme.scss @@ -1,13 +1,10 @@ @import './anchors'; @import './avatars'; @import './bootstrap'; -@import './borders'; -@import './box_shadow'; @import './buttons'; @import './cards'; @import './colors'; @import './drawer'; -@import './elevations'; @import './inputs'; @import './lists'; @import './modals.scss'; @@ -16,5 +13,3 @@ @import './timing.scss'; @import './transitions.scss'; @import './typography'; -@import './z_stack'; - diff --git a/scss/typography.scss b/scss/typography.scss index f3f676d6..a456e5d1 100644 --- a/scss/typography.scss +++ b/scss/typography.scss @@ -1,12 +1,6 @@ -$synth-font-family: Inter, sans-serif; -$synth-font-weight-regular: 400; -$synth-font-weight-medium: 500; -$synth-font-weight-bold: 700; -$synth-font-size-base: 0.875rem; - @mixin synth-font-type-10() { font-size: .625rem; - font-weight: $synth-font-weight-regular; + font-weight: var(--synth-font-weight-regular); letter-spacing: 0.0625rem; line-height: 0.875rem; } @@ -17,7 +11,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-20() { font-size: .75rem; - font-weight: $synth-font-weight-regular; + font-weight: var(--synth-font-weight-regular); line-height: 1rem; } @@ -26,8 +20,8 @@ $synth-font-size-base: 0.875rem; } @mixin synth-font-type-30() { - font-size: $synth-font-size-base; - font-weight: $synth-font-weight-regular; + font-size: var(--synth-font-size-base); + font-weight: var(--synth-font-weight-regular); line-height: 1.25rem; } @@ -37,7 +31,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-40() { font-size: 1rem; - font-weight: $synth-font-weight-regular; + font-weight: var(--synth-font-weight-regular); line-height: 1.375rem; } @@ -47,7 +41,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-50() { font-size: 1.125rem; - font-weight: $synth-font-weight-regular; + font-weight: var(--synth-font-weight-regular); line-height: 1.5rem; } @@ -57,7 +51,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-60() { font-size: 1.25rem; - font-weight: $synth-font-weight-regular; + font-weight: var(--synth-font-weight-regular); line-height: 1.625rem; } @@ -67,7 +61,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-70() { font-size: 1.5rem; - font-weight: $synth-font-weight-regular; + font-weight: var(--synth-font-weight-regular); line-height: 2rem; } @@ -77,7 +71,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-10--medium() { @include synth-font-type-10; - font-weight: $synth-font-weight-medium; + font-weight: var(--synth-font-weight-medium); } @mixin font-type-10--medium() { @@ -86,7 +80,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-20--medium() { @include synth-font-type-20; - font-weight: $synth-font-weight-medium; + font-weight: var(--synth-font-weight-medium); } @mixin font-type-20--medium() { @@ -95,7 +89,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-30--medium() { @include synth-font-type-30; - font-weight: $synth-font-weight-medium; + font-weight: var(--synth-font-weight-medium); } @mixin font-type-30--medium() { @@ -104,7 +98,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-40--medium() { @include synth-font-type-40(); - font-weight: $synth-font-weight-medium; + font-weight: var(--synth-font-weight-medium); } @mixin font-type-40--medium() { @@ -113,7 +107,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-50--medium() { @include synth-font-type-50; - font-weight: $synth-font-weight-medium; + font-weight: var(--synth-font-weight-medium); } @mixin font-type-50--medium() { @@ -122,7 +116,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-60--medium() { @include synth-font-type-60(); - font-weight: $synth-font-weight-medium; + font-weight: var(--synth-font-weight-medium); } @mixin font-type-60--medium() { @@ -131,7 +125,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-70--medium() { @include synth-font-type-70; - font-weight: $synth-font-weight-medium; + font-weight: var(--synth-font-weight-medium); } @mixin font-type-70--medium() { @@ -140,7 +134,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-10--bold() { @include synth-font-type-10; - font-weight: $synth-font-weight-bold; + font-weight: var(--synth-font-weight-bold); } @mixin font-type-10--bold() { @@ -149,7 +143,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-20--bold() { @include synth-font-type-20; - font-weight: $synth-font-weight-bold; + font-weight: var(--synth-font-weight-bold); } @mixin font-type-20--bold() { @@ -158,7 +152,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-30--bold() { @include synth-font-type-30; - font-weight: $synth-font-weight-bold; + font-weight: var(--synth-font-weight-bold); } @mixin font-type-30--bold() { @@ -167,7 +161,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-40--bold() { @include synth-font-type-40; - font-weight: $synth-font-weight-bold; + font-weight: var(--synth-font-weight-bold); } @mixin font-type-40--bold() { @@ -176,7 +170,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-50--bold() { @include synth-font-type-50; - font-weight: $synth-font-weight-bold; + font-weight: var(--synth-font-weight-bold); } @mixin font-type-50--bold() { @@ -185,7 +179,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-60--bold() { @include synth-font-type-60; - font-weight: $synth-font-weight-bold; + font-weight: var(--synth-font-weight-bold); } @mixin font-type-60--bold() { @@ -194,7 +188,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-70--bold() { @include synth-font-type-70; - font-weight: $synth-font-weight-bold; + font-weight: var(--synth-font-weight-bold); } @mixin font-type-70--bold() { @@ -214,7 +208,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-10--bold-uppercase() { @include synth-font-type-10--uppercase; - font-weight: $synth-font-weight-bold; + font-weight: var(--synth-font-weight-bold); } @mixin font-type-10--bold-uppercase() { @@ -223,7 +217,7 @@ $synth-font-size-base: 0.875rem; @mixin synth-font-type-10--medium-uppercase() { @include synth-font-type-10--uppercase; - font-weight: $synth-font-weight-medium + font-weight: var(--synth-font-weight-medium) } @mixin font-type-10--medium-uppercase() { diff --git a/scss/variables.scss b/scss/variables.scss index 20b57ba9..9c412777 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -2,161 +2,161 @@ @import './colors/synthesis-palette'; :export { - SYNTH_SUCCESS_GREEN_DARK: $synth-success-green-dark; - SYNTH_SUCCESS_GREEN_MEDIUM: $synth-success-green-medium; - SYNTH_SUCCESS_GREEN_LIGHT: $synth-success-green-light; - - SYNTH_ERROR_RED_DARK: $synth-error-red-dark; - SYNTH_ERROR_RED_MEDIUM: $synth-error-red-medium; - SYNTH_ERROR_RED_LIGHT: $synth-error-red-light; - - SYNTH_WARNING_AMBER_DARK: $synth-warning-amber-dark; - SYNTH_WARNING_AMBER_MEDIUM: $synth-warning-amber-medium; - SYNTH_WARNING_AMBER_LIGHT: $synth-warning-amber-light; - SYNTH_WARNING_AMBER_ALTERNATE: $synth-warning-amber-alternate; - - SYNTH_ALERT_BG_NEUTRAL: $synth-alert-bg-neutral; - SYNTH_DIV_STROKE_NEUTRAL: $synth-div-stroke-neutral; - SYNTH_HEADER_NEUTRAL: $synth-header-neutral; - SYNTH_PAGE_NEUTRAL: $synth-page-neutral; - SYNTH_TEXT_NEUTRAL: $synth-text-neutral; - SYNTH_UNSELECTED_NEUTRAL: $synth-unselected-neutral; - - SYNTH_ACCENT_GREEN: $synth-accent-green; - SYNTH_DARK_BACKGROUND_SELECTED_BLUE: $synth-dark-background-selected-blue; - SYNTH_HOVER_STATE: $synth-hover-state; - SYNTH_INDICATOR_STROKE_GREEN: $synth-indicator-stroke-green; - SYNTH_NAVBAR_BLUE: $synth-navbar-blue; - SYNTH_PRIMARY_CTA_BLUE: $synth-primary-cta-blue; - SYNTH_SELECTED_STATE_GREEN: $synth-selected-state-green; - - SYNTH_HYPERLINK_COLOR: $synth-hyperlink-color; - - SYNTH_HOVER_BLUE: $synth-hover-blue; - SYNTH_HEADER_GRAY_BLUE: $synth-header-gray-blue; - - UX_BLACK: $ux-black; - UX_BLUE: $ux-blue; - UX_CREAM: $ux-cream; - UX_EMERALD: $ux-emerald; - UX_GRAY: $ux-gray; - UX_GREEN: $ux-green; - UX_NAVY: $ux-navy; - UX_ORANGE: $ux-orange; - UX_PURPLE: $ux-purple; - UX_RED: $ux-red; - UX_SAND: $ux-sand; - UX_TEAL: $ux-teal; - UX_YELLOW: $ux-yellow; - UX_WHITE: $ux-white; - - UX_BLUE_100: $ux-blue-100; - UX_BLUE_200: $ux-blue-200; - UX_BLUE_300: $ux-blue-300; - UX_BLUE_400: $ux-blue-400; - UX_BLUE_500: $ux-blue-500; - UX_BLUE_600: $ux-blue-600; - UX_BLUE_700: $ux-blue-700; - UX_BLUE_800: $ux-blue-800; - UX_BLUE_900: $ux-blue-900; - - UX_EMERALD_100: $ux-emerald-100; - UX_EMERALD_200: $ux-emerald-200; - UX_EMERALD_300: $ux-emerald-300; - UX_EMERALD_400: $ux-emerald-400; - UX_EMERALD_500: $ux-emerald-500; - UX_EMERALD_600: $ux-emerald-600; - UX_EMERALD_700: $ux-emerald-700; - UX_EMERALD_800: $ux-emerald-800; - UX_EMERALD_900: $ux-emerald-900; - - UX_GRAY_100: $ux-gray-100; - UX_GRAY_200: $ux-gray-200; - UX_GRAY_300: $ux-gray-300; - UX_GRAY_400: $ux-gray-400; - UX_GRAY_500: $ux-gray-500; - UX_GRAY_600: $ux-gray-600; - UX_GRAY_700: $ux-gray-700; - UX_GRAY_800: $ux-gray-800; - UX_GRAY_900: $ux-gray-900; - - UX_GREEN_100: $ux-green-100; - UX_GREEN_200: $ux-green-200; - UX_GREEN_300: $ux-green-300; - UX_GREEN_400: $ux-green-400; - UX_GREEN_500: $ux-green-500; - UX_GREEN_600: $ux-green-600; - UX_GREEN_700: $ux-green-700; - UX_GREEN_800: $ux-green-800; - UX_GREEN_900: $ux-green-900; - - UX_NAVY_100: $ux-navy-100; - UX_NAVY_200: $ux-navy-200; - UX_NAVY_300: $ux-navy-300; - UX_NAVY_400: $ux-navy-400; - UX_NAVY_500: $ux-navy-500; - UX_NAVY_600: $ux-navy-600; - UX_NAVY_700: $ux-navy-700; - UX_NAVY_800: $ux-navy-800; - UX_NAVY_900: $ux-navy-900; - - UX_NEUTRAL_100: $ux-white; - UX_NEUTRAL_200: $ux-cream; - UX_NEUTRAL_300: $ux-neutral-300; - UX_NEUTRAL_400: $ux-neutral-400; - UX_NEUTRAL_500: $ux-neutral-500; - UX_NEUTRAL_600: $ux-neutral-600; - UX_NEUTRAL_700: $ux-neutral-700; - UX_NEUTRAL_800: $ux-neutral-800; - UX_NEUTRAL_900: $ux-black; - - UX_ORANGE_100: $ux-orange-100; - UX_ORANGE_200: $ux-orange-200; - UX_ORANGE_300: $ux-orange-300; - UX_ORANGE_400: $ux-orange-400; - UX_ORANGE_500: $ux-orange-500; - UX_ORANGE_600: $ux-orange-600; - UX_ORANGE_700: $ux-orange-700; - UX_ORANGE_800: $ux-orange-800; - UX_ORANGE_900: $ux-orange-900; - - UX_RED_100: $ux-red-100; - UX_RED_200: $ux-red-200; - UX_RED_300: $ux-red-300; - UX_RED_400: $ux-red-400; - UX_RED_500: $ux-red-500; - UX_RED_600: $ux-red-600; - UX_RED_700: $ux-red-700; - UX_RED_800: $ux-red-800; - UX_RED_900: $ux-red-900; - - UX_SAND_100: $ux-sand-100; - UX_SAND_200: $ux-sand-200; - UX_SAND_300: $ux-sand-300; - UX_SAND_400: $ux-sand-400; - UX_SAND_500: $ux-sand-500; - UX_SAND_600: $ux-sand-600; - UX_SAND_700: $ux-sand-700; - UX_SAND_800: $ux-sand-800; - UX_SAND_900: $ux-sand-900; - - UX_TEAL_100: $ux-teal-100; - UX_TEAL_200: $ux-teal-200; - UX_TEAL_300: $ux-teal-300; - UX_TEAL_400: $ux-teal-400; - UX_TEAL_500: $ux-teal-500; - UX_TEAL_600: $ux-teal-600; - UX_TEAL_700: $ux-teal-500; - UX_TEAL_800: $ux-teal-800; - UX_TEAL_900: $ux-teal-900; - - UX_YELLOW_100: $ux-yellow-100; - UX_YELLOW_200: $ux-yellow-200; - UX_YELLOW_300: $ux-yellow-300; - UX_YELLOW_400: $ux-yellow-400; - UX_YELLOW_500: $ux-yellow-500; - UX_YELLOW_600: $ux-yellow-600; - UX_YELLOW_700: $ux-yellow-700; - UX_YELLOW_800: $ux-yellow-800; - UX_YELLOW_900: $ux-yellow-900; + SYNTH_SUCCESS_GREEN_DARK: var(--synth-success-green-dark); + SYNTH_SUCCESS_GREEN_MEDIUM: var(--synth-success-green-medium); + SYNTH_SUCCESS_GREEN_LIGHT: var(--synth-success-green-light); + + SYNTH_ERROR_RED_DARK: var(--synth-error-red-dark); + SYNTH_ERROR_RED_MEDIUM: var(--synth-error-red-medium); + SYNTH_ERROR_RED_LIGHT: var(--synth-error-red-light); + + SYNTH_WARNING_AMBER_DARK: var(--synth-warning-amber-dark); + SYNTH_WARNING_AMBER_MEDIUM: var(--synth-warning-amber-medium); + SYNTH_WARNING_AMBER_LIGHT: var(--synth-warning-amber-light); + SYNTH_WARNING_AMBER_ALTERNATE: var(--synth-warning-amber-alternate); + + SYNTH_ALERT_BG_NEUTRAL: var(--synth-alert-bg-neutral); + SYNTH_DIV_STROKE_NEUTRAL: var(--synth-div-stroke-neutral); + SYNTH_HEADER_NEUTRAL: var(--synth-header-neutral); + SYNTH_PAGE_NEUTRAL: var(--synth-page-neutral); + SYNTH_TEXT_NEUTRAL: var(--synth-text-neutral); + SYNTH_UNSELECTED_NEUTRAL: var(--synth-unselected-neutral); + + SYNTH_ACCENT_GREEN: var(--synth-accent-green); + SYNTH_DARK_BACKGROUND_SELECTED_BLUE: var(--synth-dark-background-selected-blue); + SYNTH_HOVER_STATE: var(--synth-hover-state); + SYNTH_INDICATOR_STROKE_GREEN: var(--synth-indicator-stroke-green); + SYNTH_NAVBAR_BLUE: var(--synth-navbar-blue); + SYNTH_PRIMARY_CTA_BLUE: var(--synth-primary-cta-blue); + SYNTH_SELECTED_STATE_GREEN: var(--synth-selected-state-green); + + SYNTH_HYPERLINK_COLOR: var(--synth-hyperlink-color); + + SYNTH_HOVER_BLUE: var(--synth-hover-blue); + SYNTH_HEADER_GRAY_BLUE: var(--synth-header-gray-blue); + + UX_BLACK: var(--ux-black); + UX_BLUE: var(--ux-blue); + UX_CREAM: var(--ux-cream); + UX_EMERALD: var(--ux-emerald); + UX_GRAY: var(--ux-gray); + UX_GREEN: var(--ux-green); + UX_NAVY: var(--ux-navy); + UX_ORANGE: var(--ux-orange); + UX_PURPLE: var(--ux-purple); + UX_RED: var(--ux-red); + UX_SAND: var(--ux-sand); + UX_TEAL: var(--ux-teal); + UX_YELLOW: var(--ux-yellow); + UX_WHITE: var(--ux-white); + + UX_BLUE_100: var(--ux-blue-100); + UX_BLUE_200: var(--ux-blue-200); + UX_BLUE_300: var(--ux-blue-300); + UX_BLUE_400: var(--ux-blue-400); + UX_BLUE_500: var(--ux-blue-500); + UX_BLUE_600: var(--ux-blue-600); + UX_BLUE_700: var(--ux-blue-700); + UX_BLUE_800: var(--ux-blue-800); + UX_BLUE_900: var(--ux-blue-900); + + UX_EMERALD_100: var(--ux-emerald-100); + UX_EMERALD_200: var(--ux-emerald-200); + UX_EMERALD_300: var(--ux-emerald-300); + UX_EMERALD_400: var(--ux-emerald-400); + UX_EMERALD_500: var(--ux-emerald-500); + UX_EMERALD_600: var(--ux-emerald-600); + UX_EMERALD_700: var(--ux-emerald-700); + UX_EMERALD_800: var(--ux-emerald-800); + UX_EMERALD_900: var(--ux-emerald-900); + + UX_GRAY_100: var(--ux-gray-100); + UX_GRAY_200: var(--ux-gray-200); + UX_GRAY_300: var(--ux-gray-300); + UX_GRAY_400: var(--ux-gray-400); + UX_GRAY_500: var(--ux-gray-500); + UX_GRAY_600: var(--ux-gray-600); + UX_GRAY_700: var(--ux-gray-700); + UX_GRAY_800: var(--ux-gray-800); + UX_GRAY_900: var(--ux-gray-900); + + UX_GREEN_100: var(--ux-green-100); + UX_GREEN_200: var(--ux-green-200); + UX_GREEN_300: var(--ux-green-300); + UX_GREEN_400: var(--ux-green-400); + UX_GREEN_500: var(--ux-green-500); + UX_GREEN_600: var(--ux-green-600); + UX_GREEN_700: var(--ux-green-700); + UX_GREEN_800: var(--ux-green-800); + UX_GREEN_900: var(--ux-green-900); + + UX_NAVY_100: var(--ux-navy-100); + UX_NAVY_200: var(--ux-navy-200); + UX_NAVY_300: var(--ux-navy-300); + UX_NAVY_400: var(--ux-navy-400); + UX_NAVY_500: var(--ux-navy-500); + UX_NAVY_600: var(--ux-navy-600); + UX_NAVY_700: var(--ux-navy-700); + UX_NAVY_800: var(--ux-navy-800); + UX_NAVY_900: var(--ux-navy-900); + + UX_NEUTRAL_100: var(--ux-white); + UX_NEUTRAL_200: var(--ux-cream); + UX_NEUTRAL_300: var(--ux-neutral-300); + UX_NEUTRAL_400: var(--ux-neutral-400); + UX_NEUTRAL_500: var(--ux-neutral-500); + UX_NEUTRAL_600: var(--ux-neutral-600); + UX_NEUTRAL_700: var(--ux-neutral-700); + UX_NEUTRAL_800: var(--ux-neutral-800); + UX_NEUTRAL_900: var(--ux-black); + + UX_ORANGE_100: var(--ux-orange-100); + UX_ORANGE_200: var(--ux-orange-200); + UX_ORANGE_300: var(--ux-orange-300); + UX_ORANGE_400: var(--ux-orange-400); + UX_ORANGE_500: var(--ux-orange-500); + UX_ORANGE_600: var(--ux-orange-600); + UX_ORANGE_700: var(--ux-orange-700); + UX_ORANGE_800: var(--ux-orange-800); + UX_ORANGE_900: var(--ux-orange-900); + + UX_RED_100: var(--ux-red-100); + UX_RED_200: var(--ux-red-200); + UX_RED_300: var(--ux-red-300); + UX_RED_400: var(--ux-red-400); + UX_RED_500: var(--ux-red-500); + UX_RED_600: var(--ux-red-600); + UX_RED_700: var(--ux-red-700); + UX_RED_800: var(--ux-red-800); + UX_RED_900: var(--ux-red-900); + + UX_SAND_100: var(--ux-sand-100); + UX_SAND_200: var(--ux-sand-200); + UX_SAND_300: var(--ux-sand-300); + UX_SAND_400: var(--ux-sand-400); + UX_SAND_500: var(--ux-sand-500); + UX_SAND_600: var(--ux-sand-600); + UX_SAND_700: var(--ux-sand-700); + UX_SAND_800: var(--ux-sand-800); + UX_SAND_900: var(--ux-sand-900); + + UX_TEAL_100: var(--ux-teal-100); + UX_TEAL_200: var(--ux-teal-200); + UX_TEAL_300: var(--ux-teal-300); + UX_TEAL_400: var(--ux-teal-400); + UX_TEAL_500: var(--ux-teal-500); + UX_TEAL_600: var(--ux-teal-600); + UX_TEAL_700: var(--ux-teal-700); + UX_TEAL_800: var(--ux-teal-800); + UX_TEAL_900: var(--ux-teal-900); + + UX_YELLOW_100: var(--ux-yellow-100); + UX_YELLOW_200: var(--ux-yellow-200); + UX_YELLOW_300: var(--ux-yellow-300); + UX_YELLOW_400: var(--ux-yellow-400); + UX_YELLOW_500: var(--ux-yellow-500); + UX_YELLOW_600: var(--ux-yellow-600); + UX_YELLOW_700: var(--ux-yellow-700); + UX_YELLOW_800: var(--ux-yellow-800); + UX_YELLOW_900: var(--ux-yellow-900); } diff --git a/scss/z_stack.scss b/scss/z_stack.scss deleted file mode 100644 index d7390666..00000000 --- a/scss/z_stack.scss +++ /dev/null @@ -1,38 +0,0 @@ -/* ======================================== - Add z-index variable declarations here. - Name according to level. - - If you defined a usage specific z-index variable, - make sure it is referencing a level-named variable. -======================================== */ - -// Note look to update `z_stack.js` when changing these - -// By Level -$z-index-1050: 1050; -$z-index-1045: 1045; -$z-index-1040: 1040; -$z-index-1030: 1030; -$z-index-1025: 1025; -$z-index-1020: 1020; - -$z-index-115: 115; -$z-index-100: 100; - -$z-index-30: 30; -$z-index-20: 20; -$z-index-11: 11; -$z-index-10: 10; -$z-index-3: 3; -$z-index-2: 2; -$z-index-1: 1; - -// By Purpose -$z-index-popover: $z-index-1050; -$z-index-flash: $z-index-1045; -$z-index-drawer: $z-index-1040; -$z-index-modal-backdrop: $z-index-1040; // Matches bootstrap $zindex-modal-backdrop -$z-index-fixed: $z-index-1030; //Matches bootstrap $zindex-fixed -$z-index-overlay: $z-index-fixed - 1; // Sits just under $z-index-fixed -$z-index-table-cell-sticky-column: $z-index-10; // Sits under $z-index-table-foot-sticky-row -$z-index-table-foot-sticky-row: $z-index-11; // Sits above $z-index-table-cell-sticky-column diff --git a/src/Accordion/AccordionCollapse.scss b/src/Accordion/AccordionCollapse.scss index 5daee3df..cfa78671 100644 --- a/src/Accordion/AccordionCollapse.scss +++ b/src/Accordion/AccordionCollapse.scss @@ -1,7 +1,7 @@ @import '../../scss/theme'; .AccordionCollapse { - border-top: 1px solid $ux-gray-400; + border-top: 1px solid var(--ux-gray-400); &__container { padding: 16px 24px; diff --git a/src/Accordion/AccordionItem.scss b/src/Accordion/AccordionItem.scss index 624da5a0..dd04b1cd 100644 --- a/src/Accordion/AccordionItem.scss +++ b/src/Accordion/AccordionItem.scss @@ -1,17 +1,17 @@ @import '../../scss/theme'; .AccordionItem { - background-color: $ux-white; - border: 1px solid $ux-gray-400; + background-color: var(--ux-white); + border: 1px solid var(--ux-gray-400); &:first-of-type { - border-top-left-radius: $ux-border-radius; - border-top-right-radius: $ux-border-radius; + border-top-left-radius: var(--ux-border-radius); + border-top-right-radius: var(--ux-border-radius); } &:last-of-type { - border-bottom-left-radius: $ux-border-radius; - border-bottom-right-radius: $ux-border-radius; + border-bottom-left-radius: var(--ux-border-radius); + border-bottom-right-radius: var(--ux-border-radius); } &--borderless { diff --git a/src/Accordion/AccordionToggle.scss b/src/Accordion/AccordionToggle.scss index 89271de2..1c50e7b9 100644 --- a/src/Accordion/AccordionToggle.scss +++ b/src/Accordion/AccordionToggle.scss @@ -39,7 +39,7 @@ &:focus-visible { @include btn-focus-outline; - border-radius: $ux-border-radius; + border-radius: var(--ux-border-radius); } &:not(.collapsed) .AccordionToggle__chevron-right { @@ -96,7 +96,7 @@ &__collapsed-text { @include synth-font-type-30; - color: $ux-gray-600; + color: var(--ux-gray-600); } &--disabled { diff --git a/src/Alert/Alert.jsx b/src/Alert/Alert.jsx index 0e043b0a..aba8499f 100644 --- a/src/Alert/Alert.jsx +++ b/src/Alert/Alert.jsx @@ -17,7 +17,6 @@ import classNames from 'classnames'; export const MessageTypes = { SUCCESS: 'success', INFO: 'info', - ANNOUNCEMENT: 'announcement', FEATURE: 'feature', WARNING: 'warning', ERROR: 'error', @@ -39,8 +38,6 @@ const getAlertIcon = (type) => { ); - case MessageTypes.ANNOUNCEMENT: - return (); case MessageTypes.FEATURE: return (); case MessageTypes.WARNING: diff --git a/src/Alert/Alert.mdx b/src/Alert/Alert.mdx index 6e0fda4f..494668ad 100644 --- a/src/Alert/Alert.mdx +++ b/src/Alert/Alert.mdx @@ -36,7 +36,6 @@ page and are not affected by an event. ### Feature - Use when showcasing a new feature to a user. -- NOTE: use this variant instead of the Announcement variant (this will be deprecated soon) diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss index d5959ae3..a8323a81 100644 --- a/src/Alert/Alert.scss +++ b/src/Alert/Alert.scss @@ -5,10 +5,10 @@ background-color: $bg-color; border: none; border-left: unset; - border-radius: $ux-border-radius; + border-radius: var(--ux-border-radius); color: $color; - margin: $synth-spacing-2 $synth-spacing-4 $synth-spacing-2 0; - padding: $synth-spacing-2 $synth-spacing-4; + margin: var(--synth-spacing-2) var(--synth-spacing-4) var(--synth-spacing-2) 0; + padding: var(--synth-spacing-2) var(--synth-spacing-4); text-decoration: none; white-space: nowrap; @@ -44,11 +44,11 @@ ; } - background-color: $synth-alert-bg-neutral; - border-radius: $ux-border-radius; - color: $synth-text-neutral; - margin-bottom: $synth-spacing-4; - padding: $synth-spacing-4; + background-color: var(--synth-alert-bg-neutral); + border-radius: var(--ux-border-radius); + color: var(--synth-text-neutral); + margin-bottom: var(--synth-spacing-4); + padding: var(--synth-spacing-4); position: relative; &__icon { @@ -57,7 +57,7 @@ &__content { grid-area: content; - margin-right: $synth-spacing-4; + margin-right: var(--synth-spacing-4); } &__action { @@ -90,7 +90,7 @@ } .Alert-success { - border-left: 8px solid $synth-accent-green; + border-left: 8px solid var(--synth-accent-green); .close { @include close-action; @@ -101,16 +101,16 @@ } .Alert__icon { - color: $synth-accent-green; + color: var(--synth-accent-green); .fa-check { - color: $ux-gray-100; + color: var(--ux-gray-100); } } } .Alert-info { - border-left: 8px solid $synth-hyperlink-color; + border-left: 8px solid var(--synth-hyperlink-color); .close { @include close-action; @@ -121,28 +121,16 @@ } .Alert__icon { - color: $ux-blue-300; + color: var(--ux-blue-300); .fa-info { - color: $ux-blue-600; + color: var(--ux-blue-600); } } } - .Alert-announcement { - border-left: 8px solid $synth-hyperlink-color; - - .close { - @include close-action; - } - - .primary-action { - @include primary-action; - } - } - .Alert-feature { - border: 2px solid $ux-teal-600; + border: 2px solid var(--ux-teal-600); .close { @include close-action; @@ -153,12 +141,12 @@ } .Alert__icon { - color: $ux-teal-600; + color: var(--ux-teal-600); } } .Alert-warning { - border-left: 8px solid $synth-warning-amber-alternate; + border-left: 8px solid var(--synth-warning-amber-alternate); .close { @include close-action; @@ -169,12 +157,12 @@ } .Alert__icon { - color: $synth-warning-amber-alternate; + color: var(--synth-warning-amber-alternate); } } .Alert-error { - border-left: 8px solid $ux-red-400; + border-left: 8px solid var(--ux-red-400); .close { @include close-action; @@ -185,7 +173,7 @@ } .Alert__icon { - color: $ux-red; + color: var(--ux-red); } } } @@ -207,9 +195,9 @@ } font-weight: 500; - border-radius: $ux-border-radius; - margin-bottom: $synth-spacing-4; - padding: $synth-spacing-4; + border-radius: var(--ux-border-radius); + margin-bottom: var(--synth-spacing-4); + padding: var(--synth-spacing-4); position: relative; &__icon { @@ -218,7 +206,7 @@ &__content { grid-area: content; - margin-right: $synth-spacing-4; + margin-right: var(--synth-spacing-4); } &__action { @@ -251,9 +239,9 @@ } .Alert-success { - background-color: $ux-green-100; - color: $ux-green-800; - border-left: 8px solid $ux-green-400; + background-color: var(--ux-green-100); + color: var(--ux-green-800); + border-left: 8px solid var(--ux-green-400); .close { @include close-action; @@ -264,18 +252,18 @@ } .Alert__icon { - color: $ux-green-400; + color: var(--ux-green-400); .fa-check { - color: $ux-green-800; + color: var(--ux-green-800); } } } .Alert-info { - background-color: $ux-blue-100; - color: $ux-blue-800; - border-left: 8px solid $ux-blue-300; + background-color: var(--ux-blue-100); + color: var(--ux-blue-800); + border-left: 8px solid var(--ux-blue-300); .close { @include close-action($ux-blue-600, $ux-blue-800) @@ -286,32 +274,18 @@ } .Alert__icon { - color: $ux-blue-300; + color: var(--ux-blue-300); .fa-info { - color: $ux-blue-600; + color: var(--ux-blue-600); } } } -.Alert-announcement { - background-color: $ux-blue-100; - color: $ux-blue-700; - border-left: 8px solid $ux-blue-300; - - .close { - @include close-action; - } - - .primary-action { - @include primary-action; - } -} - .Alert-feature { - background-color: $ux-teal-100; - color: $ux-teal-800; - border: 2px solid $ux-teal-600; + background-color: var(--ux-teal-100); + color: var(--ux-teal-800); + border: 2px solid var(--ux-teal-600); .close { @include close-action; @@ -323,9 +297,9 @@ } .Alert-feature { - background-color: $ux-teal-100; - color: $ux-teal-800; - border: 2px solid $ux-teal-600; + background-color: var(--ux-teal-100); + color: var(--ux-teal-800); + border: 2px solid var(--ux-teal-600); .close { @include close-action($ux-teal-600, $ux-teal-800) @@ -337,9 +311,9 @@ } .Alert-warning { - background-color: $ux-yellow-100; - color: $ux-yellow-900; - border-left: 8px solid $ux-yellow-600; + background-color: var(--ux-yellow-100); + color: var(--ux-yellow-900); + border-left: 8px solid var(--ux-yellow-600); .close { @include close-action; @@ -350,14 +324,14 @@ } .Alert__icon { - color: $ux-yellow-700; + color: var(--ux-yellow-700); } } .Alert-error { - background-color: $ux-red-100; - color: $ux-red-800; - border-left: 8px solid $ux-red-400; + background-color: var(--ux-red-100); + color: var(--ux-red-800); + border-left: 8px solid var(--ux-red-400); .close { @include close-action; @@ -368,6 +342,6 @@ } .Alert__icon { - color: $ux-red; + color: var(--ux-red); } } diff --git a/src/Avatar/Avatar.scss b/src/Avatar/Avatar.scss index 726ea10d..0de3bcc8 100644 --- a/src/Avatar/Avatar.scss +++ b/src/Avatar/Avatar.scss @@ -7,8 +7,8 @@ width: $avatar-small-width; &__alert { - background-color: $ux-red-400; - border: 2px solid $ux-white; + background-color: var(--ux-red-400); + border: 2px solid var(--ux-white); border-radius: 50%; height: 12px; position: absolute; @@ -27,9 +27,9 @@ vertical-align: middle; } - background-color: $ux-blue; + background-color: var(--ux-blue); border-radius: 50%; - color: $ux-white; + color: var(--ux-white); display: inline-block; height: 100%; overflow: hidden; diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index 95bd2bbb..f83710b8 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -44,10 +44,6 @@ import * as ComponentStories from './Button.stories'; - Space is limited (e.g. too small for text alone) - The icon is standardized or represents an object with a strong physical analog or visual attribute (e.g. floppy disk (Save), pencil (Edit)) -### Deprecated variants - -- The `danger` and `warning` variants are deprecated and will be removed in the next major version. - ## Button vs. Link distinction - Buttons are used for actions that affect the application. Clicking them causes changes on the frontend or backend. diff --git a/src/Button/Button.scss b/src/Button/Button.scss index 052ac9ff..01062b7b 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -17,11 +17,11 @@ i, svg { &.icon-left { - margin-right: $synth-spacing-2; + margin-right: var(--synth-spacing-2); } &.icon-right { - margin-left: $synth-spacing-2; + margin-left: var(--synth-spacing-2); } } @@ -39,7 +39,7 @@ } &.btn-sm { - border-radius: $ux-border-radius; + border-radius: var(--ux-border-radius); } &.btn-primary { @@ -54,22 +54,6 @@ @include btn-tertiary; } - &.btn-danger { - @include btn-danger; - } - - &.btn-outline-danger { - @include btn-outline-danger; - } - - &.btn-warning { - @include btn-warning; - } - - &.btn-outline-warning { - @include btn-outline-warning; - } - &.btn-transparent { @include btn-transparent; } diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 78233a63..bb397850 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -134,158 +134,6 @@ export const Tertiary = () => ( ); -export const DangerDEPRECATED = () => ( - <> - - {' '} - - {' '} - - - {' '} - {' '} - - {' '} - - {' '} - - {' '} - - -); - -export const WarningDEPRECATED = () => ( - <> - - {' '} - - {' '} - - {' '} - - {' '} - - {' '} - - {' '} - - {' '} - - -); - export const Transparent = () => ( <>