diff --git a/.github/workflows/design-tokens-ui.yml b/.github/workflows/design-tokens-ui.yml deleted file mode 100644 index 11501c93bf..0000000000 --- a/.github/workflows/design-tokens-ui.yml +++ /dev/null @@ -1,91 +0,0 @@ -name: Design Tokens UI 🎨 - -on: - push: - branches: - - master - pull_request: - branches: - - master - paths: - - '.github/workflows/design-tokens-ui.yml' - - '.deployment/design-tokens-ui/**' - - 'apps/design-tokens-ui/**' - - 'libs/design-tokens-ui/**' - - 'libs/shared/design-tokens/**' - -jobs: - deploy-ui: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v1 - - - name: Add CI config - run: mv .github/.bazelrc .bazelrc.user - - - name: Mount bazel cache - uses: actions/cache@v2 - with: - path: '/home/runner/.cache/bazel' - key: dtui-general-bazel - - - name: Mount Disk cache - uses: actions/cache@v2 - with: - path: '/home/runner/.cache/bazel-disk-cache' - key: dtui-disk-cache-bazel - - - name: Mount Repo cache - uses: actions/cache@v2 - with: - path: '/home/runner/.cache/bazel-repo-cache' - key: dtui-repo-cache-bazel - - - name: Install bazelisk - run: | - curl -LO "https://github.com/bazelbuild/bazelisk/releases/download/v1.6.1/bazelisk-linux-amd64" - mkdir -p "${GITHUB_WORKSPACE}/bin/" - mv bazelisk-linux-amd64 "${GITHUB_WORKSPACE}/bin/bazel" - chmod +x "${GITHUB_WORKSPACE}/bin/bazel" - - - name: Generate Design Tokens - run: | - npm run copy-generated-tokens - node tools/shell-helpers/copy-folder.js \ - $(${GITHUB_WORKSPACE}/bin/bazel info bazel-genfiles)/libs/shared/design-tokens/build \ - libs/shared/design-tokens/generated - - - name: Build Design Tokens UI - run: | - npm ci - npm run ng run design-tokens-ui:build:production - - - name: Add Vercel configuration - run: - mv ./.deployment/design-tokens-ui/vercel.json - ./dist/apps/design-tokens-ui/vercel.json - - - name: Vercel Staging Deployment - if: github.event_name == 'pull_request' - id: vercel-action-staging - uses: amondnet/vercel-action@v19.0.1+4 - with: - vercel-token: ${{ secrets.ZEIT_TOKEN }} - github-token: ${{ secrets.GITHUB_TOKEN }} - vercel-org-id: ${{ secrets.VERCEL_ORG_ID}} - vercel-project-id: ${{ secrets.VERCEL_DESIGN_TOKENS_UI_PROJECT_ID}} - vercel-args: '--scope dynatrace-oss --confirm ./' - working-directory: ./dist/apps/design-tokens-ui - - - name: Vercel Production Deployment - id: vercel-action-production - if: github.event_name == 'push' - uses: amondnet/vercel-action@v19.0.1+4 - with: - vercel-token: ${{ secrets.ZEIT_TOKEN }} - github-token: ${{ secrets.GITHUB_TOKEN }} - vercel-org-id: ${{ secrets.VERCEL_ORG_ID}} - vercel-args: '--prod --scope dynatrace-oss --confirm ./' - vercel-project-id: ${{ secrets.VERCEL_DESIGN_TOKENS_UI_PROJECT_ID}} - working-directory: ./dist/apps/design-tokens-ui diff --git a/angular.json b/angular.json index 49a6d422ef..9652ad8101 100644 --- a/angular.json +++ b/angular.json @@ -921,17 +921,6 @@ }, "outputs": ["{options.outputPath}"] }, - "build-publish-release-next": { - "builder": "@nrwl/node:build", - "options": { - "main": "libs/tools/release/src/publish-release-next-cli.ts", - "tsConfig": "libs/tools/release/tsconfig.json", - "outputPath": "dist/libs/tools/publish-release-next", - "progress": false, - "buildLibsFromSource": true - }, - "outputs": ["{options.outputPath}"] - }, "build-stage-release": { "builder": "@nrwl/node:build", "options": { @@ -2592,848 +2581,91 @@ } } }, - "shared-design-tokens": { - "root": "libs/shared/design-tokens", - "sourceRoot": "libs/shared/design-tokens/", - "projectType": "library", - "schematics": {} - }, - "package-elements": { - "projectType": "library", - "root": "libs/fluid-elements", - "sourceRoot": "libs/fluid-elements", - "architect": { - "build": { - "builder": "./dist/libs/workspace:package-all-elements", - "options": { - "buildTag": "scope:elements" - }, - "configurations": { - "production": {} - } - } - } - }, - "fluid-button": { - "root": "libs/fluid-elements/button", - "sourceRoot": "libs/fluid-elements/button/src", - "projectType": "library", - "schematics": {}, - "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", - "options": { - "tsConfig": "libs/fluid-elements/button/tsconfig.lib.json", - "outDir": "dist/out-tsc" - }, - "configurations": { - "production": {} - } - }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/button", - "entryFile": "dist/out-tsc/libs/fluid-elements/button/src/index.js", - "project": "libs/fluid-elements/button/package.json" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/fluid-elements/button/tsconfig.lib.json", - "libs/fluid-elements/button/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**", - "!libs/fluid-elements/button/**/*" - ] - } - } - } - }, - "fluid-button-group": { - "root": "libs/fluid-elements/button-group", - "sourceRoot": "libs/fluid-elements/button-group/src", - "projectType": "library", - "schematics": {}, - "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", - "options": { - "tsConfig": "libs/fluid-elements/button-group/tsconfig.lib.json", - "outDir": "dist/out-tsc" - }, - "configurations": { - "production": {} - } - }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/button-group", - "entryFile": "dist/out-tsc/libs/fluid-elements/button-group/src/index.js", - "project": "libs/fluid-elements/button-group/package.json" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/fluid-elements/button-group/tsconfig.lib.json", - "libs/fluid-elements/button-group/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**", - "!libs/fluid-elements/button-group/**/*" - ] - } - } - } - }, - "fluid-checkbox": { - "root": "libs/fluid-elements/checkbox", - "sourceRoot": "libs/fluid-elements/checkbox/src", + "shared-data-access-strapi": { "projectType": "library", - "schematics": {}, + "root": "libs/shared/data-access-strapi", + "sourceRoot": "libs/shared/data-access-strapi", + "prefix": "dynatrace", "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", - "options": { - "tsConfig": "libs/fluid-elements/checkbox/tsconfig.lib.json", - "outDir": "dist/out-tsc" - }, - "configurations": { - "production": {} - } - }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/checkbox", - "entryFile": "dist/out-tsc/libs/fluid-elements/checkbox/src/index.js", - "project": "libs/fluid-elements/checkbox/package.json" - } - }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ - "libs/fluid-elements/checkbox/tsconfig.lib.json", - "libs/fluid-elements/checkbox/tsconfig.spec.json" + "libs/shared/data-access-strapi/tsconfig.lib.json", + "libs/shared/data-access-strapi/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**", - "!libs/fluid-elements/checkbox/**" + "!libs/shared/data-access-strapi/**" ] } - } - } - }, - "fluid-core": { - "root": "libs/fluid-elements/core", - "sourceRoot": "libs/fluid-elements/core/src", - "projectType": "library", - "schematics": {}, - "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", - "options": { - "tsConfig": "libs/fluid-elements/core/tsconfig.lib.json", - "outDir": "dist/out-tsc" - }, - "configurations": { - "production": {} - } }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/core", - "entryFile": "dist/out-tsc/libs/fluid-elements/core/src/index.js", - "project": "libs/fluid-elements/core/package.json" - } - } - } - }, - "fluid-input": { - "root": "libs/fluid-elements/input", - "sourceRoot": "libs/fluid-elements/input/src", - "projectType": "library", - "schematics": {}, - "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", + "test": { + "builder": "@nrwl/jest:jest", "options": { - "tsConfig": "libs/fluid-elements/input/tsconfig.lib.json", - "outDir": "dist/out-tsc" + "jestConfig": "libs/shared/data-access-strapi/jest.config.js", + "passWithNoTests": true }, - "configurations": { - "production": {} - } - }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/input", - "entryFile": "dist/out-tsc/libs/fluid-elements/input/src/index.js", - "project": "libs/fluid-elements/input/package.json" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/fluid-elements/input/tsconfig.lib.json", - "libs/fluid-elements/input/tsconfig.spec.json" - ], - "exclude": ["**/node_modules/**", "!libs/fluid-elements/input/**/*"] - } + "outputs": ["coverage/libs/shared/data-access-strapi"] } - } + }, + "schematics": {} }, - "fluid-popover": { - "root": "libs/fluid-elements/popover", - "sourceRoot": "libs/fluid-elements/popover/src", + "shared-design-system-ui": { "projectType": "library", - "schematics": {}, + "root": "libs/shared/design-system/ui", + "sourceRoot": "libs/shared/design-system/ui/src", + "prefix": "ds", "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", - "options": { - "tsConfig": "libs/fluid-elements/popover/tsconfig.lib.json", - "outDir": "dist/out-tsc" - }, - "configurations": { - "production": {} - } - }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/popover", - "entryFile": "dist/out-tsc/libs/fluid-elements/popover/src/index.js", - "project": "libs/fluid-elements/popover/package.json" - } - }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ - "libs/fluid-elements/popover/tsconfig.lib.json", - "libs/fluid-elements/popover/tsconfig.spec.json" + "libs/shared/design-system/ui/tsconfig.lib.json", + "libs/shared/design-system/ui/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**", - "!libs/fluid-elements/popover/**/*" + "!libs/shared/design-system/ui/**" ] } - } - } - }, - "fluid-icon": { - "root": "libs/fluid-elements/icon", - "sourceRoot": "libs/fluid-elements/icon/src", - "projectType": "library", - "schematics": {}, - "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", - "options": { - "tsConfig": "libs/fluid-elements/icon/tsconfig.lib.json", - "outDir": "dist/out-tsc" - }, - "configurations": { - "production": {} - } - }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/icon", - "entryFile": "dist/out-tsc/libs/fluid-elements/icon/src/index.js", - "project": "libs/fluid-elements/icon/package.json" - } }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/fluid-elements/icon/tsconfig.lib.json", - "libs/fluid-elements/icon/tsconfig.spec.json" - ], - "exclude": ["**/node_modules/**", "!libs/fluid-elements/icon/**/*"] - } - } - } - }, - "fluid-switch": { - "root": "libs/fluid-elements/switch", - "sourceRoot": "libs/fluid-elements/switch/src", - "projectType": "library", - "schematics": {}, - "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", + "test": { + "builder": "@nrwl/jest:jest", "options": { - "tsConfig": "libs/fluid-elements/switch/tsconfig.lib.json", - "outDir": "dist/out-tsc" + "jestConfig": "libs/shared/design-system/ui/jest.config.js", + "passWithNoTests": true }, - "configurations": { - "production": {} - } - }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/switch", - "entryFile": "dist/out-tsc/libs/fluid-elements/switch/src/index.js", - "project": "libs/fluid-elements/switch/package.json" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/fluid-elements/switch/tsconfig.lib.json", - "libs/fluid-elements/switch/tsconfig.spec.json" - ], - "exclude": ["**/node_modules/**", "!libs/fluid-elements/switch/**"] - } + "outputs": ["coverage/libs/shared/design-system/ui"] + } + }, + "schematics": { + "@nrwl/angular:component": { + "style": "scss" } } }, - "fluid-tab-group": { - "root": "libs/fluid-elements/tab-group", - "sourceRoot": "libs/fluid-elements/tab-group/src", + "shared-design-system-interfaces": { "projectType": "library", - "schematics": {}, + "root": "libs/shared/design-system/interfaces", + "sourceRoot": "libs/shared/design-system/interfaces/src", + "prefix": "dynatrace", "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", - "options": { - "tsConfig": "libs/fluid-elements/tab-group/tsconfig.lib.json", - "outDir": "dist/out-tsc" - }, - "configurations": { - "production": {} - } - }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/tab-group", - "entryFile": "dist/out-tsc/libs/fluid-elements/tab-group/src/index.js", - "project": "libs/fluid-elements/tab-group/package.json" - } - }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ - "libs/fluid-elements/tab-group/tsconfig.lib.json", - "libs/fluid-elements/tab-group/tsconfig.spec.json" + "libs/shared/design-system/interfaces/tsconfig.lib.json", + "libs/shared/design-system/interfaces/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**", - "!libs/fluid-elements/tab-group/**" + "!libs/shared/design-system/interfaces/**" ] } - } - } - }, - "fluid-virtual-scroll-container": { - "root": "libs/fluid-elements/virtual-scroll-container", - "sourceRoot": "libs/fluid-elements/virtual-scroll-container/src", - "projectType": "library", - "schematics": {}, - "architect": { - "build": { - "builder": "./dist/libs/workspace:typescript", - "options": { - "tsConfig": "libs/fluid-elements/virtual-scroll-container/tsconfig.lib.json", - "outDir": "dist/out-tsc" - }, - "configurations": { - "production": {} - } - }, - "package": { - "builder": "./dist/libs/workspace:package-element", - "options": { - "outputPath": "dist/libs/fluid-elements/virtual-scroll-container", - "entryFile": "dist/out-tsc/libs/fluid-elements/virtual-scroll-container/src/index.js", - "project": "libs/fluid-elements/virtual-scroll-container/package.json" - } }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/fluid-elements/virtual-scroll-container/tsconfig.lib.json", - "libs/fluid-elements/virtual-scroll-container/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**", - "!libs/fluid-elements/virtual-scroll-container/**" - ] - } - } - } - }, - "fluid-dev": { - "projectType": "application", - "schematics": { - "@nrwl/angular:component": { - "style": "scss" - } - }, - "root": "apps/fluid-dev", - "sourceRoot": "apps/fluid-dev/src", - "prefix": "fluid", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/apps/fluid-dev", - "index": "apps/fluid-dev/src/index.html", - "main": "apps/fluid-dev/src/main.ts", - "polyfills": "apps/fluid-dev/src/polyfills.ts", - "tsConfig": "apps/fluid-dev/tsconfig.app.json", - "aot": true, - "assets": [ - "apps/fluid-dev/src/favicon.ico", - "apps/fluid-dev/src/assets" - ], - "styles": ["apps/fluid-dev/src/styles.scss"], - "scripts": [] - }, - "outputs": ["{options.outputPath}"] - }, - "serve": { - "builder": "@angular-builders/custom-webpack:dev-server", - "options": { - "browserTarget": "fluid-dev:build" - }, - "configurations": { - "production": { - "browserTarget": "fluid-dev:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "fluid-dev:build" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "apps/fluid-dev/tsconfig.app.json", - "apps/fluid-dev/tsconfig.spec.json" - ], - "exclude": ["**/node_modules/**", "!apps/fluid-dev/**/*"] - } - }, - "test": { - "builder": "@nrwl/jest:jest", - "options": { - "jestConfig": "apps/fluid-dev/jest.config.js", - "passWithNoTests": true - }, - "outputs": ["coverage/apps/fluid-dev"] - } - } - }, - "testing-custom-element": { - "root": "libs/testing/custom-element", - "sourceRoot": "libs/testing/custom-element/src", - "projectType": "library", - "schematics": {}, - "architect": { - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/testing/custom-element/tsconfig.lib.json", - "libs/testing/custom-element/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**", - "!libs/testing/custom-element/**/*" - ] - } - }, - "test": { - "builder": "@nrwl/jest:jest", - "options": { - "jestConfig": "libs/testing/custom-element/jest.config.js", - "passWithNoTests": true - }, - "outputs": ["coverage/libs/testing/custom-element"] - } - } - }, - "design-tokens-ui": { - "projectType": "application", - "schematics": { - "@nrwl/angular:component": { - "style": "scss" - } - }, - "root": "apps/design-tokens-ui", - "sourceRoot": "apps/design-tokens-ui/src", - "prefix": "design-tokens-ui", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/apps/design-tokens-ui", - "index": "apps/design-tokens-ui/src/index.html", - "main": "apps/design-tokens-ui/src/main.ts", - "polyfills": "apps/design-tokens-ui/src/polyfills.ts", - "tsConfig": "apps/design-tokens-ui/tsconfig.app.json", - "aot": true, - "assets": [ - { - "glob": "**", - "input": "libs/barista-components/assets", - "output": "/assets" - }, - { - "glob": "**", - "input": "apps/design-tokens-ui/src/assets", - "output": "/assets" - }, - { - "glob": "*.svg", - "input": "node_modules/@dynatrace/barista-icons", - "output": "/assets/icons" - }, - { - "glob": "metadata.json", - "input": "node_modules/@dynatrace/barista-icons", - "output": "/assets/icons" - }, - { - "glob": "**/*", - "input": "node_modules/@dynatrace/barista-fonts/fonts/", - "output": "/fonts" - } - ], - "styles": [ - "libs/barista-components/style/index.scss", - "apps/design-tokens-ui/src/styles.scss" - ], - "stylePreprocessorOptions": { - "includePaths": [ - "libs/barista-components/core/src/style/", - "libs/barista-components/style/" - ] - }, - "scripts": [] - }, - "configurations": { - "production": { - "fileReplacements": [ - { - "replace": "apps/design-tokens-ui/src/environments/environment.ts", - "with": "apps/design-tokens-ui/src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "5mb" - } - ] - } - }, - "outputs": ["{options.outputPath}"] - }, - "serve": { - "builder": "@nrwl/workspace:run-commands", - "options": { - "parallel": false, - "commands": [ - { - "command": "npm run ng run shared-design-tokens:build" - }, - { - "command": "npm run ng run design-tokens-ui:dev-server" - } - ] - } - }, - "dev-server": { - "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "design-tokens-ui:build" - }, - "configurations": { - "production": { - "browserTarget": "design-tokens-ui:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "design-tokens-ui:build" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "apps/design-tokens-ui/tsconfig.app.json", - "apps/design-tokens-ui/tsconfig.spec.json" - ], - "exclude": ["**/node_modules/**", "!apps/design-tokens-ui/**/*"] - } - }, - "test": { - "builder": "@nrwl/jest:jest", - "options": { - "jestConfig": "apps/design-tokens-ui/jest.config.js", - "passWithNoTests": true - }, - "outputs": ["coverage/apps/design-tokens-ui"] - } - } - }, - "design-tokens-ui-input": { - "projectType": "library", - "root": "libs/design-tokens-ui/input", - "sourceRoot": "libs/design-tokens-ui/input/src", - "prefix": "design-tokens-ui", - "architect": { - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/design-tokens-ui/input/tsconfig.lib.json", - "libs/design-tokens-ui/input/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**", - "!libs/design-tokens-ui/input/**/*" - ] - } - }, - "test": { - "builder": "@nrwl/jest:jest", - "options": { - "jestConfig": "libs/design-tokens-ui/input/jest.config.js", - "passWithNoTests": true - }, - "outputs": ["coverage/libs/design-tokens-ui/input"] - } - }, - "schematics": { - "@nrwl/angular:component": { - "style": "scss" - } - } - }, - "next": { - "projectType": "application", - "schematics": { - "@nrwl/angular:component": { - "style": "scss" - } - }, - "root": "apps/next", - "sourceRoot": "apps/next/src", - "prefix": "x", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/apps/next", - "index": "apps/next/src/index.html", - "main": "apps/next/src/main.ts", - "polyfills": "apps/next/src/polyfills.ts", - "tsConfig": "apps/next/tsconfig.app.json", - "aot": true, - "assets": [ - "apps/next/src/favicon.ico", - "apps/next/src/assets", - { - "glob": "**/*.json", - "input": "dist/next-data", - "output": "/data" - } - ], - "styles": ["apps/next/src/styles.scss"], - "scripts": [] - }, - "configurations": { - "production-internal": { - "fileReplacements": [ - { - "replace": "apps/next/src/environments/environment.ts", - "with": "apps/next/src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "5mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "6kb", - "maximumError": "10kb" - } - ], - "baseHref": "/next", - "deployUrl": "/next/" - } - }, - "outputs": ["{options.outputPath}"] - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "next:build" - }, - "configurations": { - "production-internal": { - "browserTarget": "next:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "next:build" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "apps/next/tsconfig.app.json", - "apps/next/tsconfig.spec.json" - ], - "exclude": ["**/node_modules/**", "!apps/next/**"] - } - }, - "test": { - "builder": "@nrwl/jest:jest", - "options": { - "jestConfig": "apps/next/jest.config.js", - "passWithNoTests": true - }, - "outputs": ["coverage/apps/next"] - } - } - }, - "shared-data-access-strapi": { - "projectType": "library", - "root": "libs/shared/data-access-strapi", - "sourceRoot": "libs/shared/data-access-strapi", - "prefix": "dynatrace", - "architect": { - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/shared/data-access-strapi/tsconfig.lib.json", - "libs/shared/data-access-strapi/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**", - "!libs/shared/data-access-strapi/**" - ] - } - }, - "test": { - "builder": "@nrwl/jest:jest", - "options": { - "jestConfig": "libs/shared/data-access-strapi/jest.config.js", - "passWithNoTests": true - }, - "outputs": ["coverage/libs/shared/data-access-strapi"] - } - }, - "schematics": {} - }, - "shared-design-system-ui": { - "projectType": "library", - "root": "libs/shared/design-system/ui", - "sourceRoot": "libs/shared/design-system/ui/src", - "prefix": "ds", - "architect": { - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/shared/design-system/ui/tsconfig.lib.json", - "libs/shared/design-system/ui/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**", - "!libs/shared/design-system/ui/**" - ] - } - }, - "test": { - "builder": "@nrwl/jest:jest", - "options": { - "jestConfig": "libs/shared/design-system/ui/jest.config.js", - "passWithNoTests": true - }, - "outputs": ["coverage/libs/shared/design-system/ui"] - } - }, - "schematics": { - "@nrwl/angular:component": { - "style": "scss" - } - } - }, - "shared-design-system-interfaces": { - "projectType": "library", - "root": "libs/shared/design-system/interfaces", - "sourceRoot": "libs/shared/design-system/interfaces/src", - "prefix": "dynatrace", - "architect": { - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/shared/design-system/interfaces/tsconfig.lib.json", - "libs/shared/design-system/interfaces/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**", - "!libs/shared/design-system/interfaces/**" - ] - } - }, - "test": { - "builder": "@nrwl/jest:jest", + "test": { + "builder": "@nrwl/jest:jest", "options": { "jestConfig": "libs/shared/design-system/interfaces/jest.config.js", "passWithNoTests": true @@ -3447,40 +2679,6 @@ } } }, - "design-tokens-ui-shared": { - "projectType": "library", - "root": "libs/design-tokens-ui/shared", - "sourceRoot": "libs/design-tokens-ui/shared/src", - "prefix": "design-tokens-ui", - "architect": { - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "libs/design-tokens-ui/shared/tsconfig.lib.json", - "libs/design-tokens-ui/shared/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**", - "!libs/design-tokens-ui/shared/**" - ] - } - }, - "test": { - "builder": "@nrwl/jest:jest", - "options": { - "jestConfig": "libs/design-tokens-ui/shared/jest.config.js", - "passWithNoTests": true - }, - "outputs": ["coverage/libs/design-tokens-ui/shared"] - } - }, - "schematics": { - "@nrwl/angular:component": { - "style": "scss" - } - } - }, "shared-keycodes": { "root": "libs/shared/keycodes", "sourceRoot": "libs/shared/keycodes", diff --git a/apps/design-tokens-ui/BUILD.bazel b/apps/design-tokens-ui/BUILD.bazel deleted file mode 100644 index 2b54cb6950..0000000000 --- a/apps/design-tokens-ui/BUILD.bazel +++ /dev/null @@ -1,8 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "stylelint") - -package(default_visibility = ["//:__subpackages__"]) - -stylelint( - name = "stylelint", - srcs = glob(["**/*.scss"]), -) diff --git a/apps/design-tokens-ui/README.md b/apps/design-tokens-ui/README.md deleted file mode 100644 index 1b3ccd6b99..0000000000 --- a/apps/design-tokens-ui/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# Design Tokens UI - -App for visualizing and editing design tokens - -## Development - -1. Install npm dependencies: `npm install` -2. Serve the application: `ng serve design-tokens-ui` diff --git a/apps/design-tokens-ui/browserslist b/apps/design-tokens-ui/browserslist deleted file mode 100644 index 80848532e4..0000000000 --- a/apps/design-tokens-ui/browserslist +++ /dev/null @@ -1,12 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -> 0.5% -last 2 versions -Firefox ESR -not dead -not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/apps/design-tokens-ui/jest.config.js b/apps/design-tokens-ui/jest.config.js deleted file mode 100644 index 03275c2178..0000000000 --- a/apps/design-tokens-ui/jest.config.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -module.exports = { - name: 'design-tokens-ui', - preset: '../../jest.config.js', - coverageDirectory: '../../coverage/apps/design-tokens-ui', - snapshotSerializers: [ - 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js', - 'jest-preset-angular/build/AngularSnapshotSerializer.js', - 'jest-preset-angular/build/HTMLCommentSerializer.js', - ], - setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: { - 'ts-jest': { - tsConfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - astTransformers: [ - 'jest-preset-angular/build/InlineFilesTransformer', - 'jest-preset-angular/build/StripStylesTransformer', - ], - }, - }, -}; diff --git a/apps/design-tokens-ui/src/app/app.component.html b/apps/design-tokens-ui/src/app/app.component.html deleted file mode 100644 index 606084da23..0000000000 --- a/apps/design-tokens-ui/src/app/app.component.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - Themes - - - - Spacing - - - -
- -
diff --git a/apps/design-tokens-ui/src/app/app.component.scss b/apps/design-tokens-ui/src/app/app.component.scss deleted file mode 100644 index f1ff34ee6c..0000000000 --- a/apps/design-tokens-ui/src/app/app.component.scss +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import 'font-styles.scss'; -@import '../styles/variables.scss'; - -:host { - display: block; - width: 100%; - height: 100%; - font-family: 'Roboto', sans-serif; - background-color: var(--color-neutral-50); - background: linear-gradient( - 90deg, - var(--color-neutral-50) 0%, - var(--color-background) 15% - ); -} - -.design-tokens-ui-nav { - position: absolute; - height: 100%; - z-index: 100; -} - -.design-tokens-ui-main { - padding: 0 $fluid-spacing--large 0 132px; - height: 100vh; - overflow: auto; -} diff --git a/apps/design-tokens-ui/src/app/app.component.ts b/apps/design-tokens-ui/src/app/app.component.ts deleted file mode 100644 index d351790281..0000000000 --- a/apps/design-tokens-ui/src/app/app.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, OnDestroy } from '@angular/core'; -import { Router, NavigationEnd } from '@angular/router'; -import { Subject } from 'rxjs'; -import { filter, takeUntil } from 'rxjs/operators'; - -@Component({ - selector: 'design-tokens-ui-app', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], -}) -export class AppComponent implements OnDestroy { - /** @internal */ - _breadcrumbs: Breadcrumb[] = []; - - private _destroy$ = new Subject(); - - constructor(router: Router) { - router.events - .pipe( - filter((event) => event instanceof NavigationEnd), - takeUntil(this._destroy$), - ) - .subscribe( - (event: NavigationEnd) => - (this._breadcrumbs = this._createBreadcrumbs(event.url)), - ); - } - - ngOnDestroy(): void { - this._destroy$.next(); - this._destroy$.complete(); - } - - /** @internal Generate Breadcrumbs based on the url */ - _createBreadcrumbs(url: string): Breadcrumb[] { - const urlParts = url.substring(1).split('/'); - - let urlPart = ''; - return urlParts.map((part: string) => { - urlPart = `${urlPart}/${part}`; - return { - label: decodeURIComponent(part.replace(/\-/gm, ' ')), - url: urlPart, - }; - }); - } -} - -interface Breadcrumb { - label: string; - url: string; -} diff --git a/apps/design-tokens-ui/src/app/app.module.ts b/apps/design-tokens-ui/src/app/app.module.ts deleted file mode 100644 index 6c0edf40a8..0000000000 --- a/apps/design-tokens-ui/src/app/app.module.ts +++ /dev/null @@ -1,73 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { - NgModule, - CUSTOM_ELEMENTS_SCHEMA, - APP_INITIALIZER, -} from '@angular/core'; -import { HttpClientModule } from '@angular/common/http'; -import { FormsModule } from '@angular/forms'; - -import { DtIconModule } from '@dynatrace/barista-components/icon'; -import { DtSelectModule } from '@dynatrace/barista-components/select'; -import { DtExpandableSectionModule } from '@dynatrace/barista-components/expandable-section'; - -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app.routing.module'; -import { AppThemeService } from '../services/app-theme'; -import { - NavComponent, - NavItemDirective, - NavLogoDirective, -} from './components/nav/nav.component'; - -import '@dynatrace/fluid-elements/button'; - -@NgModule({ - declarations: [ - AppComponent, - NavComponent, - NavItemDirective, - NavLogoDirective, - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - FormsModule, - AppRoutingModule, - DtIconModule.forRoot({ svgIconLocation: '/assets/icons/{{name}}.svg' }), - DtSelectModule, - HttpClientModule, - DtExpandableSectionModule, - ], - providers: [ - AppThemeService, - { - // The default style must be set on app startup - provide: APP_INITIALIZER, - useFactory: (themeService: AppThemeService) => () => - themeService.initialize(), - deps: [AppThemeService], - multi: true, - }, - ], - bootstrap: [AppComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class AppModule {} diff --git a/apps/design-tokens-ui/src/app/app.routing.module.ts b/apps/design-tokens-ui/src/app/app.routing.module.ts deleted file mode 100644 index 7b3d927e97..0000000000 --- a/apps/design-tokens-ui/src/app/app.routing.module.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -const routes: Routes = [ - { - path: 'theme', - loadChildren: () => - import('../pages/themes/themes.module').then( - (module) => module.ThemesModule, - ), - }, - { - path: 'spacing', - loadChildren: () => - import('../pages/spacings/spacings.module').then( - (module) => module.SpacingsModule, - ), - }, - { - path: '', - redirectTo: 'theme', - pathMatch: 'full', - }, -]; - -@NgModule({ - exports: [RouterModule], - imports: [ - RouterModule.forRoot(routes, { - paramsInheritanceStrategy: 'always', - relativeLinkResolution: 'legacy', - }), - ], -}) -export class AppRoutingModule {} diff --git a/apps/design-tokens-ui/src/app/components/nav/nav.component.html b/apps/design-tokens-ui/src/app/components/nav/nav.component.html deleted file mode 100644 index 088e62c2e4..0000000000 --- a/apps/design-tokens-ui/src/app/components/nav/nav.component.html +++ /dev/null @@ -1,8 +0,0 @@ - -
- -
diff --git a/apps/design-tokens-ui/src/app/components/nav/nav.component.scss b/apps/design-tokens-ui/src/app/components/nav/nav.component.scss deleted file mode 100644 index e7f252ebb1..0000000000 --- a/apps/design-tokens-ui/src/app/components/nav/nav.component.scss +++ /dev/null @@ -1,125 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import '../../../styles/variables.scss'; - -$default-width: 96px; -$expanded-width: 220px; -$logo-height: 28px; - -.design-tokens-ui-nav { - overflow-x: hidden; - width: $default-width; - transition: width 200ms, background-color 200ms, color 200ms; - - .design-tokens-ui-nav-logo { - width: 28px; - height: $logo-height; - overflow: hidden; - - display: block; - margin: 20px; - z-index: 200; - - img { - height: 100%; - transition: filter 200ms; - } - } - - &:hover { - background-color: rgba($color: white, $alpha: 0.65); - backdrop-filter: blur(0.7rem); - width: $expanded-width; - - .design-tokens-ui-nav-item { - border-left-color: var(--color-neutral-50); - } - - .design-tokens-ui-nav-item .dt-icon { - fill: var(--color-neutral-50); - } - - .design-tokens-ui-nav-logo { - width: 100%; - - img { - filter: brightness(0); - } - } - } -} - -.fluid-theme--surface .design-tokens-ui-nav { - /* Invert logo brightness in surface theme */ - .design-tokens-ui-nav-logo img { - filter: brightness(0); - } - - &:hover { - background-color: rgba($color: black, $alpha: 0.65); - - .design-tokens-ui-nav-logo img { - filter: brightness(1); - } - } -} - -.design-tokens-ui-nav--container { - height: calc(100vh - #{$logo-height} - 40px); - display: flex; - width: $expanded-width; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.design-tokens-ui-nav-item { - box-sizing: border-box; - display: flex; - width: 100%; - align-items: center; - justify-content: flex-start; - height: 48px; - padding-left: 38px; - opacity: 60%; - color: var(--color-neutral-50); - text-decoration: none; - font-size: 1rem; - transition: border-left-color 200ms; - - .dt-icon { - width: 48px; - display: inline-block; - margin-right: 12px; - fill: var(--color-neutral-150); - transition: fill 200ms; - } - - &:hover, - &.design-tokens-ui-router-active { - border-left: 4px solid var(--color-neutral-150); - padding-left: 38px - 4px; - } - - &.design-tokens-ui-router-active { - opacity: 100%; - } - - &:not(:last-of-type) { - margin-bottom: $fluid-spacing--large; - } -} diff --git a/apps/design-tokens-ui/src/app/components/nav/nav.component.ts b/apps/design-tokens-ui/src/app/components/nav/nav.component.ts deleted file mode 100644 index 491e875909..0000000000 --- a/apps/design-tokens-ui/src/app/components/nav/nav.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, Directive, ViewEncapsulation } from '@angular/core'; - -@Component({ - selector: 'design-tokens-ui-nav', - templateUrl: './nav.component.html', - styleUrls: ['./nav.component.scss'], - host: { - class: 'design-tokens-ui-nav', - }, - encapsulation: ViewEncapsulation.None, -}) -export class NavComponent {} - -@Directive({ - selector: 'design-tokens-ui-nav-item, [designTokensUiNavItem]', - host: { - class: 'design-tokens-ui-nav-item', - }, -}) -export class NavItemDirective {} - -@Directive({ - selector: 'design-tokens-ui-nav-logo, [designTokensUiNavLogo]', - host: { - class: 'design-tokens-ui-nav-logo', - }, -}) -export class NavLogoDirective {} diff --git a/apps/design-tokens-ui/src/assets/.gitkeep b/apps/design-tokens-ui/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/design-tokens-ui/src/assets/fonts/Roboto-Bold.woff2 b/apps/design-tokens-ui/src/assets/fonts/Roboto-Bold.woff2 deleted file mode 100644 index 7445d92a5e..0000000000 Binary files a/apps/design-tokens-ui/src/assets/fonts/Roboto-Bold.woff2 and /dev/null differ diff --git a/apps/design-tokens-ui/src/assets/fonts/Roboto-Medium.woff2 b/apps/design-tokens-ui/src/assets/fonts/Roboto-Medium.woff2 deleted file mode 100644 index b4b5df7924..0000000000 Binary files a/apps/design-tokens-ui/src/assets/fonts/Roboto-Medium.woff2 and /dev/null differ diff --git a/apps/design-tokens-ui/src/assets/fonts/Roboto-Regular.woff2 b/apps/design-tokens-ui/src/assets/fonts/Roboto-Regular.woff2 deleted file mode 100644 index de226b374a..0000000000 Binary files a/apps/design-tokens-ui/src/assets/fonts/Roboto-Regular.woff2 and /dev/null differ diff --git a/apps/design-tokens-ui/src/assets/images/back-link-icon.svg b/apps/design-tokens-ui/src/assets/images/back-link-icon.svg deleted file mode 100644 index 569c448559..0000000000 --- a/apps/design-tokens-ui/src/assets/images/back-link-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/design-tokens-ui/src/assets/images/external-link-icon.svg b/apps/design-tokens-ui/src/assets/images/external-link-icon.svg deleted file mode 100644 index 72b23a2e7a..0000000000 --- a/apps/design-tokens-ui/src/assets/images/external-link-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/design-tokens-ui/src/environments/environment.prod.ts b/apps/design-tokens-ui/src/environments/environment.prod.ts deleted file mode 100644 index d0ae4b4120..0000000000 --- a/apps/design-tokens-ui/src/environments/environment.prod.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export const environment = { - production: true, -}; diff --git a/apps/design-tokens-ui/src/environments/environment.ts b/apps/design-tokens-ui/src/environments/environment.ts deleted file mode 100644 index c22cfc9b7f..0000000000 --- a/apps/design-tokens-ui/src/environments/environment.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/apps/design-tokens-ui/src/favicon.ico b/apps/design-tokens-ui/src/favicon.ico deleted file mode 100644 index 317ebcb233..0000000000 Binary files a/apps/design-tokens-ui/src/favicon.ico and /dev/null differ diff --git a/apps/design-tokens-ui/src/index.html b/apps/design-tokens-ui/src/index.html deleted file mode 100644 index 99d8ec8d19..0000000000 --- a/apps/design-tokens-ui/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Barista Design Tokens - - - - - - - - diff --git a/apps/design-tokens-ui/src/main.ts b/apps/design-tokens-ui/src/main.ts deleted file mode 100644 index a0d334229c..0000000000 --- a/apps/design-tokens-ui/src/main.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { enableProdMode, ViewEncapsulation } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule, { - defaultEncapsulation: ViewEncapsulation.Emulated, - }) - .catch((err) => console.error(err)); diff --git a/apps/design-tokens-ui/src/pages/spacings/spacings.component.html b/apps/design-tokens-ui/src/pages/spacings/spacings.component.html deleted file mode 100644 index ad2b7faf6a..0000000000 --- a/apps/design-tokens-ui/src/pages/spacings/spacings.component.html +++ /dev/null @@ -1,47 +0,0 @@ -

Spacing

- -
- - Export as YAML - -
- -
-
- -
-
-
- -
-
- - {{ _getTokenDisplayName(spacing.key) }} - - - -
- - - -
-
- -
-
-
diff --git a/apps/design-tokens-ui/src/pages/spacings/spacings.component.scss b/apps/design-tokens-ui/src/pages/spacings/spacings.component.scss deleted file mode 100644 index 5d795b7911..0000000000 --- a/apps/design-tokens-ui/src/pages/spacings/spacings.component.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import '../../styles/variables'; - -$box-height: 40px; -$spacing-line-height: 20px; - -.design-tokens-ui-spacing-preview--container { - margin: $fluid-spacing--large 0; -} - -.design-tokens-ui-spacing-item { - display: flex; - flex-direction: row; - justify-content: stretch; - align-items: flex-end; -} - -.design-tokens-ui-spacing-box { - height: $box-height; - width: 100%; - background-color: var(--color-neutral-60); - border: 1px solid var(--color-neutral-80); -} - -.design-tokens-ui-spacing-size-preview { - width: 280px; - height: var(--spacing); - margin-bottom: $box-height; - display: flex; - align-items: center; - justify-content: space-between; - line-height: $spacing-line-height; - transition: height 200ms ease-out; -} - -.design-tokens-ui-spacing-text { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - margin-right: $fluid-spacing--medium; - - .design-tokens-ui-spacing-value { - width: 70px; - text-align: right; - } -} - -.design-tokens-ui-spacing-arrows { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - margin-right: -6px; - z-index: 100; -} - -.design-tokens-ui-spacing-arrow-line { - border-right: 2px solid var(--color-maxcontrast); - height: 100%; -} - -.design-tokens-ui-spacing-arrow-top { - border-style: solid; - border-width: 10px 6px 0; - margin-top: -$spacing-line-height / 2; - border-color: var(--color-maxcontrast) transparent transparent transparent; -} - -.design-tokens-ui-spacing-arrow-bottom { - border-style: solid; - border-width: 0 6px 10px; - margin-bottom: -10px; - border-color: transparent transparent var(--color-maxcontrast) transparent; -} diff --git a/apps/design-tokens-ui/src/pages/spacings/spacings.component.ts b/apps/design-tokens-ui/src/pages/spacings/spacings.component.ts deleted file mode 100644 index 9b2e59d208..0000000000 --- a/apps/design-tokens-ui/src/pages/spacings/spacings.component.ts +++ /dev/null @@ -1,73 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component } from '@angular/core'; -import { Observable, concat } from 'rxjs'; - -import { SpacingService } from '../../services/spacing'; -import { map, debounceTime, publish, take } from 'rxjs/operators'; -import { KeyValue } from '@angular/common'; - -@Component({ - selector: 'design-tokens-ui-spacings', - templateUrl: './spacings.component.html', - styleUrls: ['./spacings.component.scss'], -}) -export class SpacingsComponent { - /** @internal */ - _spacings$: Observable[]>; - - constructor(private _spacingService: SpacingService) { - // Spacings are unsorted here - this._spacings$ = this._spacingService.spacings$.pipe( - publish((value) => - concat( - value.pipe(take(1)), // Make sure that the UI can be displayed immediately - value.pipe(debounceTime(300)), // Debounce the following updates - ), - ), - map( - (spacings) => - Object.entries(spacings) - .map(([key, value]) => ({ key, value })) - .filter(({ key }) => key !== 'spacing--0'), // Editing the zero spacing wouldn't make sense - ), - ); - } - - /** @internal Export spacings as YAML */ - _yamlExport(): void { - this._spacingService.exportYaml(); - } - - /** @internal */ - _modifySpacing(name: string, value: string): void { - if (!isNaN(parseInt(value))) { - // Avoid buggy UI updates if the input doesn't start with a number - this._spacingService.modifySpacing(name, value); - } - } - - /** @internal */ - _getTokenDisplayName(name: string): string { - return name.replace('spacing--', ''); - } - - /** @internal Angular trackBy function for avoiding loss of focus on changes */ - _trackSpacingKey(_index: number, item: KeyValue): string { - return item.key; - } -} diff --git a/apps/design-tokens-ui/src/pages/spacings/spacings.module.ts b/apps/design-tokens-ui/src/pages/spacings/spacings.module.ts deleted file mode 100644 index b14ccc8909..0000000000 --- a/apps/design-tokens-ui/src/pages/spacings/spacings.module.ts +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { FormsModule } from '@angular/forms'; - -import { PipesModule } from '../../pipes'; -import { SpacingsComponent } from './spacings.component'; -import { DesignTokensUiInputModule } from '@dynatrace/design-tokens-ui/input'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - RouterModule.forChild([{ path: '', component: SpacingsComponent }]), - PipesModule, - DesignTokensUiInputModule, - ], - declarations: [SpacingsComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class SpacingsModule {} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/color-picker/color-picker.component.html b/apps/design-tokens-ui/src/pages/theme-detail/components/color-picker/color-picker.component.html deleted file mode 100644 index 1dce845121..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/color-picker/color-picker.component.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/color-picker/color-picker.component.scss b/apps/design-tokens-ui/src/pages/theme-detail/components/color-picker/color-picker.component.scss deleted file mode 100644 index de2cb1f678..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/color-picker/color-picker.component.scss +++ /dev/null @@ -1,88 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* stylelint-disable */ -// Partly sourced from -// https://github.com/adobe/leonardo/blob/master/packages/ui/src/scss/colorinputs.scss -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -/* stylelint-enable */ - -@import 'interactive-common'; -@import '../../../../styles/variables'; - -:host { - display: block; - position: relative; -} - -input { - appearance: none; - height: 40px; - width: 100%; - padding: 0; - margin: 0; - background-color: transparent; - border: none; - border-collapse: collapse; - outline: none; - cursor: pointer; - - &:focus { - @include dt-focus-style(false); - } - - &::-webkit-color-swatch-wrapper { - padding: 0; - border: none; - } - - // Separate selectors are used here since joined selector - // &::-webkit-color-swatch, &::-moz-color-swatch {...} breaks in Chrome - &::-webkit-color-swatch { - border: 1px solid var(--color-neutral-120); - } - - &::-moz-color-swatch { - border: 1px solid var(--color-neutral-120); - } - - &:hover { - &::-webkit-color-swatch { - border: 1px solid var(--color-maxcontrast); - } - - &::-moz-color-swatch { - border: 1px solid var(--color-maxcontrast); - } - } -} - -.design-tokens-ui-eyedropper { - position: absolute; - height: 16px; - top: $fluid-spacing--small; - left: $fluid-spacing--small; - pointer-events: none; -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/color-picker/color-picker.component.ts b/apps/design-tokens-ui/src/pages/theme-detail/components/color-picker/color-picker.component.ts deleted file mode 100644 index c7a089fdda..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/color-picker/color-picker.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { getTextColorOnBackground } from '../../../../utils/colors'; - -@Component({ - selector: 'design-tokens-ui-color-picker', - templateUrl: './color-picker.component.html', - styleUrls: ['./color-picker.component.scss'], -}) -export class ColorPickerComponent { - /** Current color */ - @Input() color: string = ''; - - /** Fired when the color has changed */ - @Output() colorChange: EventEmitter = new EventEmitter(); - - /** @internal */ - get _iconColor(): string { - return getTextColorOnBackground(this.color); - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/distribution-curve/distribution-curve.component.html b/apps/design-tokens-ui/src/pages/theme-detail/components/distribution-curve/distribution-curve.component.html deleted file mode 100644 index 54ff69a5f8..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/distribution-curve/distribution-curve.component.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/distribution-curve/distribution-curve.component.scss b/apps/design-tokens-ui/src/pages/theme-detail/components/distribution-curve/distribution-curve.component.scss deleted file mode 100644 index baa5bcc215..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/distribution-curve/distribution-curve.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -.design-tokens-ui-interpolation-canvas { - width: 100%; - border: 1px solid var(--color-neutral-100); -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/distribution-curve/distribution-curve.component.ts b/apps/design-tokens-ui/src/pages/theme-detail/components/distribution-curve/distribution-curve.component.ts deleted file mode 100644 index 42a6cdfb0a..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/distribution-curve/distribution-curve.component.ts +++ /dev/null @@ -1,219 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - Component, - Input, - ViewChild, - AfterViewInit, - OnDestroy, - ElementRef, - OnChanges, - NgZone, - SimpleChanges, -} from '@angular/core'; -import { Subject, fromEvent, merge, of } from 'rxjs'; -import { takeUntil, debounceTime, mapTo } from 'rxjs/operators'; -import { isEqual } from 'lodash-es'; -import { - normalizeToRange, - lerp, - easeOut, - easeWithOptions, - DEFAULT_GENERATION_OPTIONS, -} from '@dynatrace/design-tokens-ui/shared'; -import { FluidPaletteGenerationOptions } from '@dynatrace/shared/design-system/interfaces'; - -@Component({ - selector: 'design-tokens-ui-distribution-curve', - templateUrl: './distribution-curve.component.html', - styleUrls: ['./distribution-curve.component.scss'], -}) -export class DistributionCurveComponent - implements AfterViewInit, OnChanges, OnDestroy { - /** Fired on ngChanges */ - private _stateChanges$ = new Subject(); - - private _destroy$ = new Subject(); - - @ViewChild('interpolationCanvas') - private canvas: ElementRef; - - /** Palette generation settings */ - @Input() generationOptions = { ...DEFAULT_GENERATION_OPTIONS }; - - /** Animation duration in ms */ - @Input() animationDuration: number = 300; - - /** Width and height of the canvas */ - private _canvasSize = 0; - - /** The previous generation options, used for the animation */ - private _previousGenerationOptions = { - ...DEFAULT_GENERATION_OPTIONS, - lowerExponent: 0, - upperExponent: 0, - }; - - /** Current animation time in [0-1] range */ - private _currentNormalizedAnimationTime = 0; - - /** Start time of the animation in ms */ - private _animationStartTime = 0; - - /** End time of the animation in ms */ - private _animationEndTime = 0; - - constructor(private _zone: NgZone) {} - - ngAfterViewInit(): void { - merge( - of(this.generationOptions, mapTo(false)), // First draw immediately after view init - this._stateChanges$.pipe(debounceTime(200), mapTo(true)), // Animate on state changes - fromEvent(window, 'resize').pipe(debounceTime(300)).pipe(mapTo(false)), - ) - .pipe(takeUntil(this._destroy$)) - .subscribe((animate: boolean) => { - this._resizeCanvas(); - if (animate) { - this._animateCanvas(); - } else { - this._renderCanvas(); - } - }); - } - - ngOnChanges(changes: SimpleChanges): void { - if ( - !isEqual( - changes.generationOptions.currentValue, - changes.generationOptions.previousValue, - ) - ) { - this._stateChanges$.next(changes.generationOptions.currentValue); - } - } - - ngOnDestroy(): void { - this._destroy$.next(); - this._destroy$.complete(); - - this._stateChanges$.complete(); - } - - /** Resizes the canvas to appear sharp when zoomed in or displayed on high DPI displays */ - private _resizeCanvas(): void { - let elemWidth = Math.floor( - this.canvas.nativeElement.getBoundingClientRect().width, - ); - - // Get rid of some blurriness - if (elemWidth % 2 != 0) { - elemWidth++; - } - this.canvas.nativeElement.style.width = elemWidth + 'px'; - this.canvas.nativeElement.style.height = elemWidth + 'px'; - - this._canvasSize = Math.floor(elemWidth * window.devicePixelRatio); - - this.canvas.nativeElement.width = this._canvasSize; - this.canvas.nativeElement.height = this._canvasSize; - } - - /** Animates between the current and previous generation options */ - private _animateCanvas(): void { - this._animationStartTime = new Date().getTime(); - this._animationEndTime = this._animationStartTime + this.animationDuration; - this._currentNormalizedAnimationTime = 0; - - this._zone.runOutsideAngular(async () => { - while (this._currentNormalizedAnimationTime < 1) { - await new Promise((resolve) => requestAnimationFrame(resolve)); - this._currentNormalizedAnimationTime = normalizeToRange( - this._animationStartTime, - this._animationEndTime, - new Date().getTime(), - ); - this._renderCanvas(); - } - - this._previousGenerationOptions = { ...this.generationOptions }; - this._currentNormalizedAnimationTime = 1; - }); - } - - /** Redraws the canvas with the current animation state */ - private _renderCanvas(): void { - const context = this.canvas.nativeElement.getContext('2d')!; - - context.resetTransform(); - context.translate(0.5, 0.5); // Pixels must be straddled to appear sharp at 100% zoom https://stackoverflow.com/a/8696641 - context.scale(this._canvasSize, this._canvasSize); // Normalize coordinates from 0 to 1 - context.clearRect(0, 0, 1, 1); - - this._drawGrid(context); - - // Leave some space on the edges to avoid cutoff - context.translate(0, 0.005); - context.scale(1, 0.99); - - this._drawCurve(context); - } - - /** Draws the background grid */ - private _drawGrid(context: CanvasRenderingContext2D): void { - context.strokeStyle = getComputedStyle(context.canvas).getPropertyValue( - '--color-neutral-100', - ); - context.lineWidth = 0.0025; - - context.beginPath(); - context.moveTo(0, 0.5); - context.lineTo(1, 0.5); - context.moveTo(0.5, 0); - context.lineTo(0.5, 1); - context.stroke(); - context.closePath(); - } - - /** Draws the distribution curve line */ - private _drawCurve(context: CanvasRenderingContext2D): void { - // Curve - context.beginPath(); - - context.strokeStyle = getComputedStyle(context.canvas).getPropertyValue( - '--color-maxcontrast', - ); - context.lineWidth = 0.0075; - context.moveTo(0, this._interpolateAnimation(0)); - - const resolution = 1 / this._canvasSize; - for (let i = 0; i <= 1; i += resolution) { - context.lineTo(i, this._interpolateAnimation(i)); - } - context.stroke(); - context.closePath(); - } - - /** Interpolate between the two animated states with the given upper and lower easing functions and exponents */ - private _interpolateAnimation(t: number): number { - return lerp( - easeWithOptions(t, this._previousGenerationOptions), - easeWithOptions(t, this.generationOptions), - easeOut(this._currentNormalizedAnimationTime), - ); - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-settings/easing-settings.component.html b/apps/design-tokens-ui/src/pages/theme-detail/components/easing-settings/easing-settings.component.html deleted file mode 100644 index e27831b86f..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-settings/easing-settings.component.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-settings/easing-settings.component.ts b/apps/design-tokens-ui/src/pages/theme-detail/components/easing-settings/easing-settings.component.ts deleted file mode 100644 index 4845533221..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-settings/easing-settings.component.ts +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, Output, EventEmitter, Input } from '@angular/core'; -import { - FluidPaletteGenerationOptions, - FluidEasingType, -} from '@dynatrace/shared/design-system/interfaces'; -import { DEFAULT_GENERATION_OPTIONS } from '@dynatrace/design-tokens-ui/shared'; - -@Component({ - selector: 'design-tokens-ui-easing-settings', - templateUrl: './easing-settings.component.html', -}) -export class EasingSettingsComponent { - /** Input palette generation options object */ - @Input() options: FluidPaletteGenerationOptions = DEFAULT_GENERATION_OPTIONS; - - /** Fired when the easing functions change */ - @Output() optionsChange = new EventEmitter(); - - /** @internal */ - get _upperEasing(): FluidEasingType { - return this.options.upperEasing; - } - - /** @internal */ - set _upperEasing(type: FluidEasingType) { - // Emit a new object to make change detection on the curve work - this.optionsChange.emit({ - ...this.options, - upperEasing: type, - }); - } - - /** @internal */ - get _lowerEasing(): FluidEasingType { - return this.options.lowerEasing; - } - - /** @internal */ - set _lowerEasing(type: FluidEasingType) { - this.optionsChange.emit({ - ...this.options, - lowerEasing: type, - }); - } - - /** @internal */ - get _upperExponent(): number { - return this.options.upperExponent; - } - - /** @internal */ - set _upperExponent(exponent: number) { - this.optionsChange.emit({ - ...this.options, - upperExponent: exponent, - }); - } - - /** @internal */ - get _lowerExponent(): number { - return this.options.lowerExponent; - } - - /** @internal */ - set _lowerExponent(exponent: number) { - this.optionsChange.emit({ - ...this.options, - lowerExponent: exponent, - }); - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-type-select/easing-type-select.component.html b/apps/design-tokens-ui/src/pages/theme-detail/components/easing-type-select/easing-type-select.component.html deleted file mode 100644 index e4f1a81ba4..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-type-select/easing-type-select.component.html +++ /dev/null @@ -1,42 +0,0 @@ -
- - - Linear - Ease In Quad - Ease Out Quad - Ease In Out Quad - Ease In Cubic - Ease Out Cubic - Ease In Out Cubic - Ease In Expo - Ease Out Expo - Ease In Out Expo - Custom - - -
- -
- - - -
diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-type-select/easing-type-select.component.scss b/apps/design-tokens-ui/src/pages/theme-detail/components/easing-type-select/easing-type-select.component.scss deleted file mode 100644 index 922d35767d..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-type-select/easing-type-select.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '../../../../styles/variables'; - -:host { - display: block; - margin: $fluid-spacing--x-small $fluid-spacing--0 $fluid-spacing--medium; -} - -dt-option[hidden] { - display: none; -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-type-select/easing-type-select.component.ts b/apps/design-tokens-ui/src/pages/theme-detail/components/easing-type-select/easing-type-select.component.ts deleted file mode 100644 index 161372465b..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/easing-type-select/easing-type-select.component.ts +++ /dev/null @@ -1,154 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, Output, EventEmitter, Input } from '@angular/core'; -import { FluidEasingType } from '@dynatrace/shared/design-system/interfaces'; - -type EasingFunctionPreset = - | 'invalid' - | 'linear' - | 'ease-in-quad' - | 'ease-out-quad' - | 'ease-in-out-quad' - | 'ease-in-cubic' - | 'ease-out-cubic' - | 'ease-in-out-cubic' - | 'ease-in-expo' - | 'ease-out-expo' - | 'ease-in-out-expo' - | 'custom'; - -@Component({ - selector: 'design-tokens-ui-easing-type-select', - templateUrl: './easing-type-select.component.html', - styleUrls: [ - './easing-type-select.component.scss', - '../../shared-settings-styles.scss', - ], -}) -export class EasingTypeSelectComponent { - /** Input easing function type */ - @Input() type: FluidEasingType = 'ease-in'; - - /** Input easing exponent */ - @Input() exponent: number = 2; - - /** Fired when the easing type changes */ - @Output() typeChange = new EventEmitter(); - - /** Fired when the easing exponent changes */ - @Output() exponentChange = new EventEmitter(); - - /** @internal Whether the input field for a custom exponent should be displayed */ - _customExponent = false; - - /** Returns a user-friendly preset type for the current easing function and exponent */ - get _presetType(): EasingFunctionPreset { - return this._typeAndExponentToPreset(this.type, this.exponent); - } - - /** Sets the easing function exponent from the given preset */ - set _presetType(preset: EasingFunctionPreset) { - this._customExponent = preset === 'custom'; - - const [type, exponent] = this._presetToTypeAndExponent( - preset, - this.type, - this.exponent, - ); - - if (type !== this.type) { - this.typeChange.emit(type); - this.type = type; - } - if (exponent !== this.exponent) { - this.exponentChange.emit(exponent); - this.exponent = exponent; - } - } - - private _typeAndExponentToPreset( - type: FluidEasingType, - exponent: number, - ): EasingFunctionPreset { - switch (type) { - case 'ease-in': - switch (exponent) { - case 1: - return 'linear'; - case 2: - return 'ease-in-quad'; - case 3: - return 'ease-in-cubic'; - default: - return 'custom'; - } - - case 'ease-out': - switch (exponent) { - case 1: - return 'linear'; - case 2: - return 'ease-out-quad'; - case 3: - return 'ease-out-cubic'; - default: - return 'invalid'; - } - - case 'ease-in-out-quad': - case 'ease-in-out-cubic': - case 'ease-in-expo': - case 'ease-out-expo': - case 'ease-in-out-expo': - return type; - - default: - return 'invalid'; - } - } - - private _presetToTypeAndExponent( - preset: EasingFunctionPreset, - defaultType: FluidEasingType, - defaultExponent: number, - ): [FluidEasingType, number] { - switch (preset) { - case 'linear': - return ['ease-in', 1]; - case 'ease-in-quad': - return ['ease-in', 2]; - case 'ease-out-quad': - return ['ease-out', 2]; - case 'ease-in-cubic': - return ['ease-in', 3]; - case 'ease-out-cubic': - return ['ease-out', 3]; - - case 'ease-in-out-quad': - case 'ease-in-out-cubic': - case 'ease-in-expo': - case 'ease-out-expo': - case 'ease-in-out-expo': - return [preset, defaultExponent]; - - case 'custom': - return ['ease-in', 1.5]; - default: - return [defaultType, defaultExponent]; - } - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/palette-settings/palette-settings.component.html b/apps/design-tokens-ui/src/pages/theme-detail/components/palette-settings/palette-settings.component.html deleted file mode 100644 index 7048af6381..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/palette-settings/palette-settings.component.html +++ /dev/null @@ -1,55 +0,0 @@ - -

- {{ (_palette$ | async)?.name | humanize }} settings -

- - -

Color

- - - -
- - - CIECAM02 - Lch - Lab - HSL - HSLuv - HSV - RGB - -
- -Override global settings - - -

Settings

- - - -

Curves

- - - - diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/palette-settings/palette-settings.component.ts b/apps/design-tokens-ui/src/pages/theme-detail/components/palette-settings/palette-settings.component.ts deleted file mode 100644 index 8fc1862e32..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/palette-settings/palette-settings.component.ts +++ /dev/null @@ -1,110 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, OnDestroy, ViewChild, AfterViewInit } from '@angular/core'; -import { Observable, Subject } from 'rxjs'; -import { takeUntil, map, debounceTime, shareReplay } from 'rxjs/operators'; - -import { Palette } from '@dynatrace/design-tokens-ui/shared'; -import { PaletteSourceService } from '../../../../services/palette'; -import { - FluidPaletteGenerationOptions, - FluidPaletteSourceAlias, - FluidPaletteColorspace, -} from '@dynatrace/shared/design-system/interfaces'; -import { ColorPickerComponent } from '../color-picker/color-picker.component'; - -@Component({ - selector: 'design-tokens-ui-palette-settings', - templateUrl: './palette-settings.component.html', - styleUrls: ['../../shared-settings-styles.scss'], -}) -export class PaletteSettingsComponent implements AfterViewInit, OnDestroy { - @ViewChild('keyColorPicker') keyColorPicker: ColorPickerComponent; - - /** @internal Returns the current palette */ - _palette$: Observable; - - /** @internal Returns the current palette's key color */ - _keyColor$: Observable; - - /** @internal Returns the current palette's generation options */ - _generationOptions$: Observable; - - private _destroy$ = new Subject(); - - constructor(private _paletteSourceService: PaletteSourceService) { - this._palette$ = _paletteSourceService.palette$.pipe(shareReplay()); - - this._keyColor$ = this._paletteSourceService.keyColor$; - - this._generationOptions$ = this._palette$.pipe( - map((palette) => palette?.tokenData.generationOptions), - ); - } - - ngAfterViewInit(): void { - // Listen to the event manually since change detection makes Chrome's color picker very unresponsive - this.keyColorPicker.colorChange - .pipe(debounceTime(150), takeUntil(this._destroy$)) - .subscribe((color) => { - this._keyColor = color; - }); - } - - ngOnDestroy(): void { - this._destroy$.next(); - this._destroy$.complete(); - } - - /** @internal Adds or removes custom generation options to a palette */ - _setGenerationOptionsEnabled(enable: boolean): void { - this._paletteSourceService.setPaletteGenerationOptionsEnabled(enable); - } - - /** @internal Sets the key color of the current palette */ - set _keyColor(color: string) { - this._modifyPaletteTokenData((tokenData) => ({ - ...tokenData, - keyColor: color, - })); - } - - /** @internal Sets the color space of the current palette */ - set _colorspace(colorspace: FluidPaletteColorspace) { - this._modifyPaletteTokenData((tokenData) => ({ - ...tokenData, - colorspace, - })); - } - - /** @internal Sets the generation options of the current palette */ - set _generationOptions(newOptions: FluidPaletteGenerationOptions) { - this._modifyPaletteTokenData((tokenData) => ({ - ...tokenData, - generationOptions: newOptions, - })); - } - - private _modifyPaletteTokenData( - changeFn: (tokenData: FluidPaletteSourceAlias) => FluidPaletteSourceAlias, - ): void { - this._paletteSourceService.modifyCurrentPalette((palette) => ({ - ...palette, - tokenData: changeFn(palette.tokenData), - })); - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/shared-generation-settings/shared-generation-settings.component.html b/apps/design-tokens-ui/src/pages/theme-detail/components/shared-generation-settings/shared-generation-settings.component.html deleted file mode 100644 index 7b29eb0643..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/shared-generation-settings/shared-generation-settings.component.html +++ /dev/null @@ -1,50 +0,0 @@ -
- - -
- -
- - -
- -
- - -
diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/shared-generation-settings/shared-generation-settings.component.ts b/apps/design-tokens-ui/src/pages/theme-detail/components/shared-generation-settings/shared-generation-settings.component.ts deleted file mode 100644 index 685fb71459..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/shared-generation-settings/shared-generation-settings.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { FluidPaletteGenerationOptions } from '@dynatrace/shared/design-system/interfaces'; - -@Component({ - selector: 'design-tokens-ui-shared-generation-settings', - templateUrl: './shared-generation-settings.component.html', - styleUrls: ['../../shared-settings-styles.scss'], -}) -export class SharedGenerationSettingsComponent { - /** Input generation options */ - @Input() options: FluidPaletteGenerationOptions; - - /** Fired when a contrast value in the generation options changes */ - @Output() optionsChange = new EventEmitter(); - - /** @internal */ - get _minContrast(): number { - return this.options.minContrast; - } - - /** @internal */ - set _minContrast(value: number) { - this.optionsChange.emit({ - ...this.options, - minContrast: value, - }); - } - - /** @internal */ - get _baseContrast(): number { - return this.options.baseContrast; - } - - /** @internal */ - set _baseContrast(value: number) { - this.optionsChange.emit({ - ...this.options, - baseContrast: value, - }); - } - - /** @internal */ - get _maxContrast(): number { - return this.options.maxContrast; - } - - /** @internal */ - set _maxContrast(value: number) { - this.optionsChange.emit({ - ...this.options, - maxContrast: value, - }); - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-preview/theme-preview.component.html b/apps/design-tokens-ui/src/pages/theme-detail/components/theme-preview/theme-preview.component.html deleted file mode 100644 index 30a03a55d0..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-preview/theme-preview.component.html +++ /dev/null @@ -1,32 +0,0 @@ - -
- {{ palette.name | humanize }} -
- -
- -
- {{ shade.aliasName }} ({{ shade.ratio }}) - {{ color }} -
- -
- diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-preview/theme-preview.component.scss b/apps/design-tokens-ui/src/pages/theme-detail/components/theme-preview/theme-preview.component.scss deleted file mode 100644 index c19c3a3753..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-preview/theme-preview.component.scss +++ /dev/null @@ -1,73 +0,0 @@ -@import '../../../../styles/variables'; - -:host { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); - grid-gap: $fluid-spacing--medium; - --gap: 0; - - &.design-tokens-ui-gaps { - --gap: #{$fluid-spacing--small}; - } -} - -.design-tokens-ui-shades { - margin-bottom: $fluid-spacing--medium; - - &:hover .design-tokens-ui-shade-description { - opacity: 1; - } - - .design-tokens-ui-palette-name { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin: 0 0 $fluid-spacing--medium 0; - } - - &.design-tokens-ui-palette-link-active .design-tokens-ui-palette-name { - font-weight: 700; - } - - .design-tokens-ui-shades--preview-list { - display: flex; - flex-direction: column; - justify-content: stretch; - height: 100%; - min-height: 250px; - max-height: 440px; - } -} - -.design-tokens-ui-shade-preview { - display: flex; - height: 48px; - align-items: center; - justify-content: space-between; - padding: 0 $fluid-spacing--medium; - background-color: white; - flex-grow: 1; - transition: margin-bottom 200ms ease-out; - - &:not(:last-of-type) { - margin-bottom: var(--gap); - } - - .design-tokens-ui-shade-description { - opacity: 0; - transition: opacity 100ms ease-out; - } - - .design-tokens-ui-shade-name { - text-overflow: ellipsis; - vertical-align: middle; - white-space: nowrap; - overflow: hidden; - } - - .design-tokens-ui-shade-color { - font-family: monospace; - text-align: right; - margin-left: $fluid-spacing--small; - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-preview/theme-preview.component.ts b/apps/design-tokens-ui/src/pages/theme-detail/components/theme-preview/theme-preview.component.ts deleted file mode 100644 index 07bd8d435e..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-preview/theme-preview.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, Input } from '@angular/core'; -import { Palette } from '@dynatrace/design-tokens-ui/shared'; -import { getTextColorOnBackground } from '../../../../utils/colors'; - -@Component({ - selector: 'design-tokens-ui-theme-preview', - templateUrl: './theme-preview.component.html', - styleUrls: ['./theme-preview.component.scss'], - host: { - '[class.design-tokens-ui-gaps]': 'gaps', - }, -}) -export class ThemePreviewComponent { - /** Palettes of the current theme */ - @Input() palettes: Palette[]; - - /** Whether to show gaps between the palette colors */ - @Input() gaps: boolean; - - /** @internal */ - _getTextColorOnBackground(color: string): string { - return getTextColorOnBackground(color); - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-settings/theme-settings.component.html b/apps/design-tokens-ui/src/pages/theme-detail/components/theme-settings/theme-settings.component.html deleted file mode 100644 index dd72602ca2..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-settings/theme-settings.component.html +++ /dev/null @@ -1,22 +0,0 @@ -

General settings

- -
- - -
- - - -

Curves

- - - diff --git a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-settings/theme-settings.component.ts b/apps/design-tokens-ui/src/pages/theme-detail/components/theme-settings/theme-settings.component.ts deleted file mode 100644 index e77e02c158..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/components/theme-settings/theme-settings.component.ts +++ /dev/null @@ -1,81 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, OnDestroy, ViewChild, AfterViewInit } from '@angular/core'; -import { Subject, Observable } from 'rxjs'; -import { takeUntil, map } from 'rxjs/operators'; - -import { FluidPaletteGenerationOptions } from '@dynatrace/shared/design-system/interfaces'; -import { Theme } from '@dynatrace/design-tokens-ui/shared'; -import { PaletteSourceService } from '../../../../services/palette'; -import { ColorPickerComponent } from '../color-picker/color-picker.component'; - -@Component({ - selector: 'design-tokens-ui-theme-settings', - templateUrl: './theme-settings.component.html', - styleUrls: ['../../shared-settings-styles.scss'], -}) -export class ThemeSettingsComponent implements AfterViewInit, OnDestroy { - @ViewChild('baseColorPicker') baseColorPicker: ColorPickerComponent; - - /** @internal Identifier of the current theme */ - _themeName: string; - - /** @internal Returns the current theme */ - _theme$: Observable; - - /** @internal Generation options of the current theme */ - _globalGenerationOptions$: Observable< - FluidPaletteGenerationOptions | undefined - >; - - /** @internal Returns the current theme's base color */ - _baseColor$: Observable; - - private _destroy$ = new Subject(); - - constructor(private _paletteSourceService: PaletteSourceService) { - this._theme$ = _paletteSourceService.theme$; - - this._globalGenerationOptions$ = this._theme$.pipe( - map((theme) => theme?.globalGenerationOptions), - ); - - this._baseColor$ = _paletteSourceService.themeBaseColor$; - } - - ngAfterViewInit(): void { - // Listen to the event manually since change detection makes Chrome's color picker very unresponsive - this.baseColorPicker.colorChange - .pipe(takeUntil(this._destroy$)) - .subscribe((color) => { - this._paletteSourceService.setThemeBaseColor(color); - }); - } - - ngOnDestroy(): void { - this._destroy$.next(); - this._destroy$.complete(); - } - - /** @internal Sets the global generation options for the current theme */ - set _globalGenerationOptions(newOptions: FluidPaletteGenerationOptions) { - this._paletteSourceService.modifyCurrentTheme((theme) => ({ - ...theme, - globalGenerationOptions: newOptions, - })); - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/shared-settings-styles.scss b/apps/design-tokens-ui/src/pages/theme-detail/shared-settings-styles.scss deleted file mode 100644 index f02cffb16b..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/shared-settings-styles.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../../styles/variables'; - -.design-tokens-ui-setting { - display: flex; - align-items: center; - margin: $fluid-spacing--x-small 0; - width: 100%; - justify-content: space-between; - - input, - dt-select { - width: 200px; - } - - &.design-tokens-ui-select-setting { - justify-content: flex-start; - - .design-tokens-ui-settings-label { - height: 32px; - } - } -} - -.design-tokens-ui-labelled-input { - input { - text-align: right; - } - - design-tokens-ui-color-picker { - width: 50%; - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.component.html b/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.component.html deleted file mode 100644 index 33ff605a31..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.component.html +++ /dev/null @@ -1,45 +0,0 @@ -
-

{{ (_theme$ | async)?.name | humanize }}

- Save changes -
- -
-
- - - -
-

- This theme was created manually or generated by another tool. You can - choose to overwrite this theme to make it editable which will cause all - colors to be regenerated with new contrast values. -

- Overwrite theme -
-
- -
-
-

Colors

- - - Gaps - -
- - -
-
diff --git a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.component.scss b/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.component.scss deleted file mode 100644 index 42e9b8249f..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.component.scss +++ /dev/null @@ -1,70 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import '../../styles/variables'; - -:host { - width: 100%; - height: 100%; -} - -.design-tokens-ui-theme-detail--content { - display: flex; - justify-content: stretch; -} - -.design-tokens-ui-button-header { - display: flex; - align-items: center; - justify-content: space-between; - - :first-child { - margin-right: $fluid-spacing--medium; - } - - &.design-tokens-ui-button-header-start { - justify-content: flex-start; - } -} - -.design-tokens-ui-area-panel { - .design-tokens-ui-button-header { - margin-top: -$fluid-spacing--large; - - h2 { - margin-top: $fluid-spacing--large; - } - } - - ::ng-deep h2 { - margin-top: 0; - } -} - -.design-tokens-ui-settings-area { - min-width: 460px; - max-width: 460px; - padding: 0 $fluid-spacing--large $fluid-spacing--large 0; -} - -.design-tokens-ui-colors-area { - width: 100%; -} - -.design-tokens-ui-grouped-buttons .design-tokens-ui-link { - display: inline-block; - margin-bottom: 16px; -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.component.ts b/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.component.ts deleted file mode 100644 index eadac6aaf8..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.component.ts +++ /dev/null @@ -1,75 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, OnDestroy, ChangeDetectionStrategy } from '@angular/core'; -import { Router } from '@angular/router'; - -import { Subject, Observable } from 'rxjs'; -import { takeUntil, filter, shareReplay } from 'rxjs/operators'; - -import { PaletteSourceService } from '../../services/palette'; -import { Theme } from '@dynatrace/design-tokens-ui/shared'; - -@Component({ - selector: 'design-tokens-ui-palette-detail', - templateUrl: './theme-detail.component.html', - styleUrls: ['./theme-detail.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ThemeDetailComponent implements OnDestroy { - /** All palettes belonging to the current theme */ - _theme$: Observable; - - /** @internal the user must click the delete button twice to confirm */ - _showDeletePaletteConfirmation = false; - - /** @internal Enable or disable gaps in the preview */ - _showGaps = false; - - private _destroy$ = new Subject(); - - constructor( - private _paletteSourceService: PaletteSourceService, - private _router: Router, - ) { - this._theme$ = _paletteSourceService.theme$.pipe( - shareReplay(), - filter(Boolean), - takeUntil(this._destroy$), - ); - } - - ngOnDestroy(): void { - this._destroy$.next(); - this._destroy$.complete(); - } - - /** @internal */ - _createGenerationOptions(): void { - this._paletteSourceService.createGlobalGenerationOptions(); - } - - /** @internal */ - _toggleGaps(): void { - this._showGaps = !this._showGaps; - } - - /** @internal Saves changes and returns to the themes overview page */ - _saveChanges(): void { - this._paletteSourceService.applyChanges(); - this._router.navigate(['/theme']); - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.guard.ts b/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.guard.ts deleted file mode 100644 index 915322eccf..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.guard.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CanActivate, CanDeactivate } from '@angular/router'; -import { ThemeDetailComponent } from './theme-detail.component'; -import { Injectable } from '@angular/core'; -import { PaletteSourceService } from '../../services/palette'; - -@Injectable({ - providedIn: 'root', -}) -export class ThemeDetailGuard - implements CanActivate, CanDeactivate { - constructor(private _paletteSourceService: PaletteSourceService) {} - - canActivate(): boolean { - // Save a snapshot when we start editing - this._paletteSourceService.saveStateSnapshot(); - return true; - } - - canDeactivate(): boolean { - // Restore the snapshot if we leave the page without saving - if (this._paletteSourceService.hasPendingChanges) { - if ( - !confirm( - 'There are unsaved changes. Are you sure you want to leave this page?', - ) - ) { - return false; - } - } - - this._paletteSourceService.revertChanges(); - return true; - } -} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.module.ts b/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.module.ts deleted file mode 100644 index 10f68c64da..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/theme-detail.module.ts +++ /dev/null @@ -1,88 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule, Route } from '@angular/router'; -import { FormsModule } from '@angular/forms'; - -import { DtIconModule } from '@dynatrace/barista-components/icon'; -import { DtSelectModule } from '@dynatrace/barista-components/select'; -import { DtCheckboxModule } from '@dynatrace/barista-components/checkbox'; - -import { DesignTokensUiInputModule } from '@dynatrace/design-tokens-ui/input'; -import { PipesModule } from '../../pipes'; -import { ThemeDetailComponent } from './theme-detail.component'; -import { ColorPickerComponent } from './components/color-picker/color-picker.component'; -import { ThemePreviewComponent } from './components/theme-preview/theme-preview.component'; -import { ThemeSettingsComponent } from './components/theme-settings/theme-settings.component'; -import { PaletteSettingsComponent } from './components/palette-settings/palette-settings.component'; -import { SharedGenerationSettingsComponent } from './components/shared-generation-settings/shared-generation-settings.component'; -import { DistributionCurveComponent } from './components/distribution-curve/distribution-curve.component'; -import { EasingSettingsComponent } from './components/easing-settings/easing-settings.component'; -import { EasingTypeSelectComponent } from './components/easing-type-select/easing-type-select.component'; -import { ThemeDetailGuard } from './theme-detail.guard'; -import { - ContrastValidateDirective, - ExponentValidateDirective, -} from './validators'; - -const routes: Route[] = [ - { - path: '', - component: ThemeDetailComponent, - canActivate: [ThemeDetailGuard], - canDeactivate: [ThemeDetailGuard], - children: [ - { - path: ':palette', - component: PaletteSettingsComponent, - }, - { - path: '', - component: ThemeSettingsComponent, - }, - ], - }, -]; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - RouterModule.forChild(routes), - DtIconModule, - DtSelectModule, - DtCheckboxModule, - PipesModule, - DesignTokensUiInputModule, - ], - declarations: [ - ThemeDetailComponent, - ThemePreviewComponent, - ColorPickerComponent, - PaletteSettingsComponent, - ThemeSettingsComponent, - SharedGenerationSettingsComponent, - DistributionCurveComponent, - EasingSettingsComponent, - EasingTypeSelectComponent, - ContrastValidateDirective, - ExponentValidateDirective, - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class ThemeDetailModule {} diff --git a/apps/design-tokens-ui/src/pages/theme-detail/validators.ts b/apps/design-tokens-ui/src/pages/theme-detail/validators.ts deleted file mode 100644 index 41c8d01324..0000000000 --- a/apps/design-tokens-ui/src/pages/theme-detail/validators.ts +++ /dev/null @@ -1,83 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Directive } from '@angular/core'; -import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms'; - -type ValidationResult = { [key: string]: any } | null; - -/** Base class for float value validators */ -abstract class NumberValidator implements Validator { - /** @inheritdoc */ - validate(control: AbstractControl): ValidationResult { - if (isNaN(control.value)) { - return { noValue: true }; - } - return this.validateNumber(parseFloat(control.value)); - } - - /** - * Performs synchronous validation against the provided number. - * @see {@link Validator#validate} - */ - abstract validateNumber(value: number): ValidationResult; -} - -/** Validator for positive exponents */ -@Directive({ - selector: '[designTokensUiValidateExponent]', - providers: [ - { - provide: NG_VALIDATORS, - useExisting: ExponentValidateDirective, - multi: true, - }, - ], -}) -export class ExponentValidateDirective extends NumberValidator { - validateNumber(value: number): ValidationResult { - if (value <= 0) { - return { greaterThanZero: true }; - } - return null; - } -} - -const MIN_CONTRAST = 1; -const MAX_CONTRAST = 21; - -/** Validator for Leonardo-compatible contrast values */ -@Directive({ - selector: '[designTokensUiValidateContrast]', - providers: [ - { - provide: NG_VALIDATORS, - useExisting: ContrastValidateDirective, - multi: true, - }, - ], -}) -export class ContrastValidateDirective extends NumberValidator { - validateNumber(value: number): ValidationResult { - if (value < MIN_CONTRAST) { - return { tooSmall: true }; - } - if (value > MAX_CONTRAST) { - return { tooBig: true }; - } - return null; - } -} diff --git a/apps/design-tokens-ui/src/pages/themes/components/theme-tile/theme-tile.component.html b/apps/design-tokens-ui/src/pages/themes/components/theme-tile/theme-tile.component.html deleted file mode 100644 index 752e1e343f..0000000000 --- a/apps/design-tokens-ui/src/pages/themes/components/theme-tile/theme-tile.component.html +++ /dev/null @@ -1,17 +0,0 @@ -
-

{{ name }}

- Edit theme -
-
-
- {{ - palette.name | humanize - }} - -
-
diff --git a/apps/design-tokens-ui/src/pages/themes/components/theme-tile/theme-tile.component.scss b/apps/design-tokens-ui/src/pages/themes/components/theme-tile/theme-tile.component.scss deleted file mode 100644 index a7f74a26a9..0000000000 --- a/apps/design-tokens-ui/src/pages/themes/components/theme-tile/theme-tile.component.scss +++ /dev/null @@ -1,76 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import '../../../../styles/variables'; - -:host { - display: flex; - flex-direction: column; - color: var(--color-maxcontrast); - background-color: var(--color-neutral-60); - border: 1px solid transparent; - height: 100%; - padding: $fluid-spacing--large; - margin: $fluid-spacing--large 0; - position: relative; - overflow: hidden; -} - -.design-tokens-ui-theme-header { - display: flex; - justify-content: space-between; - margin-bottom: $fluid-spacing--medium; - - .design-tokens-ui-theme-name { - margin: 0; - text-transform: capitalize; - } - - fluid-button { - --fluid-button--foreground-key: var(--color-neutral-100); - --fluid-button--foreground-key-hover: var(--color-neutral-110); - --fluid-button--foreground-key-active: var(--color-neutral-120); - } -} - -.design-tokens-ui-theme-preview--wrapper { - display: flex; - flex-direction: row; - align-items: stretch; - width: 100%; -} - -.design-tokens-ui-theme-preview { - width: 100%; - display: flex; - flex-direction: column; - - &:not(:last-child) { - margin-right: $fluid-spacing--medium; - } -} - -.design-tokens-ui-palette-name { - height: 25px; - overflow: hidden; -} - -.design-tokens-ui-palette-preview { - display: inline-block; - width: 100%; - height: 32px; - margin-top: $fluid-spacing--x-small; -} diff --git a/apps/design-tokens-ui/src/pages/themes/components/theme-tile/theme-tile.component.ts b/apps/design-tokens-ui/src/pages/themes/components/theme-tile/theme-tile.component.ts deleted file mode 100644 index 4e5bb65ae6..0000000000 --- a/apps/design-tokens-ui/src/pages/themes/components/theme-tile/theme-tile.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, Input } from '@angular/core'; -import { Palette } from '@dynatrace/design-tokens-ui/shared'; - -@Component({ - selector: 'design-tokens-ui-theme-tile', - templateUrl: './theme-tile.component.html', - styleUrls: ['./theme-tile.component.scss'], - host: { - '[class]': '"fluid-theme--" + name', - }, -}) -export class ThemeTileComponent { - /** Theme name */ - @Input() name: string; - - /** Palettes in the theme */ - @Input() palettes: Palette[]; -} diff --git a/apps/design-tokens-ui/src/pages/themes/themes.component.html b/apps/design-tokens-ui/src/pages/themes/themes.component.html deleted file mode 100644 index 6a98a30349..0000000000 --- a/apps/design-tokens-ui/src/pages/themes/themes.component.html +++ /dev/null @@ -1,15 +0,0 @@ -

Themes

- -
- - Export as YAML - -
- -
- -
diff --git a/apps/design-tokens-ui/src/pages/themes/themes.component.scss b/apps/design-tokens-ui/src/pages/themes/themes.component.scss deleted file mode 100644 index b2e8b012a9..0000000000 --- a/apps/design-tokens-ui/src/pages/themes/themes.component.scss +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import '../../styles/variables'; - -:host { - display: block; -} - -.design-tokens-ui-add-palette { - color: var(--color-maxcontrast); - height: 140px; - background-color: var(--color-neutral-60); - border: 1px solid transparent; - border-radius: 2px; - padding: 24px; - position: relative; - overflow: hidden; - text-decoration: none; - font-size: 1rem; - cursor: pointer; - - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - - :hover, - &:hover { - border-color: var(--color-neutral-100); - text-decoration: none; - } - - dt-icon { - height: 28px; - width: 28px; - margin-right: $fluid-spacing--small; - fill: var(--color-maxcontrast); - } -} - -.dt-top-bar-navigation, -.dt-top-bar-action { - background-color: transparent; -} diff --git a/apps/design-tokens-ui/src/pages/themes/themes.component.ts b/apps/design-tokens-ui/src/pages/themes/themes.component.ts deleted file mode 100644 index 166a2435f9..0000000000 --- a/apps/design-tokens-ui/src/pages/themes/themes.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component } from '@angular/core'; - -import { Theme } from '@dynatrace/design-tokens-ui/shared'; -import { PaletteSourceService } from '../../services/palette'; -import { Observable } from 'rxjs'; - -@Component({ - selector: 'design-tokens-ui-themes', - templateUrl: './themes.component.html', - styleUrls: ['./themes.component.scss'], -}) -export class ThemesComponent { - _themes$: Observable = this._paletteSourceService.themes$; - - constructor(private _paletteSourceService: PaletteSourceService) {} - - /** @internal Export palette as YAML */ - _yamlExport(): void { - this._paletteSourceService.exportYaml(); - } -} diff --git a/apps/design-tokens-ui/src/pages/themes/themes.module.ts b/apps/design-tokens-ui/src/pages/themes/themes.module.ts deleted file mode 100644 index a47731ec3e..0000000000 --- a/apps/design-tokens-ui/src/pages/themes/themes.module.ts +++ /dev/null @@ -1,52 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule, ActivatedRouteSnapshot } from '@angular/router'; - -import { DtIconModule } from '@dynatrace/barista-components/icon'; -import { DtTopBarNavigationModule } from '@dynatrace/barista-components/top-bar-navigation'; - -import { PipesModule } from '../../pipes'; -import { ThemesComponent } from './themes.component'; -import { ThemeTileComponent } from './components/theme-tile/theme-tile.component'; - -@NgModule({ - imports: [ - CommonModule, - RouterModule.forChild([ - { path: '', component: ThemesComponent }, - { - path: ':theme', - loadChildren: () => - import('../theme-detail/theme-detail.module').then( - (module) => module.ThemeDetailModule, - ), - data: { - themeResolver: (snapshot: ActivatedRouteSnapshot) => - snapshot.paramMap.get('theme'), - }, - }, - ]), - DtIconModule, - DtTopBarNavigationModule, - PipesModule, - ], - declarations: [ThemesComponent, ThemeTileComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class ThemesModule {} diff --git a/apps/design-tokens-ui/src/pipes/humanize.pipe.ts b/apps/design-tokens-ui/src/pipes/humanize.pipe.ts deleted file mode 100644 index c9a931dfd1..0000000000 --- a/apps/design-tokens-ui/src/pipes/humanize.pipe.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Pipe, PipeTransform } from '@angular/core'; -import { startCase } from 'lodash-es'; - -/* - * Transforms kebab-case input to better readable output - */ -@Pipe({ name: 'humanize' }) -export class HumanizePipe implements PipeTransform { - transform(value: string): string { - if (!value) { - return value; - } - return startCase(value.replace(/-/g, ' ')); - } -} diff --git a/apps/design-tokens-ui/src/pipes/index.ts b/apps/design-tokens-ui/src/pipes/index.ts deleted file mode 100644 index 8ea62f7d43..0000000000 --- a/apps/design-tokens-ui/src/pipes/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './pipes.module'; -export * from './humanize.pipe'; diff --git a/apps/design-tokens-ui/src/pipes/pipes.module.ts b/apps/design-tokens-ui/src/pipes/pipes.module.ts deleted file mode 100644 index 0f6af9f63a..0000000000 --- a/apps/design-tokens-ui/src/pipes/pipes.module.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { HumanizePipe } from './humanize.pipe'; - -@NgModule({ - imports: [CommonModule], - declarations: [HumanizePipe], - exports: [HumanizePipe], -}) -export class PipesModule {} diff --git a/apps/design-tokens-ui/src/polyfills.ts b/apps/design-tokens-ui/src/polyfills.ts deleted file mode 100644 index dfdf55a496..0000000000 --- a/apps/design-tokens-ui/src/polyfills.ts +++ /dev/null @@ -1,79 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ -import '@angular/localize/init'; diff --git a/apps/design-tokens-ui/src/services/app-theme/app-theme.service.ts b/apps/design-tokens-ui/src/services/app-theme/app-theme.service.ts deleted file mode 100644 index 135ed6b4a3..0000000000 --- a/apps/design-tokens-ui/src/services/app-theme/app-theme.service.ts +++ /dev/null @@ -1,122 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Injectable, Inject, OnDestroy } from '@angular/core'; -import { - Router, - ActivatedRouteSnapshot, - ActivationStart, -} from '@angular/router'; -import { userPrefersDarkTheme } from '../../utils/theme'; -import { filter } from 'rxjs/operators'; -import { Subject, Observable, Subscription } from 'rxjs'; -import { DOCUMENT } from '@angular/common'; - -/** Returns a theme based on the OS settings */ -export const defaultThemeResolver = () => - userPrefersDarkTheme() ? 'abyss' : 'surface'; - -/** - * Updates the application's global theme with by calling theme - * resolvers that are defined in routes, e.g. - * - * data: { - * themeResolver: (snapshot: ActivatedRouteSnapshot) => 'abyss' - * } - */ -@Injectable() -export class AppThemeService implements OnDestroy { - /** Name of the current theme */ - private _currentTheme: string; - - /** Current snapshot of the innermost route */ - private _currentRoute: ActivatedRouteSnapshot; - - private _themeChangeSubject$ = new Subject(); - - private _routerSubscription = Subscription.EMPTY; - - constructor( - private _router: Router, - @Inject(DOCUMENT) private _document: Document, - ) {} - - ngOnDestroy(): void { - this._routerSubscription.unsubscribe(); - } - - /** Initializes event listers for app theming */ - initialize(): void { - this._routerSubscription = this._router.events - .pipe(filter((event) => event instanceof ActivationStart)) - .subscribe((event: ActivationStart) => { - this._currentRoute = event.snapshot; - this._updateTheme(); - }); - - // Listen to OS dark theme changes - if (window.matchMedia) { - window - .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', () => { - this._updateTheme(); - }); - } - } - - /** Fired when the global app theme changes */ - get themeChange$(): Observable { - return this._themeChangeSubject$.asObservable(); - } - - /** Set a global theme on the body */ - private _updateTheme(): void { - const theme = this._resolveTheme(); - if (theme === this._currentTheme) { - return; - } - - this._currentTheme = theme; - - const currentThemeClass = [ - ...(this._document.body.classList as any), - ].find((clazz) => clazz.startsWith('fluid-theme')); - if (currentThemeClass) { - document.body.classList.remove(currentThemeClass); - } - - document.body.classList.add(`fluid-theme--${theme}`); - - this._themeChangeSubject$.next(theme); - } - - /** Retrieve the theme that should be used from the route's theme resolver */ - private _resolveTheme(): string { - let route = this._currentRoute; - - let themeResolver: (snapshot: ActivatedRouteSnapshot) => string; - do { - themeResolver = route.data?.themeResolver; - route = route.root; - } while (!themeResolver && route.root !== route); - - if (!themeResolver) { - themeResolver = defaultThemeResolver; - } - - return themeResolver(this._currentRoute); - } -} diff --git a/apps/design-tokens-ui/src/services/app-theme/index.ts b/apps/design-tokens-ui/src/services/app-theme/index.ts deleted file mode 100644 index d845d532f0..0000000000 --- a/apps/design-tokens-ui/src/services/app-theme/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './app-theme.service'; diff --git a/apps/design-tokens-ui/src/services/palette/index.ts b/apps/design-tokens-ui/src/services/palette/index.ts deleted file mode 100644 index 1e30d8eddf..0000000000 --- a/apps/design-tokens-ui/src/services/palette/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './palette-source.service'; diff --git a/apps/design-tokens-ui/src/services/palette/palette-source.service.ts b/apps/design-tokens-ui/src/services/palette/palette-source.service.ts deleted file mode 100644 index b4f77ee358..0000000000 --- a/apps/design-tokens-ui/src/services/palette/palette-source.service.ts +++ /dev/null @@ -1,476 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Injectable, OnDestroy, Inject } from '@angular/core'; -import { Router, ParamMap, ActivationStart } from '@angular/router'; -import { cloneDeep, flatMap, isEqual, uniq } from 'lodash-es'; -import { - map, - filter, - distinctUntilChanged, - debounceTime, - share, - takeUntil, -} from 'rxjs/operators'; -import { stringify } from 'yaml'; - -import * as paletteSource from '@dynatrace/fluid-design-tokens-meta/aliases/palette-source.alias'; -import { THEMES } from '@dynatrace/fluid-design-tokens'; -import { - FluidPaletteSource, - FluidPaletteGenerationOptions, -} from '@dynatrace/shared/design-system/interfaces'; -import { - Theme, - Palette, - easeWithOptions, - remapRange, - DEFAULT_GENERATION_OPTIONS, -} from '@dynatrace/design-tokens-ui/shared'; -import { StyleOverridesService } from '../style-overrides'; -import { generatePaletteContrastColors } from '../../utils/colors'; -import { StatefulServiceBase } from '../stateful-service'; -import { downloadStringAsTextFile } from '../../utils/download'; -import { Subject } from 'rxjs'; -import { DOCUMENT } from '@angular/common'; - -const YAML_FILE_NAME = 'palette-source.alias.yml'; - -interface State { - themes: Theme[]; - currentThemeName?: string; - currentPaletteName?: string; -} - -// Selectors -export const getCurrentTheme = (state: State) => - state.themes.find((theme) => theme.name === state.currentThemeName); - -export const getGlobalGenerationOptions = (theme: Theme | undefined) => - theme?.globalGenerationOptions; - -export const getCurrentPalette = (state: State) => - getCurrentTheme(state)?.palettes.find( - (palette) => palette.name === state.currentPaletteName, - ); - -export const getPaletteGenerationOptions = (palette: Palette | undefined) => - palette?.tokenData.generationOptions; - -export const getThemeBaseColor = (theme: Theme | undefined) => - theme?.palettes && theme.palettes.length > 0 - ? theme.palettes[0].tokenData.baseColor - : '#ffffff'; - -export const getKeyColor = (palette: Palette) => - Array.isArray(palette.tokenData.keyColor) - ? palette.tokenData.keyColor[0] - : palette.tokenData.keyColor; - -@Injectable({ - providedIn: 'root', -}) -export class PaletteSourceService - extends StatefulServiceBase - implements OnDestroy { - /** Observable with all themes */ - themes$ = this.state$.pipe(map((state) => state.themes)); - - /** Observable with the current theme */ - theme$ = this.state$.pipe(share(), map(getCurrentTheme)); - - /** Observable with the current theme's base color */ - themeBaseColor$ = this.theme$.pipe(map(getThemeBaseColor)); - - /** Observable with the current theme's palette */ - palette$ = this.state$.pipe(map(getCurrentPalette)); - - /** Observable with the current palette's key color */ - keyColor$ = this.palette$.pipe(filter(Boolean), map(getKeyColor)); - - /** Subject used for teardown */ - private _destroy$ = new Subject(); - - constructor( - router: Router, - private _styleOverridesService: StyleOverridesService, - @Inject(DOCUMENT) private _document: Document, - ) { - super(); - - // Deep copy the palette source to avoid mutating the imported object - const palettes = cloneDeep( - (paletteSource as any).default, - ) as FluidPaletteSource; - const themeNames = Object.keys(THEMES).map((uppercaseName) => - uppercaseName.toLowerCase(), - ); - - const initialState = { - themes: themeNames.map((themeName) => ({ - name: themeName, - globalGenerationOptions: palettes.meta - ? palettes.meta[themeName]?.generationOptions - : undefined, - palettes: palettes.aliases - .filter((palette) => palette.theme === themeName) - .map((palette) => ({ - name: palette.name, - tokenData: { - ...palette, - generationOptions: palette.generationOptions?.globalType - ? undefined - : palette.generationOptions, - }, - generatedColors: [], - })), - })), - }; - - this.modifyState(() => initialState); - - // Only regenerate all palette colors if relevant properties changed - this.theme$ - .pipe( - distinctUntilChanged(this._canSkipPaletteGeneration), - filter(Boolean), - debounceTime(200), - takeUntil(this._destroy$), - ) - .subscribe((theme) => { - for (const palette of theme.palettes) { - this.regeneratePaletteColors(palette); - } - this.overrideStylesForThemePalettes(); - }); - - // Regenerate palette on changes - this.palette$ - .pipe( - share(), - filter(Boolean), - debounceTime(200), - takeUntil(this._destroy$), - ) - .subscribe((palette) => { - this.regeneratePaletteColors(palette); - this.overrideStylesForThemePalettes(); - }); - - router.events - .pipe( - filter((evt) => evt instanceof ActivationStart), - map((evt: ActivationStart) => evt.snapshot.paramMap), - takeUntil(this._destroy$), - ) - .subscribe((params: ParamMap) => { - this.modifyState((state) => ({ - ...state, - currentThemeName: params.get('theme') ?? undefined, - currentPaletteName: params.get('palette') ?? undefined, - })); - }); - } - - ngOnDestroy(): void { - this._destroy$.next(); - this._destroy$.complete(); - } - - /** Restores the last saved state. */ - revertChanges(): void { - super.revertChanges(); - - // Make sure to reset the previous state in the UI - this.overrideStylesForThemePalettes(); - this.overrideStylesForThemeBaseColor(); - } - - /** Whether the current state has pending changes */ - get hasPendingChanges(): boolean { - // To check for changes between the current and the saved state, - // we need to get rid of the generated colors in the palettes since - // they are lazily generated when displaying the page - return this.checkStateModified((state) => ({ - ...state, - themes: state.themes.map((theme) => ({ - ...theme, - palettes: theme.palettes.map((palette) => ({ - name: palette.name, - tokenData: palette.tokenData, - })), - })), - })); - } - - /** - * Helper function for modifying a theme in the current state - * @param changeFn A function that takes the theme as an argument and returns a new theme object - */ - modifyCurrentTheme(changeFn: (theme: Theme) => Theme): void { - this.modifyState((state) => ({ - ...state, - themes: [ - ...state.themes.map((theme) => - theme.name === state.currentThemeName ? changeFn(theme) : theme, - ), - ], - })); - } - - /** - * Helper function for modifying a palette in the current state - * @param palette The palette that should be modified - * @param changeFn A function that takes the palette as an argument and returns a new palette object - */ - modifyPalette( - palette: Palette, - changeFn: (palette: Palette) => Palette, - ): void { - this.modifyCurrentTheme((theme) => ({ - ...theme, - palettes: [ - ...theme.palettes.map((p) => - p.name === palette.name ? changeFn(palette) : p, - ), - ], - })); - } - - /** - * Helper function for modifying a palette in the current theme - * @param changeFn A function that takes the palette as an argument and returns a new palette object - */ - modifyCurrentPalette(changeFn: (palette: Palette) => Palette): void { - const currentPalette = this.selectState(getCurrentPalette)!; - this.modifyPalette(currentPalette, changeFn); - } - - /** Creates the global generation options for the current theme. */ - createGlobalGenerationOptions(): void { - this.modifyCurrentTheme((theme) => ({ - ...theme, - globalGenerationOptions: { ...DEFAULT_GENERATION_OPTIONS }, - })); - } - - /** Modifies the base color of the current theme. */ - setThemeBaseColor(color: string): void { - // The base color must be saved in all individual palettes - // due to the way the design token builder works - this.modifyCurrentTheme((theme) => ({ - ...theme, - palettes: [ - ...theme.palettes.map((palette) => ({ - ...palette, - tokenData: { ...palette.tokenData, baseColor: color }, - })), - ], - })); - - this.overrideStylesForThemeBaseColor(); - } - - setPaletteGenerationOptionsEnabled(enable: boolean): void { - const state = this.state$.getValue(); - const currentGenerationOptions = getPaletteGenerationOptions( - getCurrentPalette(state), - ); - - let newGenerationOptions: - | FluidPaletteGenerationOptions - | undefined = currentGenerationOptions; - if (currentGenerationOptions && !enable) { - newGenerationOptions = undefined; - } else if (!currentGenerationOptions && enable) { - const theme = getCurrentTheme(state); - newGenerationOptions = { - ...(theme?.globalGenerationOptions ?? DEFAULT_GENERATION_OPTIONS), - }; - } - - this.modifyCurrentPalette((palette) => ({ - ...palette, - tokenData: { - ...palette.tokenData, - generationOptions: newGenerationOptions, - }, - })); - } - - /** - * Generates palette colors from palette shades of a given palette - * @param themeName The name of the theme that contains the target palette - * @param paletteName The name of the palette to generate colors for - */ - regeneratePaletteColors(palette: Palette): void { - const currentTheme = this.selectState(getCurrentTheme); - if (!currentTheme) return; - - let tokenData = { ...palette.tokenData }; - if (currentTheme.globalGenerationOptions) { - // Distributions can only be recalculated if global or local generation options are set - const distributions = this.calculateDistributions( - palette, - palette.tokenData.generationOptions! ?? - currentTheme.globalGenerationOptions, - ); - tokenData.shades = tokenData.shades.map((shade, index) => ({ - ...shade, - ratio: distributions[index], - })); - } - - this.modifyPalette(palette, () => ({ - ...palette, - generatedColors: generatePaletteContrastColors(tokenData), - tokenData, - })); - } - - /** Recalculates the shade distributions for the provided palette using the provided generation options */ - calculateDistributions( - palette: Palette, - generationOptions: FluidPaletteGenerationOptions, - ): number[] { - const { baseContrast, minContrast, maxContrast } = generationOptions; - const distributionCount = palette.tokenData.shades.length; - - return new Array(distributionCount) - .fill(0) - .map((_, index) => index / (distributionCount - 1)) // Normalized distribution - .map((normDistribution) => - easeWithOptions(normDistribution, generationOptions), - ) // Apply easing to distribution - .map((distributionWithEasing) => - distributionWithEasing < 0.5 - ? remapRange( - 0, - 0.5, - minContrast, - baseContrast, - distributionWithEasing, - ) - : remapRange( - 0.5, - 1, - baseContrast, - maxContrast, - distributionWithEasing, - ), - ) // Distribution value in [min, max] range. The base contrast is in the middle. - .map((value) => Math.round(value * 100) / 100); // Round to two digits - } - - /** Applies the theme's palettes to the UI */ - overrideStylesForThemePalettes(): void { - const theme = this.selectState(getCurrentTheme); - if (!theme) return; - - for (const palette of theme.palettes) { - for (let i = 0; i < palette.tokenData.shades.length; i++) { - const shade = palette.tokenData.shades[i]; - const generatedColor = palette.generatedColors[i]; - const colorPropName = shade.aliasName.replace( - `color-${theme.name}-`, - '', - ); - - if (generatedColor) { - this._styleOverridesService.addColorOverride( - theme.name, - colorPropName, - palette.generatedColors[i], - ); - } else { - this._styleOverridesService.removeColorOverride( - theme.name, - colorPropName, - ); - } - } - } - } - - /** Applies the theme base color to the UI as a background color */ - overrideStylesForThemeBaseColor(): void { - const theme = this.selectState(getCurrentTheme); - if (!theme) return; - - this._styleOverridesService.addColorOverride( - theme.name, - 'background', - getThemeBaseColor(theme), - ); - } - - /** Exports all palettes as a YAML file */ - exportYaml(): void { - const themes = this.selectState((state) => state.themes); - - const themeGenerationOptions = new Map< - string, - FluidPaletteGenerationOptions - >(); - for (const theme of themes.filter((t) => t.globalGenerationOptions)) { - themeGenerationOptions.set(theme.name, { - ...theme.globalGenerationOptions, - globalType: true, - } as FluidPaletteGenerationOptions); - } - - const meta = themes - .filter((theme) => theme.globalGenerationOptions) - .reduce((object, theme) => { - object[theme.name] = { - generationOptions: themeGenerationOptions.get(theme.name), - }; - return object; - }, {}); - - const aliases = flatMap(themes, (theme) => - theme.palettes.map((palette) => [palette, theme]), - ).map(([palette, theme]: [Palette, Theme]) => ({ - ...palette.tokenData, - - // Reference the theme's generation options if they're not overwritten - generationOptions: palette.tokenData.generationOptions - ? palette.tokenData.generationOptions - : themeGenerationOptions.get(theme.name), - })); - - const yaml = stringify({ - meta, - aliases, - }); - - downloadStringAsTextFile(YAML_FILE_NAME, yaml, this._document); - } - - private _canSkipPaletteGeneration(prev: Theme, curr: Theme): boolean { - if (!prev || !curr) { - return false; - } - - const distinctBaseColors = (theme: Theme) => - uniq(theme.palettes.map((palette) => palette.tokenData.baseColor)); - - return ( - prev.globalGenerationOptions === curr.globalGenerationOptions && - isEqual(distinctBaseColors(prev), distinctBaseColors(curr)) - ); - } -} diff --git a/apps/design-tokens-ui/src/services/spacing/index.ts b/apps/design-tokens-ui/src/services/spacing/index.ts deleted file mode 100644 index 826ff8f787..0000000000 --- a/apps/design-tokens-ui/src/services/spacing/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './spacing.service'; diff --git a/apps/design-tokens-ui/src/services/spacing/spacing.service.ts b/apps/design-tokens-ui/src/services/spacing/spacing.service.ts deleted file mode 100644 index 479e7a958d..0000000000 --- a/apps/design-tokens-ui/src/services/spacing/spacing.service.ts +++ /dev/null @@ -1,76 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Injectable, Inject } from '@angular/core'; -import { cloneDeep } from 'lodash-es'; -import { map } from 'rxjs/operators'; -import { stringify } from 'yaml'; - -import * as spacingAliases from '@dynatrace/fluid-design-tokens-meta/aliases/spacing.alias'; -import { FluidKeyValueTokens } from '@dynatrace/shared/design-system/interfaces'; -import { StatefulServiceBase } from '../stateful-service'; -import { downloadStringAsTextFile } from '../../utils/download'; -import { DOCUMENT } from '@angular/common'; - -const YAML_FILE_NAME = 'spacing.alias.yml'; - -interface State { - spacingAliases: FluidKeyValueTokens; -} - -// Selectors -export const getSpacings = (state: State) => state.spacingAliases; - -@Injectable({ - providedIn: 'root', -}) -export class SpacingService extends StatefulServiceBase { - spacings$ = this.state$.pipe(map(getSpacings)); - - constructor(@Inject(DOCUMENT) private _document: Document) { - super(); - - // Deep copy the palette source to avoid mutating the imported object - const spacingTokens = cloneDeep((spacingAliases as any).default); - - const initialState = { - spacingAliases: spacingTokens.aliases, - }; - - this.modifyState(() => initialState); - } - - /** Sets the spacing with the given name to the new value */ - modifySpacing(name: string, newValue: string): void { - this.modifyState((state) => { - const aliases = { ...state.spacingAliases }; - aliases[name] = newValue; - - return { ...state, spacingAliases: aliases }; - }); - } - - /** Exports all palettes as a YAML file */ - exportYaml(): void { - const spacings = this.selectState((state) => state.spacingAliases); - - const yaml = stringify({ - aliases: spacings, - }); - - downloadStringAsTextFile(YAML_FILE_NAME, yaml, this._document); - } -} diff --git a/apps/design-tokens-ui/src/services/stateful-service/index.ts b/apps/design-tokens-ui/src/services/stateful-service/index.ts deleted file mode 100644 index 3b1f4444bd..0000000000 --- a/apps/design-tokens-ui/src/services/stateful-service/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './stateful.service'; diff --git a/apps/design-tokens-ui/src/services/stateful-service/stateful.service.ts b/apps/design-tokens-ui/src/services/stateful-service/stateful.service.ts deleted file mode 100644 index cd9143a8cf..0000000000 --- a/apps/design-tokens-ui/src/services/stateful-service/stateful.service.ts +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Injectable } from '@angular/core'; -import { isEqual } from 'lodash-es'; -import { BehaviorSubject } from 'rxjs'; -@Injectable() -export abstract class StatefulServiceBase { - private _previousState: TState | undefined; - - /** Observable with the current state */ - protected state$ = new BehaviorSubject({} as any); - - constructor() { - // Show a warning message if there are unsaved changes when closing the page - window.addEventListener('beforeunload', (event) => { - if (this.hasPendingChanges) { - event.preventDefault(); - event.returnValue = ''; // Required for some browsers - } - }); - } - - /** Returns the current state mapped to the given selector */ - selectState(selector: (state: TState) => T): T { - return selector(this.state$.getValue()); - } - - /** Overwrites the current state */ - modifyState(changeFn: (state: TState) => TState): void { - const currentState = this.state$.getValue(); - const newState = changeFn(currentState); - - if (!isEqual(currentState, newState)) { - this.state$.next(newState); - } - } - - /** Records the current state to be able to restore it later */ - saveStateSnapshot(): void { - this._previousState = this.state$.getValue(); - } - - /** Applies changes to the edited theme, deleting the previously stored snapshot. */ - applyChanges(): void { - this._previousState = undefined; - this.state$.next(this.state$.getValue()); - } - - /** Restores the last saved state. */ - revertChanges(): void { - if (this._previousState) { - this.state$.next(this._previousState); - this._previousState = undefined; - } - } - - /** Whether the current state has pending changes */ - get hasPendingChanges(): boolean { - // To check for changes between the current and the saved state, - // we need to get rid of the generated colors in the palettes since - // they are lazily generated when displaying the page - return this.checkStateModified((state) => state); - } - - /** - * Checks whether some properties have changed from the previous state. - * Can be used to determine if the current state is "dirty". - * @param propertySelector Function that takes a state and returns which properties should be compared - */ - protected checkStateModified( - propertySelector: (state: TState) => Object, - ): boolean { - if (!this._previousState) { - return false; - } - - return !isEqual( - propertySelector(this.state$.getValue()), - propertySelector(this._previousState), - ); - } -} diff --git a/apps/design-tokens-ui/src/services/style-overrides/index.ts b/apps/design-tokens-ui/src/services/style-overrides/index.ts deleted file mode 100644 index 66ec555679..0000000000 --- a/apps/design-tokens-ui/src/services/style-overrides/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './style-overrides.service'; diff --git a/apps/design-tokens-ui/src/services/style-overrides/style-overrides.service.ts b/apps/design-tokens-ui/src/services/style-overrides/style-overrides.service.ts deleted file mode 100644 index d43c7bde74..0000000000 --- a/apps/design-tokens-ui/src/services/style-overrides/style-overrides.service.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Injectable, Inject } from '@angular/core'; -import { DOCUMENT } from '@angular/common'; - -/** - * Utility for live overwriting styles in the UI - */ -@Injectable({ - providedIn: 'root', -}) -export class StyleOverridesService { - private _overrideStyleElement: HTMLStyleElement; - - constructor(@Inject(DOCUMENT) private _document: Document) { - let styleElement = this._document.createElement('style'); - styleElement.appendChild(this._document.createTextNode('')); - this._document.head.appendChild(styleElement); - - this._overrideStyleElement = styleElement; - } - - /** Overrides a color in a given palette in the UI */ - addColorOverride( - themeName: string, - colorName: string, - colorValue: string, - ): void { - // Any type is used since the StyleSheet type is incomplete - const overrideStyleSheet: any = this._overrideStyleElement.sheet; - const cssRules: CSSRuleList = overrideStyleSheet.cssRules; - - this.removeColorOverride(themeName, colorName); - - overrideStyleSheet.insertRule( - `.fluid-theme--${themeName} { --color-${colorName}: ${colorValue}; }`, - cssRules.length, - ); - } - - /** Restores the original color in the UI */ - removeColorOverride(themeName: string, colorName: string): void { - const overrideStyleSheet: any = this._overrideStyleElement.sheet; - const cssRules: CSSRuleList = overrideStyleSheet.cssRules; - - const rule = `.fluid-theme--${themeName} { --color-${colorName}:`; - for (let i = 0; i < cssRules.length; i++) { - if (cssRules.item(i)!.cssText.startsWith(rule)) { - overrideStyleSheet.deleteRule(i); - } - } - } -} diff --git a/apps/design-tokens-ui/src/styles.scss b/apps/design-tokens-ui/src/styles.scss deleted file mode 100644 index 58801e162a..0000000000 --- a/apps/design-tokens-ui/src/styles.scss +++ /dev/null @@ -1,84 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import '../../../libs/shared/design-tokens/generated/global/palette'; -@import '../../../libs/shared/design-tokens/generated/global/theme'; -@import './styles/link'; -@import './styles/input'; -@import './styles/fonts'; -@import './styles/variables'; -@import './styles/overrides/select'; -@import './styles/overrides/checkbox'; - -*, -*::before, -*::after { - box-sizing: inherit; -} - -html { - box-sizing: border-box; - width: 100vw; - height: 100vh; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; -} - -body { - width: 100vw; - height: 100vh; - margin: 0; - padding: 0; - color: var(--color-maxcontrast); -} - -h1, -h2, -h3, -h4, -h5, -h6, -input, -label { - color: var(--color-maxcontrast); - font-family: 'Roboto', sans-serif; - font-weight: 400; -} - -h1 { - font-size: 40px; - font-weight: 500; - margin: $fluid-spacing--large 0; -} - -h2 { - font-size: 25px; - margin: $fluid-spacing--large 0; -} - -h3 { - font-size: 20px; - margin: $fluid-spacing--large 0; - font-weight: 700; -} - -body, -input, -label { - font-size: 16px; - letter-spacing: 0.01em; -} diff --git a/apps/design-tokens-ui/src/styles/fonts.scss b/apps/design-tokens-ui/src/styles/fonts.scss deleted file mode 100644 index 5d8dff9630..0000000000 --- a/apps/design-tokens-ui/src/styles/fonts.scss +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@font-face { - font-family: 'Roboto'; - src: url('/assets/fonts/Roboto-Regular.woff2') format('woff2'); - font-weight: 400; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('/assets/fonts/Roboto-Medium.woff2') format('woff2'); - font-weight: 500; - font-display: swap; -} - -@font-face { - font-family: 'Roboto'; - src: url('/assets/fonts/Roboto-Bold.woff2') format('woff2'); - font-weight: 700; - font-display: swap; -} diff --git a/apps/design-tokens-ui/src/styles/input.scss b/apps/design-tokens-ui/src/styles/input.scss deleted file mode 100644 index 5a213966fa..0000000000 --- a/apps/design-tokens-ui/src/styles/input.scss +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.design-tokens-ui-input { - --color: var(--color-maxcontrast); - --color-line-unfocused: var(--color-neutral-100); - --color-line-invalid: var(--color-error-100); - - background: transparent; - color: var(--color); - font-weight: 700; - outline: none; - border: none; - transition: text-decoration-color ease-out 100ms; - text-decoration: underline; - text-underline-offset: 5px; - text-decoration-color: var(--color-line-unfocused); - - &:focus { - text-decoration-color: var(--color); - } - - /* stylelint-disable selector-class-pattern */ - &:invalid, - &.ng-invalid { - /* stylelint-enable selector-class-pattern */ - text-decoration-color: var(--color-line-invalid); - } -} diff --git a/apps/design-tokens-ui/src/styles/link.scss b/apps/design-tokens-ui/src/styles/link.scss deleted file mode 100644 index ded200b5a4..0000000000 --- a/apps/design-tokens-ui/src/styles/link.scss +++ /dev/null @@ -1,71 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import './variables'; - -.design-tokens-ui-link { - color: var(--color); - text-decoration: none; - transition: text-decoration ease-out 100ms; - - &:hover, - &:active { - color: var(--color-dark); - text-decoration: underline; - } -} - -.design-tokens-ui-basic-link { - color: inherit; - text-decoration: none; - transition: text-decoration ease-out 100ms; -} - -.design-tokens-ui-back-link::before { - content: ' '; - display: inline-block; - width: 30px; - height: 30px; - mask-image: url('/assets/images/back-link-icon.svg'); - background-color: var(--color-maxcontrast); - background-position: center; - background-repeat: no-repeat; - vertical-align: -0.25em; - margin-right: $fluid-spacing--x-small; -} - -$external-link-icon-size: 1.06em; - -.design-tokens-ui-external { - &::after { - content: ' '; - display: inline-block; - position: relative; - bottom: -0.05em; - margin-left: 4px; - vertical-align: -0.1em; - width: $external-link-icon-size; - height: $external-link-icon-size; - - mask-image: url('/assets/images/external-link-icon.svg'); - background-color: var(--color); - } - - &:hover::after, - &:active::after { - background-color: var(--color-dark); - } -} diff --git a/apps/design-tokens-ui/src/styles/overrides/checkbox.scss b/apps/design-tokens-ui/src/styles/overrides/checkbox.scss deleted file mode 100644 index 2ccce2c5d4..0000000000 --- a/apps/design-tokens-ui/src/styles/overrides/checkbox.scss +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.dt-checkbox-content { - color: var(--color-maxcontrast) !important; - font-family: 'Roboto', sans-serif !important; - font-size: 16px !important; -} - -.dt-checkbox-container { - border-color: var(--color-maxcontrast) !important; -} - -.dt-checkbox-icon svg { - stroke: var(--color-maxcontrast) !important; -} diff --git a/apps/design-tokens-ui/src/styles/overrides/select.scss b/apps/design-tokens-ui/src/styles/overrides/select.scss deleted file mode 100644 index 9f01e13c38..0000000000 --- a/apps/design-tokens-ui/src/styles/overrides/select.scss +++ /dev/null @@ -1,88 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -dt-select.dt-select { - background: transparent; - border: none; - color: var(--color-maxcontrast); - border-bottom: 2px solid transparent; - border-radius: 0; - transition: border-bottom-color ease-out 100ms; - font-size: 16px; - line-height: unset; - font-family: unset; - - .dt-select-arrow { - height: 28px !important; - } - - dt-icon svg { - fill: var(--color-maxcontrast) !important; - } - - &.cdk-focused { - outline: none !important; - border-bottom-color: var(--color-maxcontrast) !important; - } -} - -.dt-select-panel { - margin-top: 4px; - background: rgba( - $color: $fluid-color-surface-background, - $alpha: 0.6 - ) !important; - border: none !important; - border-radius: 0 !important; - max-height: 400px !important; - backdrop-filter: blur(0.3rem); -} - -dt-option.dt-option { - color: $fluid-color-surface-maxcontrast; - background: transparent; - padding: $fluid-spacing--small; - transition: background-color ease-out 100ms; - font-size: 1rem; - - &.dt-option-active, - &:hover { - background: rgba( - $color: $fluid-color-surface-background, - $alpha: 0.8 - ) !important; - } -} - -.fluid-theme--surface { - .dt-select-panel { - border: 1px solid $fluid-color-surface-neutral-80 !important; - background: rgba( - $color: $fluid-color-surface-background, - $alpha: 0.7 - ) !important; - } - - dt-option.dt-option { - &.dt-option-active, - &:hover { - background: rgba( - $color: $fluid-color-surface-neutral-60, - $alpha: 0.9 - ) !important; - } - } -} diff --git a/apps/design-tokens-ui/src/styles/variables.scss b/apps/design-tokens-ui/src/styles/variables.scss deleted file mode 100644 index ba78a22f60..0000000000 --- a/apps/design-tokens-ui/src/styles/variables.scss +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -@import '../../../../libs/shared/design-tokens/generated/global/spacing'; -@import '../../../../libs/shared/design-tokens/generated/global/palette'; diff --git a/apps/design-tokens-ui/src/test-setup.ts b/apps/design-tokens-ui/src/test-setup.ts deleted file mode 100644 index f993bfeef7..0000000000 --- a/apps/design-tokens-ui/src/test-setup.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import 'jest-preset-angular'; diff --git a/apps/design-tokens-ui/src/utils/colors.ts b/apps/design-tokens-ui/src/utils/colors.ts deleted file mode 100644 index 8ff41d9a68..0000000000 --- a/apps/design-tokens-ui/src/utils/colors.ts +++ /dev/null @@ -1,52 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - luminance, - generateContrastColors, -} from '@adobe/leonardo-contrast-colors'; -import { rgb } from 'd3-color'; -import { FluidPaletteSourceAlias } from '@dynatrace/shared/design-system/interfaces'; - -/** Luminance threshold when at which a dark text color should be used */ -const TEXT_COLOR_LUMINANCE_THRESHOLD = 0.45; - -/** Generates contrast colors with Adobe Leonardo for the given options */ -export function generatePaletteContrastColors( - paletteSource: FluidPaletteSourceAlias, -): string[] { - return generateContrastColors({ - base: paletteSource.baseColor, - colorKeys: Array.isArray(paletteSource.keyColor) - ? paletteSource.keyColor - : [paletteSource.keyColor], - colorspace: paletteSource.colorspace, - ratios: paletteSource.shades.map((shade) => shade.ratio), - }); -} - -/** Returns a readable text color based on the luminance of the given background color. */ -export function getTextColorOnBackground(bgColor: string): string { - const { r, g, b } = rgb(bgColor); - return luminance(r, g, b) > TEXT_COLOR_LUMINANCE_THRESHOLD - ? 'black' - : 'white'; -} - -/** Returns a color that is a bit darker than the input color. */ -export function getDarkerColor(color: string, amount: number = 1): string { - return rgb(color).darker(amount).hex(); -} diff --git a/apps/design-tokens-ui/src/utils/download.ts b/apps/design-tokens-ui/src/utils/download.ts deleted file mode 100644 index 0ecc650994..0000000000 --- a/apps/design-tokens-ui/src/utils/download.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export function downloadStringAsTextFile( - fileName: string, - text: string, - doc: Document, -): void { - const element = doc.createElement('a'); - element.setAttribute( - 'href', - `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`, - ); - element.setAttribute('download', fileName); - - element.style.display = 'none'; - doc.body.appendChild(element); - - element.click(); - - doc.body.removeChild(element); -} diff --git a/apps/design-tokens-ui/src/utils/theme.ts b/apps/design-tokens-ui/src/utils/theme.ts deleted file mode 100644 index dbcf6840f8..0000000000 --- a/apps/design-tokens-ui/src/utils/theme.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** Whether the theme is set to dark in the operating system settings */ -export function userPrefersDarkTheme(): boolean { - if (!window.matchMedia) { - // Use dark theme by default - return true; - } - return window.matchMedia('(prefers-color-scheme: dark)').matches; -} diff --git a/apps/design-tokens-ui/tsconfig.app.json b/apps/design-tokens-ui/tsconfig.app.json deleted file mode 100644 index e9fa6dfd93..0000000000 --- a/apps/design-tokens-ui/tsconfig.app.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "types": [] - }, - "files": ["src/main.ts", "src/polyfills.ts"] -} diff --git a/apps/design-tokens-ui/tsconfig.json b/apps/design-tokens-ui/tsconfig.json deleted file mode 100644 index 7a2d574e18..0000000000 --- a/apps/design-tokens-ui/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "types": ["node", "jest"], - "resolveJsonModule": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/apps/design-tokens-ui/tsconfig.spec.json b/apps/design-tokens-ui/tsconfig.spec.json deleted file mode 100644 index cfff29a544..0000000000 --- a/apps/design-tokens-ui/tsconfig.spec.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/apps/design-tokens-ui/tslint.json b/apps/design-tokens-ui/tslint.json deleted file mode 100644 index fc8b3a5b5a..0000000000 --- a/apps/design-tokens-ui/tslint.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../tslint.json", - "rules": { - "directive-selector": [true, "attribute", "designTokensUi", "camelCase"], - "component-selector": [true, "element", "design-tokens-ui", "kebab-case"] - }, - "linterOptions": { - "exclude": ["!**/*"] - } -} diff --git a/apps/figma-design-tokens/BUILD.bazel b/apps/figma-design-tokens/BUILD.bazel deleted file mode 100644 index 33142d163d..0000000000 --- a/apps/figma-design-tokens/BUILD.bazel +++ /dev/null @@ -1,101 +0,0 @@ -load("@npm//@bazel/typescript:index.bzl", "ts_library", "ts_config") -load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") -load("//tools/bazel_rules:index.bzl", "figma_bundle", "figma_plugin") -load("@npm//@bazel/rollup:index.bzl", "rollup_bundle") -load("@npm//@bazel/terser:index.bzl", "terser_minified") - -package(default_visibility = ["//:__subpackages__"]) - -# Allow any ts_library rules in this workspace to reference the config -exports_files( - [ - "tsconfig.json", - "rollup.config.js", - "manifest.json", - ], - visibility = ["//apps/figma-design-tokens:__subpackages__"], -) - -sass_binary( - name = "styles", - src = "src/styles.scss", - include_paths = ["node_modules"], - sourcemap = False, -) - -ts_config( - name = "tsconfig", - src = "tsconfig.json", - deps = [ - "//libs/barista-components:tsconfig", - ], -) - -ts_library( - name = "compile", - srcs = glob(["src/**/*.ts"]), - deps = [ - "@npm//@figma/plugin-typings", - "//libs/shared/design-tokens", - "@npm//axios", - "@npm//tslib", - "@npm//lit-element", - ], - tsconfig = "tsconfig" -) - -rollup_bundle( - name = "bundle_code", - deps = [ - ":compile", - "@npm//tslib", - "@npm//@rollup/plugin-node-resolve", - "@npm//@rollup/plugin-commonjs", - "@npm//@rollup/plugin-json", - "@npm//@rollup/plugin-replace", - ], - entry_point = "src/code.ts", - config_file = "rollup.config.js", - sourcemap = "false", -) - -terser_minified( - name = "minify_code", - src = ":bundle_code", - sourcemap = False -) - -rollup_bundle( - name = "bundle_worker_js", - deps = [ - ":compile", - "@npm//tslib", - "@npm//@rollup/plugin-node-resolve", - "@npm//@rollup/plugin-commonjs", - "@npm//@rollup/plugin-json", - ], - entry_point = "src/worker.ts", - config_file = "rollup.config.js", - sourcemap = "false", -) - -terser_minified( - name = "minify_worker_js", - src = ":bundle_worker_js", - sourcemap = False -) - -figma_bundle( - name = "build_worker", - srcs = [ - ":minify_worker_js", - ":styles", - ], -) - -figma_plugin( - name = "figma-design-tokens", - manifest_json = ":manifest.json", - code_js = ":minify_code", - worker_html = ":build_worker", -) diff --git a/apps/figma-design-tokens/README.md b/apps/figma-design-tokens/README.md deleted file mode 100644 index 68f020b722..0000000000 --- a/apps/figma-design-tokens/README.md +++ /dev/null @@ -1,87 +0,0 @@ -# Design Tokens Figma plugin - -The Design Tokens Figma plugin allows switching between themes automatically. It -also allows importing -[design tokens](https://github.com/dynatrace-oss/barista/tree/master/libs/shared/design-tokens/generated) -into Figma team library documents. - -## Build - -Run `bazel build //apps/figma-plugin` - -## Publishing - -See -[the Figma documentation](https://help.figma.com/hc/en-us/articles/360042293394-Publish-a-plugin-to-the-Community). - -## Installation - -The plugin can be installed in the "Plugins" section of Figma's home page. The -Design Tokens team library should be imported into any documents where this -plugin will be used. - -## Theme switching - -You can switch themes by selecting one or more Figma frames or components and -running _Plugins - Design Tokens - Set theme to [theme name]_ in the context -menu (make sure that the right color styles starting with "abyss/" or "surface/" -are used). - -After the theme of an object has been changed for the first time, the plugin -will add buttons for fast theme switching to this object. These buttons will -also be added to all object that are located directly in the root level of any -page. - -The theme switching function downloads data when it's used for the first time in -a document. It works offline after this initial download. - -If you're experiencing issues, try running _Plugins - Design Tokens - Advanced - -Clear cached styles_ in the context menu before using the theme switching -options while you're online. - -## Administration - -This section describes functionality for team library authors. Other users can -get access to design tokens by importing the "Design Tokens" team library. - -### Importing design tokens to the team library - -You can automatically import design tokens from the repository by running -_Plugins - Design Tokens - Admin - Import tokens and upload styles_ in the -context menu. You will need to confirm that you want to upload the styles from -the current document (due to a limitation in Figma's plugin API, plugins cannot -query which document they are executed in). - -This should only be done by team library authors in the document that contains -the Design Tokens team library. Please read the instructions carefully. - -You can run this command again later to add tokens that have been newly created -and update existing ones. - -If tokens that were imported previously have been deleted in the repository, you -will get a notification message after the download. Deleted color tokens will -also be changed to a pink and yellow gradient and typography tokens will be -changed to bold Comic Sans MS to make finding usages of deleted tokens easier. - -### Migration - -Documents with the older non-compatible color naming convention can be migrated -for theme switching support with the following steps: - -1. Make a backup copy of the document -2. Run _Plugins - Design Tokens - Admin - Migrate color names_ -3. Check if the color styles have been renamed correctly -4. Run _Plugins - Design Tokens - Admin - Import tokens and upload styles_ -5. Check if the color and and typography tokens have been imported correctly and - make sure that theme switching works in the current document -6. If everything worked, publish the changes to the team library in the Figma UI - -Typography tokens must be renamed according to the design tokens manually if -automatic synchronization is desired. - -## Other features - -The theme switching buttons in the "Plugin" section of the right bar won't show -up automatically after adding new objects due to a limitation in Figma's API. -They can be added manually to every top-level object by running _Plugins - -Design Tokens - Add plugin buttons_ (or any other option) in the context menu. diff --git a/apps/figma-design-tokens/manifest.json b/apps/figma-design-tokens/manifest.json deleted file mode 100644 index ba51246bcf..0000000000 --- a/apps/figma-design-tokens/manifest.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "name": "Design Tokens", - "id": "873122287503778713", - "api": "1.0.0", - "main": "code.js", - "ui": "worker.html", - "menu": [ - { "name": "Set theme to Abyss", "command": "set-theme:abyss" }, - { "name": "Set theme to Surface", "command": "set-theme:surface" }, - { "separator": true }, - - { "name": "Add plugin buttons", "command": "noop" }, - { "separator": true }, - - { - "name": "Admin", - "menu": [ - { - "name": "Import tokens and upload styles", - "command": "sync-publish" - }, - { "name": "Migrate color names", "command": "migrate" } - ] - }, - { - "name": "Advanced", - "menu": [ - { "name": "Clear cached tokens", "command": "dev:clear-cache" }, - { "name": "Delete color tokens", "command": "dev:delete-color-tokens" }, - { "name": "Only import tokens", "command": "sync" }, - { "name": "Only upload local styles", "command": "publish" } - ] - } - ], - "relaunchButtons": [ - { - "command": "set-theme:abyss", - "name": "Set theme to Abyss", - "multipleSelection": true - }, - { - "command": "set-theme:surface", - "name": "Set theme to Surface", - "multipleSelection": true - } - ] -} diff --git a/apps/figma-design-tokens/rollup.config.js b/apps/figma-design-tokens/rollup.config.js deleted file mode 100644 index 9d43bec8e4..0000000000 --- a/apps/figma-design-tokens/rollup.config.js +++ /dev/null @@ -1,24 +0,0 @@ -import resolve from '@rollup/plugin-node-resolve'; -import commonjs from '@rollup/plugin-commonjs'; -import json from '@rollup/plugin-json'; -import replace from '@rollup/plugin-replace'; - -import { config as dotenvConfig } from 'dotenv'; -import { env } from 'process'; - -dotenvConfig(); - -export default { - plugins: [ - resolve({ - jsnext: true, - preferBuiltins: true, - browser: true, - }), - json(), - commonjs(), - replace({ - 'ENV.JSON_BIN_SECRET_KEY': env.JSON_BIN_SECRET_KEY, - }), - ], -}; diff --git a/apps/figma-design-tokens/src/code.ts b/apps/figma-design-tokens/src/code.ts deleted file mode 100644 index 0c15fea7fd..0000000000 --- a/apps/figma-design-tokens/src/code.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// Main entrypoint -import { dispatchCommand } from './command-dispatcher'; -import { createDefaultRelaunchData } from './shared/figma-util'; - -// Handle the command (see manifest.json) -dispatchCommand(figma.command) - .then(() => figma.closePlugin()) - .catch((error) => { - console.error('Plugin terminated with error: ', error); - alert(`Error: ${error.message}`); - figma.closePlugin(); - }); - -// Create default plugin buttons for the "Plugin" sidebar -createDefaultRelaunchData(); diff --git a/apps/figma-design-tokens/src/command-dispatcher.ts b/apps/figma-design-tokens/src/command-dispatcher.ts deleted file mode 100644 index 17e8a8517f..0000000000 --- a/apps/figma-design-tokens/src/command-dispatcher.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import SyncCommandHandler from './command-handlers/sync'; -import SetThemeCommandHandler from './command-handlers/set-theme'; -import MigrateCommandHandler from './command-handlers/migrate'; - -import DeleteColorTokensCommandHandler from './command-handlers/dev/delete-color-tokens'; -import ClearCacheCommandHandler from './command-handlers/dev/clear-cache'; -import PublishCommandHandler from './command-handlers/publish'; - -/** Dispatch a command from manifest.json */ -export async function dispatchCommand(command: string): Promise { - return getCommandHandler(command)(); -} - -/** @internal Get a command handler by command name */ -function getCommandHandler(command: string): CommandHandler { - switch (command) { - case 'sync': - return SyncCommandHandler; - case 'publish': - return PublishCommandHandler; - case 'sync-publish': - return createCombinedHandler(SyncCommandHandler, PublishCommandHandler); - case 'set-theme:surface': - return SetThemeCommandHandler('surface'); - case 'set-theme:abyss': - return SetThemeCommandHandler('abyss'); - case 'migrate': - return MigrateCommandHandler; - case 'dev:delete-color-tokens': - return DeleteColorTokensCommandHandler; - case 'dev:clear-cache': - return ClearCacheCommandHandler; - default: - return () => Promise.resolve(); - } -} - -/** @internal Combines multiple command handlers to be executed one after another. */ -function createCombinedHandler( - ...commandHandlers: CommandHandler[] -): CommandHandler { - return async () => { - for (const handler of commandHandlers) { - await handler(); - } - }; -} diff --git a/apps/figma-design-tokens/src/command-handlers/dev/clear-cache.ts b/apps/figma-design-tokens/src/command-handlers/dev/clear-cache.ts deleted file mode 100644 index 54875735a0..0000000000 --- a/apps/figma-design-tokens/src/command-handlers/dev/clear-cache.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - clearCachedTokens, - clearCachedRemoteStyles, - clearLastRemoteStyleFetchDate, -} from '../../shared/storage'; - -/** Clears the cached tokens. */ -export default async function run(): Promise { - clearCachedTokens(); - clearCachedRemoteStyles(); - clearLastRemoteStyleFetchDate(); -} diff --git a/apps/figma-design-tokens/src/command-handlers/dev/delete-color-tokens.ts b/apps/figma-design-tokens/src/command-handlers/dev/delete-color-tokens.ts deleted file mode 100644 index 556d50467e..0000000000 --- a/apps/figma-design-tokens/src/command-handlers/dev/delete-color-tokens.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** Removes imported color design tokens from the document. */ -export default async function run(): Promise { - const designTokensPaintStyles = figma - .getLocalPaintStyles() - .filter( - (style) => - style.name.startsWith('surface/') || style.name.startsWith('abyss/'), - ); - - for (const style of designTokensPaintStyles) { - style.remove(); - } - - alert( - `Deleted ${designTokensPaintStyles.length} imported colors (you can undo this with Ctrl/Cmd+Z).`, - ); -} diff --git a/apps/figma-design-tokens/src/command-handlers/migrate.ts b/apps/figma-design-tokens/src/command-handlers/migrate.ts deleted file mode 100644 index 9b56520442..0000000000 --- a/apps/figma-design-tokens/src/command-handlers/migrate.ts +++ /dev/null @@ -1,71 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -const themeMappings: { [key: string]: string } = { - Light: 'surface', - Dark: 'abyss', -}; - -const paletteMappings: { [key: string]: string } = { - Orange: 'nasty-orange', - Pink: 'hot-pink', - Turquoise: 'soylent-green', - Purple: 'naughty-purple', -}; - -const baseColorMappings: { [key: string]: string } = { - Base: 'background', - Text: 'maxcontrast', -}; - -/** - * Automatically migrates color styles with another naming convention - * (e.g. Dark/Purple) to one compatible with design tokens (e.g. abyss/naughty-purple). - */ -export default async function run(): Promise { - for (const style of figma.getLocalPaintStyles()) { - const themeAndName = style.name.split('/'); - if (themeAndName.length !== 2) { - continue; - } - - const [theme, colorName] = themeAndName; - const [paletteOrBaseColor, shade] = colorName.split('-'); - if (!paletteOrBaseColor) { - continue; - } - - const newThemeName = themeMappings[theme]; - if (!newThemeName) { - continue; - } - - if (shade) { - // The color is a "normal" palette color - const newPaletteName = - paletteMappings[paletteOrBaseColor] || paletteOrBaseColor.toLowerCase(); - style.name = `${newThemeName}/${newPaletteName}-${shade}`; - } else { - // The color is a base color - const newBaseColorName = baseColorMappings[paletteOrBaseColor]; - if (!newBaseColorName) { - continue; - } - - style.name = `${newThemeName}/${newBaseColorName}`; - } - } -} diff --git a/apps/figma-design-tokens/src/command-handlers/publish.ts b/apps/figma-design-tokens/src/command-handlers/publish.ts deleted file mode 100644 index 3a0462ae0b..0000000000 --- a/apps/figma-design-tokens/src/command-handlers/publish.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { createWorkerWithUI, uploadStyleMetadata } from '../shared/ipc'; - -/** - * Publishes the local styles to JSONBin. - * We need to do this since Figma doesn't allow reading remote team libraries. - */ -export default async function run(): Promise { - createWorkerWithUI(); // The user is asked to confirm this in a UI. - const allStyles = (await getLibraryStyles()).map(getStyleMetadataForUpload); - - const styleMetadata = { - paintStyles: allStyles.filter((style) => style.type === 'PAINT'), - textStyles: allStyles.filter((style) => style.type === 'TEXT'), - effectStyles: allStyles.filter((style) => style.type === 'EFFECT'), - gridStyles: allStyles.filter((style) => style.type === 'GRID'), - }; - - await uploadStyleMetadata(styleMetadata); -} - -/** Fetches a list of all styles in a team library */ -async function getLibraryStyles(): Promise { - const allStyles = [ - ...figma.getLocalPaintStyles(), - ...figma.getLocalTextStyles(), - ...figma.getLocalEffectStyles(), - ...figma.getLocalGridStyles(), - ]; - - return allStyles; -} - -/** Converts a Figma BaseStyle to StyleMetadata for upload */ -function getStyleMetadataForUpload(style: BaseStyle): StyleMetadata { - const { id, type, name, description, key } = style; - return { id, type, name, description, key, remote: true }; -} diff --git a/apps/figma-design-tokens/src/command-handlers/set-theme.ts b/apps/figma-design-tokens/src/command-handlers/set-theme.ts deleted file mode 100644 index dd7aaa4633..0000000000 --- a/apps/figma-design-tokens/src/command-handlers/set-theme.ts +++ /dev/null @@ -1,257 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - addThemeRelaunchDataToNode, - isContainerNode, - isGeometryNode, -} from '../shared/figma-util'; -import { createWorker, fetchStyleMetadata } from '../shared/ipc'; -import { - setCachedRemoteStyles, - getCachedRemoteStyles, - getLastRemoteStyleFetchTime, - setLastRemoteStyleFetchTime, -} from '../shared/storage'; - -const ALL_THEMES = ['abyss', 'surface']; -const MIN_TIME_SINCE_LAST_FETCH = 3 * 60 * 60 * 1000; // 3 hours - -/** - * Factory function for a command handler that switches to the given theme. - * @param themeName The theme name to create a command handler for - */ -export default function createHandler(themeName: string): CommandHandler { - return async () => applyTheme(themeName); -} - -/** - * Changes the color references of selected container object to the given theme. - * @param themeName Name of the theme to switch to - */ -export async function applyTheme(themeName: string): Promise { - // Applying themes should be restricted to frames instead of individual elements. - const selectedFrames = figma.currentPage.selection.filter( - isContainerNode, - ) as FrameNode[]; - - if (selectedFrames.length <= 0) { - alert('Please select one or more frames to change their theme.'); - return; - } - - await downloadRemoteStyles(); - - const remotePaintStyles = getCachedRemoteStyles()?.paintStyles ?? []; - const paintStyles = [...figma.getLocalPaintStyles(), ...remotePaintStyles]; - - const styleIdReplacementCache = new Map(); - for (const node of selectedFrames) { - await applyThemeToNode( - themeName, - node, - paintStyles, - styleIdReplacementCache, - ); - addThemeRelaunchDataToNode(node); // Add a button for theme toggling once we've set a theme - } -} - -/** - * @internal - * Applies the theme with the given name to the node and all its children. - * @param themeName The name of the target theme - * @param node The current node - * @param paintStyles All local paint styles provided by the Figma API - * @param styleIdReplacementCache Cached ID mappings (old palette ID -> new palette ID) - */ -async function applyThemeToNode( - themeName: string, - node: SceneNode, - paintStyles: StyleMetadata[], - styleIdReplacementCache: Map, -): Promise { - if (isGeometryNode(node)) { - const geometryNode = node as GeometryMixin; - - if (geometryNode.fillStyleId != figma.mixed) { - // The node uses a single fill style, so we can replace it directly - geometryNode.fillStyleId = await getReplacementStyle( - themeName, - geometryNode.fillStyleId, - paintStyles, - styleIdReplacementCache, - ); - } else if (node.type === 'TEXT') { - // The node is a text node with multiple text colors, so special handling is required - await applyThemeToMixedColorText( - themeName, - geometryNode as TextNode, - paintStyles, - styleIdReplacementCache, - ); - } - - geometryNode.strokeStyleId = await getReplacementStyle( - themeName, - geometryNode.strokeStyleId, - paintStyles, - styleIdReplacementCache, - ); - } - - const containerNode = node as ChildrenMixin; - if (containerNode.children) { - for (const child of containerNode.children) { - await applyThemeToNode( - themeName, - child, - paintStyles, - styleIdReplacementCache, - ); - } - } -} - -/** @internal Applies a theme to a text node with multiple text colors. */ -async function applyThemeToMixedColorText( - themeName: string, - node: TextNode, - paintStyles: StyleMetadata[], - styleIdReplacementCache: Map, -): Promise { - // Figma doesn't have an API that allows retrieving all the text ranges with different - // colors and their positions at once, so we need to test each character individually. - const stringLength = node.characters.length; - - for (let start = 0; start < stringLength - 1; start++) { - // Loop from the range start position to the end of the string - // or the end of the color range - for (let end = start + 1; end <= stringLength; end++) { - // Check one character after our range. If the return value is "figma.mixed", - // we know that we've hit the end of our range since there's more than one color in it. - const outerRangeFillStyleId = node.getRangeFillStyleId( - start, - Math.min(end + 1, stringLength), - ); - - if (outerRangeFillStyleId === figma.mixed || end === stringLength) { - // This should return a single color ID, but let's safety check to prevent errors - const rangeFillStyleId = node.getRangeFillStyleId(start, end); - if (rangeFillStyleId !== figma.mixed) { - const newStyleId = await getReplacementStyle( - themeName, - rangeFillStyleId, - paintStyles, - styleIdReplacementCache, - ); - node.setRangeFillStyleId(start, end, newStyleId); - } - - // Continue at the start of the next range - start = end - 1; - break; - } - } - } -} - -/** @internal Get the color style ID to replace the given color style with */ -async function getReplacementStyle( - targetThemeName: string, - currentStyleId: string, - paintStyles: StyleMetadata[], - styleIdReplacementCache: Map, -): Promise { - if (!currentStyleId) { - // Bail out if the source ID is falsy - return currentStyleId; - } - - // Use the cached style ID mapping if available - const cachedStyle = styleIdReplacementCache.get(currentStyleId); - if (cachedStyle) { - return cachedStyle; - } - - // HACK: If a remote style is used, there's extra local information encoded in the style ID. - // However, the string starts with the same contents as the remote style ID so we can still match it. - const currentStyle = paintStyles.find((style) => - currentStyleId.startsWith(style.id), - ); - if (!currentStyle) { - return currentStyleId; - } - - const [themeName, colorName] = currentStyle.name.split('/'); - if (themeName && colorName) { - if (ALL_THEMES.includes(themeName)) { - const newStyleData = paintStyles.find( - (style) => style.name === `${targetThemeName}/${colorName}`, - ); - let newStyle: PaintStyle | undefined; - if (newStyleData?.remote) { - newStyle = (await figma.importStyleByKeyAsync( - newStyleData.key, - )) as PaintStyle; - } else { - newStyle = newStyleData as PaintStyle; - } - - if (newStyle) { - // The mapping from the source style ID to the target style ID is cached to prevent searching - // for it in the paint styles, and more importantly, avoid very expensive C++ string to - // JS string conversions that occur when accessing string properties in the Plugin API. - // Caching is safe since the user cannot modify the document while the plugin is running. - styleIdReplacementCache.set(currentStyleId, newStyle.id); - return newStyle.id; - } - } - } - - return currentStyleId; -} - -/** - * @internal Ensures that a fairly recent version of the remote styles - * is available in the cache. - */ -async function downloadRemoteStyles(): Promise { - // Download the remote style data periodically since we can't run code when - // the user opens a document. We want to avoid redownloading it on every - // theme switch because it locks the UI for the duration of the request. - const lastFetchDate = new Date(getLastRemoteStyleFetchTime() ?? 0); - const cachedRemoteStyles = getCachedRemoteStyles(); - if ( - !cachedRemoteStyles || - Date.now() - lastFetchDate.getTime() > MIN_TIME_SINCE_LAST_FETCH - ) { - try { - createWorker(); - const remoteStyles = await fetchStyleMetadata(); - setCachedRemoteStyles(remoteStyles); - setLastRemoteStyleFetchTime(new Date()); - } catch (err) { - if (!cachedRemoteStyles) { - alert( - 'Initial download of remote styles failed. Please make sure that ' + - 'you are online (you can go offline after this initial download.)', - ); - } - // We can ignore the else case since an older remote version is available. - } - } -} diff --git a/apps/figma-design-tokens/src/command-handlers/sync.ts b/apps/figma-design-tokens/src/command-handlers/sync.ts deleted file mode 100644 index afcea858ba..0000000000 --- a/apps/figma-design-tokens/src/command-handlers/sync.ts +++ /dev/null @@ -1,237 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { setCachedTokens, getCachedTokens } from '../shared/storage'; -import { - htmlToFigmaColor, - getFirstAvailableFontFromFamily, - cssSizeToPixels, - cssToFigmaLineHeight, - cssToFigmaTextTransform, - designTokenToFigmaColorName, -} from '../shared/conversion'; -import { createWorker, fetchTokens } from '../shared/ipc'; - -/** Synchronizes design tokens from GitHub. */ -export default async function run(): Promise { - createWorker(); - - try { - await synchronizeTokens(await fetchTokens()); - } catch (error) { - alert(`An error occured, please check your connection: ${error.message}`); - } -} - -/** @internal Updates the figma styles to match the newly downloaded design tokens. */ -async function synchronizeTokens(newTokens: TokenStoreModel): Promise { - const previousTokens = getCachedTokens(); - let deletedTokens: TokenStoreModel | undefined = undefined; - if (previousTokens) { - deletedTokens = findDeletedTokens(previousTokens, newTokens); - } - - setCachedTokens(newTokens); - - await applyPalettes(newTokens.palettes); - await applyTypography(newTokens.typography); - - if (deletedTokens) { - const deletedTokenNames = Object.keys({ - ...deletedTokens.palettes, - ...deletedTokens.typography, - }); - - if (deletedTokenNames.length > 0) { - await markDeletedPalettes(deletedTokens.palettes); - await markDeletedTypography(deletedTokens.typography); - - alert( - `${ - deletedTokenNames.length - } tokens were deleted:\n${deletedTokenNames.join(', ')} ` + - '\n\nDeleted colors have been marked with pink and yellow gradients.' + - '\nDeleted typography tokens have been marked with Comic Sans MS.', - ); - } - } -} - -/** @internal Updates the paint styles in the document to match color tokens */ -async function applyPalettes(palettes: DesignTokenMap): Promise { - const paintStyles = figma.getLocalPaintStyles(); - - for (const [name, palette] of Object.entries(palettes)) { - const targetName = designTokenToFigmaColorName(name); - let paintStyle = paintStyles.find((style) => style.name === targetName); - if (!paintStyle) { - paintStyle = figma.createPaintStyle(); - paintStyle.name = targetName; - } - - paintStyle.description = palette.meta?.friendlyName ?? ''; - - paintStyle.paints = [ - { type: 'SOLID', color: htmlToFigmaColor(palette.value as string) }, - ]; - } -} - -/** @internal Updates the text styles in the document to match typography tokens */ -async function applyTypography( - typographyTokens: DesignTokenMap, -): Promise { - const textStyles = figma.getLocalTextStyles(); - const fonts = await figma.listAvailableFontsAsync(); - - const loadedFonts = new Set(); - - for (const [name, typeSettings] of Object.entries(typographyTokens)) { - let textStyle = textStyles.find((style) => style.name === name); - if (!textStyle) { - textStyle = figma.createTextStyle(); - textStyle.name = name; - } - - textStyle.description = typeSettings.comment ?? ''; - - const { - fontFamily, - fontSize, - fontWeight, - lineHeight, - textTransform, - } = typeSettings.value as any; - - const font = getFirstAvailableFontFromFamily(fontFamily, fonts, fontWeight); - if (font) { - const fontKey = `${font.fontName.family} ${font.fontName.style}`; - if (!loadedFonts.has(fontKey)) { - // Figma requires fonts to be loaded before accessing some properties - await figma.loadFontAsync(font.fontName); - - // Save loaded font names for improved performance - // (see https://www.figma.com/plugin-docs/api/properties/figma-loadfontasync/#remarks) - loadedFonts.add(fontKey); - } - - textStyle.fontName = font.fontName; - } - - // The Figma defaults are used if the conversion fails - textStyle.fontSize = cssSizeToPixels(fontSize) ?? textStyle.fontSize; - textStyle.lineHeight = - cssToFigmaLineHeight(lineHeight) ?? textStyle.lineHeight; - textStyle.textCase = - cssToFigmaTextTransform(textTransform) ?? textStyle.textCase; - } -} - -/** @internal Find deleted tokens by comparing the old and new state */ -function findDeletedTokens( - oldState: TokenStoreModel, - newState: TokenStoreModel, -): TokenStoreModel { - const missingTokenModel = {} as TokenStoreModel; - - for (const [type, tokens] of Object.entries(newState)) { - const newTokenNames = new Set(Object.keys(tokens)); - const missingTokens: DesignToken[] = []; - - for (const [name, token] of Object.entries(oldState[type])) { - if (!newTokenNames.has(name)) { - missingTokens.push(token); - } - } - - // Create a TokenStoreModel with the missing tokens per type - missingTokenModel[type] = missingTokens.reduce( - (acc: DesignTokenMap, curr) => { - acc[curr.name] = curr; - return acc; - }, - {}, - ); - } - return missingTokenModel; -} - -/** - * @internal - * Replaces colors that have been deleted in the design tokens with - * a conspicuous gradient. - */ -async function markDeletedPalettes( - deletedPalettes: DesignTokenMap, -): Promise { - const paintStyles = figma.getLocalPaintStyles(); - - for (const name of Object.keys(deletedPalettes)) { - const targetName = designTokenToFigmaColorName(name); - let paintStyle = paintStyles.find((style) => style.name === targetName); - if (!paintStyle) { - continue; - } - - const gradientAngle = (45 * Math.PI) / 180; // 45° in radians - const pink = { r: 1, g: 0, b: 0.5, a: 1 }; - const yellow = { r: 1, g: 1, b: 0, a: 1 }; - paintStyle.paints = [ - { - type: 'GRADIENT_LINEAR', - gradientTransform: [ - // Rotation matrix - [Math.cos(gradientAngle), Math.sin(gradientAngle), 0], - [-Math.sin(gradientAngle), Math.cos(gradientAngle), 0], - ], - gradientStops: [ - { position: 0, color: pink }, - { position: 0.25, color: yellow }, - { position: 0.5, color: pink }, - { position: 0.75, color: yellow }, - { position: 1, color: pink }, - ], - }, - ]; - } -} - -/** - * @internal - * Replaces typography styles that have been deleted in the design tokens - * with a conspicuous font. - */ -async function markDeletedTypography( - deletedTypographyTokens: DesignTokenMap, -): Promise { - const tokenNames = Object.keys(deletedTypographyTokens); - if (tokenNames.length <= 0) { - return; - } - - const textStyles = figma.getLocalTextStyles(); - const comicSans = { family: 'Comic Sans MS', style: 'Bold' }; - await figma.loadFontAsync(comicSans); - - for (const name of Object.keys(deletedTypographyTokens)) { - let textStyle = textStyles.find((style) => style.name === name); - if (!textStyle) { - continue; - } - - textStyle.fontName = comicSans; - } -} diff --git a/apps/figma-design-tokens/src/components/loading-spinner.ts b/apps/figma-design-tokens/src/components/loading-spinner.ts deleted file mode 100644 index 3d8a4fd9f0..0000000000 --- a/apps/figma-design-tokens/src/components/loading-spinner.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - LitElement, - html, - customElement, - TemplateResult, - css, - CSSResult, -} from 'lit-element'; - -@customElement('loading-spinner') -export class LoadingSpinner extends LitElement { - // adapted from https://projects.lukehaas.me/css-loaders/ - static get styles(): CSSResult { - return css` - .loader, - .loader:after { - border-radius: 50%; - width: 10em; - height: 10em; - } - - .loader { - margin: 60px auto; - font-size: 10px; - position: relative; - text-indent: -9999em; - border: 1.1em solid white; - border-left: 1.1em solid black; - transform: translateZ(0); - animation: load 1.1s infinite linear; - } - - @keyframes load { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } - } - `; - } - - render(): TemplateResult { - return html`
Loading...
`; - } -} diff --git a/apps/figma-design-tokens/src/components/metadata-upload-confirm.ts b/apps/figma-design-tokens/src/components/metadata-upload-confirm.ts deleted file mode 100644 index 592ed23089..0000000000 --- a/apps/figma-design-tokens/src/components/metadata-upload-confirm.ts +++ /dev/null @@ -1,90 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - LitElement, - html, - customElement, - TemplateResult, - internalProperty, -} from 'lit-element'; - -import './loading-spinner'; - -@customElement('metadata-upload-confirmation') -export class MetadataUploadConfirmationComponent extends LitElement { - /** @internal Whether the user has already clicked "publish" */ - @internalProperty() _publishing: boolean = false; - - /** @internal Whether the user has clicked the acknowledge checkbox */ - @internalProperty() _acknowledged: boolean = false; - - render(): TemplateResult { - if (this._publishing) { - return html``; - } else { - return html` -

Before you continue, make sure that

-
    -
  • you're in the original Design Tokens document
    • -
  • - all the design tokens have been synchronized and show up as - styles in the right bar. -
    • -
- - This will overwrite the current remote style data, so wrong data would - causing theme switching to break everywhere. If the design tokens have - changed, you'll also have to publish the Figma library (you can do - this after running this after clicking "Upload"). - - -

- - -

- -
- - -
- `; - } - } - - private _handleAcknowledgeChange(event: any): void { - this._acknowledged = event.target.checked; - } - - private _handleConfirm(): void { - this.dispatchEvent(new CustomEvent('confirm')); - this._publishing = true; - } - - private _handleCancel(): void { - this.dispatchEvent(new CustomEvent('cancel')); - } -} diff --git a/apps/figma-design-tokens/src/environment.ts b/apps/figma-design-tokens/src/environment.ts deleted file mode 100644 index 7c00a9c3fc..0000000000 --- a/apps/figma-design-tokens/src/environment.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// Injected by Rollup at build time -declare const ENV: any; -export const JSON_BIN_SECRET_KEY = ENV.JSON_BIN_SECRET_KEY; diff --git a/apps/figma-design-tokens/src/shared/conversion.ts b/apps/figma-design-tokens/src/shared/conversion.ts deleted file mode 100644 index 4e1271d793..0000000000 --- a/apps/figma-design-tokens/src/shared/conversion.ts +++ /dev/null @@ -1,314 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -const fontWeightToName = new Map([ - [100, ['hairline', 'thin']], - [200, ['ultra light', 'extra light']], - [300, ['demi', 'light', 'book']], - [400, ['regular', 'book', 'normal']], - [500, ['medium']], - [ - 600, - [ - 'demibold', - 'semibold', - 'demi-bold', - 'semi-bold', - 'demi bold', - 'semi bold', - ], - ], - [700, ['bold']], - [800, ['ultra bold', 'extra bold']], - [900, ['heavy', 'black']], -]); - -/** Converts an HTML color to a normalized color split into components. */ -export function htmlToFigmaColor( - htmlColor: string, -): { r: number; g: number; b: number } { - const colorWithoutHash = htmlColor.startsWith('#') - ? htmlColor.slice(1) - : htmlColor; - const intColor = parseInt(colorWithoutHash, 16); - - // tslint:disable: no-bitwise - const r = ((intColor >> 16) & 255) / 255; - const g = ((intColor >> 8) & 255) / 255; - const b = (intColor & 255) / 255; - // tslint:enable: no-bitwise - return { r, g, b }; -} - -/** - * Attempts to create a figma-friendly color name from a source design token name. - * The "theme/color-name" syntax causes palettes to be grouped by theme in the UI. - */ -export function designTokenToFigmaColorName(tokenName: string): string { - const nameWithoutPrefix = tokenName.replace('fluid-color-', ''); - const splitName = nameWithoutPrefix.split('-'); - if (splitName.length < 2) { - return tokenName; - } - - const theme = splitName[0]; - const colorName = splitName.slice(1).join('-'); - - return `${theme}/${colorName}`; -} - -/** Converts CSS sizes for different units to pixels */ -export function cssSizeToPixels(cssSize: string): number | undefined { - const unitAndValue = cssSizeToUnitAndValue(cssSize); - if (!unitAndValue) { - return undefined; - } - const { value, unit } = unitAndValue; - - // https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Absolute_length_units - switch (unit) { - // Absolute units - case 'px': - return value; - case 'cm': - return centimetersToPixels(value); - case 'mm': - return centimetersToPixels(value) * 0.1; - case 'Q': // Quarter-millimeter - return centimetersToPixels(value) * 0.1 * 0.25; - case 'in': - return inchesToPixels(value); - case 'pc': - return inchesToPixels(value) / 6; - case 'pt': - return inchesToPixels(value) / 72; - - // Other units - case 'em': - case 'rem': - // Assumes that the root's font size is 16px (browser default) - return value * 16; - } - - return undefined; -} - -const centimetersToPixels = (centimeterValue: number) => - centimeterValue * (96 / 2.54); -const inchesToPixels = (inchValue: number) => inchValue * 96; - -/** - * Converts a CSS line height to a value compatible with Figma. - * Line heights are special cases of size values since relative - * sizes are supported here. - */ -export function cssToFigmaLineHeight( - cssLineHeight: string, -): LineHeight | undefined { - const unitAndValue = cssSizeToUnitAndValue(cssLineHeight); - if (!unitAndValue) { - return undefined; - } - const { value, unit } = unitAndValue; - - switch (unit) { - case '%': - return { - unit: 'PERCENT', - value, - }; - case 'em': - return { - unit: 'PERCENT', - value: value * 100, - }; - default: - return { - unit: 'PIXELS', - value: cssSizeToPixels(cssLineHeight) ?? 0, - }; - } -} - -/** Converts a CSS text-transform to a Figma TextCase. */ -export function cssToFigmaTextTransform(cssTextTransform: string): TextCase { - if (!cssTextTransform) { - return 'ORIGINAL'; - } - - switch (cssTextTransform.toLowerCase()) { - case 'capitalize': - return 'TITLE'; - case 'uppercase': - return 'UPPER'; - case 'lowercase': - return 'LOWER'; - default: - return 'ORIGINAL'; - } -} - -/** - * Finds the best match for a Figma font from a CSS font-family. - * @param fontFamily The CSS font family to search for - * @param figmaFonts List of available Figma fonts - */ -export function getFirstAvailableFontFromFamily( - fontFamily: string, - figmaFonts: Font[], - fontWeight: string, -): Font | undefined { - if (!fontFamily) { - return undefined; - } - - // Split the font family into parts to search for - const fontsInFamily = fontFamily - .split(',') - .map((fontName) => fontName.trim()); - - for (const fontName of fontsInFamily) { - // Try to find an exact match first - const figmaFont = findFontByNameAndWeight( - figmaFonts, - fontName, - cssFontWeightToNumber(fontWeight), - ); - if (figmaFont) { - return figmaFont; - } - - // Handle cases like "serif", "sans-serif", etc. - const fallbackFontNames = getFallbackFonts(fontName); - for (const fallbackFontName of fallbackFontNames) { - const figmaFallbackFont = figmaFonts.find( - (font) => font.fontName.family === fallbackFontName, - ); - if (figmaFallbackFont) { - return figmaFallbackFont; - } - } - } - - return undefined; -} - -/** Converts a numeric CSS font-weight or special string (e.g. "bold") to a number. */ -export function cssFontWeightToNumber(cssFontWeight: string): number { - const numericWeight = parseInt(cssFontWeight, 10); - if (numericWeight) { - return numericWeight; - } - - if (cssFontWeight === 'bold') { - return 700; - } - - return 400; -} - -/** @internal Get a font for a specific CSS font weight */ -function findFontByNameAndWeight( - figmaFonts: Font[], - name: string, - weight: number, -): Font | undefined { - const familyFonts = figmaFonts.filter( - (font) => font.fontName.family === name, - ); - const findFontWithWeight = (weight: number): Font | undefined => - familyFonts.find((font) => - fontWeightToName.get(weight)?.includes(font.fontName.style.toLowerCase()), - ); - - const roundedWeight = Math.round(weight * 100) / 100; // Make sure that the weight is a multiple of 100 - let font: Font | undefined; - - // Search for an exact match - font = findFontWithWeight(roundedWeight); - if (font) { - return font; - } - - if (roundedWeight == 400) { - // If the desired weight is 400, check 500 first - font = findFontWithWeight(500); - } else if (roundedWeight == 500) { - // If the desired weight is 500, check 400 first - font = findFontWithWeight(400); - } - if (font) { - return font; - } - - // If we still haven't found anything, increase the search range until we - // have a match or go outside the 100-900 range. - let weightDifference = 100; - do { - font = findFontWithWeight(roundedWeight + weightDifference); - if (!font) { - font = findFontWithWeight(roundedWeight - weightDifference); - } - weightDifference += 100; - } while ( - !font && - roundedWeight + weightDifference >= 100 && - roundedWeight + weightDifference <= 900 - ); - - // Return the first font in the family or undefined if everything else fails - return font ?? (familyFonts.length > 0 ? familyFonts[0] : undefined); -} - -/** @internal Extracts value and unit from a CSS size */ -function cssSizeToUnitAndValue( - cssSize: string, -): { value: number; unit: string } | undefined { - if (!cssSize) { - return undefined; - } - - const splitSize = cssSize.split(/([A-z]+)/); // Split when the first letter appears - if (splitSize.length < 2) { - return undefined; - } - - const [stringValue, unit] = splitSize; - const value = parseFloat(stringValue); - return { value, unit }; -} - -/** @internal Finds candidates for Figma fonts for generic CSS font names. */ -function getFallbackFonts(family: string): string[] { - // Source: https://www.impressivewebs.com/deeper-look-generic-font-names-css/#what-are-the-default-generic-fonts - // Prefers the Mac defaults - switch (family) { - case 'serif': - return ['Times', 'Times New Roman']; - case 'sans-serif': - return ['Helvetica', 'Arial']; - case 'monospace': - return ['Courier', 'Courier New']; - case 'cursive': - return ['Apple Chancery', 'Comic Sans MS']; - case 'fantasy': - return ['Papyrus', 'Impact']; - case 'system-ui': - return ['.SF NS Text', 'Segoe UI']; - default: - return []; - } -} diff --git a/apps/figma-design-tokens/src/shared/figma-util.ts b/apps/figma-design-tokens/src/shared/figma-util.ts deleted file mode 100644 index 51523c76f6..0000000000 --- a/apps/figma-design-tokens/src/shared/figma-util.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * Adds relaunch buttons for toggling the theme of the given node. - * @param node The node to add relaunch data to - */ -export function addThemeRelaunchDataToNode(node: BaseNode): void { - if (node.type === 'INSTANCE' || node.type === 'COMPONENT') { - // Changing relaunch data on an instance throws an error. - return; - } - - node.setRelaunchData({ - 'set-theme:surface': '', - 'set-theme:abyss': '', - }); -} - -/** - * Creates default relaunch data. This adds theme switching buttons - * to all container elements on that are direct children of page nodes. - * @see isContainerNode - */ -export function createDefaultRelaunchData(): void { - for (const page of figma.root.children) { - for (const container of page.findChildren(isContainerNode)) { - if (!container.getPluginData('fluid-theme')) { - addThemeRelaunchDataToNode(container); - } - } - } -} - -/** Whether the given node is a container that can be theme-switched */ -export function isContainerNode(node: BaseNode): boolean { - return ['FRAME', 'COMPONENT', 'INSTANCE'].includes(node.type); -} - -/** Whether the given node is geometry that has a fill and stroke color */ -export function isGeometryNode(node: BaseNode): boolean { - return [ - 'RECTANGLE', - 'LINE', - 'ELLIPSE', - 'POLYGON', - 'STAR', - 'VECTOR', - 'TEXT', - 'FRAME', - 'COMPONENT', - 'INSTANCE', - ].includes(node.type); -} diff --git a/apps/figma-design-tokens/src/shared/ipc.ts b/apps/figma-design-tokens/src/shared/ipc.ts deleted file mode 100644 index a3ae56001f..0000000000 --- a/apps/figma-design-tokens/src/shared/ipc.ts +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** Creates an invisible worker process window. */ -export function createWorker(): void { - // Create the invisible worker iframe. The __html__ global refers to the UI .html from the manifest. - figma.showUI(__html__, { visible: false }); -} - -/** Creates a UI window. */ -export function createWorkerWithUI(): void { - figma.showUI(__html__, { width: 500, height: 396 }); -} - -/** Fetches the current design tokens with the worker process. */ -export async function fetchTokens(): Promise { - postMessageToWorker({ type: 'fetch-tokens-request' }); - const reply = await getMessageFromWorker( - 'fetch-tokens-response', - ); - return reply.data!; -} - -/** Uploads style metadata with the worker process. */ -export async function uploadStyleMetadata( - styleMetadataCollection: StyleMetadataCollection, -): Promise { - postMessageToWorker({ - type: 'upload-style-metadata-request', - data: styleMetadataCollection, - }); - await getMessageFromWorker( - 'upload-style-metadata-response', - 'upload-style-metadata-userinterrupted', - ); -} - -/** Fetches the style metadata with the worker process. */ -export async function fetchStyleMetadata(): Promise { - postMessageToWorker({ type: 'fetch-style-metadata-request' }); - const reply = await getMessageFromWorker( - 'fetch-style-metadata-response', - ); - return reply.data!; -} - -/** Helper function for postMessage() communication from the worker process */ -export function postMessageFromWorker(message: IPCResponseMessage): void { - parent.postMessage( - { - pluginMessage: message, - }, - '*', - ); -} - -/** @internal Helper function for postMessage() communication from the main process */ -function postMessageToWorker(message: IPCRequestMessage): void { - figma.ui.postMessage(message); -} - -/** @internal Waits for a message of the given type from the worker */ -function getMessageFromWorker>( - ...typeFilter: MessageType[] -): Promise { - return new Promise((resolve, reject) => { - figma.ui.once('message', (result: T) => { - if (!typeFilter.includes(result.type)) { - return; - } - - if (!result.error) { - resolve(result); - } else { - reject(result.error); - } - }); - }); -} diff --git a/apps/figma-design-tokens/src/shared/storage.ts b/apps/figma-design-tokens/src/shared/storage.ts deleted file mode 100644 index d4f81635a2..0000000000 --- a/apps/figma-design-tokens/src/shared/storage.ts +++ /dev/null @@ -1,74 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** Returns the cached design tokens or undefined if none were downloaded previously. */ -export function getCachedTokens(): TokenStoreModel | undefined { - const themesJson = figma.root.getPluginData('fluid-design-tokens'); - if (!themesJson) { - // Figma returns an empty string if the key does not exist - return undefined; - } - return JSON.parse(themesJson); -} - -/** Stores the given token model in the cache. */ -export function setCachedTokens(tokens: TokenStoreModel): void { - figma.root.setPluginData('fluid-design-tokens', JSON.stringify(tokens)); -} - -/** Deletes the cached design tokens. */ -export function clearCachedTokens(): void { - figma.root.setPluginData('fluid-design-tokens', ''); -} - -/** Returns the cached remote style IDs or undefined if none were downloaded previously. */ -export function getCachedRemoteStyles(): StyleMetadataCollection | undefined { - const remoteStylesJson = figma.root.getPluginData('fluid-remote-styles'); - if (!remoteStylesJson) { - // Figma returns an empty string if the key does not exist - return undefined; - } - return JSON.parse(remoteStylesJson); -} - -/** Sets the cached remote style IDs */ -export function setCachedRemoteStyles(styles: StyleMetadataCollection): void { - figma.root.setPluginData('fluid-remote-styles', JSON.stringify(styles)); -} - -/** Deletes the cached remote styles. */ -export function clearCachedRemoteStyles(): void { - figma.root.setPluginData('fluid-remote-styles', ''); -} - -/** Returns the last time remote styles were downloaded or undefined if none were downloaded previously. */ -export function getLastRemoteStyleFetchTime(): Date | undefined { - const dateString = figma.root.getPluginData('fluid-remote-styles-fetch-date'); - return dateString ? new Date(dateString) : undefined; -} - -/** Sets the last time remote styles were downloaded */ -export function setLastRemoteStyleFetchTime(date: Date): void { - figma.root.setPluginData( - 'fluid-remote-styles-fetch-date', - date.toISOString(), - ); -} - -/** Deletes the last time remote styles were downloaded. */ -export function clearLastRemoteStyleFetchDate(): void { - figma.root.setPluginData('fluid-remote-styles-fetch-date', ''); -} diff --git a/apps/figma-design-tokens/src/shared/types.d.ts b/apps/figma-design-tokens/src/shared/types.d.ts deleted file mode 100644 index c2a7e79f3a..0000000000 --- a/apps/figma-design-tokens/src/shared/types.d.ts +++ /dev/null @@ -1,103 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -type CommandHandler = () => Promise; - -/** Generic model for design tokens. */ -interface DesignToken { - name: string; - value: string | Object; - meta?: any; - comment?: string; -} - -/** Map of design tokens by name. */ -interface DesignTokenMap { - [name: string]: DesignToken; -} - -/** Application cache and state model for storing design tokens. */ -interface TokenStoreModel { - [type: string]: DesignTokenMap; - - palettes: DesignTokenMap; - typography: DesignTokenMap; -} - -interface StyleMetadata { - id: string; - type: StyleType; - name: string; - description: string; - key: string; - remote: boolean; -} - -interface StyleMetadataCollection { - paintStyles: StyleMetadata[]; - textStyles: StyleMetadata[]; - effectStyles: StyleMetadata[]; - gridStyles: StyleMetadata[]; -} - -/** IPC message type identifier */ -type MessageType = - | 'fetch-tokens-request' - | 'fetch-tokens-response' - | 'upload-style-metadata-request' - | 'upload-style-metadata-response' - | 'upload-style-metadata-userinterrupted' - | 'fetch-style-metadata-request' - | 'fetch-style-metadata-response'; - -/** Message for communicating between from main process to worker */ -interface IPCRequestMessage { - type: MessageType; - data?: T; -} - -interface IPCResponseMessage { - type: MessageType; - data?: T; - error?: Error; -} - -interface FetchTokensRequestMessage extends IPCRequestMessage { - type: 'fetch-tokens-request'; -} - -interface FetchTokensResponseMessage - extends IPCResponseMessage { - type: 'fetch-tokens-response'; -} - -interface UploadStyleMetadataRequestMessage - extends IPCRequestMessage { - type: 'upload-style-metadata-request'; -} - -interface UploadStyleMetadataResponseMessage extends IPCResponseMessage { - type: 'upload-style-metadata-response'; -} - -interface FetchStyleMetadataRequestMessage extends IPCRequestMessage { - type: 'fetch-style-metadata-request'; -} - -interface FetchStyleMetadataResponseMessage - extends IPCResponseMessage { - type: 'fetch-style-metadata-response'; -} diff --git a/apps/figma-design-tokens/src/styles.scss b/apps/figma-design-tokens/src/styles.scss deleted file mode 100644 index 3784d2df82..0000000000 --- a/apps/figma-design-tokens/src/styles.scss +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import url('https://fonts.googleapis.com/css2?family=Roboto'); - -body { - font-family: Roboto, Helvetica, Arial sans-serif; -} diff --git a/apps/figma-design-tokens/src/test.css b/apps/figma-design-tokens/src/test.css deleted file mode 100644 index 5e3842142c..0000000000 --- a/apps/figma-design-tokens/src/test.css +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -body { - color: white; -} diff --git a/apps/figma-design-tokens/src/ui.ts b/apps/figma-design-tokens/src/ui.ts deleted file mode 100644 index 25e62a085a..0000000000 --- a/apps/figma-design-tokens/src/ui.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import './components/metadata-upload-confirm'; - -/** - * Shows a confirmation dialogue for style metadata upload. - * @returns A Promise that resolves to true or false according to the option selected by the user. - */ -export function showMetadataUploadConfirmDialog(): Promise { - const confirmComponent = showUIComponent('metadata-upload-confirmation'); - - return new Promise((resolve) => { - confirmComponent.addEventListener('confirm', () => resolve(true), { - once: true, - }); - confirmComponent.addEventListener('cancel', () => resolve(false), { - once: true, - }); - }); -} - -/** @internal Attaches an element with the given name to the body. */ -function showUIComponent(elementName: string): HTMLElement { - const element = document.createElement(elementName); - document.body.appendChild(element); - return element; -} diff --git a/apps/figma-design-tokens/src/worker.ts b/apps/figma-design-tokens/src/worker.ts deleted file mode 100644 index 8883479196..0000000000 --- a/apps/figma-design-tokens/src/worker.ts +++ /dev/null @@ -1,112 +0,0 @@ -import Axios from 'axios'; -import { postMessageFromWorker } from './shared/ipc'; -import { showMetadataUploadConfirmDialog } from './ui'; -import { JSON_BIN_SECRET_KEY } from './environment'; - -const REPO = 'dynatrace-oss/barista'; -const GITHUB_BASE_URL = `https://raw.githubusercontent.com/${REPO}/master/libs/shared/design-tokens/generated`; -const PALETTES_URL = `${GITHUB_BASE_URL}/global/palette.json`; -const TYPOGRAPHY_URL = `${GITHUB_BASE_URL}/global/typography.json`; - -const JSONBIN_BASE_URL = 'https://api.jsonbin.io'; -const JSONBIN_STORE_URL = `${JSONBIN_BASE_URL}/b/5f2d3a89dddf413f95beeba3`; - -/** Fetches design tokens from GitHub and sends them back to the main thread. */ -async function handleFetchTokensRequest(): Promise { - try { - const requests = [PALETTES_URL, TYPOGRAPHY_URL].map((url) => - Axios.get(url), - ); - const [palettes, typography] = (await Promise.all(requests)).map( - (response) => response.data.props, - ); - - postMessageFromWorker({ - type: 'fetch-tokens-response', - data: { - palettes, - typography, - } as TokenStoreModel, - }); - } catch (error) { - postMessageFromWorker({ - type: 'fetch-tokens-response', - error, - }); - } -} - -/** Uploads style library metadata. */ -async function handleUploadStyleMetadataRequest( - styleMetadataCollection: StyleMetadataCollection, -): Promise { - try { - const result = await showMetadataUploadConfirmDialog(); - - if (!result) { - postMessageFromWorker({ - type: 'upload-style-metadata-userinterrupted', - }); - return; - } - - await Axios.put(JSONBIN_STORE_URL, styleMetadataCollection, { - headers: { - 'Content-Type': 'application/json', - 'secret-key': JSON_BIN_SECRET_KEY, - }, - }); - - postMessageFromWorker({ - type: 'upload-style-metadata-response', - }); - } catch (error) { - postMessageFromWorker({ - type: 'upload-style-metadata-response', - error, - }); - } -} - -/** Downloads style library metadata. */ -async function handleFetchStyleMetadataRequest(): Promise { - try { - const response = await Axios.get(`${JSONBIN_STORE_URL}/latest`, { - headers: { - 'Content-Type': 'application/json', - 'secret-key': JSON_BIN_SECRET_KEY, - }, - }); - postMessageFromWorker({ - type: 'fetch-style-metadata-response', - data: response.data as StyleMetadataCollection, - }); - } catch (error) { - postMessageFromWorker({ - type: 'fetch-style-metadata-response', - error, - }); - } -} - -window.addEventListener('message', (event) => { - const message: IPCRequestMessage = event.data.pluginMessage; - switch (message.type) { - case 'fetch-tokens-request': { - handleFetchTokensRequest(); - break; - } - case 'upload-style-metadata-request': { - const metadata = (message as UploadStyleMetadataRequestMessage).data; - handleUploadStyleMetadataRequest(metadata!); - break; - } - case 'fetch-style-metadata-request': { - handleFetchStyleMetadataRequest(); - break; - } - default: { - console.warn(`Unknown message type: ${message.type}`); - } - } -}); diff --git a/apps/figma-design-tokens/tsconfig.json b/apps/figma-design-tokens/tsconfig.json deleted file mode 100644 index 4482679f12..0000000000 --- a/apps/figma-design-tokens/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "target": "ES2017", - "moduleResolution": "node", - "module": "esnext", - "typeRoots": ["./node_modules/@types", "./node_modules/@figma"] - } -} diff --git a/apps/fluid-dev/.stylelintrc b/apps/fluid-dev/.stylelintrc deleted file mode 100644 index ddf99cc122..0000000000 --- a/apps/fluid-dev/.stylelintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": ["../../.stylelintrc"], - "rules": { - "selector-class-pattern": null - } -} diff --git a/apps/fluid-dev/BUILD.bazel b/apps/fluid-dev/BUILD.bazel deleted file mode 100644 index 4e234258e6..0000000000 --- a/apps/fluid-dev/BUILD.bazel +++ /dev/null @@ -1,9 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "stylelint") - -package(default_visibility = ["//:__subpackages__"]) - -stylelint( - name = "stylelint", - srcs = glob(["**/*.scss"]), - config = ":.stylelintrc" -) diff --git a/apps/fluid-dev/browserslist b/apps/fluid-dev/browserslist deleted file mode 100644 index 80848532e4..0000000000 --- a/apps/fluid-dev/browserslist +++ /dev/null @@ -1,12 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -> 0.5% -last 2 versions -Firefox ESR -not dead -not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/apps/fluid-dev/jest.config.js b/apps/fluid-dev/jest.config.js deleted file mode 100644 index 253f27ce48..0000000000 --- a/apps/fluid-dev/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - name: 'fluid-dev', - preset: '../../jest.config.js', - coverageDirectory: '../../coverage/apps/fluid-dev', - snapshotSerializers: [ - 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js', - 'jest-preset-angular/build/AngularSnapshotSerializer.js', - 'jest-preset-angular/build/HTMLCommentSerializer.js', - ], - setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: { - 'ts-jest': { - tsConfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - astTransformers: [ - 'jest-preset-angular/build/InlineFilesTransformer', - 'jest-preset-angular/build/StripStylesTransformer', - ], - }, - }, -}; diff --git a/apps/fluid-dev/src/app/app.component.html b/apps/fluid-dev/src/app/app.component.html deleted file mode 100644 index 67b6eb29d2..0000000000 --- a/apps/fluid-dev/src/app/app.component.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - -
- -
diff --git a/apps/fluid-dev/src/app/app.component.scss b/apps/fluid-dev/src/app/app.component.scss deleted file mode 100644 index fa65f7c3dc..0000000000 --- a/apps/fluid-dev/src/app/app.component.scss +++ /dev/null @@ -1,19 +0,0 @@ -:host { - display: block; - height: 100%; - background-color: var(--color-background); - color: var(--color-maxcontrast); - box-sizing: border-box; // Avoid second scrollbar - padding: 8px; - overflow: auto; - - * { - box-sizing: content-box; - } -} - -.main { - display: block; - border: 1px solid var(--color-neutral-80); - padding: 1rem; -} diff --git a/apps/fluid-dev/src/app/app.component.ts b/apps/fluid-dev/src/app/app.component.ts deleted file mode 100644 index f40a27b7d2..0000000000 --- a/apps/fluid-dev/src/app/app.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -const LOCAL_STORAGE_THEME_KEY = 'fluid-theme'; - -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'fluid-dev-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], - host: { - '[class]': '"fluid-theme--" + _theme', - }, -}) -export class AppComponent implements OnInit { - /** @internal The current global theme */ - _theme: string = 'abyss'; - - ngOnInit(): void { - this._theme = localStorage.getItem(LOCAL_STORAGE_THEME_KEY) ?? 'abyss'; - } - - /** @internal Saves the theme in LocalStorage when changed to avoid reset on auto reload */ - _themeChanged(theme: string): void { - localStorage.setItem(LOCAL_STORAGE_THEME_KEY, theme); - } -} diff --git a/apps/fluid-dev/src/app/app.module.ts b/apps/fluid-dev/src/app/app.module.ts deleted file mode 100644 index a0f9f81623..0000000000 --- a/apps/fluid-dev/src/app/app.module.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { FluidRoutingModule } from './app.routing.module'; - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, FluidRoutingModule, FormsModule], - providers: [], - bootstrap: [AppComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class AppModule {} diff --git a/apps/fluid-dev/src/app/app.routing.module.ts b/apps/fluid-dev/src/app/app.routing.module.ts deleted file mode 100644 index 92a268c81f..0000000000 --- a/apps/fluid-dev/src/app/app.routing.module.ts +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; - -export const fluidRoutes: Route[] = [ - { - path: 'button', - loadChildren: () => - import('../pages/button/button-page.module').then( - (module) => module.FluidButtonPageModule, - ), - }, - { - path: 'button-group', - loadChildren: () => - import('../pages/button-group/button-group-page.module').then( - (module) => module.FluidButtonGroupPageModule, - ), - }, - { - path: 'checkbox', - loadChildren: () => - import('../pages/checkbox/checkbox-page.module').then( - (module) => module.FluidCheckboxPageModule, - ), - }, - { - path: 'icon', - loadChildren: () => - import('../pages/icon/icon-page.module').then( - (module) => module.FluidIconPageModule, - ), - }, - { - path: 'popover', - loadChildren: () => - import('../pages/popover/popover-page.module').then( - (module) => module.FluidPopoverPageModule, - ), - }, - { - path: 'switch', - loadChildren: () => - import('../pages/switch/switch-page.module').then( - (module) => module.FluidSwitchPageModule, - ), - }, - { - path: 'tab', - loadChildren: () => - import('../pages/tab/tab-page.module').then( - (module) => module.FluidTabPageModule, - ), - }, - { - path: 'virtual-scroll-container', - loadChildren: () => - import( - '../pages/virtual-scroll-container/virtual-scroll-container-page.module' - ).then((module) => module.FluidVirtualScrollContainerPageModule), - }, -]; - -@NgModule({ - declarations: [], - imports: [ - CommonModule, - RouterModule.forRoot(fluidRoutes, { - scrollPositionRestoration: 'enabled', - anchorScrolling: 'enabled', - paramsInheritanceStrategy: 'always', - enableTracing: false, - initialNavigation: 'enabled', - relativeLinkResolution: 'legacy', - }), - ], - exports: [RouterModule], - providers: [], -}) -export class FluidRoutingModule {} diff --git a/apps/fluid-dev/src/assets/.gitkeep b/apps/fluid-dev/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/fluid-dev/src/favicon.ico b/apps/fluid-dev/src/favicon.ico deleted file mode 100644 index 317ebcb233..0000000000 Binary files a/apps/fluid-dev/src/favicon.ico and /dev/null differ diff --git a/apps/fluid-dev/src/index.html b/apps/fluid-dev/src/index.html deleted file mode 100644 index 48d6ac3f9f..0000000000 --- a/apps/fluid-dev/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - FluidDev - - - - - - - - diff --git a/apps/fluid-dev/src/main.ts b/apps/fluid-dev/src/main.ts deleted file mode 100644 index 88e695caac..0000000000 --- a/apps/fluid-dev/src/main.ts +++ /dev/null @@ -1,23 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); diff --git a/apps/fluid-dev/src/pages/button-group/button-group-page.component.html b/apps/fluid-dev/src/pages/button-group/button-group-page.component.html deleted file mode 100644 index 94142f1ead..0000000000 --- a/apps/fluid-dev/src/pages/button-group/button-group-page.component.html +++ /dev/null @@ -1,29 +0,0 @@ - - - Options 1 - - - Buildingsteps 2 - - - Xylophone 3 - - -
- Option - - - - - -
-

Logs

- - 
-    {{ log | json }}
-
- -
diff --git a/apps/fluid-dev/src/pages/button-group/button-group-page.component.ts b/apps/fluid-dev/src/pages/button-group/button-group-page.component.ts deleted file mode 100644 index a5fe5acaf6..0000000000 --- a/apps/fluid-dev/src/pages/button-group/button-group-page.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { Component } from '@angular/core'; -import '@dynatrace/fluid-elements/button-group'; - -@Component({ - selector: 'fluid-button-page', - templateUrl: 'button-group-page.component.html', -}) -export class FluidButtonGroupPage { - disable = false; - disableall = false; - show = true; - - logs: Event[] = []; - - handleChange(evt: Event): void { - console.log(evt); - this.logs.push(evt); - } -} diff --git a/apps/fluid-dev/src/pages/button-group/button-group-page.module.ts b/apps/fluid-dev/src/pages/button-group/button-group-page.module.ts deleted file mode 100644 index c6fc09c976..0000000000 --- a/apps/fluid-dev/src/pages/button-group/button-group-page.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { FluidButtonGroupPage } from './button-group-page.component'; - -export const routes: Route[] = [ - { - path: '', - component: FluidButtonGroupPage, - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], - declarations: [FluidButtonGroupPage], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class FluidButtonGroupPageModule {} diff --git a/apps/fluid-dev/src/pages/button/button-page.component.html b/apps/fluid-dev/src/pages/button/button-page.component.html deleted file mode 100644 index 786240ec26..0000000000 --- a/apps/fluid-dev/src/pages/button/button-page.component.html +++ /dev/null @@ -1,85 +0,0 @@ -
-
-

Small button, low emphasis

- Button 1 -
-
-

Default button, medium emphasis

- Button 1 -
-
-

Small button, high emphasis

- Button 1 -
- -
-

Medium button, low emphasis

- Button 1 -
-
-

Medium button, medium emphasis

- Button 1 -
-
-

Medium button, high emphasis

- Button 1 -
- -
-

Large button, low emphasis

- Button 1 -
-
-

Large button, medium emphasis

- Button 1 -
-
-

Large button, high emphasis

- Button 1 -
- -
-

Small button, low emphasis, disabled AA

- Button 1 -
-
-

Default button, medium emphasis, disabled

- Button 1 -
-
-

Small button, high emphasis, disabled

- Button 1 -
- -
-

Medium button, low emphasis, disabled

- Button 1 -
-
-

Medium button, medium emphasis, disabled

- Button 1 -
-
-

Medium button, high emphasis, disabled

- Button 1 -
- -
-

Large button, low emphasis, disabled

- Button 1 -
-
-

Large button, medium emphasis, disabled

- Button 1 -
-
-

Large button, high emphasis, disabled

- Button 1 -
-
diff --git a/apps/fluid-dev/src/pages/button/button-page.component.scss b/apps/fluid-dev/src/pages/button/button-page.component.scss deleted file mode 100644 index 1cf242a758..0000000000 --- a/apps/fluid-dev/src/pages/button/button-page.component.scss +++ /dev/null @@ -1,8 +0,0 @@ -.fluid-button-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); -} - -.fluid-button-grid-item { - padding: 2rem; -} diff --git a/apps/fluid-dev/src/pages/button/button-page.component.ts b/apps/fluid-dev/src/pages/button/button-page.component.ts deleted file mode 100644 index b6e53dc57b..0000000000 --- a/apps/fluid-dev/src/pages/button/button-page.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { Component } from '@angular/core'; -import '@dynatrace/fluid-elements/button'; - -@Component({ - selector: 'fluid-button-page', - templateUrl: 'button-page.component.html', - styleUrls: ['button-page.component.scss'], -}) -export class FluidButtonPage {} diff --git a/apps/fluid-dev/src/pages/button/button-page.module.ts b/apps/fluid-dev/src/pages/button/button-page.module.ts deleted file mode 100644 index 7e820bde8a..0000000000 --- a/apps/fluid-dev/src/pages/button/button-page.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { FluidButtonPage } from './button-page.component'; - -export const routes: Route[] = [ - { - path: '', - component: FluidButtonPage, - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], - declarations: [FluidButtonPage], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class FluidButtonPageModule {} diff --git a/apps/fluid-dev/src/pages/checkbox/checkbox-page.component.html b/apps/fluid-dev/src/pages/checkbox/checkbox-page.component.html deleted file mode 100644 index d441dff248..0000000000 --- a/apps/fluid-dev/src/pages/checkbox/checkbox-page.component.html +++ /dev/null @@ -1,35 +0,0 @@ -

Checked {{ _isChecked() }} | Indeterminate {{ _isIndeterminate() }}

- - I am the label - - - - I am the label 1 - - - - I am the label - - -
- -
- -
-

Logs

- - 
-    {{ log | json }}
-
- -
diff --git a/apps/fluid-dev/src/pages/checkbox/checkbox-page.component.scss b/apps/fluid-dev/src/pages/checkbox/checkbox-page.component.scss deleted file mode 100644 index ddb9b045d6..0000000000 --- a/apps/fluid-dev/src/pages/checkbox/checkbox-page.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.outerclass { - display: block; -} diff --git a/apps/fluid-dev/src/pages/checkbox/checkbox-page.component.ts b/apps/fluid-dev/src/pages/checkbox/checkbox-page.component.ts deleted file mode 100644 index 8ef1126998..0000000000 --- a/apps/fluid-dev/src/pages/checkbox/checkbox-page.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { Component } from '@angular/core'; -import { FluidCheckboxChangeEvent } from '@dynatrace/fluid-elements/checkbox'; -// tslint:disable-next-line: no-duplicate-imports -import '@dynatrace/fluid-elements/checkbox'; - -@Component({ - selector: 'fluid-checkbox-page', - templateUrl: 'checkbox-page.component.html', - styleUrls: ['checkbox-page.component.scss'], -}) -export class FluidCheckboxPage { - disabled = false; - - _checkbox1 = true; - _checkbox2 = false; - - _isIndeterminate(): boolean { - return this._checkbox1 !== this._checkbox2; - } - - _isChecked(): boolean { - return this._checkbox1 && this._checkbox2; - } - - changeAll(event: FluidCheckboxChangeEvent): void { - console.log(event); - this._checkbox1 = event.checked; - this._checkbox2 = event.checked; - } - - logs: Event[] = []; - - handleChange(evt: Event): void { - this.logs.push(evt); - } - - handleIndeterminateChange(evt: Event): void { - this.logs.push(evt); - } -} diff --git a/apps/fluid-dev/src/pages/checkbox/checkbox-page.module.ts b/apps/fluid-dev/src/pages/checkbox/checkbox-page.module.ts deleted file mode 100644 index 1b2d48e883..0000000000 --- a/apps/fluid-dev/src/pages/checkbox/checkbox-page.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { DtCheckboxModule } from '@dynatrace/barista-components/checkbox'; -import { FluidCheckboxPage } from './checkbox-page.component'; - -export const routes: Route[] = [ - { - path: '', - component: FluidCheckboxPage, - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes), DtCheckboxModule], - declarations: [FluidCheckboxPage], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class FluidCheckboxPageModule {} diff --git a/apps/fluid-dev/src/pages/icon/icon-page.component.html b/apps/fluid-dev/src/pages/icon/icon-page.component.html deleted file mode 100644 index 551a864893..0000000000 --- a/apps/fluid-dev/src/pages/icon/icon-page.component.html +++ /dev/null @@ -1,5 +0,0 @@ -

- -

- -

diff --git a/apps/fluid-dev/src/pages/icon/icon-page.component.scss b/apps/fluid-dev/src/pages/icon/icon-page.component.scss deleted file mode 100644 index 39b3d8e41e..0000000000 --- a/apps/fluid-dev/src/pages/icon/icon-page.component.scss +++ /dev/null @@ -1,7 +0,0 @@ -.icon-color-1 { - --fluid-icon--color: var(--color-primary-100); -} - -.icon-color-2 { - --fluid-icon--color: var(--color-positive-100); -} diff --git a/apps/fluid-dev/src/pages/icon/icon-page.component.ts b/apps/fluid-dev/src/pages/icon/icon-page.component.ts deleted file mode 100644 index 6556f3e8f4..0000000000 --- a/apps/fluid-dev/src/pages/icon/icon-page.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { Component } from '@angular/core'; -import '@dynatrace/fluid-elements/icon'; - -@Component({ - selector: 'fluid-icon-page', - templateUrl: 'icon-page.component.html', - styleUrls: ['icon-page.component.scss'], -}) -export class FluidIconPage {} diff --git a/apps/fluid-dev/src/pages/icon/icon-page.module.ts b/apps/fluid-dev/src/pages/icon/icon-page.module.ts deleted file mode 100644 index 26b29a3c77..0000000000 --- a/apps/fluid-dev/src/pages/icon/icon-page.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { FluidIconPage } from './icon-page.component'; - -export const routes: Route[] = [ - { - path: '', - component: FluidIconPage, - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], - declarations: [FluidIconPage], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class FluidIconPageModule {} diff --git a/apps/fluid-dev/src/pages/popover/popover-page.component.html b/apps/fluid-dev/src/pages/popover/popover-page.component.html deleted file mode 100644 index 596aa821cd..0000000000 --- a/apps/fluid-dev/src/pages/popover/popover-page.component.html +++ /dev/null @@ -1,58 +0,0 @@ -
Scroll down
- -
-
-

Default Popover

- Toggle -

Popover

 -
-
-

Popover with changed placement

- Toggle -

Popover

 -
-
-

Popover with offset

- Toggle -

Popover

 -
-
-

Popover with custom fallback placement

- Toggle -

Popover

 -
-
-

Popover with custom fallback and offset function

- Toggle -

Popover

 -
-
- -
diff --git a/apps/fluid-dev/src/pages/popover/popover-page.component.scss b/apps/fluid-dev/src/pages/popover/popover-page.component.scss deleted file mode 100644 index ffa63bfd68..0000000000 --- a/apps/fluid-dev/src/pages/popover/popover-page.component.scss +++ /dev/null @@ -1,29 +0,0 @@ -fluid-button { - display: inline-block; -} - -.fluid-popover-grid { - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: 1rem; -} - -.fluid-popover-grid-item { - padding: 1rem; -} - -.popover-content { - padding: 1rem; - - p { - margin: 0; - } -} - -.force-scroll-start { - height: 50vh; -} - -.force-scroll { - height: 100vh; -} diff --git a/apps/fluid-dev/src/pages/popover/popover-page.component.ts b/apps/fluid-dev/src/pages/popover/popover-page.component.ts deleted file mode 100644 index 80cb8877b1..0000000000 --- a/apps/fluid-dev/src/pages/popover/popover-page.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { Component, ViewChild } from '@angular/core'; -import '@dynatrace/fluid-elements/button'; -import '@dynatrace/fluid-elements/popover'; -// tslint:disable-next-line: no-duplicate-imports -import { FluidPopoverOffset } from '@dynatrace/fluid-elements/popover'; - -@Component({ - selector: 'fluid-popover-page', - templateUrl: 'popover-page.component.html', - styleUrls: ['popover-page.component.scss'], -}) -export class FluidPopoverPage { - @ViewChild('anchor1') anchor1: HTMLParagraphElement; - @ViewChild('anchor2') anchor2: HTMLParagraphElement; - @ViewChild('anchor3') anchor3: HTMLParagraphElement; - @ViewChild('anchor4') anchor4: HTMLParagraphElement; - @ViewChild('anchor4') anchor5: HTMLParagraphElement; - - open1 = false; - open2 = false; - open3 = false; - open4 = false; - open5 = false; - - customOffsetFn: FluidPopoverOffset = ({ placement }) => { - if (placement === `left-end`) { - return [30, -30]; - } - - if (placement === `right-start`) { - return [undefined, -50]; - } - - if (placement === `top-end`) { - return [-100, 10]; - } - - return [0, 20]; - }; -} diff --git a/apps/fluid-dev/src/pages/popover/popover-page.module.ts b/apps/fluid-dev/src/pages/popover/popover-page.module.ts deleted file mode 100644 index b1ee4e2e61..0000000000 --- a/apps/fluid-dev/src/pages/popover/popover-page.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { FluidPopoverPage } from './popover-page.component'; - -export const routes: Route[] = [ - { - path: '', - component: FluidPopoverPage, - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], - declarations: [FluidPopoverPage], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class FluidPopoverPageModule {} diff --git a/apps/fluid-dev/src/pages/switch/switch-page.component.html b/apps/fluid-dev/src/pages/switch/switch-page.component.html deleted file mode 100644 index 9b0ab6e24c..0000000000 --- a/apps/fluid-dev/src/pages/switch/switch-page.component.html +++ /dev/null @@ -1,47 +0,0 @@ -Switch - -

- Set initial checked state to: true - Switch -

- -

- Set inital checked state to: false - Switch -

- - - - -
- -
- -
- -
- -
-

Logs

- - 
-    {{ log | json }}
-
- -
diff --git a/apps/fluid-dev/src/pages/switch/switch-page.component.scss b/apps/fluid-dev/src/pages/switch/switch-page.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/fluid-dev/src/pages/switch/switch-page.component.ts b/apps/fluid-dev/src/pages/switch/switch-page.component.ts deleted file mode 100644 index 1c0174b46a..0000000000 --- a/apps/fluid-dev/src/pages/switch/switch-page.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component } from '@angular/core'; -// tslint:disable-next-line: no-duplicate-imports -import '@dynatrace/fluid-elements/switch'; - -@Component({ - selector: 'fluid-checkbox-page', - templateUrl: 'switch-page.component.html', - styleUrls: ['switch-page.component.scss'], -}) -export class FluidSwitchPage { - checked = false; - - disabled = false; - - logs: Event[] = []; - - handleChange(evt: Event): void { - this.logs.push(evt); - } -} diff --git a/apps/fluid-dev/src/pages/switch/switch-page.module.ts b/apps/fluid-dev/src/pages/switch/switch-page.module.ts deleted file mode 100644 index c306710667..0000000000 --- a/apps/fluid-dev/src/pages/switch/switch-page.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { FluidSwitchPage } from './switch-page.component'; - -export const routes: Route[] = [ - { - path: '', - component: FluidSwitchPage, - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], - declarations: [FluidSwitchPage], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class FluidSwitchPageModule {} diff --git a/apps/fluid-dev/src/pages/tab/tab-page.component.html b/apps/fluid-dev/src/pages/tab/tab-page.component.html deleted file mode 100644 index cdfa01d717..0000000000 --- a/apps/fluid-dev/src/pages/tab/tab-page.component.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - Build - Type - History - - Saved Queries - - - - - - -
-

- These sections are a placeholder for the later implementation of a - switchable content component -

-
-

Section 1

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, - tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim - lacus a velit. Nam luctus, enim in interdum condimentum, nisl diam iaculis - lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum - magna bibendum accumsan. -

-
-
-

Section 2

-

- Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, - eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus - ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque - tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In - lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus - at, sodales consequat tellus. -

-
-
-

Section 3

-

- Phasellus ac tristique orci. Nulla maximus justo nec dignissim consequat. - Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat - volutpat. Suspendisse lorem turpis, accumsan consequat consectetur - gravida, pellentesque ac ante. Aliquam in commodo ligula, sit amet mollis - neque. Vestibulum at facilisis massa. -

-
-
-

Section 4

-

- Nam luctus, enim in interdum condimentum, nisl diam iaculis lorem, vel - volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum - accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam - euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec - laoreet enim lacus a velit. -

-
-
- -

Tab A is set active and the Tab-groups activetabid is B

- - A - B - - -
-

Logs

- - 
-    {{ log | json }}
-
- -
diff --git a/apps/fluid-dev/src/pages/tab/tab-page.component.scss b/apps/fluid-dev/src/pages/tab/tab-page.component.scss deleted file mode 100644 index ddb9b045d6..0000000000 --- a/apps/fluid-dev/src/pages/tab/tab-page.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.outerclass { - display: block; -} diff --git a/apps/fluid-dev/src/pages/tab/tab-page.component.ts b/apps/fluid-dev/src/pages/tab/tab-page.component.ts deleted file mode 100644 index b1d6357d32..0000000000 --- a/apps/fluid-dev/src/pages/tab/tab-page.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { Component } from '@angular/core'; -import '@dynatrace/fluid-elements/tab-group'; - -@Component({ - selector: 'fluid-tab-page', - templateUrl: 'tab-page.component.html', - styleUrls: ['tab-page.component.scss'], -}) -export class FluidTabPage { - disabled = false; - - active = false; - - showLastTab = true; - - logs: Event[] = []; - - handleChange(evt: Event): void { - this.logs.push(evt); - } -} diff --git a/apps/fluid-dev/src/pages/tab/tab-page.module.ts b/apps/fluid-dev/src/pages/tab/tab-page.module.ts deleted file mode 100644 index f5e231fa5f..0000000000 --- a/apps/fluid-dev/src/pages/tab/tab-page.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { FluidTabPage } from './tab-page.component'; - -export const routes: Route[] = [ - { - path: '', - component: FluidTabPage, - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], - declarations: [FluidTabPage], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class FluidTabPageModule {} diff --git a/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.component.html b/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.component.html deleted file mode 100644 index d29b707aeb..0000000000 --- a/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.component.html +++ /dev/null @@ -1,44 +0,0 @@ -
-
- #1: Items with variable height -
- -
-
- -
- #2: Same items as in #1, but with fixed height -
- -
-
- -
- Fake async data -
- -
- - Fetch Data - - - Clear - -
-
diff --git a/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.component.scss b/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.component.scss deleted file mode 100644 index c4657e6239..0000000000 --- a/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -.fluid-virtual-scroll-container-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 1rem; -} - -.virtual-scroll { - max-width: 300px; - height: 600px; -} - -fluid-virtual-scroll-container { - border: 1px solid black; -} diff --git a/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.component.ts b/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.component.ts deleted file mode 100644 index c788d58e66..0000000000 --- a/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.component.ts +++ /dev/null @@ -1,621 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { Component } from '@angular/core'; - -import '@dynatrace/fluid-elements/button'; -import '@dynatrace/fluid-elements/virtual-scroll-container'; -import { html, nothing, TemplateResult } from 'lit-html'; -import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; - -const hosts = [ - 'et-demo-2-win4', - 'et-demo-2-win3', - 'docker-host1', - 'docker-host2', - 'et-demo-2-win1', - 'et-demo-2-win8', - 'et-demo-2-macOS', - 'kyber-host2', - 'kyber-host6', - 'dev-demo-5-macOS', -]; - -const MAX_ROWS = 5000; - -type Node = { - host: string; - cpu: string; - memory: string; - traffic: string; -}; - -@Component({ - selector: 'fluid-virtual-scroll-container-page', - templateUrl: 'virtual-scroll-container-page.component.html', - styleUrls: ['virtual-scroll-container-page.component.scss'], -}) -export class FluidVirtualScrollContainerPage { - items1 = [ - { title: `item01`, subtitle: `item01 subtitle` }, - { title: `item02`, subtitle: `item02 subtitle` }, - { title: `item03`, subtitle: `item03 subtitle` }, - { title: `item04`, subtitle: `item04 subtitle`, subsub: `something else` }, - { title: `item05`, subtitle: `item05 subtitle` }, - { title: `item06`, subtitle: `item06 subtitle`, subsub: `something else` }, - { title: `item07`, subtitle: `item07 subtitle`, subsub: `something else` }, - { title: `item08`, subtitle: `item08 subtitle`, subsub: `something else` }, - { title: `item09`, subtitle: `item09 subtitle` }, - { title: `item10`, subtitle: `item10 subtitle` }, - { title: `item11`, subtitle: `item11 subtitle`, subsub: `something else` }, - { title: `item12`, subtitle: `item12 subtitle`, subsub: `something else` }, - { title: `item13`, subtitle: `item13 subtitle` }, - { title: `item14`, subtitle: `item14 subtitle` }, - { title: `item15`, subtitle: `item15 subtitle` }, - { title: `item16`, subtitle: `item16 subtitle` }, - { title: `item17`, subtitle: `item17 subtitle`, subsub: `something else` }, - { title: `item18`, subtitle: `item18 subtitle` }, - { title: `item19`, subtitle: `item19 subtitle`, subsub: `something else` }, - { title: `item20`, subtitle: `item20 subtitle` }, - { title: `item21`, subtitle: `item21 subtitle` }, - { - title: `item22`, - subtitle: `item22 subtitle`, - subsub: `


very high item`, - }, - { title: `item23`, subtitle: `item23 subtitle` }, - { title: `item24`, subtitle: `item24 subtitle` }, - { title: `item25`, subtitle: `item25 subtitle` }, - { title: `item26`, subtitle: `item26 subtitle` }, - { title: `item27`, subtitle: `item27 subtitle`, subsub: `something else` }, - { title: `item28`, subtitle: `item28 subtitle` }, - { title: `item29`, subtitle: `item29 subtitle`, subsub: `something else` }, - { title: `item30`, subtitle: `item30 subtitle`, subsub: `something else` }, - { title: `item31`, subtitle: `item31 subtitle`, subsub: `something else` }, - { title: `item32`, subtitle: `item32 subtitle` }, - { title: `item33`, subtitle: `item33 subtitle` }, - { - title: `item34`, - subtitle: `item34 subtitle`, - subsub: `


very high item`, - }, - { title: `item35`, subtitle: `item35 subtitle` }, - { title: `item36`, subtitle: `item36 subtitle` }, - { title: `item37`, subtitle: `item37 subtitle` }, - { - title: `item38`, - subtitle: `item38 subtitle`, - subsub: `


very high item`, - }, - { - title: `item39`, - subtitle: `item39 subtitle`, - subsub: `


very high item`, - }, - { title: `item40`, subtitle: `item40 subtitle` }, - { title: `item41`, subtitle: `item41 subtitle` }, - { title: `item42`, subtitle: `item42 subtitle` }, - { title: `item43`, subtitle: `item43 subtitle`, subsub: `something else` }, - { title: `item44`, subtitle: `item44 subtitle` }, - { title: `item45`, subtitle: `item45 subtitle`, subsub: `something else` }, - { title: `item46`, subtitle: `item46 subtitle` }, - { title: `item47`, subtitle: `item47 subtitle` }, - { title: `item48`, subtitle: `item48 subtitle` }, - { - title: `item49`, - subtitle: `item49 subtitle`, - subsub: `


very high item`, - }, - { title: `item50`, subtitle: `item50 subtitle` }, - { title: `item51`, subtitle: `item51 subtitle` }, - { - title: `item52`, - subtitle: `item52 subtitle`, - subsub: `


very high item`, - }, - { - title: `item53`, - subtitle: `item53 subtitle`, - subsub: `


very high item`, - }, - { title: `item54`, subtitle: `item54 subtitle`, subsub: `something else` }, - { title: `item55`, subtitle: `item55 subtitle` }, - { title: `item56`, subtitle: `item56 subtitle` }, - { title: `item57`, subtitle: `item57 subtitle` }, - { title: `item58`, subtitle: `item58 subtitle` }, - { title: `item59`, subtitle: `item59 subtitle`, subsub: `something else` }, - { title: `item60`, subtitle: `item60 subtitle` }, - { title: `item61`, subtitle: `item61 subtitle`, subsub: `something else` }, - { title: `item62`, subtitle: `item62 subtitle` }, - { title: `item63`, subtitle: `item63 subtitle` }, - { title: `item64`, subtitle: `item64 subtitle`, subsub: `something else` }, - { title: `item65`, subtitle: `item65 subtitle`, subsub: `something else` }, - { title: `item66`, subtitle: `item66 subtitle` }, - { title: `item67`, subtitle: `item67 subtitle` }, - { title: `item68`, subtitle: `item68 subtitle`, subsub: `something else` }, - { title: `item69`, subtitle: `item69 subtitle` }, - { title: `item70`, subtitle: `item70 subtitle` }, - { title: `item71`, subtitle: `item71 subtitle` }, - { title: `item72`, subtitle: `item72 subtitle` }, - { title: `item73`, subtitle: `item73 subtitle` }, - { title: `item74`, subtitle: `item74 subtitle` }, - { title: `item75`, subtitle: `item75 subtitle`, subsub: `something else` }, - { title: `item76`, subtitle: `item76 subtitle` }, - { title: `item77`, subtitle: `item77 subtitle` }, - { title: `item78`, subtitle: `item78 subtitle`, subsub: `something else` }, - { title: `item79`, subtitle: `item79 subtitle`, subsub: `something else` }, - { title: `item80`, subtitle: `item80 subtitle` }, - { title: `item81`, subtitle: `item81 subtitle` }, - { title: `item82`, subtitle: `item82 subtitle`, subsub: `something else` }, - { title: `item83`, subtitle: `item83 subtitle` }, - { title: `item84`, subtitle: `item84 subtitle` }, - { title: `item85`, subtitle: `item85 subtitle` }, - { title: `item86`, subtitle: `item86 subtitle`, subsub: `something else` }, - { title: `item87`, subtitle: `item87 subtitle` }, - { title: `item88`, subtitle: `item88 subtitle` }, - { - title: `item89`, - subtitle: `item89 subtitle`, - subsub: `


very high item`, - }, - { title: `item90`, subtitle: `item90 subtitle` }, - { title: `item91`, subtitle: `item91 subtitle` }, - { title: `item92`, subtitle: `item92 subtitle`, subsub: `something else` }, - { title: `item93`, subtitle: `item93 subtitle`, subsub: `something else` }, - { title: `item94`, subtitle: `item94 subtitle` }, - { title: `item95`, subtitle: `item95 subtitle`, subsub: `something else` }, - { title: `item96`, subtitle: `item96 subtitle`, subsub: `something else` }, - { title: `item97`, subtitle: `item97 subtitle`, subsub: `something else` }, - { title: `item98`, subtitle: `item98 subtitle`, subsub: `something else` }, - { title: `item99`, subtitle: `item99 subtitle`, subsub: `something else` }, - { title: `item100`, subtitle: `item100 subtitle` }, - { title: `item101`, subtitle: `item101 subtitle` }, - { title: `item102`, subtitle: `item102 subtitle` }, - { title: `item103`, subtitle: `item103 subtitle` }, - { - title: `item104`, - subtitle: `item104 subtitle`, - subsub: `something else`, - }, - { - title: `item105`, - subtitle: `item105 subtitle`, - subsub: `something else`, - }, - { title: `item106`, subtitle: `item106 subtitle` }, - { title: `item107`, subtitle: `item107 subtitle` }, - { title: `item108`, subtitle: `item108 subtitle` }, - { - title: `item109`, - subtitle: `item109 subtitle`, - subsub: `something else`, - }, - { title: `item110`, subtitle: `item110 subtitle` }, - { title: `item111`, subtitle: `item111 subtitle` }, - { title: `item112`, subtitle: `item112 subtitle` }, - { - title: `item113`, - subtitle: `item113 subtitle`, - subsub: `something else`, - }, - { - title: `item114`, - subtitle: `item114 subtitle`, - subsub: `something else`, - }, - { title: `item115`, subtitle: `item115 subtitle` }, - { - title: `item116`, - subtitle: `item116 subtitle`, - subsub: `something else`, - }, - { - title: `item117`, - subtitle: `item117 subtitle`, - subsub: `something else`, - }, - { - title: `item118`, - subtitle: `item118 subtitle`, - subsub: `something else`, - }, - { title: `item119`, subtitle: `item119 subtitle` }, - { title: `item120`, subtitle: `item120 subtitle` }, - { title: `item121`, subtitle: `item121 subtitle` }, - { title: `item122`, subtitle: `item122 subtitle` }, - { - title: `item123`, - subtitle: `item123 subtitle`, - subsub: `something else`, - }, - { title: `item124`, subtitle: `item124 subtitle` }, - { title: `item125`, subtitle: `item125 subtitle` }, - { - title: `item126`, - subtitle: `item126 subtitle`, - subsub: `


very high item`, - }, - { title: `item127`, subtitle: `item127 subtitle` }, - { - title: `item128`, - subtitle: `item128 subtitle`, - subsub: `something else`, - }, - { title: `item129`, subtitle: `item129 subtitle` }, - { title: `item130`, subtitle: `item130 subtitle` }, - { - title: `item131`, - subtitle: `item131 subtitle`, - subsub: `


very high item`, - }, - { title: `item132`, subtitle: `item132 subtitle` }, - { title: `item133`, subtitle: `item133 subtitle` }, - { - title: `item134`, - subtitle: `item134 subtitle`, - subsub: `


very high item`, - }, - { - title: `item135`, - subtitle: `item135 subtitle`, - subsub: `something else`, - }, - { title: `item136`, subtitle: `item136 subtitle` }, - { title: `item137`, subtitle: `item137 subtitle` }, - { title: `item138`, subtitle: `item138 subtitle` }, - { - title: `item139`, - subtitle: `item139 subtitle`, - subsub: `


very high item`, - }, - { title: `item140`, subtitle: `item140 subtitle` }, - { - title: `item141`, - subtitle: `item141 subtitle`, - subsub: `something else`, - }, - { - title: `item142`, - subtitle: `item142 subtitle`, - subsub: `something else`, - }, - { title: `item143`, subtitle: `item143 subtitle` }, - { - title: `item144`, - subtitle: `item144 subtitle`, - subsub: `something else`, - }, - { - title: `item145`, - subtitle: `item145 subtitle`, - subsub: `something else`, - }, - { title: `item146`, subtitle: `item146 subtitle` }, - { title: `item147`, subtitle: `item147 subtitle` }, - { title: `item148`, subtitle: `item148 subtitle` }, - { - title: `item149`, - subtitle: `item149 subtitle`, - subsub: `something else`, - }, - { title: `item150`, subtitle: `item150 subtitle` }, - { title: `item151`, subtitle: `item151 subtitle` }, - { - title: `item152`, - subtitle: `item152 subtitle`, - subsub: `something else`, - }, - { title: `item153`, subtitle: `item153 subtitle` }, - { title: `item154`, subtitle: `item154 subtitle` }, - { title: `item155`, subtitle: `item155 subtitle` }, - { title: `item156`, subtitle: `item156 subtitle` }, - { - title: `item157`, - subtitle: `item157 subtitle`, - subsub: `something else`, - }, - { title: `item158`, subtitle: `item158 subtitle` }, - { title: `item159`, subtitle: `item159 subtitle` }, - { title: `item160`, subtitle: `item160 subtitle` }, - { title: `item161`, subtitle: `item161 subtitle` }, - { - title: `item162`, - subtitle: `item162 subtitle`, - subsub: `something else`, - }, - { - title: `item163`, - subtitle: `item163 subtitle`, - subsub: `something else`, - }, - { title: `item164`, subtitle: `item164 subtitle` }, - { - title: `item165`, - subtitle: `item165 subtitle`, - subsub: `something else`, - }, - { title: `item166`, subtitle: `item166 subtitle` }, - { title: `item167`, subtitle: `item167 subtitle` }, - { title: `item168`, subtitle: `item168 subtitle` }, - { title: `item169`, subtitle: `item169 subtitle` }, - { title: `item170`, subtitle: `item170 subtitle` }, - { title: `item171`, subtitle: `item171 subtitle` }, - { - title: `item172`, - subtitle: `item172 subtitle`, - subsub: `something else`, - }, - { - title: `item173`, - subtitle: `item173 subtitle`, - subsub: `something else`, - }, - { title: `item174`, subtitle: `item174 subtitle` }, - { title: `item175`, subtitle: `item175 subtitle` }, - { - title: `item176`, - subtitle: `item176 subtitle`, - subsub: `something else`, - }, - { title: `item177`, subtitle: `item177 subtitle` }, - { - title: `item178`, - subtitle: `item178 subtitle`, - subsub: `something else`, - }, - { title: `item179`, subtitle: `item179 subtitle` }, - { title: `item180`, subtitle: `item180 subtitle` }, - { - title: `item181`, - subtitle: `item181 subtitle`, - subsub: `something else`, - }, - { title: `item182`, subtitle: `item182 subtitle` }, - { title: `item183`, subtitle: `item183 subtitle` }, - { - title: `item184`, - subtitle: `item184 subtitle`, - subsub: `something else`, - }, - { title: `item185`, subtitle: `item185 subtitle` }, - { title: `item186`, subtitle: `item186 subtitle` }, - { - title: `item187`, - subtitle: `item187 subtitle`, - subsub: `something else`, - }, - { - title: `item188`, - subtitle: `item188 subtitle`, - subsub: `something else`, - }, - { - title: `item189`, - subtitle: `item189 subtitle`, - subsub: `something else`, - }, - { - title: `item190`, - subtitle: `item190 subtitle`, - subsub: `something else`, - }, - { title: `item191`, subtitle: `item191 subtitle` }, - { title: `item192`, subtitle: `item192 subtitle` }, - { title: `item193`, subtitle: `item193 subtitle` }, - { title: `item194`, subtitle: `item194 subtitle` }, - { title: `item195`, subtitle: `item195 subtitle` }, - { title: `item196`, subtitle: `item196 subtitle` }, - { - title: `item197`, - subtitle: `item197 subtitle`, - subsub: `


very high item`, - }, - { - title: `item198`, - subtitle: `item198 subtitle`, - subsub: `


very high item`, - }, - { - title: `item199`, - subtitle: `item199 subtitle`, - subsub: `


very high item`, - }, - { - title: `item200`, - subtitle: `item200 subtitle`, - subsub: `


very high item`, - }, - { - title: `item201`, - subtitle: `item201 subtitle`, - subsub: `


very high item`, - }, - { title: `item202`, subtitle: `item202 subtitle` }, - { title: `item203`, subtitle: `item203 subtitle` }, - { title: `item204`, subtitle: `item204 subtitle` }, - { title: `item205`, subtitle: `item205 subtitle` }, - { title: `item206`, subtitle: `item206 subtitle` }, - { title: `item207`, subtitle: `item207 subtitle` }, - { title: `item208`, subtitle: `item208 subtitle` }, - { title: `item209`, subtitle: `item209 subtitle` }, - { - title: `item210`, - subtitle: `item210 subtitle`, - subsub: `something else`, - }, - { title: `item211`, subtitle: `item211 subtitle` }, - { title: `item212`, subtitle: `item212 subtitle` }, - { - title: `item213`, - subtitle: `item213 subtitle`, - subsub: `something else`, - }, - { title: `item214`, subtitle: `item214 subtitle` }, - { title: `item215`, subtitle: `item215 subtitle` }, - { title: `item216`, subtitle: `item216 subtitle` }, - { title: `item217`, subtitle: `item217 subtitle` }, - { title: `item218`, subtitle: `item218 subtitle` }, - { title: `item219`, subtitle: `item219 subtitle` }, - { title: `item220`, subtitle: `item220 subtitle` }, - { title: `item221`, subtitle: `item221 subtitle` }, - { title: `item222`, subtitle: `item222 subtitle` }, - { title: `item223`, subtitle: `item223 subtitle` }, - { title: `item224`, subtitle: `item224 subtitle` }, - { title: `item225`, subtitle: `item225 subtitle` }, - { title: `item226`, subtitle: `item226 subtitle` }, - { title: `item227`, subtitle: `item227 subtitle` }, - { title: `item228`, subtitle: `item228 subtitle` }, - { title: `item229`, subtitle: `item229 subtitle` }, - { title: `item230`, subtitle: `item230 subtitle` }, - { title: `item231`, subtitle: `item231 subtitle` }, - { title: `item232`, subtitle: `item232 subtitle` }, - { title: `item233`, subtitle: `item233 subtitle` }, - { title: `item234`, subtitle: `item234 subtitle` }, - { title: `item235`, subtitle: `item235 subtitle` }, - { title: `item236`, subtitle: `item236 subtitle` }, - { title: `item237`, subtitle: `item237 subtitle` }, - { title: `item238`, subtitle: `item238 subtitle` }, - { title: `item239`, subtitle: `item239 subtitle` }, - { title: `item240`, subtitle: `item240 subtitle` }, - { title: `item241`, subtitle: `item241 subtitle` }, - { title: `item242`, subtitle: `item242 subtitle` }, - { title: `item243`, subtitle: `item243 subtitle` }, - { title: `item244`, subtitle: `item244 subtitle` }, - { title: `item245`, subtitle: `item245 subtitle` }, - { title: `item246`, subtitle: `item246 subtitle` }, - { title: `item247`, subtitle: `item247 subtitle` }, - { title: `item248`, subtitle: `item248 subtitle` }, - { title: `item249`, subtitle: `item249 subtitle` }, - { title: `item250`, subtitle: `item250 subtitle` }, - { title: `item251`, subtitle: `item251 subtitle` }, - { title: `item252`, subtitle: `item252 subtitle` }, - { title: `item253`, subtitle: `item253 subtitle` }, - { title: `item254`, subtitle: `item254 subtitle` }, - { title: `item255`, subtitle: `item255 subtitle` }, - { title: `item256`, subtitle: `item256 subtitle` }, - { title: `item257`, subtitle: `item257 subtitle` }, - { title: `item258`, subtitle: `item258 subtitle` }, - { title: `item259`, subtitle: `item259 subtitle` }, - { title: `item260`, subtitle: `item260 subtitle` }, - { title: `item261`, subtitle: `item261 subtitle` }, - { title: `item262`, subtitle: `item262 subtitle` }, - { title: `item263`, subtitle: `item263 subtitle` }, - { title: `item264`, subtitle: `item264 subtitle` }, - { title: `item265`, subtitle: `item265 subtitle` }, - { title: `item266`, subtitle: `item266 subtitle` }, - { title: `item267`, subtitle: `item267 subtitle` }, - { title: `item268`, subtitle: `item268 subtitle` }, - { title: `item269`, subtitle: `item269 subtitle` }, - { title: `item270`, subtitle: `item270 subtitle` }, - { title: `item271`, subtitle: `item271 subtitle` }, - { title: `item272`, subtitle: `item272 subtitle` }, - { title: `item273`, subtitle: `item273 subtitle` }, - { title: `item274`, subtitle: `item274 subtitle` }, - { title: `item275`, subtitle: `item275 subtitle` }, - { title: `item276`, subtitle: `item276 subtitle` }, - { title: `item277`, subtitle: `item277 subtitle` }, - { title: `item278`, subtitle: `item278 subtitle` }, - { title: `item279`, subtitle: `item279 subtitle` }, - { title: `item280`, subtitle: `item280 subtitle` }, - { title: `item281`, subtitle: `item281 subtitle` }, - { title: `item282`, subtitle: `item282 subtitle` }, - { title: `item283`, subtitle: `item283 subtitle` }, - { title: `item284`, subtitle: `item284 subtitle` }, - { title: `item285`, subtitle: `item285 subtitle` }, - { title: `item286`, subtitle: `item286 subtitle` }, - { title: `item287`, subtitle: `item287 subtitle` }, - { title: `item288`, subtitle: `item288 subtitle` }, - { title: `item289`, subtitle: `item289 subtitle` }, - { title: `item290`, subtitle: `item290 subtitle` }, - { title: `item291`, subtitle: `item291 subtitle` }, - { title: `item292`, subtitle: `item292 subtitle` }, - { title: `item293`, subtitle: `item293 subtitle` }, - { title: `item294`, subtitle: `item294 subtitle` }, - { title: `item295`, subtitle: `item295 subtitle` }, - { title: `item296`, subtitle: `item296 subtitle` }, - { title: `item297`, subtitle: `item297 subtitle` }, - { title: `item298`, subtitle: `item298 subtitle` }, - { title: `item299`, subtitle: `item299 subtitle` }, - { title: `item300`, subtitle: `item300 subtitle` }, - ]; - - items2: Node[] = []; - - clearRows(): void { - this.items2 = []; - } - - fetchData(): void { - setTimeout(() => { - for (let i = 0; i < MAX_ROWS; i += 1) { - this.items2.push({ - host: hosts[Math.floor(Math.random() * 10)], - cpu: `${(Math.random() * 10).toFixed(2)} %`, - memory: `${(Math.random() * 10).toFixed(2)} % of ${( - Math.random() * 40 - ).toFixed(2)} GB`, - traffic: `${(Math.random() * 100).toFixed(2)} Mbit/s`, - }); - } - - this.items2 = [...this.items2]; - }, 500); - } - - renderItemFn1(item: { - title: string; - subtitle: string; - subsub: string; - }): TemplateResult { - return html` - -

${item.title}

-

${item.subtitle}

- ${item.subsub ? html`

${unsafeHTML(item.subsub)}

` : nothing} - `; - } - - trackByFn1(item: { title: string; subtitle: string }): string { - return item.title; - } - - renderItemFn2(item: Node): TemplateResult { - return html` - - ${item.host}
- ${item.cpu}
- ${item.memory}
- ${item.traffic} - `; - } - - trackByFn2(item: Node): string { - return `${item.host}${item.cpu}${item.memory}`; - } -} diff --git a/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.module.ts b/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.module.ts deleted file mode 100644 index 51436d23be..0000000000 --- a/apps/fluid-dev/src/pages/virtual-scroll-container/virtual-scroll-container-page.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { FluidVirtualScrollContainerPage } from './virtual-scroll-container-page.component'; - -export const routes: Route[] = [ - { - path: '', - component: FluidVirtualScrollContainerPage, - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], - declarations: [FluidVirtualScrollContainerPage], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class FluidVirtualScrollContainerPageModule {} diff --git a/apps/fluid-dev/src/polyfills.ts b/apps/fluid-dev/src/polyfills.ts deleted file mode 100644 index 88eb20c871..0000000000 --- a/apps/fluid-dev/src/polyfills.ts +++ /dev/null @@ -1,78 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/apps/fluid-dev/src/styles.scss b/apps/fluid-dev/src/styles.scss deleted file mode 100644 index 6e33dec478..0000000000 --- a/apps/fluid-dev/src/styles.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import '../../../libs/shared/design-tokens/generated/global/theme'; - -body { - margin: 0; - height: 100vh; -} diff --git a/apps/fluid-dev/src/test-setup.ts b/apps/fluid-dev/src/test-setup.ts deleted file mode 100644 index f993bfeef7..0000000000 --- a/apps/fluid-dev/src/test-setup.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import 'jest-preset-angular'; diff --git a/apps/fluid-dev/tsconfig.app.json b/apps/fluid-dev/tsconfig.app.json deleted file mode 100644 index e9fa6dfd93..0000000000 --- a/apps/fluid-dev/tsconfig.app.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "types": [] - }, - "files": ["src/main.ts", "src/polyfills.ts"] -} diff --git a/apps/fluid-dev/tsconfig.json b/apps/fluid-dev/tsconfig.json deleted file mode 100644 index a9e8b68815..0000000000 --- a/apps/fluid-dev/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "types": ["node", "jest"] - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/apps/fluid-dev/tsconfig.spec.json b/apps/fluid-dev/tsconfig.spec.json deleted file mode 100644 index cfff29a544..0000000000 --- a/apps/fluid-dev/tsconfig.spec.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/apps/fluid-dev/tslint.json b/apps/fluid-dev/tslint.json deleted file mode 100644 index b120317de9..0000000000 --- a/apps/fluid-dev/tslint.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../tslint.json", - "rules": { - "directive-selector": [true, "attribute", "fluid", "camelCase"], - "component-selector": [true, "element", "fluid", "kebab-case"] - }, - "linterOptions": { - "exclude": ["!**/*"] - } -} diff --git a/apps/next/browserslist b/apps/next/browserslist deleted file mode 100644 index 80848532e4..0000000000 --- a/apps/next/browserslist +++ /dev/null @@ -1,12 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -> 0.5% -last 2 versions -Firefox ESR -not dead -not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/apps/next/jest.config.js b/apps/next/jest.config.js deleted file mode 100644 index f9eddbb2d9..0000000000 --- a/apps/next/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - name: 'next', - preset: '../../jest.config.js', - coverageDirectory: '../../coverage/apps/next', - snapshotSerializers: [ - 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js', - 'jest-preset-angular/build/AngularSnapshotSerializer.js', - 'jest-preset-angular/build/HTMLCommentSerializer.js', - ], - setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: { - 'ts-jest': { - tsConfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - astTransformers: [ - 'jest-preset-angular/build/InlineFilesTransformer', - 'jest-preset-angular/build/StripStylesTransformer', - ], - }, - }, -}; diff --git a/apps/next/src/app/app.component.html b/apps/next/src/app/app.component.html deleted file mode 100644 index 23d810fb56..0000000000 --- a/apps/next/src/app/app.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
diff --git a/apps/next/src/app/app.component.scss b/apps/next/src/app/app.component.scss deleted file mode 100644 index 2e66cfd896..0000000000 --- a/apps/next/src/app/app.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '../../../../libs/shared/design-tokens/generated/global/spacing'; - -main { - min-height: 100vh; - margin: $fluid-spacing--0; - padding: $fluid-spacing--0; - background-color: var(--body-background-color); - color: var(--alternative-font-color); - transition: background-color 500ms ease-in-out; -} diff --git a/apps/next/src/app/app.component.ts b/apps/next/src/app/app.component.ts deleted file mode 100644 index b37a2391f2..0000000000 --- a/apps/next/src/app/app.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { ThemeService } from './theme.service'; - -@Component({ - selector: 'x-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class AppComponent { - title = 'next'; - - constructor(public _themeService: ThemeService) {} -} diff --git a/apps/next/src/app/app.module.ts b/apps/next/src/app/app.module.ts deleted file mode 100644 index 611cbf2b25..0000000000 --- a/apps/next/src/app/app.module.ts +++ /dev/null @@ -1,38 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppComponent } from './app.component'; -import { Nav } from './components/nav'; -import { NextRoutingModule } from './app.routing.module'; -import { HttpClientModule } from '@angular/common/http'; -import { DsPageGuard, DsPageService } from '@dynatrace/shared/design-system/ui'; -import { APP_BASE_HREF } from '@angular/common'; -import { environment } from '../environments/environment'; - -@NgModule({ - declarations: [AppComponent, Nav], - imports: [BrowserModule, HttpClientModule, NextRoutingModule], - providers: [ - DsPageGuard, - DsPageService, - { provide: APP_BASE_HREF, useValue: environment.baseHref }, - ], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/apps/next/src/app/app.routing.module.ts b/apps/next/src/app/app.routing.module.ts deleted file mode 100644 index 9b09bc3422..0000000000 --- a/apps/next/src/app/app.routing.module.ts +++ /dev/null @@ -1,55 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Route, RouterModule } from '@angular/router'; -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { ErrorPage } from './pages/error-page/error-page'; - -export const nextRoutes: Route[] = [ - { - path: '', - loadChildren: () => - import('./pages/index-page/index-page.module').then( - (module) => module.IndexPageModule, - ), - }, - { - path: '**', - loadChildren: () => - import('./pages/single-page/single-page.module').then( - (module) => module.SinglePageModule, - ), - }, -]; - -@NgModule({ - declarations: [ErrorPage], - imports: [ - CommonModule, - RouterModule.forRoot(nextRoutes, { - scrollPositionRestoration: 'enabled', - anchorScrolling: 'enabled', - paramsInheritanceStrategy: 'always', - enableTracing: false, - initialNavigation: 'enabled', - relativeLinkResolution: 'legacy', - }), - ], - exports: [RouterModule], - providers: [], -}) -export class NextRoutingModule {} diff --git a/apps/next/src/app/components/nav/index.ts b/apps/next/src/app/components/nav/index.ts deleted file mode 100644 index a58c7a4f7d..0000000000 --- a/apps/next/src/app/components/nav/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './nav'; diff --git a/apps/next/src/app/components/nav/nav.html b/apps/next/src/app/components/nav/nav.html deleted file mode 100644 index 0fb9a59dcf..0000000000 --- a/apps/next/src/app/components/nav/nav.html +++ /dev/null @@ -1,32 +0,0 @@ - diff --git a/apps/next/src/app/components/nav/nav.scss b/apps/next/src/app/components/nav/nav.scss deleted file mode 100644 index 612cad1f23..0000000000 --- a/apps/next/src/app/components/nav/nav.scss +++ /dev/null @@ -1,64 +0,0 @@ -@import '../../../../../../libs/shared/design-tokens/generated/global/spacing'; - -:host { - width: 100vw; - font-family: sans-serif; -} - -.next-nav { - background-color: var(--alternative-background-color); - position: relative; - display: flex; - justify-content: space-between; -} - -.next-nav-wrapper { - display: flex; -} - -.next-theme-switch { - padding-left: $fluid-spacing--small; - display: flex; - align-items: center; - border: none; -} - -.next-nav-item { - padding-left: $fluid-spacing--small; -} - -.next-nav-list { - display: flex; - justify-content: flex-start; - padding-left: $fluid-spacing--small; - list-style-type: none; -} - -.next-nav-brand { - font-weight: bold; - padding: $fluid-spacing--small; - font-size: large; - display: flex; - align-items: center; -} - -.next-nav-link { - text-decoration: none; - padding-bottom: $fluid-spacing--2x-small; -} - -.next-barista-theme { - display: flex; - align-items: center; - padding-right: 1rem; -} - -.next-back-to-barista { - text-decoration: none; - text-transform: uppercase; - font-size: small; -} - -.next-nav-link-active { - border-bottom: var(--color-primary-100) solid 2px; -} diff --git a/apps/next/src/app/components/nav/nav.ts b/apps/next/src/app/components/nav/nav.ts deleted file mode 100644 index 67540db934..0000000000 --- a/apps/next/src/app/components/nav/nav.ts +++ /dev/null @@ -1,45 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { ThemeService } from '../../theme.service'; -import { DsPageService } from '@dynatrace/shared/design-system/ui'; -import { map } from 'rxjs/operators'; - -@Component({ - selector: 'next-nav', - templateUrl: 'nav.html', - styleUrls: ['nav.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'next-nav', - }, -}) -export class Nav { - /** @internal Data needed to render the navigation. */ - _navData$ = this._pageService.getCategories().pipe( - map((data) => - data.map((category) => ({ - section: category, - link: category.toLowerCase(), - })), - ), - ); - constructor( - public _themeService: ThemeService, - private _pageService: DsPageService, - ) {} -} diff --git a/apps/next/src/app/pages/error-page/error-page.html b/apps/next/src/app/pages/error-page/error-page.html deleted file mode 100644 index a3e641754b..0000000000 --- a/apps/next/src/app/pages/error-page/error-page.html +++ /dev/null @@ -1,7 +0,0 @@ -
-

NiceHeadline

-
{{ content }}
-
-

No content found

-
-
diff --git a/apps/next/src/app/pages/error-page/error-page.module.ts b/apps/next/src/app/pages/error-page/error-page.module.ts deleted file mode 100644 index 71b4768bdf..0000000000 --- a/apps/next/src/app/pages/error-page/error-page.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { ErrorPage } from './error-page'; -import { DsPageGuard } from '@dynatrace/shared/design-system/ui'; - -export const routes: Route[] = [ - { - path: '', - component: ErrorPage, - canActivate: [DsPageGuard], - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], - declarations: [], - providers: [], -}) -export class ErrorPageModule {} diff --git a/apps/next/src/app/pages/error-page/error-page.scss b/apps/next/src/app/pages/error-page/error-page.scss deleted file mode 100644 index 5d4e87f30f..0000000000 --- a/apps/next/src/app/pages/error-page/error-page.scss +++ /dev/null @@ -1,3 +0,0 @@ -:host { - display: block; -} diff --git a/apps/next/src/app/pages/error-page/error-page.ts b/apps/next/src/app/pages/error-page/error-page.ts deleted file mode 100644 index d119fe4695..0000000000 --- a/apps/next/src/app/pages/error-page/error-page.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component } from '@angular/core'; -import { DsPageService } from '@dynatrace/shared/design-system/ui'; -import { DsPage } from '@dynatrace/shared/design-system/interfaces'; - -@Component({ - selector: 'ds-error-page', - templateUrl: './error-page.html', - styleUrls: ['./error-page.scss'], - host: { - class: 'ds-error-page', - }, -}) -export class ErrorPage { - content = this._pageService._getCurrentPage(); - - constructor(private _pageService: DsPageService) {} -} diff --git a/apps/next/src/app/pages/index-page/index-page.html b/apps/next/src/app/pages/index-page/index-page.html deleted file mode 100644 index a3e641754b..0000000000 --- a/apps/next/src/app/pages/index-page/index-page.html +++ /dev/null @@ -1,7 +0,0 @@ -
-

NiceHeadline

-
{{ content }}
-
-

No content found

-
-
diff --git a/apps/next/src/app/pages/index-page/index-page.module.ts b/apps/next/src/app/pages/index-page/index-page.module.ts deleted file mode 100644 index 3be2b5145e..0000000000 --- a/apps/next/src/app/pages/index-page/index-page.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { IndexPage } from './index-page'; -import { DsPageGuard } from '@dynatrace/shared/design-system/ui'; - -export const routes: Route[] = [ - { - path: '', - component: IndexPage, - canActivate: [DsPageGuard], - }, -]; - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], - declarations: [IndexPage], - providers: [], -}) -export class IndexPageModule {} diff --git a/apps/next/src/app/pages/index-page/index-page.scss b/apps/next/src/app/pages/index-page/index-page.scss deleted file mode 100644 index 5d4e87f30f..0000000000 --- a/apps/next/src/app/pages/index-page/index-page.scss +++ /dev/null @@ -1,3 +0,0 @@ -:host { - display: block; -} diff --git a/apps/next/src/app/pages/index-page/index-page.ts b/apps/next/src/app/pages/index-page/index-page.ts deleted file mode 100644 index 35f85edbfe..0000000000 --- a/apps/next/src/app/pages/index-page/index-page.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, OnInit } from '@angular/core'; -import { DsPageService } from '@dynatrace/shared/design-system/ui'; -import { DsPage } from '@dynatrace/shared/design-system/interfaces'; -import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; - -@Component({ - selector: 'ds-index-page', - templateUrl: './index-page.html', - styleUrls: ['./index-page.scss'], - host: { - class: 'ds-index-page', - }, -}) -export class IndexPage implements OnInit { - page = this._pageService._getCurrentPage(); - content: SafeHtml; - - constructor( - private _pageService: DsPageService, - private _sanitizer: DomSanitizer, - ) {} - - ngOnInit(): void { - if (this.page?.content) { - this.content = this._sanitizer.bypassSecurityTrustHtml(this.page.content); - } - } -} diff --git a/apps/next/src/app/pages/single-page/components/page-footer/index.ts b/apps/next/src/app/pages/single-page/components/page-footer/index.ts deleted file mode 100644 index 3c88c9071d..0000000000 --- a/apps/next/src/app/pages/single-page/components/page-footer/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './page-footer'; diff --git a/apps/next/src/app/pages/single-page/components/page-footer/page-footer.html b/apps/next/src/app/pages/single-page/components/page-footer/page-footer.html deleted file mode 100644 index a3872157ee..0000000000 --- a/apps/next/src/app/pages/single-page/components/page-footer/page-footer.html +++ /dev/null @@ -1 +0,0 @@ -
page footer
diff --git a/apps/next/src/app/pages/single-page/components/page-footer/page-footer.scss b/apps/next/src/app/pages/single-page/components/page-footer/page-footer.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/next/src/app/pages/single-page/components/page-footer/page-footer.ts b/apps/next/src/app/pages/single-page/components/page-footer/page-footer.ts deleted file mode 100644 index de9b6818f6..0000000000 --- a/apps/next/src/app/pages/single-page/components/page-footer/page-footer.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component } from '@angular/core'; - -@Component({ - selector: 'next-page-footer', - templateUrl: 'page-footer.html', - styleUrls: ['page-footer.scss'], - host: { - class: 'next-page-footer', - }, -}) -export class NextPageFooter {} diff --git a/apps/next/src/app/pages/single-page/components/sidenav/index.ts b/apps/next/src/app/pages/single-page/components/sidenav/index.ts deleted file mode 100644 index 3880adcfd5..0000000000 --- a/apps/next/src/app/pages/single-page/components/sidenav/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './sidenav'; diff --git a/apps/next/src/app/pages/single-page/components/sidenav/sidenav.html b/apps/next/src/app/pages/single-page/components/sidenav/sidenav.html deleted file mode 100644 index 486f4ddf42..0000000000 --- a/apps/next/src/app/pages/single-page/components/sidenav/sidenav.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
{{section.title}}
- -
diff --git a/apps/next/src/app/pages/single-page/components/sidenav/sidenav.scss b/apps/next/src/app/pages/single-page/components/sidenav/sidenav.scss deleted file mode 100644 index 7608119bc0..0000000000 --- a/apps/next/src/app/pages/single-page/components/sidenav/sidenav.scss +++ /dev/null @@ -1,49 +0,0 @@ -@import '../../../../../../../../libs/shared/design-tokens/generated/global/spacing'; - -:host { - height: 100vh; - background-color: var(--alternative-background-color); - grid-area: sidenav; - padding: 0 $fluid-spacing--large; -} - -.ds-sidenav-section { - margin: $fluid-spacing--small 0; - display: flex; - flex-direction: column; - - ul { - list-style: none; - margin: 0; - padding-left: 0; - - li { - margin-bottom: $fluid-spacing--x-small; - } - } -} - -.ds-sidenav-section-title { - font-weight: 700; - color: var(--color-maxcontrast); - margin-bottom: $fluid-spacing--x-small; -} - -.ds-sidenav-item { - text-overflow: ellipsis; - overflow: hidden; - color: var(--alternative-font-color); - position: relative; - text-decoration: none; -} - -.ds-sidenav-item.ds-sidenav-item-active { - color: var(--color-maxcontrast); -} - -.ds-sidenav-item.ds-sidenav-item-active:before { - position: absolute; - content: '• '; - color: var(--color-primary-100); - left: -$fluid-spacing--small; -} diff --git a/apps/next/src/app/pages/single-page/components/sidenav/sidenav.ts b/apps/next/src/app/pages/single-page/components/sidenav/sidenav.ts deleted file mode 100644 index 4624b7d70d..0000000000 --- a/apps/next/src/app/pages/single-page/components/sidenav/sidenav.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'nav[next-sidenav]', - templateUrl: 'sidenav.html', - styleUrls: ['sidenav.scss'], - host: { - class: 'next-sidenav', - }, -}) -export class DsSidenav { - /** all sidenav items */ - @Input() sidenavData; -} diff --git a/apps/next/src/app/pages/single-page/single-page.html b/apps/next/src/app/pages/single-page/single-page.html deleted file mode 100644 index 7903ef6596..0000000000 --- a/apps/next/src/app/pages/single-page/single-page.html +++ /dev/null @@ -1,15 +0,0 @@ -
- - -
-
- -
-
- - -
diff --git a/apps/next/src/app/pages/single-page/single-page.module.ts b/apps/next/src/app/pages/single-page/single-page.module.ts deleted file mode 100644 index d2f98203bc..0000000000 --- a/apps/next/src/app/pages/single-page/single-page.module.ts +++ /dev/null @@ -1,57 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { Route, RouterModule } from '@angular/router'; -import { SinglePage } from './single-page'; -import { - DsPageGuard, - DsPageService, - SharedDesignSystemUiModule, - DS_CONTENT_COMPONENT_LIST_TOKEN, -} from '@dynatrace/shared/design-system/ui'; -import { NextPageFooter } from './components/page-footer'; -import { DsSidenav } from './components/sidenav'; - -export const routes: Route[] = [ - { - path: '', - component: SinglePage, - canActivate: [DsPageGuard], - }, -]; - -export const DS_CONTENT_TYPES: Type[] = []; - -@NgModule({ - imports: [ - CommonModule, - RouterModule.forChild(routes), - SharedDesignSystemUiModule, - ], - declarations: [SinglePage, NextPageFooter, DsSidenav], - providers: [ - DsPageGuard, - DsPageService, - { - provide: DS_CONTENT_COMPONENT_LIST_TOKEN, - useValue: DS_CONTENT_TYPES, - }, - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class SinglePageModule {} diff --git a/apps/next/src/app/pages/single-page/single-page.scss b/apps/next/src/app/pages/single-page/single-page.scss deleted file mode 100644 index dcd64fd58c..0000000000 --- a/apps/next/src/app/pages/single-page/single-page.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import '../../styles/page'; - -:host { - display: block; -} - -.next-page-main { - grid-area: main; -} diff --git a/apps/next/src/app/pages/single-page/single-page.ts b/apps/next/src/app/pages/single-page/single-page.ts deleted file mode 100644 index fa324168e0..0000000000 --- a/apps/next/src/app/pages/single-page/single-page.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component } from '@angular/core'; -import { BaSinglePageContent } from '@dynatrace/shared/design-system/interfaces'; -import { DsPageService } from '@dynatrace/shared/design-system/ui'; -import '@dynatrace/fluid-elements/button'; - -@Component({ - selector: 'ds-single-page', - templateUrl: 'single-page.html', - styleUrls: ['single-page.scss'], - host: { - class: 'ds-single-page', - }, -}) -export class SinglePage { - /** @internal The current page content from the cms */ - _pageContent = this._pageService._getCurrentPage(); - - constructor(private _pageService: DsPageService) {} -} diff --git a/apps/next/src/app/styles/_page.scss b/apps/next/src/app/styles/_page.scss deleted file mode 100644 index 2693c1009d..0000000000 --- a/apps/next/src/app/styles/_page.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../../../libs/shared/design-tokens/generated/global/spacing'; - -.next-page-grid { - display: grid; - grid-template-columns: 270px minmax(0, 1fr) 280px; - grid-template-rows: repeat(2, max-content) 1fr; - grid-template-areas: - 'sidenav title .' - 'sidenav main meta' - 'sidenav footer .'; -} diff --git a/apps/next/src/app/theme.service.ts b/apps/next/src/app/theme.service.ts deleted file mode 100644 index ec96ebd149..0000000000 --- a/apps/next/src/app/theme.service.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Injectable } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; -import { map } from 'rxjs/operators'; - -type Theme = 'abyss' | 'surface'; - -@Injectable({ - providedIn: 'root', -}) -export class ThemeService { - private _currentTheme$ = new BehaviorSubject('abyss'); - - currentTheme$ = this._currentTheme$.asObservable(); - currentThemeCssClass$ = this._currentTheme$.pipe( - map((theme) => `fluid-theme--${theme}`), - ); - - constructor() {} - - toggle(): void { - this._currentTheme$.next( - this._currentTheme$.value === 'abyss' ? 'surface' : 'abyss', - ); - } -} diff --git a/apps/next/src/assets/.gitkeep b/apps/next/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/next/src/environments/environment.prod.ts b/apps/next/src/environments/environment.prod.ts deleted file mode 100644 index 8f399d7213..0000000000 --- a/apps/next/src/environments/environment.prod.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export const environment = { - production: true, - baseHref: '/next', -}; diff --git a/apps/next/src/environments/environment.ts b/apps/next/src/environments/environment.ts deleted file mode 100644 index 2449babc3c..0000000000 --- a/apps/next/src/environments/environment.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - internal: true, - production: false, - baseHref: '', -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/apps/next/src/favicon.ico b/apps/next/src/favicon.ico deleted file mode 100644 index 317ebcb233..0000000000 Binary files a/apps/next/src/favicon.ico and /dev/null differ diff --git a/apps/next/src/index.html b/apps/next/src/index.html deleted file mode 100644 index 5e245a0f90..0000000000 --- a/apps/next/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Next - - - - - - - - diff --git a/apps/next/src/main.ts b/apps/next/src/main.ts deleted file mode 100644 index e6287219cf..0000000000 --- a/apps/next/src/main.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { enableProdMode, ViewEncapsulation } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule, { - defaultEncapsulation: ViewEncapsulation.Emulated, - }) - .catch((err) => console.error(err)); diff --git a/apps/next/src/polyfills.ts b/apps/next/src/polyfills.ts deleted file mode 100644 index 88eb20c871..0000000000 --- a/apps/next/src/polyfills.ts +++ /dev/null @@ -1,78 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/apps/next/src/styles.scss b/apps/next/src/styles.scss deleted file mode 100644 index c3bfc35248..0000000000 --- a/apps/next/src/styles.scss +++ /dev/null @@ -1,90 +0,0 @@ -@import '../../../libs/shared/design-tokens/generated/global/theme'; -@import '../../../libs/shared/design-tokens/generated/global/spacing'; -@import '../../../libs/shared/design-tokens/generated/global/typography'; - -.fluid-theme--abyss { - --body-background-color: var(--color-neutral-60); - --alternative-background-color: var(--color-background); - --alternative-font-color: var(--color-neutral-100); -} - -.fluid-theme--surface { - --body-background-color: var(--color-background); - --alternative-background-color: var(--color-neutral-60); - --alternative-font-color: var(--color-neutral-100); -} - -* { - box-sizing: border-box; -} - -*::after, -*::before { - box-sizing: inherit; -} - -html { - @include fluid-dt-text(); - box-sizing: border-box; - width: 100vw; - height: 100vh; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; -} - -body { - @include fluid-dt-text(); - display: flex; - flex-direction: column; - min-height: 100vh; - margin: $fluid-spacing--0; - padding: $fluid-spacing--0; - font-family: sans-serif; -} - -h1 { - @include fluid-dt-h1(); -} - -h2 { - @include fluid-dt-h2(); -} - -h3 { - @include fluid-dt-h3(); -} - -h4 { - @include fluid-dt-h4(); -} - -h5 { - @include fluid-dt-h5(); -} - -h6  { - @include fluid-dt-h6(); -} - -h1, -h2, -h3, -h4, -h5, -h6, -a, -p { - color: var(--color-maxcontrast); -} - -.next-btn-icon { - padding-left: $fluid-spacing--0; - padding-right: $fluid-spacing--0; - text-align: center; - background-color: transparent; - - svg path { - fill: var(--color-maxcontrast); - } -} diff --git a/apps/next/src/test-setup.ts b/apps/next/src/test-setup.ts deleted file mode 100644 index f993bfeef7..0000000000 --- a/apps/next/src/test-setup.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import 'jest-preset-angular'; diff --git a/apps/next/tsconfig.app.json b/apps/next/tsconfig.app.json deleted file mode 100644 index e9fa6dfd93..0000000000 --- a/apps/next/tsconfig.app.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "types": [] - }, - "files": ["src/main.ts", "src/polyfills.ts"] -} diff --git a/apps/next/tsconfig.json b/apps/next/tsconfig.json deleted file mode 100644 index a9e8b68815..0000000000 --- a/apps/next/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "types": ["node", "jest"] - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/apps/next/tsconfig.spec.json b/apps/next/tsconfig.spec.json deleted file mode 100644 index cfff29a544..0000000000 --- a/apps/next/tsconfig.spec.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/apps/next/tslint.json b/apps/next/tslint.json deleted file mode 100644 index 4fe76c83d8..0000000000 --- a/apps/next/tslint.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "../../tslint.json", - "rules": { - "directive-selector": [true, "attribute", "x", "camelCase"], - "component-selector": [false, "element", "next", "kebab-case"], - "dt-require-license-banner": true - }, - "linterOptions": { - "exclude": ["!**/*"] - } -} diff --git a/concepts/design-tokens/README.md b/concepts/design-tokens/README.md deleted file mode 100644 index f9302cc7ed..0000000000 --- a/concepts/design-tokens/README.md +++ /dev/null @@ -1,234 +0,0 @@ -# Design tokens - -> Design tokens are an agnostic way to store variables such as typography, -> color, and spacing so that your design system can be shared across platforms -> like iOS, Android, and regular ol' websites. - --- Robin Rendle "[What are design tokens]", CSS-Tricks - -## What we want to achive with Design tokens - -In the current state of the Barista components library, we do share some basic -color, typography and spacing definitions through scss mixins and variables -within the angular ecosystem. Which works very well for color definitions, did -not prove to be consistent for spacings and typography definitions. As our plans -for Barista do not only target Angular, but a more framework agnostic component -library, we are re-evaluating the way on how we deal with design tokens. - -Extracted design tokens should enable us to be extremely consistent within the -system. With everything, that is relevant to the design-language baked into -tokens, we should be able to enforce usage of these tokens with linting rules -like [stylelint declaration strict value]. - -## Naming of design tokens - -To prevent conflicts with css custom properties or other variables in output -files, we should prefix all our provided design tokens, mixins or exported -constants with a `dt-`/`dt` prefix. - -## Structure - -Tokens are usually stored in some sort of structural data (yml, json, -database,...). Which format we are ultimately choosing is still up for -discussion. - -Just like the format, the file structure is also up for discussion. There are -multiple ways of structuring the design tokens into a folder structure, and a -conversion tool like [theo] will let you customize -[input and output formats quite easily](#output-and-formats). - -Here are some variations of design tokens structure in the wild: - -- [Salesforce design tokens] -- [Open table design tokens] -- [FirefoxUX design tokens] -- [Stu Robson SCL Tokens] - -This is what we currently envision the structure of the design tokens to look -like: - -``` -aliases - | border-radius.alias.yml - | breakpoints.alias.yml - | families.alias.yml - | palette.alias.yml - | typography.alias.yml - -global - | colors.yml - | font-family.yml - | spacing.yml - -patterns/components - | button.yml - | card.yml - | switch.yml - -theme ? -``` - -### Aliases - -Aliases should be considered variable definitions that assign a specific value -to a variable name. These variable definitions are not considered design tokens -yet, but they define values to be used within the global or pattern definitions. -Examples could look like this: - -```yml -# aliases/spacing.alias.yml -aliases: - spacing--0: 0 - spacing--xx-small: 2px - spacing--x-small: 4px - spacing--small: 8px - spacing--medium: 16px - spacing--large: 32px -``` - -### Global - -Global tokens are considered very general declarations like spacing and colors -again. These mostly share their traits with the definitions from the aliases, -but can give some additional information about the usage of the token. These -tokens are available on a root level for the consuming project and will be used -further down the line by patterns / components portion of the structure. - -```yml -# global/spacing.yml -imports: - - '../aliases/spacing.alias.yml' - -props: - - name: dt-spacing--0 - value: '{!spacing--0}' - comment: 'Zero spacing, use sparcely as it will make layouts very dense' - meta: - friendlyName: 'No spacing' - - - name: dt-spacing--xx-small - value: '{!spacing--xx-small}' - meta: - friendlyName: 'Spacing, xx-small' - - - name: dt-spacing--x-small - value: '{!spacing--x-small}' - meta: - friendlyName: 'Spacing, x-small' -# ... -``` - -### Patterns or Components - -Pattern tokens are consuming tokens and declarations from the aliases and the -globals scope and define various design tokens for patterns / components like a -grid-layout or a button. - -```yml -# patterns/button.yml -imports: - - '../aliases/spacing.alias.yml' - - '../aliases/palette.alias.yml' -props: - # Base - - # Colours - - name: dt-base-button-background-color - value: '{!color-key-base}' - comment: Base Colours - - name: dt-base-button-border-color - value: '{!color-key-lighter}' - - # Hover Styles - - name: dt-base-button-background-color--hover - value: '{!color-key-lighter}' - - # Primary - - - name: dt-primary-button-background-color - value: '{!color-key-base}' - comment: Primary Colours - - name: dt-primary-button-background-color--hover - value: '{!color-key-lighter}' - - - name: dt-primary-button-border-color - value: '{!color-key--lighter}' -``` - -## Output and formats - -Tools like [theo] can help us transform the yml/json definitions of our design -tokens into the output formats that we want to provide / consume with the design -system. Potential output formats that we should consider: - -### CSS custom properites - -CSS custom properties can be considered for everything that should be able to be -evaluated on the client or customized by the consumer. Options for this would -be: - -- Button colors ([Weightless custom properties definition]) -- Layout density -- Contrast mode / A11y mode changes - -Potential output could look like this: - -```css -/** custom-properties/button.css */ -:root { - --dt-base-button-background-color: #123456; - --dt-base-button-background-color--hover: #123456; - --dt-primary-button-background-color: #123456; - --dt-primary-button-background-color--hover: #123456; -} -``` - -### Scss variables - -Scss variables should be considered for everything that should be baked into the -design system and should not be customizable by the consumer. A healthy mix -between Scss variables and css custom properties is probably the best way to -target here. - -Potential output could look like this: - -```scss -/** scss-variables/button.scss*/ -$dt-base-button-background-color: #123456; -$dt-base-button-background-color--hover: #123456; -$dt-primary-button-background-color: #123456; -$dt-primary-button-background-color--hover: #123456; - -// But could also include -$dt-base-button-customizeable-example: var(--dt-base-button-background-color); -``` - -### Typescript constants - -Sometimes it becomes necessary to use certain design tokens within component -logic. For some of these use cases, exported typescript constants for the design -tokens could help us keep things in sync between typescript and style. - -Potential output could look like this: - -```ts -/** ts-constants/button.ts*/ -export const DT_BASE_BUTTON_BACKGROUND_COLOR = '#123456'; -export const DT_BASE_BUTTON_BACKGROUND_COLOR_HOVER = '#123456'; -export const DT_PRIMARY_BUTTON_BACKGROUND_COLOR = '#123456'; -export const DT_PRIMARY_BUTTON_BACKGROUND_COLOR_HOVER = '#123456'; -``` - -[what are design tokens]: https://css-tricks.com/what-are-design-tokens/ -[theo]: https://github.com/salesforce-ux/theo -[stylelint declaration strict value]: - https://github.com/AndyOGo/stylelint-declaration-strict-value -[stu robson scl tokens]: - https://github.com/sturobson/SCL/tree/b22d4dfc6998a91c50d241ecc6ad379718571953/Design-Tokens -[salesforce design tokens]: - https://github.com/salesforce-ux/design-system/tree/master/design-tokens -[open table design tokens]: - https://github.com/opentable/design-tokens/tree/master/OTKit -[firefoxux design tokens]: https://github.com/FirefoxUX/design-tokens -[weightless custom properties definition]: - https://github.com/andreasbm/weightless/blob/6c7965981752e85206d9da459110b2dddeecf9ec/src/lib/button/button.ts#L23-L46 diff --git a/concepts/web-components/README.md b/concepts/web-components/README.md deleted file mode 100644 index c0246f8188..0000000000 --- a/concepts/web-components/README.md +++ /dev/null @@ -1,30 +0,0 @@ -# Web components - -## References and comparison - -| Name | Homepage | SCM | Build setup | Base-framework | Testing | Docs | Output | -| ---------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------ | ---------------------------------- | ------- | ---------- | ------------------------------------------------------------------------------------------------ | -| Weightless | [Home page](https://weightless.dev/) | [Github](https://github.com/andreasbm/weightless) | Rollup | Lit-elements | Karma | Custom | Single bundle per component, containing `.js`, `.dts` and `.scss.js` files. | -| Lion | [Home page](https://lion-web-components.netlify.com/?path=/story/intro-lion-web-components--page) | [Github](https://github.com/ing-bank/lion) | Individual package build with lerna | Lit elements | Karma | Storybook | One npm bundle per component, different versions per component. | -| Bolt | [Home page](https://boltdesignsystem.com/) | [Github](https://github.com/boltdesignsystem/bolt) | Individual packages built with lerna | Native with some parts of lit-html | Jest | Patternlab | Privately published to npm. Based on Lerna config, single output package with connected version. | - - - - -## Inspiration - -### Weightless css custom property usage and documentation - -It is really amazing how the weightless system uses css custom properties and -how they document what is actually possible to style within the custom element. -They do annotate the css properties and capabilities of the custom element -within the code, with custom JSdoc comments ([Weightless button JSdoc]). They -output this information into the [readme][weightless button readme] file with a -[generation script][weightless button readme generate]. - -[weightless button jsdoc]: - https://github.com/andreasbm/weightless/blob/6c7965981752e85206d9da459110b2dddeecf9ec/src/lib/button/button.ts#L23-L46 -[weightless button readme generate]: - https://github.com/andreasbm/weightless/blob/6c7965981752e85206d9da459110b2dddeecf9ec/package.json#L52 -[weightless button readme]: - https://github.com/andreasbm/weightless/blob/master/src/lib/button/README.md diff --git a/libs/design-tokens-ui/input/BUILD.bazel b/libs/design-tokens-ui/input/BUILD.bazel deleted file mode 100644 index a130d8ba1c..0000000000 --- a/libs/design-tokens-ui/input/BUILD.bazel +++ /dev/null @@ -1,9 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "stylelint") - -package(default_visibility = ["//:__subpackages__"]) - -stylelint( - name = "stylelint", - srcs = glob(["**/*.scss"]), - allow_empty_input = True, -) diff --git a/libs/design-tokens-ui/input/README.md b/libs/design-tokens-ui/input/README.md deleted file mode 100644 index 36ec5f126b..0000000000 --- a/libs/design-tokens-ui/input/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# design-tokens-ui-input - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `nx test design-tokens-ui-input` to execute the unit tests. diff --git a/libs/design-tokens-ui/input/jest.config.js b/libs/design-tokens-ui/input/jest.config.js deleted file mode 100644 index 89d2db3825..0000000000 --- a/libs/design-tokens-ui/input/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - name: 'design-tokens-ui-input', - preset: '../../../jest.config.js', - coverageDirectory: '../../../coverage/libs/design-tokens-ui/input', - snapshotSerializers: [ - 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js', - 'jest-preset-angular/build/AngularSnapshotSerializer.js', - 'jest-preset-angular/build/HTMLCommentSerializer.js', - ], - setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: { - 'ts-jest': { - tsConfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - astTransformers: [ - 'jest-preset-angular/build/InlineFilesTransformer', - 'jest-preset-angular/build/StripStylesTransformer', - ], - }, - }, -}; diff --git a/libs/design-tokens-ui/input/src/index.ts b/libs/design-tokens-ui/input/src/index.ts deleted file mode 100644 index 457369391c..0000000000 --- a/libs/design-tokens-ui/input/src/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/input.module'; -export * from './lib/input.component'; diff --git a/libs/design-tokens-ui/input/src/lib/input.component.ts b/libs/design-tokens-ui/input/src/lib/input.component.ts deleted file mode 100644 index 1b633990c5..0000000000 --- a/libs/design-tokens-ui/input/src/lib/input.component.ts +++ /dev/null @@ -1,71 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Directive, forwardRef, ElementRef } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; - -@Directive({ - selector: `input[designTokensUiInput], textarea[designTokensUiInput]`, - host: { - class: 'design-tokens-ui-input', - '(input)': '_onInput($event)', - }, - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => DesignTokensUiInputComponent), - multi: true, - }, - ], -}) -export class DesignTokensUiInputComponent implements ControlValueAccessor { - onChange = (_: string | number) => {}; - onTouched = () => {}; - - constructor(private _elementRef: ElementRef) {} - - writeValue(value: string): void { - const convertedValue = this._convertValue(value); - - this._elementRef.nativeElement.value = convertedValue; - this.onChange(convertedValue); - } - - registerOnChange(fn: (value: string | number) => void): void { - this.onChange = fn; - } - - registerOnTouched(fn: () => void): void { - this.onTouched = fn; - } - - /** @internal Handles the input change - noop method */ - _onInput(event: Event): void { - const value = this._convertValue((event.target as HTMLInputElement).value); - this.onChange(value); - } - - /** Convert values in numeric input fields to numbers */ - private _convertValue(value: string): string | number { - if ( - this._elementRef.nativeElement.getAttribute('inputmode') === 'numeric' - ) { - return parseFloat(value) ?? 0; - } else { - return value ?? ''; - } - } -} diff --git a/libs/design-tokens-ui/input/src/lib/input.module.ts b/libs/design-tokens-ui/input/src/lib/input.module.ts deleted file mode 100644 index dd0a4bde58..0000000000 --- a/libs/design-tokens-ui/input/src/lib/input.module.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { DesignTokensUiInputComponent } from './input.component'; - -@NgModule({ - imports: [CommonModule], - declarations: [DesignTokensUiInputComponent], - exports: [DesignTokensUiInputComponent], -}) -export class DesignTokensUiInputModule {} diff --git a/libs/design-tokens-ui/input/src/test-setup.ts b/libs/design-tokens-ui/input/src/test-setup.ts deleted file mode 100644 index f993bfeef7..0000000000 --- a/libs/design-tokens-ui/input/src/test-setup.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import 'jest-preset-angular'; diff --git a/libs/design-tokens-ui/input/tsconfig.json b/libs/design-tokens-ui/input/tsconfig.json deleted file mode 100644 index 1b6ee0bf6f..0000000000 --- a/libs/design-tokens-ui/input/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "types": ["node", "jest"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/design-tokens-ui/input/tsconfig.lib.json b/libs/design-tokens-ui/input/tsconfig.lib.json deleted file mode 100644 index 2dc9b2ccd7..0000000000 --- a/libs/design-tokens-ui/input/tsconfig.lib.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "target": "es2015", - "declaration": true, - "inlineSources": true, - "types": [], - "lib": ["dom", "es2018"] - }, - "angularCompilerOptions": { - "skipTemplateCodegen": true, - "strictMetadataEmit": true, - "enableResourceInlining": true - }, - "exclude": ["src/test-setup.ts", "**/*.spec.ts"], - "include": ["**/*.ts"] -} diff --git a/libs/design-tokens-ui/input/tsconfig.lib.prod.json b/libs/design-tokens-ui/input/tsconfig.lib.prod.json deleted file mode 100644 index cbae794224..0000000000 --- a/libs/design-tokens-ui/input/tsconfig.lib.prod.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "./tsconfig.lib.json", - "angularCompilerOptions": { - "enableIvy": false - } -} diff --git a/libs/design-tokens-ui/input/tsconfig.spec.json b/libs/design-tokens-ui/input/tsconfig.spec.json deleted file mode 100644 index fd405a65ef..0000000000 --- a/libs/design-tokens-ui/input/tsconfig.spec.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/libs/design-tokens-ui/input/tslint.json b/libs/design-tokens-ui/input/tslint.json deleted file mode 100644 index 810ae34419..0000000000 --- a/libs/design-tokens-ui/input/tslint.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../../tslint.json", - "rules": { - "directive-selector": [true, "attribute", "designTokensUi", "camelCase"], - "component-selector": [true, "element", "design-tokens-ui", "kebab-case"] - }, - "linterOptions": { - "exclude": ["!**/*"] - } -} diff --git a/libs/design-tokens-ui/shared/README.md b/libs/design-tokens-ui/shared/README.md deleted file mode 100644 index c659898272..0000000000 --- a/libs/design-tokens-ui/shared/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# design-tokens-ui-shared - -This library is a shared bridge between the desing-tokens generation and the -design tokens ui as a representation tool for the design tokens. - -## Running unit tests - -Run `nx test design-tokens-ui-shared` to execute the unit tests. diff --git a/libs/design-tokens-ui/shared/jest.config.js b/libs/design-tokens-ui/shared/jest.config.js deleted file mode 100644 index 6c02a1263f..0000000000 --- a/libs/design-tokens-ui/shared/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - name: 'design-tokens-ui-shared', - preset: '../../../jest.config.js', - coverageDirectory: '../../../coverage/libs/design-tokens-ui/shared', - snapshotSerializers: [ - 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js', - 'jest-preset-angular/build/AngularSnapshotSerializer.js', - 'jest-preset-angular/build/HTMLCommentSerializer.js', - ], - setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: { - 'ts-jest': { - tsConfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - astTransformers: [ - 'jest-preset-angular/build/InlineFilesTransformer', - 'jest-preset-angular/build/StripStylesTransformer', - ], - }, - }, -}; diff --git a/libs/design-tokens-ui/shared/src/index.ts b/libs/design-tokens-ui/shared/src/index.ts deleted file mode 100644 index cff7891a66..0000000000 --- a/libs/design-tokens-ui/shared/src/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/utils'; -export * from './lib/types'; diff --git a/libs/design-tokens-ui/shared/src/lib/types/index.ts b/libs/design-tokens-ui/shared/src/lib/types/index.ts deleted file mode 100644 index c93b51af2c..0000000000 --- a/libs/design-tokens-ui/shared/src/lib/types/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './palette'; diff --git a/libs/design-tokens-ui/shared/src/lib/types/palette.ts b/libs/design-tokens-ui/shared/src/lib/types/palette.ts deleted file mode 100644 index 4c7734693c..0000000000 --- a/libs/design-tokens-ui/shared/src/lib/types/palette.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - FluidPaletteSourceAlias, - FluidPaletteGenerationOptions, -} from '@dynatrace/shared/design-system/interfaces'; - -export interface Palette { - name: string; - tokenData: FluidPaletteSourceAlias; - generatedColors: string[]; -} - -export interface Theme { - name: string; - palettes: Palette[]; - globalGenerationOptions?: FluidPaletteGenerationOptions; -} diff --git a/libs/design-tokens-ui/shared/src/lib/utils/index.ts b/libs/design-tokens-ui/shared/src/lib/utils/index.ts deleted file mode 100644 index 4071ec7829..0000000000 --- a/libs/design-tokens-ui/shared/src/lib/utils/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './math'; -export * from './palette-generation'; diff --git a/libs/design-tokens-ui/shared/src/lib/utils/math.spec.ts b/libs/design-tokens-ui/shared/src/lib/utils/math.spec.ts deleted file mode 100644 index 4063ec6307..0000000000 --- a/libs/design-tokens-ui/shared/src/lib/utils/math.spec.ts +++ /dev/null @@ -1,75 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { lerp, normalizeToRange, remapRange } from './math'; - -describe('lerp', () => { - test.each` - min | max | t | output - ${0} | ${1} | ${0} | ${0} - ${0} | ${1} | ${1} | ${1} - ${0} | ${1} | ${0.5} | ${0.5} - ${-100} | ${100} | ${0} | ${-100} - ${-100} | ${100} | ${1} | ${100} - ${-100} | ${100} | ${0.5} | ${0} - ${0} | ${Number.MAX_VALUE} | ${0} | ${0} - ${0} | ${Number.MAX_VALUE} | ${1} | ${Number.MAX_VALUE} - `( - 'results in $output with min=$min, max=$max and t=$t', - ({ min, max, t, output }: any) => { - expect(lerp(min, max, t)).toBe(output); - }, - ); -}); - -describe('normalizeToRange', () => { - test.each` - min | max | value | output - ${0} | ${1} | ${0} | ${0} - ${0} | ${1} | ${1} | ${1} - ${0} | ${1} | ${0.5} | ${0.5} - ${-100} | ${100} | ${-100} | ${0} - ${-100} | ${100} | ${100} | ${1} - ${-100} | ${100} | ${0} | ${0.5} - ${0} | ${Number.MAX_VALUE} | ${0} | ${0} - ${0} | ${Number.MAX_VALUE} | ${Number.MAX_VALUE} | ${1} - `( - 'results in $output with min=$min, max=$max and value=$value', - ({ min, max, value, output }: any) => { - expect(normalizeToRange(min, max, value)).toBe(output); - }, - ); -}); - -describe('remapRange', () => { - test.each` - fromMin | fromMax | toMin | toMax | value | output - ${0} | ${1} | ${0} | ${1} | ${0} | ${0} - ${0} | ${1} | ${0} | ${1} | ${1} | ${1} - ${0} | ${1} | ${0} | ${1} | ${0.5} | ${0.5} - ${-50} | ${50} | ${0} | ${100} | ${-50} | ${0} - ${-50} | ${50} | ${0} | ${100} | ${50} | ${100} - ${-50} | ${50} | ${0} | ${100} | ${0} | ${50} - ${0} | ${100} | ${-50} | ${50} | ${0} | ${-50} - ${0} | ${100} | ${-50} | ${50} | ${100} | ${50} - ${0} | ${100} | ${-50} | ${50} | ${50} | ${0} - `( - 'results in $output when remapping from [$fromMin, $fromMax] to [$toMin, $toMax] with value=$value', - ({ fromMin, fromMax, toMin, toMax, value, output }: any) => { - expect(remapRange(fromMin, fromMax, toMin, toMax, value)).toBe(output); - }, - ); -}); diff --git a/libs/design-tokens-ui/shared/src/lib/utils/math.ts b/libs/design-tokens-ui/shared/src/lib/utils/math.ts deleted file mode 100644 index 60a98b9676..0000000000 --- a/libs/design-tokens-ui/shared/src/lib/utils/math.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// Easing functions (see https://easings.net) -export const easeIn = (t: number, exponent: number = 2) => - Math.pow(t, exponent); -export const easeOut = (t: number, exponent: number = 2) => - 1 - Math.pow(1 - t, exponent); -export const easeInOutQuad = (t: number) => - t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; -export const easeInOutCubic = (t: number) => - t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; -export const easeInExpo = (t: number) => - t === 0 ? 0 : Math.pow(2, 10 * t - 10); -export const easeOutExpo = (t: number) => - t === 1 ? 1 : 1 - Math.pow(2, -10 * t); -export const easeInOutExpo = (t: number) => - t === 0 - ? 0 - : t === 1 - ? 1 - : t < 0.5 - ? Math.pow(2, 20 * t - 10) / 2 - : (2 - Math.pow(2, -20 * t + 10)) / 2; - -/** Linear interpolation from a to b using normalized factor t */ -export function lerp(min: number, max: number, t: number): number { - return (1 - t) * min + t * max; -} - -/** How far a value is in respect with two values (as a ratio from 0 to 1) */ -export function normalizeToRange( - min: number, - max: number, - value: number, -): number { - if (Math.abs(max - min) === 0) { - return min; - } - return remapRange(min, max, 0, 1, value); -} - -/** Re-maps a number from range [fromMin, fromMax] to range [toMin, toMax] */ -export function remapRange( - fromMin: number, - fromMax: number, - toMin: number, - toMax: number, - value: number, -): number { - return toMin + ((value - fromMin) * (toMax - toMin)) / (fromMax - fromMin); -} diff --git a/libs/design-tokens-ui/shared/src/lib/utils/palette-generation.ts b/libs/design-tokens-ui/shared/src/lib/utils/palette-generation.ts deleted file mode 100644 index b8bc249e77..0000000000 --- a/libs/design-tokens-ui/shared/src/lib/utils/palette-generation.ts +++ /dev/null @@ -1,88 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - FluidPaletteGenerationOptions, - FluidEasingType, -} from '@dynatrace/shared/design-system/interfaces'; -import { - easeIn, - easeOut, - easeInOutQuad, - easeInOutCubic, - easeInExpo, - easeOutExpo, - easeInOutExpo, -} from './math'; - -/** Applies easing of the given type and alpha to t. */ -export function ease(type: FluidEasingType, alpha: number, t: number): number { - switch (type) { - case 'ease-in': - return easeIn(t, alpha); - case 'ease-out': - return easeOut(t, alpha); - case 'ease-in-out-quad': - return easeInOutQuad(t); - case 'ease-in-out-cubic': - return easeInOutCubic(t); - case 'ease-in-expo': - return easeInExpo(t); - case 'ease-out-expo': - return easeOutExpo(t); - case 'ease-in-out-expo': - return easeInOutExpo(t); - } -} - -/** Combines two easing functions into one piecewise function */ -export function easePiecewise( - type1: FluidEasingType, - alpha1: number, - type2: FluidEasingType, - alpha2: number, - t: number, -): number { - return t < 0.5 - ? ease(type1, alpha1, t * 2) * 0.5 - : ease(type2, alpha2, t * 2 - 1) * 0.5 + 0.5; -} - -/** Applies easing with the given options */ -export function easeWithOptions( - t: number, - options: FluidPaletteGenerationOptions, -): number { - const { lowerEasing, lowerExponent, upperEasing, upperExponent } = options; - return easePiecewise( - lowerEasing, - lowerExponent, - upperEasing, - upperExponent, - t, - ); -} - -/** Default palette generation options */ -export const DEFAULT_GENERATION_OPTIONS: FluidPaletteGenerationOptions = { - lowerEasing: 'ease-in', - upperEasing: 'ease-out', - lowerExponent: 1, - upperExponent: 1, - baseContrast: 6, - minContrast: 1.5, - maxContrast: 13, -}; diff --git a/libs/design-tokens-ui/shared/src/test-setup.ts b/libs/design-tokens-ui/shared/src/test-setup.ts deleted file mode 100644 index f993bfeef7..0000000000 --- a/libs/design-tokens-ui/shared/src/test-setup.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import 'jest-preset-angular'; diff --git a/libs/design-tokens-ui/shared/tsconfig.json b/libs/design-tokens-ui/shared/tsconfig.json deleted file mode 100644 index 1b6ee0bf6f..0000000000 --- a/libs/design-tokens-ui/shared/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "types": ["node", "jest"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/design-tokens-ui/shared/tsconfig.lib.json b/libs/design-tokens-ui/shared/tsconfig.lib.json deleted file mode 100644 index 2dc9b2ccd7..0000000000 --- a/libs/design-tokens-ui/shared/tsconfig.lib.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "target": "es2015", - "declaration": true, - "inlineSources": true, - "types": [], - "lib": ["dom", "es2018"] - }, - "angularCompilerOptions": { - "skipTemplateCodegen": true, - "strictMetadataEmit": true, - "enableResourceInlining": true - }, - "exclude": ["src/test-setup.ts", "**/*.spec.ts"], - "include": ["**/*.ts"] -} diff --git a/libs/design-tokens-ui/shared/tsconfig.lib.prod.json b/libs/design-tokens-ui/shared/tsconfig.lib.prod.json deleted file mode 100644 index b5f6756104..0000000000 --- a/libs/design-tokens-ui/shared/tsconfig.lib.prod.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "./tsconfig.lib.json", - "angularCompilerOptions": {} -} diff --git a/libs/design-tokens-ui/shared/tsconfig.spec.json b/libs/design-tokens-ui/shared/tsconfig.spec.json deleted file mode 100644 index fd405a65ef..0000000000 --- a/libs/design-tokens-ui/shared/tsconfig.spec.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/libs/design-tokens-ui/shared/tslint.json b/libs/design-tokens-ui/shared/tslint.json deleted file mode 100644 index 810ae34419..0000000000 --- a/libs/design-tokens-ui/shared/tslint.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../../tslint.json", - "rules": { - "directive-selector": [true, "attribute", "designTokensUi", "camelCase"], - "component-selector": [true, "element", "design-tokens-ui", "kebab-case"] - }, - "linterOptions": { - "exclude": ["!**/*"] - } -} diff --git a/libs/fluid-elements/BUILD.bazel b/libs/fluid-elements/BUILD.bazel deleted file mode 100644 index 25568414bc..0000000000 --- a/libs/fluid-elements/BUILD.bazel +++ /dev/null @@ -1,11 +0,0 @@ -load("@npm//@bazel/typescript:index.bzl", "ts_config") - -package(default_visibility = ["//visibility:public"]) - -ts_config( - name = "tsconfig", - src = "tsconfig.json", - deps = [ - "//:tsconfig.base.json", - ], -) diff --git a/libs/fluid-elements/button-group/BUILD.bazel b/libs/fluid-elements/button-group/BUILD.bazel deleted file mode 100644 index 0a9b6077ba..0000000000 --- a/libs/fluid-elements/button-group/BUILD.bazel +++ /dev/null @@ -1,57 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "jest") -load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_library") - -package(default_visibility = ["//libs/fluid-elements:__subpackages__"]) - -ts_library( - name = "compile", - srcs = glob( - include = ["src/**/*.ts"], - exclude = [ - "src/**/*.spec.ts", - "src/test-setup.ts", - ], - ), - module_name = "@dynatrace/fluid-elements/button-group", - module_root = "src", - tsconfig = "tsconfig_lib", - deps = [ - "//libs/shared/design-tokens", - "//libs/fluid-elements/core:compile", - "//libs/shared/keycodes", - "@npm//lit-element", - "@npm//lit-html", - "@npm//tslib", - ], -) - -jest( - name = "test", - srcs = glob(include = ["src/**/*.spec.ts"]), - jest_config = ":jest.config.json", - ts_config = ":tsconfig_test", - deps = [ - ":compile", - "//libs/shared/keycodes", - "//libs/testing/browser", - ], -) - -ts_config( - name = "tsconfig_lib", - src = "tsconfig.lib.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) - -ts_config( - name = "tsconfig_test", - src = "tsconfig.spec.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) - diff --git a/libs/fluid-elements/button-group/README.md b/libs/fluid-elements/button-group/README.md deleted file mode 100644 index 0b5f730086..0000000000 --- a/libs/fluid-elements/button-group/README.md +++ /dev/null @@ -1,52 +0,0 @@ -# fluid-button-group-item - -A basic representation of the button-group-item - -## Properties - -| Property | Attribute | Type | Default | Description | -| ---------- | ---------- | --------- | ---------- | ---------------------------------------------------------- | -| `checked` | `checked` | `boolean` | `false` | Whether the button-group-item is checked or not. | -| `disabled` | `disabled` | `boolean` | `false` | Whether the button-group-item is disabled or not. | -| `tabbed` | `tabbed` | `boolean` | `false` | Whether the button-group-item was navigated to using keys. | -| `id` | `id` | `string` | `"unique"` | The id attribute of the native input element. | -| `name` | `name` | `string` | | The name attribute of the native input element. | -| `tabIndex` | `tabIndex` | `number` | `0` | Property for the tabindex of the svg in the template. | -| `value` | `value` | `string` | | The value attribute of the native input element. | - -## Events - -| Event | Description | -| --------------- | -------------------------------------------------------------------------------------------------------- | -| `checkedChange` | Event that is being fired when the button-group-item checked state changes due
to user interaction. | - -## Slots - -| Name | Description | -| ---- | --------------------------------------------------------------------- | -| | Default slot lets the user provide a label for the button-group-item. | - -## CSS Custom Properties - -| Property | Description | -| ----------------------------------------------- | --------------------------------------------------------------- | -| `--fluid-button-group-item--label-color` | Customize the label color. | -| `--fluid-button-group-item--radio-active-color` | Customize the color of the button-group-item nob when active. | -| `--fluid-button-group-item--radio-hover-color` | Customize the color of the button-group-item nob when hovering. | - -# fluid-button-group - -A basic representation of the button-group wrapper for button-group-items - -## Properties - -| Property | Attribute | Type | Description | -| ------------ | ----------- | --------- | ----------------------------------------------------------- | ----- | ------------------------------------ | -| `checkedId` | `checkedId` | `string | | null` | Currently checked button group item. | -| `disableAll` | `disabled` | `boolean` | Whether the component and the children are disabled or not. | - -## Slots - -| Name | Description | -| ---- | ------------------------------------------------------------------------------------------ | -| | Default slot lets the user provide a label for the button-group.
to user interaction. | diff --git a/libs/fluid-elements/button-group/jest.config.json b/libs/fluid-elements/button-group/jest.config.json deleted file mode 100644 index 34d725ecdf..0000000000 --- a/libs/fluid-elements/button-group/jest.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "name": "fluid-button-group" -} diff --git a/libs/fluid-elements/button-group/package.json b/libs/fluid-elements/button-group/package.json deleted file mode 100644 index 4479927db9..0000000000 --- a/libs/fluid-elements/button-group/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@dynatrace/fluid-button-group", - "description": "Dynatrace button group element based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": {} -} diff --git a/libs/fluid-elements/button-group/src/index.ts b/libs/fluid-elements/button-group/src/index.ts deleted file mode 100644 index cd81dc40b8..0000000000 --- a/libs/fluid-elements/button-group/src/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/button-group/button-group'; -export * from './lib/button-group-item/button-group-item'; diff --git a/libs/fluid-elements/button-group/src/lib/button-group-events.ts b/libs/fluid-elements/button-group/src/lib/button-group-events.ts deleted file mode 100644 index 5dd37dc8ab..0000000000 --- a/libs/fluid-elements/button-group/src/lib/button-group-events.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** Custom event implementation fires when a checked state changes */ -export class FluidButtonGroupItemCheckedChangeEvent extends CustomEvent { - constructor(public checkedId: string) { - super('checkedChange', { bubbles: true, composed: true }); - } -} diff --git a/libs/fluid-elements/button-group/src/lib/button-group-item/button-group-item.spec.ts b/libs/fluid-elements/button-group/src/lib/button-group-item/button-group-item.spec.ts deleted file mode 100644 index bad17cea3c..0000000000 --- a/libs/fluid-elements/button-group/src/lib/button-group-item/button-group-item.spec.ts +++ /dev/null @@ -1,276 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidButtonGroupItem } from './button-group-item'; -import { SPACE, ENTER } from '@dynatrace/shared/keycodes'; -import { - dispatchKeyboardEvent, - dispatchFakeEvent, - tick, -} from '@dynatrace/testing/browser'; - -/** Checks if the current fixture is displaying the checkmark */ -function showsNob(fixture: FluidButtonGroupItem): boolean { - const svg = fixture.shadowRoot?.querySelector('svg'); - return Boolean(svg?.classList.contains('fluid-state--checked')); -} - -xdescribe('Fluid button-group', () => { - let fixture: FluidButtonGroupItem; - let changeSpy; - - beforeEach(() => { - // Register the element, if it is not yet registered - if (!customElements.get('fluid-button-group-item')) { - customElements.define('fluid-button-group-item', FluidButtonGroupItem); - } - // create the fixture - document.body.innerHTML = - 'I am the label'; - fixture = document.querySelector( - 'fluid-button-group-item', - )!; - - // Add spied eventListeners - changeSpy = jest.fn(); - fixture.addEventListener('checkedChange', changeSpy); - }); - - afterEach(() => { - jest.restoreAllMocks(); - }); - - it('should create the button-group-item', () => { - expect(fixture).not.toBe(null); - }); - - describe('Checked Attribute', () => { - it('should set the state to checked when the attribute is set', async () => { - fixture.setAttribute('checked', ''); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(fixture.hasAttribute('checked')).toBeTruthy(); - expect(showsNob(fixture)).toBeTruthy(); - }); - - it('should set the state to checked when the attribute is set true', async () => { - fixture.setAttribute('checked', 'true'); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(fixture.getAttribute('checked')).toBe('true'); - expect(showsNob(fixture)).toBeTruthy(); - }); - - it('should set the state to checked when the property is set to true', async () => { - fixture.checked = true; - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(fixture.hasAttribute('checked')).toBeTruthy(); - expect(showsNob(fixture)).toBeTruthy(); - }); - - it('should set the state to unchecked when the attribute is set to true then to false', async () => { - fixture.setAttribute('checked', ''); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(fixture.hasAttribute('checked')).toBeTruthy(); - expect(showsNob(fixture)).toBeTruthy(); - fixture.removeAttribute('checked'); - await tick(); - expect(fixture.checked).toBeFalsy(); - expect(fixture.getAttribute('checked')).toBeNull(); - expect(showsNob(fixture)).toBeFalsy(); - }); - - it('should set the state to unchecked when the property is set to true then to false', async () => { - fixture.checked = true; - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(fixture.hasAttribute('checked')).toBeTruthy(); - expect(showsNob(fixture)).toBeTruthy(); - fixture.checked = false; - await tick(); - expect(fixture.checked).toBeFalsy(); - expect(fixture.getAttribute('checked')).toBeNull(); - expect(showsNob(fixture)).toBeFalsy(); - }); - - it('should set the state to checked if the label is clicked', async () => { - fixture.shadowRoot?.querySelector('label')?.click(); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(fixture.hasAttribute('checked')).toBeTruthy(); - expect(showsNob(fixture)).toBeTruthy(); - }); - - it('should set the state to checked when using the SPACE key', async () => { - const svg = fixture.shadowRoot?.querySelector('svg'); - dispatchKeyboardEvent(svg!, 'keyup', SPACE); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(fixture.hasAttribute('checked')).toBeTruthy(); - expect(showsNob(fixture)).toBeTruthy(); - }); - - it('should set the state to checked when using the TAB key', async () => { - const svg = fixture.shadowRoot?.querySelector('svg'); - dispatchKeyboardEvent(svg!, 'keyup', ENTER); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(fixture.hasAttribute('checked')).toBeTruthy(); - expect(showsNob(fixture)).toBeTruthy(); - }); - }); - - describe('Disabled attribute', () => { - it('should set disabled state when the attribute is set', async () => { - fixture.setAttribute('disabled', ''); - await tick(); - expect(fixture.disabled).toBeTruthy(); - expect(fixture.hasAttribute('disabled')).toBeTruthy(); - }); - - it('should set disabled state when the attribute is set to true', async () => { - fixture.setAttribute('disabled', 'true'); - await tick(); - expect(fixture.disabled).toBeTruthy(); - expect(fixture.hasAttribute('disabled')).toBeTruthy(); - }); - - it('should set disabled state when the property is set to true', async () => { - fixture.disabled = false; - await tick(); - expect(fixture.disabled).toBeFalsy(); - expect(fixture.hasAttribute('disabled')).toBeFalsy(); - }); - - it('should unset disabled state when the attribute is set to false', async () => { - fixture.setAttribute('disabled', ''); - await tick(); - fixture.removeAttribute('disabled'); - await tick(); - expect(fixture.disabled).toBeFalsy(); - expect(fixture.hasAttribute('disabled')).toBeFalsy(); - }); - - it('should unset disabled state when the property is set to false', async () => { - fixture.disabled = true; - await tick(); - fixture.disabled = false; - await tick(); - expect(fixture.disabled).toBeFalsy(); - expect(fixture.hasAttribute('disabled')).toBeFalsy(); - }); - }); - - describe('Name attribute', () => { - it('should not have a name by default', async () => { - expect(fixture.name).toBeUndefined(); - }); - - it('should set the name when setting the attribute', async () => { - fixture.setAttribute('name', 'button-group-item'); - await tick(); - expect(fixture.name).toBe('button-group-item'); - }); - - it('should set the name if the property is set', async () => { - fixture.name = 'button-group-item'; - await tick(); - expect(fixture.name).toBe('button-group-item'); - expect( - fixture.shadowRoot?.querySelector('input')?.getAttribute('name'), - ).toBe('button-group-item'); - }); - }); - - describe('Value attribute', () => { - it('should not have a value by default', async () => { - expect(fixture.value).toBeUndefined(); - }); - - it('should set the value when setting the attribute', async () => { - fixture.setAttribute('value', 'button-group-item'); - await tick(); - expect(fixture.value).toBe('button-group-item'); - }); - - it('should set the value if the property is set', async () => { - fixture.value = 'button-group-item'; - await tick(); - expect(fixture.value).toBe('button-group-item'); - expect( - fixture.shadowRoot?.querySelector('input')?.getAttribute('value'), - ).toBe('button-group-item'); - }); - }); - - describe('Tabindex attribute', () => { - it('should set the tabindex based on disabled', async () => { - fixture.disabled = true; - await tick(); - fixture.tabIndex = 0; - await tick(); - expect(fixture.tabIndex).toBe(-1); - }); - - it('should set the tabindex based on disabled', async () => { - fixture.disabled = false; - await tick(); - fixture.tabIndex = 0; - await tick(); - expect(fixture.tabIndex).toBe(0); - }); - }); - - describe('aria-checked attribute', () => { - it('should have aria-checked set to false by default', () => { - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('false'); - }); - - it('should have aria-checked set to false when the checkbox is not checked', async () => { - fixture.checked = false; - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('false'); - }); - - it('should have aria-checked set to true when the checkbox is checked', async () => { - fixture.checked = true; - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('true'); - }); - }); - - describe('Space default scroll prevention', () => { - it('should prevent the default scroll behaviour', async () => { - const svg = fixture.shadowRoot?.querySelector('svg'); - const event = dispatchKeyboardEvent(svg!, 'keydown', SPACE); - expect(event.defaultPrevented).toBeTruthy(); - }); - }); - - describe('Blur event', () => { - it('should set the tabbed state to false after a blur event', async () => { - fixture.tabbed = true; - const svg = fixture.shadowRoot?.querySelector('svg')!; - dispatchFakeEvent(svg, 'blur', true); - expect(fixture.tabbed).toBeFalsy(); - }); - }); -}); diff --git a/libs/fluid-elements/button-group/src/lib/button-group-item/button-group-item.ts b/libs/fluid-elements/button-group/src/lib/button-group-item/button-group-item.ts deleted file mode 100644 index 60b9c81e2c..0000000000 --- a/libs/fluid-elements/button-group/src/lib/button-group-item/button-group-item.ts +++ /dev/null @@ -1,378 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - html, - css, - LitElement, - CSSResult, - TemplateResult, - property, - customElement, - unsafeCSS, - PropertyValues, -} from 'lit-element'; -import { classMap } from 'lit-html/directives/class-map'; -import { FluidButtonGroupItemCheckedChangeEvent } from '../button-group-events'; - -import { ENTER, SPACE, TAB } from '@dynatrace/shared/keycodes'; - -import { - fluidDtText, - FLUID_SPACING_2X_SMALL, - FLUID_SPACING_SMALL, -} from '@dynatrace/fluid-design-tokens'; - -let uniqueCounter = 0; - -/** - * A basic representation of the button-group-item - * @element fluid-button-group-item - * @slot - Default slot lets the user provide a label for the button-group-item. - * @fires checkedChange - Event that is being fired when the button-group-item checked state changes due - * to user interaction. - * @cssprop --fluid-button-group-item--label-color - Customize the label color. - * @cssprop --fluid-button-group-item--radio-hover-color - Customize the color of the button-group-item nob when hovering. - * @cssprop --fluid-button-group-item--radio-active-color - Customize the color of the button-group-item nob when active. - */ -@customElement('fluid-button-group-item') -export class FluidButtonGroupItem extends LitElement { - /** - * Unique identifier used for the id and label connection - * within the button group item. - */ - private _unique = `fluid-button-group-item-${uniqueCounter++}`; - - /** Reference to the input container */ - private _inputElement: HTMLInputElement; - - /** Styles for the button-group component */ - static get styles(): CSSResult { - return css` - :host { - /** - * Legibility definitions should probably be - * shipped or imported from a core - */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - - cursor: pointer; - - --fluid-button-group-item--label-color: var(--color-neutral-150); - --fluid-button-group-item--radio-hover-color: var(--color-neutral-100); - --fluid-button-group-item--radio-active-color: var(--color-primary-100); - } - - :host([disabled]) { - pointer-events: none; - } - - :host([disabled]) .fluid-label { - opacity: 0.5; - } - - :host([disabled]) .fluid-button-group-item-svg { - opacity: 0.5; - } - - .fluid-button-group-item { - cursor: pointer; - background-color: var(--color-neutral-60); - display: inline-block; - position: relative; - width: max-content; - text-align: center; - padding-top: ${unsafeCSS(FLUID_SPACING_2X_SMALL)}; - padding-right: ${unsafeCSS(FLUID_SPACING_SMALL)}; - } - - .fluid-button-group-item-input { - cursor: pointer; - position: absolute; - opacity: 0; - } - - .fluid-button-group-item-label { - cursor: pointer; - } - - .fluid-button-group-item-svg { - cursor: pointer; - height: 18px; - fill: transparent; - } - - .fluid-button-group-item-svg:not(.fluid-state--tabbed) { - outline: none; - } - - .fluid-button-group-item:hover .fluid-button-group-item-svg-circle { - fill: var(--fluid-button-group-item--radio-hover-color); - opacity: 1; - } - - .fluid-button-group-item-svg:focus .fluid-button-group-item-svg-circle { - fill: var(--fluid-button-group-item--radio-hover-color); - opacity: 1; - } - - .fluid-state--checked .fluid-button-group-item-svg-circle { - fill: var(--fluid-button-group-item--radio-active-color); - opacity: 1; - } - - .fluid-button-group-item:hover - .fluid-state--checked - .fluid-button-group-item-svg-circle { - fill: var(--fluid-button-group-item--radio-active-color); - opacity: 1; - } - - .fluid-state--checked.fluid-button-group-item-svg:focus - .fluid-button-group-item-svg-circle { - fill: var(--fluid-button-group-item--radio-active-color); - opacity: 1; - } - - label { - display: inline-flex; - align-items: center; - height: fit-content; - } - - .fluid-label { - ${unsafeCSS(fluidDtText())}; - margin-left: ${unsafeCSS(FLUID_SPACING_2X_SMALL)}; - } - `; - } - - /** - * The id attribute of the native input element. - * @attr - * @type string - */ - @property({ type: String, reflect: true }) - id = this._unique; - - /** - * The value attribute of the native input element. - * @attr - * @type string - */ - @property({ type: String, reflect: false }) - value: string; - - /** - * The name attribute of the native input element. - * @attr - * @type string - */ - @property({ type: String, reflect: false }) - name: string; - - /** - * Whether the button-group-item was navigated to using keys. - * @attr - * @type boolean - */ - @property({ type: Boolean, reflect: false }) - tabbed = false; - - /** - * Whether the button-group-item is checked or not. - * @attr - * @type boolean - */ - @property({ type: Boolean, reflect: true }) - get checked(): boolean { - return this._checked; - } - set checked(value: boolean) { - const oldValue = this._checked; - this._checked = value; - this.requestUpdate('checked', oldValue); - if (!this._checked) { - this._inputElement!.checked = false; - } - } - private _checked = false; - - /** - * Whether the button-group-item is disabled or not. - * @attr - * @type boolean - */ - @property({ type: Boolean, reflect: true }) - get disabled(): boolean { - return this._disabled; - } - set disabled(value: boolean) { - const oldValue = this._disabled; - this._disabled = value; - this.requestUpdate('disabled', oldValue); - if (this._disabled) { - this._tabIndex = -1; - } - } - private _disabled = false; - - /** - * Property for the tabindex of the svg in the template. - * @attr - * @type number - */ - @property({ type: Number, reflect: false }) - get tabIndex(): number { - return this._tabIndex; - } - set tabIndex(value: number) { - if (!this.disabled) { - const oldValue = this._tabIndex; - this._tabIndex = value; - this.requestUpdate('tabIndex', oldValue); - } else { - this._tabIndex = -1; - } - } - private _tabIndex = 0; - - /** - * Role of the radio. - * @private - An internal prop that should not appear in the readme and should - * not be set by the outside. - */ - @property({ - type: String, - reflect: true, - }) - role: string = 'radio'; - - /** - * Aria-checked attribute of the radio button. - * @private - An internal prop that should not appear in the readme and should - * not be set by the outside. - */ - @property({ - type: String, - reflect: true, - attribute: 'aria-checked', - }) - ariaChecked: string = 'false'; - - /** First updated lifecycle */ - firstUpdated(props: PropertyValues): void { - super.firstUpdated(props); - this._inputElement = this.shadowRoot!.querySelector('input')!; - } - - /** Update lifecycle */ - update(props: PropertyValues): void { - // Aria-checked depends on the value of checked, but is never actually - // set by the litElement reactivity. In the updated lifeCycle - // we need to manually update the ariaChecked attribute here. - if (props.has('checked')) { - this.ariaChecked = this.checked.toString(); - } - // Changing the aria-checked or any observed property in the update, will - // add it to the updated properties. When calling super first in, the change - // of properties in the update call will trigger an update, as the properties - // will have changed after the super.update() call. To prevent an additional - // cycle, we make the modifications before calling the super lifecycle - super.update(props); - } - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - const svgClassMapData = { - 'fluid-button-group-item-svg': true, - 'fluid-state--tabbed': this.tabbed, - 'fluid-state--checked': this.checked, - 'fluid-state--disabled': this.disabled, - }; - - return html` -
- -
- `; - } - - /** Handler preventing default scrolling */ - private _handleKeyDown(event: KeyboardEvent): void { - if (event.code === SPACE) { - event.preventDefault(); - } - } - - /** Handles keyboard support for checking a button-group-item */ - private _handleKeyUp(event: KeyboardEvent): void { - if (event.code === TAB) { - this.tabbed = true; - } - if (event.code === SPACE || event.code === ENTER) { - this.checked = true; - this._dispatchCheckedChangedEvent(); - } - } - - /** Handles changes in the native input by listening on click then sets the new checked value and dispatches the button-group-item id */ - private _handleClick(): void { - if (!this.checked) { - this.checked = true; - this._dispatchCheckedChangedEvent(); - } - } - - /** Handles blur setting the tabbed attribute to false */ - private _handleBlur(): void { - this.tabbed = false; - } - - /** Dispatches the custom event with the id of the fluid-button-group-item */ - private _dispatchCheckedChangedEvent(): void { - this.dispatchEvent(new FluidButtonGroupItemCheckedChangeEvent(this.id)); - } -} diff --git a/libs/fluid-elements/button-group/src/lib/button-group/button-group.spec.ts b/libs/fluid-elements/button-group/src/lib/button-group/button-group.spec.ts deleted file mode 100644 index acf14b1d17..0000000000 --- a/libs/fluid-elements/button-group/src/lib/button-group/button-group.spec.ts +++ /dev/null @@ -1,328 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidButtonGroup } from './button-group'; -import { FluidButtonGroupItem } from '../button-group-item/button-group-item'; -import { dispatchKeyboardEvent } from '@dynatrace/testing/browser'; -import { - SPACE, - TAB, - ARROW_LEFT, - ARROW_RIGHT, -} from '@dynatrace/shared/keycodes'; - -function tick(): Promise { - return Promise.resolve(); -} - -xdescribe('Fluid button-group', () => { - let fixture: FluidButtonGroup; - let changeSpy; - - beforeEach(() => { - // Register the element, if it is not yet registered - if (!customElements.get('fluid-button-group-item')) { - customElements.define('fluid-button-group-item', FluidButtonGroupItem); - } - if (!customElements.get('fluid-button-group')) { - customElements.define('fluid-button-group', FluidButtonGroup); - } - // create the fixture - document.body.innerHTML = ` - - I am the label - I am the label - I am the label - `; - fixture = document.querySelector('fluid-button-group')!; - - // Add spied eventListeners - changeSpy = jest.fn(); - fixture.addEventListener('checkedChange', changeSpy); - }); - - afterEach(() => { - jest.restoreAllMocks(); - }); - - it('should create the checkbox', async () => { - expect(fixture).not.toBe(null); - }); - - describe('checkedId attribute', () => { - it('should initially be undefined', async () => { - expect(fixture.checkedId).toBeUndefined(); - }); - - it('should set the checkedId if an item was clicked', async () => { - const label = fixture - .querySelector('fluid-button-group-item') - ?.shadowRoot?.querySelector('label'); - label!.click(); - await tick(); - expect(changeSpy).toHaveBeenCalledTimes(1); - expect(fixture.checkedId).toBe('button1'); - }); - - it('should set the checkedId if the item was checked using the keyboard', async () => { - const svg = fixture - .querySelector('fluid-button-group-item') - ?.shadowRoot?.querySelector('svg'); - dispatchKeyboardEvent(svg!, 'keyup', SPACE); - await tick(); - expect(fixture.checkedId).toBe('button1'); - }); - - it('should set the corresponding button-group-item item to checked if the attribute is set', async () => { - document.body.innerHTML = ` - - I am the label - I am the label - I am the label - `; - await tick(); - fixture = document.querySelector('fluid-button-group')!; - await tick(); - expect( - fixture.querySelector('fluid-button-group-item') - ?.checked, - ).toBeTruthy(); - }); - - it(`should throw error if checkedId doesn't exist`, async () => { - document.body.innerHTML = ` - - I am the label - I am the label - I am the label - `; - await tick(); - fixture = document.querySelector('fluid-button-group')!; - await tick(); - expect(fixture.checkedId).toBe(null); - }); - }); - - describe('disableAll attribute', () => { - it('should disable every item if attribute is set', async () => { - fixture.setAttribute('disableAll', ''); - await tick(); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(1)', - )?.disabled, - ).toBe(true); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(2)', - )?.disabled, - ).toBe(true); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(3)', - )?.disabled, - ).toBe(true); - }); - it('should disable every item if property is set to true', async () => { - fixture.disableAll = true; - await tick(); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(1)', - )?.disabled, - ).toBe(true); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(2)', - )?.disabled, - ).toBe(true); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(3)', - )?.disabled, - ).toBe(true); - }); - it('should enable every item if property is reset', async () => { - fixture.disableAll = true; - await tick(); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(1)', - )?.disabled, - ).toBe(true); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(2)', - )?.disabled, - ).toBe(true); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(3)', - )?.disabled, - ).toBe(true); - fixture.disableAll = false; - await tick(); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(1)', - )?.disabled, - ).toBe(false); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(2)', - )?.disabled, - ).toBe(false); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(3)', - )?.disabled, - ).toBe(false); - }); - }); - - describe('slotchange behaviour', () => { - it('should set the tabindex attribute of the first available button-group-item to 0', async () => { - document.body.innerHTML = ` - - I am the label1 - I am the label2 - I am the label3 - `; - await tick(); - fixture = document.querySelector('fluid-button-group')!; - await tick(); - expect( - fixture.querySelector( - 'fluid-button-group-item:nth-child(2)', - )?.tabIndex, - ).toBe(0); - }); - - it('should do nothing if no button-group-item is provided', async () => { - document.body.innerHTML = ` - - `; - await tick(); - fixture = document.querySelector('fluid-button-group')!; - await tick(); - expect(fixture.checkedId).toBeUndefined(); - }); - }); - - describe('auto select/deselect handler', () => { - it('should automatically deselect the previous item', async () => { - const label = fixture - .querySelector('fluid-button-group-item') - ?.shadowRoot?.querySelector('label'); - label?.click(); - await tick(); - expect(fixture.checkedId).toBe('button1'); - const label2 = fixture - .querySelector( - 'fluid-button-group-item:last-child', - ) - ?.shadowRoot?.querySelector('label'); - label2?.click(); - expect(fixture.checkedId).toBe('button3'); - }); - - it(`should set the first item's tabindex to 0 if no checked item was found`, async () => { - const label = fixture - .querySelector( - 'fluid-button-group-item:nth-child(2)', - ) - ?.shadowRoot?.querySelector('label'); - label?.click(); - await tick(); - const item2 = fixture.querySelector( - 'fluid-button-group-item:nth-child(2)', - )!; - expect(item2.checked).toBeTruthy(); - item2.checked = false; - await tick(); - const item1 = fixture.querySelector( - 'fluid-button-group-item', - )!; - await tick(); - expect(item2.checked).toBeFalsy(); - expect(item2.tabIndex).toBe(-1); - expect(item1.tabIndex).toBe(0); - }); - }); - - describe('SPACE default scroll prevention', () => { - it('should prevent the default scrolling', () => { - const div = fixture.shadowRoot?.querySelector('div.fluid-button-group'); - const event = dispatchKeyboardEvent(div!, 'keydown', SPACE); - expect(event.defaultPrevented).toBeTruthy(); - }); - }); - - describe('keyboard support', () => { - it('should set the tabbed attribute of the button-group-item with a tabindex 0 to true when pressing TAB', async () => { - const svg = fixture - .querySelector('fluid-button-group-item') - ?.shadowRoot?.querySelector('svg'); - dispatchKeyboardEvent(svg!, 'keyup', TAB); - await tick(); - expect( - fixture.querySelector('fluid-button-group-item') - ?.tabbed, - ).toBeTruthy(); - }); - - it('should set the handle attributes when using arrow-left', async () => { - const div = fixture.shadowRoot?.querySelector('div.fluid-button-group'); - dispatchKeyboardEvent(div!, 'keyup', ARROW_LEFT); - await tick(); - const item1 = fixture.querySelector( - 'fluid-button-group-item', - )!; - const item2 = fixture.querySelector( - 'fluid-button-group-item:nth-child(2)', - )!; - const item3 = fixture.querySelector( - 'fluid-button-group-item:nth-child(3)', - )!; - expect(item1.tabbed).toBeFalsy(); - expect(item2.tabbed).toBeFalsy(); - expect(item3.tabbed).toBeTruthy(); - expect(item1.tabIndex).toBe(-1); - expect(item2.tabIndex).toBe(-1); - expect(item3.tabIndex).toBe(0); - }); - it('should set the handle attributes when using arrow-left', async () => { - const div = fixture.shadowRoot?.querySelector('div.fluid-button-group'); - dispatchKeyboardEvent(div!, 'keyup', ARROW_RIGHT); - await tick(); - const item1 = fixture.querySelector( - 'fluid-button-group-item', - )!; - const item2 = fixture.querySelector( - 'fluid-button-group-item:nth-child(2)', - )!; - const item3 = fixture.querySelector( - 'fluid-button-group-item:nth-child(3)', - )!; - expect(item1.tabbed).toBeFalsy(); - expect(item2.tabbed).toBeTruthy(); - expect(item3.tabbed).toBeFalsy(); - expect(item1.tabIndex).toBe(-1); - expect(item2.tabIndex).toBe(0); - expect(item3.tabIndex).toBe(-1); - }); - }); -}); diff --git a/libs/fluid-elements/button-group/src/lib/button-group/button-group.ts b/libs/fluid-elements/button-group/src/lib/button-group/button-group.ts deleted file mode 100644 index 83f893298a..0000000000 --- a/libs/fluid-elements/button-group/src/lib/button-group/button-group.ts +++ /dev/null @@ -1,218 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - LitElement, - CSSResult, - css, - TemplateResult, - html, - property, - customElement, - unsafeCSS, -} from 'lit-element'; -import { FluidButtonGroupItem } from '../button-group-item/button-group-item'; -import { FluidButtonGroupItemCheckedChangeEvent } from '../button-group-events'; -import { SPACE, ARROW_RIGHT, ARROW_LEFT } from '@dynatrace/shared/keycodes'; -import { FLUID_SPACING_X_SMALL } from '@dynatrace/fluid-design-tokens'; -import { getNextGroupItemIndex } from '@dynatrace/fluid-elements/core'; - -let uniqueCounter = 0; - -/** - * A basic representation of the button-group wrapper for button-group-items - * @element fluid-button-group - * @slot - Default slot lets the user provide a label for the button-group. - * to user interaction. - */ -@customElement('fluid-button-group') -export class FluidButtonGroup extends LitElement { - private _buttonGroupItems: FluidButtonGroupItem[] = []; - - private _unique = `fluid-button-group-${uniqueCounter++}`; - - /** Styles for the button-group component */ - static get styles(): CSSResult { - return css` - :host { - /** - * Legibility definitions should probably be - * shipped or imported from a core - */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - - --fluid-button-group-background-color: var(--color-neutral-60); - } - - .fluid-button-group { - background-color: var(--fluid-button-group-background-color); - width: max-content; - padding-left: ${unsafeCSS(FLUID_SPACING_X_SMALL)}; - } - `; - } - - /** - * Contains the currently checked button-group-item ID. - * @attr - * @type string || null - */ - @property({ type: String, reflect: true }) - get checkedId(): string | null { - return this._checkedId; - } - set checkedId(value: string | null) { - const oldValue = this._checkedId; - this._checkedId = value; - this.requestUpdate('checkedId', oldValue); - } - private _checkedId: string | null; - - /** - * Whether the children are disabled or not. - * @attr - * @type boolean - */ - @property({ type: Boolean, reflect: true }) - get disableAll(): boolean { - return this._disableAll; - } - set disableAll(value: boolean) { - const oldValue = value; - this._disableAll = value; - this.requestUpdate('disableAll', oldValue); - this._setDisabledOnEveryItem(); - } - private _disableAll = false; - - /** - * Role of the radio-group. - * @private - An internal prop that should not appear in the readme and should - * not be set by the outside. - */ - @property({ - type: String, - reflect: true, - }) - role: string = 'radio-group'; - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - return html`
- -
`; - } - - /** Handles changes in the slot of the template */ - private _handleSlotChange(): void { - this._buttonGroupItems = Array.from( - this.querySelectorAll('fluid-button-group-item'), - ); - - if (this._buttonGroupItems.length > 0) { - if (this.checkedId) { - const toCheckedItem = this._buttonGroupItems.find( - (item) => item.id === this.checkedId, - ); - if (toCheckedItem) { - toCheckedItem.checked = true; - } else { - this.checkedId = null; - } - } else { - this._setFirstTabIndex(); - } - } - - const buttonGroupItem = this._buttonGroupItems.find((item) => item.checked); - if (buttonGroupItem) { - this.checkedId = buttonGroupItem.id; - } - } - - /** Called when the checkedChanged event is called. Handles checking/unchecking button-group-items */ - private _handleCheckedChange( - buttonGroupItemEvent: FluidButtonGroupItemCheckedChangeEvent, - ): void { - for (const buttonGroupItem of this._buttonGroupItems) { - if ( - buttonGroupItem.id !== buttonGroupItemEvent.checkedId && - buttonGroupItem.checked === true - ) { - buttonGroupItem.checked = false; - } else if (this.checkedId !== buttonGroupItemEvent.checkedId) { - this.checkedId = buttonGroupItem.id; - } - } - } - - /** Handler preventing default scrolling */ - private _handleKeyDown(event: KeyboardEvent): void { - if (event.code === SPACE) { - event.preventDefault(); - } - } - - /** Handles keyboard support. E.g Arrow navigation and tab support */ - private _handleKeyUp(event: KeyboardEvent): void { - if (event.code === ARROW_RIGHT || event.code === ARROW_LEFT) { - let index = this._buttonGroupItems.findIndex( - (item) => item.tabIndex === 0, - ); - const oldIndex = index; - index = getNextGroupItemIndex( - index, - this._buttonGroupItems.length, - event.code, - ); - this._buttonGroupItems[oldIndex].tabIndex = -1; - this._buttonGroupItems[oldIndex].tabbed = false; - this._buttonGroupItems[index].tabIndex = 0; - this._buttonGroupItems[index].tabbed = true; - this._buttonGroupItems[index].shadowRoot?.querySelector('svg')?.focus(); - } - } - - /** Sets the first available button-group-item's tabindex to 0 */ - private _setFirstTabIndex(): void { - let set = false; - for (const item of this._buttonGroupItems) { - item.tabIndex = -1; - if (!item.disabled && !set) { - item.tabIndex = 0; - set = true; - } - } - } - - /** Disables every item in the group */ - private _setDisabledOnEveryItem(): void { - for (const item of this._buttonGroupItems) { - item.disabled = this._disableAll; - } - } -} diff --git a/libs/fluid-elements/button-group/tsconfig.json b/libs/fluid-elements/button-group/tsconfig.json deleted file mode 100644 index da7cd737a1..0000000000 --- a/libs/fluid-elements/button-group/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "types": ["jest"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/button-group/tsconfig.lib.json b/libs/fluid-elements/button-group/tsconfig.lib.json deleted file mode 100644 index ea54e13d02..0000000000 --- a/libs/fluid-elements/button-group/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "include": ["**/*.ts"], - "exclude": ["**/*.spec.ts"] -} diff --git a/libs/fluid-elements/button-group/tsconfig.spec.json b/libs/fluid-elements/button-group/tsconfig.spec.json deleted file mode 100644 index cc2764398d..0000000000 --- a/libs/fluid-elements/button-group/tsconfig.spec.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "CommonJS", - "allowJs": true, - "types": ["jest", "node"], - "target": "es2015", - "lib": ["dom", "es2018"] - }, - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/libs/fluid-elements/button-group/tslint.json b/libs/fluid-elements/button-group/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/button-group/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/fluid-elements/button/.stylelintrc b/libs/fluid-elements/button/.stylelintrc deleted file mode 100644 index 25e6a3549a..0000000000 --- a/libs/fluid-elements/button/.stylelintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../../../../.stylelintrc", - "rules": { - "no-missing-end-of-source-newline": false - } -} diff --git a/libs/fluid-elements/button/BUILD.bazel b/libs/fluid-elements/button/BUILD.bazel deleted file mode 100644 index 6df7401256..0000000000 --- a/libs/fluid-elements/button/BUILD.bazel +++ /dev/null @@ -1,59 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "jest", "stylelint") -load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_library") - -package(default_visibility = ["//:__subpackages__"]) - -ts_library( - name = "compile", - srcs = glob( - include = ["src/**/*.ts"], - exclude = [ - "src/**/*.spec.ts", - "src/test-setup.ts", - ], - ), - module_name = "@dynatrace/fluid-elements/button", - module_root = "src", - tsconfig = "tsconfig_lib", - deps = [ - "//libs/shared/design-tokens", - "@npm//lit-element", - "@npm//lit-html", - "@npm//tslib", - ], -) - -jest( - name = "test", - srcs = glob(include = ["src/**/*.spec.ts"]), - jest_config = ":jest.config.json", - ts_config = ":tsconfig_test", - deps = [ - ":compile", - ], -) - -stylelint( - name = "stylelint", - srcs = glob(["**/*.scss"]), - allow_empty_input = True, - config = ":.stylelintrc", -) - -ts_config( - name = "tsconfig_lib", - src = "tsconfig.lib.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) - -ts_config( - name = "tsconfig_test", - src = "tsconfig.spec.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) diff --git a/libs/fluid-elements/button/README.md b/libs/fluid-elements/button/README.md deleted file mode 100644 index f6535344f8..0000000000 --- a/libs/fluid-elements/button/README.md +++ /dev/null @@ -1,53 +0,0 @@ -# fluid-button - -This is an experimental button element built with lit-elements and -web-components. It registers itself as `fluid-button` custom element. - -## Properties - -| Property | Attribute | Type | Default | Description | -| ---------- | ---------- | ---------------------------------------------- | ---------- | ----------------------------------------- | -| `color` | `color` | `'main' \| 'positive' \| 'warning' \| 'error'` | "'main'" | Defines the color theme of the button. | -| `disabled` | `disabled` | `boolean` | false | Defines if the button is disabled or not. | -| `emphasis` | `emphasis` | `'low' \| 'medium' \| 'high'` | "'medium'" | Defines the emphasis of the button. | -| `size` | `size` | `'small' \| 'default' \| 'large'` | "'large'" | Defines the size of the button. | - -## Slots - -| Name | Description | -| ---- | ---------------------------------------------------------------- | -| | The content of the button will be put inside the button element. | - -## CSS Custom Properties - -| Property | Description | -| -------------------------------------------- | -------------------------------------------------------------- | -| `--fluid-button--background-disabled` | Controls the background color for the disabled state. | -| `--fluid-button--background-key` | Controls the background color for the key setting. | -| `--fluid-button--background-key-active` | Controls the background active color for the key setting. | -| `--fluid-button--background-key-hover` | Controls the background hover color for the key setting. | -| `--fluid-button--background-negative` | Controls the background color for the negative setting. | -| `--fluid-button--background-negative-active` | Controls the background active color for the negative setting. | -| `--fluid-button--background-negative-hover` | Controls the background hover color for the negative setting. | -| `--fluid-button--background-positive` | Controls the background color for the positive setting. | -| `--fluid-button--background-positive-active` | Controls the background active color for the positive setting. | -| `--fluid-button--background-positive-hover` | Controls the background hover color for the positive setting. | -| `--fluid-button--background-warning` | Controls the background color for the warning setting. | -| `--fluid-button--background-warning-active` | Controls the background active color for the warning setting. | -| `--fluid-button--background-warning-hover` | Controls the background hover color for the warning setting. | -| `--fluid-button--foreground-disabled` | Controls the foreground color for the disabled state. | -| `--fluid-button--foreground-key` | Controls the foreground color for the key setting. | -| `--fluid-button--foreground-key-active` | Controls the foreground active color for the key setting. | -| `--fluid-button--foreground-key-hover` | Controls the foreground hover color for the key setting. | -| `--fluid-button--foreground-negative` | Controls the foreground color for the negative setting. | -| `--fluid-button--foreground-negative-active` | Controls the foreground active color for the negative setting. | -| `--fluid-button--foreground-negative-hover` | Controls the foreground hover color for the negative setting. | -| `--fluid-button--foreground-positive` | Controls the foreground color for the positive setting. | -| `--fluid-button--foreground-positive-active` | Controls the foreground active color for the positive setting. | -| `--fluid-button--foreground-positive-hover` | Controls the foreground hover color for the positive setting. | -| `--fluid-button--foreground-warning` | Controls the foreground color for the warning setting. | -| `--fluid-button--foreground-warning-active` | Controls the foreground active color for the warning setting. | -| `--fluid-button--foreground-warning-hover` | Controls the foreground hover color for the warning setting. | -| `--fluid-button--padding-large` | Controls the padding for large buttons. | -| `--fluid-button--padding-medium` | Controls the padding for medium buttons. | -| `--fluid-button--padding-small` | Controls the padding for small buttons. | diff --git a/libs/fluid-elements/button/jest.config.json b/libs/fluid-elements/button/jest.config.json deleted file mode 100644 index 453c856635..0000000000 --- a/libs/fluid-elements/button/jest.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "name": "fluid-button" -} diff --git a/libs/fluid-elements/button/package.json b/libs/fluid-elements/button/package.json deleted file mode 100644 index eed3211caf..0000000000 --- a/libs/fluid-elements/button/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@dynatrace/fluid-button", - "description": "Dynatrace button element based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": {} -} diff --git a/libs/fluid-elements/button/src/index.ts b/libs/fluid-elements/button/src/index.ts deleted file mode 100644 index 11b21a6b97..0000000000 --- a/libs/fluid-elements/button/src/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/button'; diff --git a/libs/fluid-elements/button/src/lib/button.spec.ts b/libs/fluid-elements/button/src/lib/button.spec.ts deleted file mode 100644 index 9bd3f2200f..0000000000 --- a/libs/fluid-elements/button/src/lib/button.spec.ts +++ /dev/null @@ -1,253 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidButton } from './button'; - -function tick(): Promise { - return Promise.resolve(); -} - -describe('Fluid button', () => { - let fixture: FluidButton; - - beforeEach(() => { - if (!customElements.get('fluid-button')) { - customElements.define('fluid-button', FluidButton); - } - document.body.innerHTML = 'Hello'; - fixture = document.querySelector('fluid-button')!; - }); - - it('should create the button', async () => { - expect(fixture).not.toBe(null); - }); - - it('should add the default classes to the shadow root', () => { - const classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-button'); - expect(classList).toContain('fluid-color--main'); - expect(classList).toContain('fluid-emphasis--medium'); - expect(classList).toContain('fluid-size--large'); - }); - - describe('color attribute', () => { - it('should update the color when the attribute is set', async () => { - fixture.setAttribute('color', 'positive'); - await tick(); - const classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-color--positive'); - }); - - it('should update the color when the property is set', async () => { - fixture.color = 'error'; - await tick(); - const classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-color--error'); - }); - - it('should fall back to the default when removing the color attribute', async () => { - fixture.setAttribute('color', 'error'); - await tick(); - fixture.removeAttribute('color'); - await tick(); - - const classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-color--main'); - }); - - it('should fall back to the default when setting the property to null', async () => { - fixture.color = 'error'; - await tick(); - fixture.color = null; - await tick(); - - const classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-color--main'); - }); - }); - - describe('size attribute', () => { - it('should update the size when the attribute is set', async () => { - fixture.setAttribute('size', 'small'); - await tick(); - let classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-size--small'); - }); - - it('should update the size when the property is set', async () => { - fixture.size = 'medium'; - await tick(); - let classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-size--medium'); - }); - - it('should fall back to the default when removing the attribute', async () => { - fixture.setAttribute('size', 'small'); - await tick(); - let classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-size--small'); - fixture.removeAttribute('size'); - await tick(); - classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-size--large'); - }); - - it('should fall back to the default when setting the property to null ', async () => { - fixture.size = 'small'; - await tick(); - let classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-size--small'); - fixture.size = null; - await tick(); - classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-size--large'); - }); - }); - - describe('emphasis attribute', () => { - it('should update the emphasis when the attribute is set', async () => { - fixture.setAttribute('emphasis', 'high'); - await tick(); - let classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-emphasis--high'); - }); - - it('should update the emphasis when the property is set', async () => { - fixture.emphasis = 'low'; - await tick(); - let classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-emphasis--low'); - }); - - it('should fall back to the default when removing the attribute', async () => { - fixture.setAttribute('emphasis', 'high'); - await tick(); - let classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-emphasis--high'); - fixture.removeAttribute('emphasis'); - await tick(); - classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-emphasis--medium'); - }); - - it('should fall back to the default when setting the property to null ', async () => { - fixture.emphasis = 'high'; - await tick(); - let classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-emphasis--high'); - fixture.emphasis = null; - await tick(); - classList = Array.from( - fixture.shadowRoot?.querySelector('button')?.classList!, - ); - expect(classList).toContain('fluid-emphasis--medium'); - }); - }); - - describe('disabled attribute', () => { - it('should set the disabled state when the attribute is present', async () => { - fixture.setAttribute('disabled', ''); - await tick(); - const shadowedButton = fixture.shadowRoot?.querySelector('button')!; - expect(shadowedButton.hasAttribute('disabled')).toBe(true); - }); - - it('should set the disabled state when the attribute is set', async () => { - fixture.setAttribute('disabled', 'disabled'); - await tick(); - const shadowedButton = fixture.shadowRoot?.querySelector('button')!; - expect(shadowedButton.hasAttribute('disabled')).toBe(true); - }); - - it('should set the disabled state when the property is set', async () => { - fixture.disabled = true; - await tick(); - const shadowedButton = fixture.shadowRoot?.querySelector('button')!; - expect(shadowedButton.hasAttribute('disabled')).toBe(true); - }); - - it('should reset the disabled state when the attribute is removed', async () => { - fixture.setAttribute('disabled', ''); - await tick(); - fixture.removeAttribute('disabled'); - await tick(); - const shadowedButton = fixture.shadowRoot?.querySelector('button')!; - expect(shadowedButton.hasAttribute('disabled')).toBe(false); - }); - - it('should reflect the disabled attribute to the host', async () => { - fixture.disabled = true; - await tick(); - expect(fixture.hasAttribute('disabled')).toBeTruthy(); - }); - }); - - describe('click handler', () => { - let mockHandler; - beforeEach(() => { - mockHandler = jest.fn(); - fixture.addEventListener('click', mockHandler); - }); - it('should call the handler when clicked', async () => { - fixture.click(); - expect(mockHandler).toHaveBeenCalled(); - }); - - // TODO: Figure out how we can disable click interaction - // without the use of css. - // It works in the browser for native clicks, because the pointer-events styling - // kicks in. But in the tests it's somehow hard to reproduce - // with a call to .click()... Doesn't work in lion as well. - // it('should not call the handler when clicking on a disabled button', waitForAsync() => { - // fixture.disabled = true; - // await tick(); - // fixture.click(); - // expect(mockHandler).not.toHaveBeenCalled(); - // }); - }); -}); diff --git a/libs/fluid-elements/button/src/lib/button.ts b/libs/fluid-elements/button/src/lib/button.ts deleted file mode 100644 index 6f9de70760..0000000000 --- a/libs/fluid-elements/button/src/lib/button.ts +++ /dev/null @@ -1,358 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - html, - LitElement, - property, - CSSResult, - TemplateResult, - css, - unsafeCSS, - customElement, -} from 'lit-element'; -import { classMap } from 'lit-html/directives/class-map'; - -import { - FLUID_BUTTON_PADDING_SMALL, - FLUID_BUTTON_PADDING_MEDIUM, - FLUID_BUTTON_PADDING_LARGE, - fluidDtText, -} from '@dynatrace/fluid-design-tokens'; - -/** Defines the possible types of the Fluid buttons colors. */ -export type FluidButtonColor = 'main' | 'positive' | 'warning' | 'error' | null; - -/** Defines the possible types of the Fluid buttons sizes. */ -export type FluidButtonSize = 'small' | 'medium' | 'large' | null; - -/** Defines the possible types of the Fluid buttons emphasis. */ -export type FluidButtonEmphasis = 'low' | 'medium' | 'high' | null; -/** - * This is an experimental button element built with lit-elements and - * web-components. It registers itself as `fluid-button` custom element. - * @slot The content of the button will be put inside the button element. - * @cssprop --fluid-button--padding-small - Controls the padding for small buttons. - * @cssprop --fluid-button--padding-medium - Controls the padding for medium buttons. - * @cssprop --fluid-button--padding-large - Controls the padding for large buttons. - * @cssprop --fluid-button--foreground-key - Controls the foreground color for the key setting. - * @cssprop --fluid-button--background-key - Controls the background color for the key setting. - * @cssprop --fluid-button--foreground-key-hover - Controls the foreground hover color for the key setting. - * @cssprop --fluid-button--background-key-hover - Controls the background hover color for the key setting. - * @cssprop --fluid-button--foreground-key-active - Controls the foreground active color for the key setting. - * @cssprop --fluid-button--background-key-active - Controls the background active color for the key setting. - * @cssprop --fluid-button--foreground-positive - Controls the foreground color for the positive setting. - * @cssprop --fluid-button--background-positive - Controls the background color for the positive setting. - * @cssprop --fluid-button--foreground-positive-hover - Controls the foreground hover color for the positive setting. - * @cssprop --fluid-button--background-positive-hover - Controls the background hover color for the positive setting. - * @cssprop --fluid-button--foreground-positive-active - Controls the foreground active color for the positive setting. - * @cssprop --fluid-button--background-positive-active - Controls the background active color for the positive setting. - * @cssprop --fluid-button--foreground-warning - Controls the foreground color for the warning setting. - * @cssprop --fluid-button--background-warning - Controls the background color for the warning setting. - * @cssprop --fluid-button--foreground-warning-hover - Controls the foreground hover color for the warning setting. - * @cssprop --fluid-button--background-warning-hover - Controls the background hover color for the warning setting. - * @cssprop --fluid-button--foreground-warning-active - Controls the foreground active color for the warning setting. - * @cssprop --fluid-button--background-warning-active - Controls the background active color for the warning setting. - * @cssprop --fluid-button--foreground-negative - Controls the foreground color for the negative setting. - * @cssprop --fluid-button--background-negative - Controls the background color for the negative setting. - * @cssprop --fluid-button--foreground-negative-hover - Controls the foreground hover color for the negative setting. - * @cssprop --fluid-button--background-negative-hover - Controls the background hover color for the negative setting. - * @cssprop --fluid-button--foreground-negative-active - Controls the foreground active color for the negative setting. - * @cssprop --fluid-button--background-negative-active - Controls the background active color for the negative setting. - * @cssprop --fluid-button--foreground-disabled - Controls the foreground color for the disabled state. - * @cssprop --fluid-button--background-disabled - Controls the background color for the disabled state. - */ -@customElement('fluid-button') -export class FluidButton extends LitElement { - /** Styles for the button component */ - static get styles(): CSSResult { - return css` - :host { - --fluid-button--padding-small: ${unsafeCSS(FLUID_BUTTON_PADDING_SMALL)}; - --fluid-button--padding-medium: ${unsafeCSS( - FLUID_BUTTON_PADDING_MEDIUM, - )}; - --fluid-button--padding-large: ${unsafeCSS(FLUID_BUTTON_PADDING_LARGE)}; - - --fluid-button--foreground-key: var(--color-primary-100); - --fluid-button--background-key: var(--color-neutral-60); - --fluid-button--foreground-key-hover: var(--color-primary-110); - --fluid-button--background-key-hover: var(--color-neutral-60); - --fluid-button--foreground-key-active: var(--color-primary-120); - --fluid-button--background-key-active: var(--color-neutral-60); - - --fluid-button--foreground-positive: var(--color-positive-100); - --fluid-button--background-positive: var(--color-neutral-60); - --fluid-button--foreground-positive-hover: var(--color-positive-110); - --fluid-button--background-positive-hover: var(--color-neutral-60); - --fluid-button--foreground-positive-active: var(--color-positive-120); - --fluid-button--background-positive-active: var(--color-neutral-60); - - --fluid-button--foreground-warning: var(--color-warning-100); - --fluid-button--background-warning: var(--color-neutral-60); - --fluid-button--foreground-warning-hover: var(--color-warning-110); - --fluid-button--background-warning-hover: var(--color-neutral-60); - --fluid-button--foreground-warning-active: var(--color-warning-120); - --fluid-button--background-warning-active: var(--color-neutral-60); - - --fluid-button--foreground-negative: var(--color-negative-100); - --fluid-button--background-negative: var(--color-neutral-60); - --fluid-button--foreground-negative-hover: var(--color-negative-110); - --fluid-button--background-negative-hover: var(--color-neutral-60); - --fluid-button--foreground-negative-active: var(--color-negative-120); - --fluid-button--background-negative-active: var(--color-neutral-60); - - --fluid-button--foreground-disabled: var(--color-neutral-100); - --fluid-button--background-disabled: var(--color-neutral-60); - } - - :host([disabled]) { - pointer-events: none; - } - - /* COLORS */ - .fluid-color--main { - --fluid-button--foreground: var(--fluid-button--foreground-key); - --fluid-button--background: var(--fluid-button--background-key); - --fluid-button--foreground-hover: var( - --fluid-button--foreground-key-hover - ); - --fluid-button--background-hover: var( - --fluid-button--background-key-hover - ); - --fluid-button--foreground-active: var( - --fluid-button--foreground-key-active - ); - --fluid-button--background-active: var( - --fluid-button--background-key-active - ); - } - - .fluid-color--positive { - --fluid-button--foreground: var(--fluid-button--foreground-positive); - --fluid-button--background: var(--fluid-button--background-positive); - --fluid-button--foreground-hover: var( - --fluid-button--foreground-positive-hover - ); - --fluid-button--background-hover: var( - --fluid-button--background-positive-hover - ); - --fluid-button--foreground-active: var( - --fluid-button--foreground-positive-active - ); - --fluid-button--background-active: var( - --fluid-button--background-positive-active - ); - } - - .fluid-color--warning { - --fluid-button--foreground: var(--fluid-button--foreground-warning); - --fluid-button--background: var(--fluid-button--background-warning); - --fluid-button--foreground-hover: var( - --fluid-button--foreground-warning-hover - ); - --fluid-button--background-hover: var( - --fluid-button--background-warning-hover - ); - --fluid-button--foreground-active: var( - --fluid-button--foreground-warning-active - ); - --fluid-button--background-active: var( - --fluid-button--background-warning-active - ); - } - - .fluid-color--error { - --fluid-button--foreground: var(--fluid-button--foreground-negative); - --fluid-button--background: var(--fluid-button--background-negative); - --fluid-button--foreground-hover: var( - --fluid-button--foreground-negative-hover - ); - --fluid-button--background-hover: var( - --fluid-button--background-negative-hover - ); - --fluid-button--foreground-active: var( - --fluid-button--foreground-negative-active - ); - --fluid-button--background-active: var( - --fluid-button--background-negative-active - ); - } - - /* DISABLED */ - .fluid-button[disabled] { - --fluid-button--foreground: var(--fluid-button--foreground-disabled); - --fluid-button--background: var(--fluid-button--background-disabled); - } - - .fluid-button { - appearance: none; - ${unsafeCSS(fluidDtText())}; - border-width: 2px; - border-style: solid; - display: inline-block; - cursor: pointer; - } - - /* SIZE */ - .fluid-size--small { - padding: var(--fluid-button--padding-small); - } - .fluid-size--medium { - padding: var(--fluid-button--padding-medium); - } - .fluid-size--large { - padding: var(--fluid-button--padding-large); - } - - /* EMPHASIS */ - .fluid-emphasis--low { - background: transparent; - border-color: transparent; - color: var(--fluid-button--foreground); - } - .fluid-emphasis--low:hover { - background: transparent; - border-color: transparent; - color: var(--fluid-button--foreground-hover); - } - .fluid-emphasis--low:active { - background: transparent; - border-color: transparent; - color: var(--fluid-button--foreground-active); - } - - .fluid-emphasis--medium { - background: var(--fluid-button--background); - border-color: var(--fluid-button--foreground); - color: var(--fluid-button--foreground); - } - .fluid-emphasis--medium:hover { - background: var(--fluid-button--background-hover); - border-color: var(--fluid-button--foreground-hover); - color: var(--fluid-button--foreground-hover); - } - .fluid-emphasis--medium:active { - background: var(--fluid-button--background-active); - border-color: var(--fluid-button--foreground-active); - color: var(--fluid-button--foreground-active); - } - - .fluid-emphasis--high { - background: var(--fluid-button--foreground); - border-color: var(--fluid-button--foreground); - color: var(--fluid-button--background); - } - .fluid-emphasis--high:hover { - background: var(--fluid-button--foreground-hover); - border-color: var(--fluid-button--foreground-hover); - color: var(--fluid-button--background-hover); - } - .fluid-emphasis--high:active { - background: var(--fluid-button--foreground-active); - border-color: var(--fluid-button--foreground-active); - color: var(--fluid-button--background-active); - } - `; - } - - /** - * Defines if the button is disabled or not. - * @attr - * @type boolean - */ - @property({ type: Boolean, reflect: true }) - disabled = false; - - /** - * Defines the color theme of the button. - * @attr - * @type {'main' | 'positive' | 'warning' | 'error' } - * @default 'main' - */ - @property({ type: String, reflect: false }) - get color(): FluidButtonColor { - return this._color; - } - set color(value: FluidButtonColor) { - const oldColor = this._color; - this._color = value ? value : 'main'; - this.requestUpdate('color', oldColor); - } - private _color: FluidButtonColor = 'main'; - - /** - * Defines the emphasis of the button. - * @attr - * @type {'low' | 'medium' | 'high'} - * @default 'medium' - */ - @property({ type: String, reflect: false }) - get emphasis(): FluidButtonEmphasis { - return this._emphasis; - } - set emphasis(value: FluidButtonEmphasis) { - const oldEmphasis = this._emphasis; - this._emphasis = value ? value : 'medium'; - this.requestUpdate('emphasis', oldEmphasis); - } - private _emphasis: FluidButtonEmphasis = 'medium'; - - /** - * Defines the size of the button. - * @attr - * @type {'small' | 'default' | 'large' } - * @default 'large' - */ - @property({ type: String, reflect: false }) - get size(): FluidButtonSize { - return this._size; - } - set size(value: FluidButtonSize) { - const oldSize = this._size; - this._size = value ? value : 'large'; - this.requestUpdate('size', oldSize); - } - private _size: FluidButtonSize = 'large'; - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - const classMapData = { - 'fluid-button': true, - 'fluid-color--main': this.color === 'main', - 'fluid-color--positive': this.color === 'positive', - 'fluid-color--warning': this.color === 'warning', - 'fluid-color--error': this.color === 'error', - 'fluid-emphasis--low': this.emphasis === 'low', - 'fluid-emphasis--medium': this.emphasis === 'medium', - 'fluid-emphasis--high': this.emphasis === 'high', - 'fluid-size--small': this.size === 'small', - 'fluid-size--medium': this.size === 'medium', - 'fluid-size--large': this.size === 'large', - }; - - return html` - - `; - } -} diff --git a/libs/fluid-elements/button/tsconfig.json b/libs/fluid-elements/button/tsconfig.json deleted file mode 100644 index da7cd737a1..0000000000 --- a/libs/fluid-elements/button/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "types": ["jest"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/button/tsconfig.lib.json b/libs/fluid-elements/button/tsconfig.lib.json deleted file mode 100644 index ea54e13d02..0000000000 --- a/libs/fluid-elements/button/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "include": ["**/*.ts"], - "exclude": ["**/*.spec.ts"] -} diff --git a/libs/fluid-elements/button/tsconfig.spec.json b/libs/fluid-elements/button/tsconfig.spec.json deleted file mode 100644 index cc2764398d..0000000000 --- a/libs/fluid-elements/button/tsconfig.spec.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "CommonJS", - "allowJs": true, - "types": ["jest", "node"], - "target": "es2015", - "lib": ["dom", "es2018"] - }, - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/libs/fluid-elements/button/tslint.json b/libs/fluid-elements/button/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/button/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/fluid-elements/checkbox/.stylelintrc b/libs/fluid-elements/checkbox/.stylelintrc deleted file mode 100644 index 25e6a3549a..0000000000 --- a/libs/fluid-elements/checkbox/.stylelintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../../../../.stylelintrc", - "rules": { - "no-missing-end-of-source-newline": false - } -} diff --git a/libs/fluid-elements/checkbox/BUILD.bazel b/libs/fluid-elements/checkbox/BUILD.bazel deleted file mode 100644 index dcd0697176..0000000000 --- a/libs/fluid-elements/checkbox/BUILD.bazel +++ /dev/null @@ -1,41 +0,0 @@ -load("@npm//@bazel/typescript:index.bzl", "ts_library", "ts_config") -load("//tools/bazel_rules:index.bzl", "stylelint") - -package(default_visibility = ["//:__subpackages__"]) - -ts_library( - name = "compile", - srcs = glob( - include = ["src/**/*.ts"], - exclude = [ - "src/**/*.spec.ts", - "src/test-setup.ts", - ], - ), - module_name = "@dynatrace/fluid-elements/checkbox", - module_root = "src", - tsconfig = "tsconfig_lib", - deps = [ - "//libs/shared/design-tokens", - "//libs/shared/keycodes", - "@npm//lit-element", - "@npm//lit-html", - "@npm//tslib", - ], -) - -stylelint( - name = "stylelint", - srcs = glob(["**/*.scss"]), - allow_empty_input = True, - config = ":.stylelintrc", -) - -ts_config( - name = "tsconfig_lib", - src = "tsconfig.lib.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) diff --git a/libs/fluid-elements/checkbox/README.md b/libs/fluid-elements/checkbox/README.md deleted file mode 100644 index 966bd1bcb6..0000000000 --- a/libs/fluid-elements/checkbox/README.md +++ /dev/null @@ -1,41 +0,0 @@ -# fluid-checkbox - -A basic representation of the checkbox input - -## Properties - -| Property | Attribute | Type | Default | Description | -| --------------- | --------------- | --------- | ------- | ----------------------------------------------- | -| `checked` | `checked` | `boolean` | | Defines if the checkbox is checked or not. | -| `disabled` | `disabled` | `boolean` | false | Defines if the checkbox is disabled or not. | -| `indeterminate` | `indeterminate` | `boolean` | | Indeterminate state property. | -| `value` | `value` | `string` | "on" | The value attribute of the native input element | - -## Methods - -| Method | Type | Description | -| -------- | ---------- | ---------------------------------------------------------------------------------------------------- | -| `toggle` | `(): void` | Toggles the state of the checkbox.
When called programmatically will not fire a `change` event. | - -## Events - -| Event | Description | -| --------------------- | --------------------------------------------------------------------------------------- | -| `change` | Event that is being fired when the checkbox state changes due
to user interaction. | -| `indeterminateChange` | Event that is being fired when the indeterminate
state of the checkbox changes. | - -## Slots - -| Name | Description | -| ---- | ------------------------------------------------------------ | -| | Default slot lets the user provide a label for the checkbox. | - -## CSS Custom Properties - -| Property | Description | -| ------------------------------------ | --------------------------------------------------------------------- | -| `--fluid-checkbox--background-color` | Customize the background color of the checked/indeterminate checkbox. | -| `--fluid-checkbox--border-color` | Customize the border color of the checkbox. | -| `--fluid-checkbox--box-glow-color` | Customize the color of the checkbox glow when hovering. | -| `--fluid-checkbox--label-color` | Customize the label color. | -| `--fluid-checkbox--mark-color` | Customize the color of the mark / indeterminate marker. | diff --git a/libs/fluid-elements/checkbox/jest.config.js b/libs/fluid-elements/checkbox/jest.config.js deleted file mode 100644 index 9994724a2f..0000000000 --- a/libs/fluid-elements/checkbox/jest.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - name: 'fluid-checkbox', - preset: '../jest.config.js', - coverageDirectory: '../../../coverage/libs/fluid-elements/checkbox', - globals: { 'ts-jest': { tsConfig: '/tsconfig.spec.json' } }, -}; diff --git a/libs/fluid-elements/checkbox/package.json b/libs/fluid-elements/checkbox/package.json deleted file mode 100644 index b2fee013ca..0000000000 --- a/libs/fluid-elements/checkbox/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "@dynatrace/fluid-checkbox", - "description": "Dynatrace checkbox element based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": { - "@dynatrace/shared/keycodes": "" - } -} diff --git a/libs/fluid-elements/checkbox/src/index.ts b/libs/fluid-elements/checkbox/src/index.ts deleted file mode 100644 index 8105a2d7e9..0000000000 --- a/libs/fluid-elements/checkbox/src/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/checkbox'; -export * from './lib/checkbox-events'; diff --git a/libs/fluid-elements/checkbox/src/lib/checkbox-events.ts b/libs/fluid-elements/checkbox/src/lib/checkbox-events.ts deleted file mode 100644 index 4c2f078143..0000000000 --- a/libs/fluid-elements/checkbox/src/lib/checkbox-events.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * Custom event implementation that mimics a native change event. - */ -export class FluidCheckboxChangeEvent extends CustomEvent { - constructor(public checked: boolean) { - super('change', { bubbles: true, composed: true }); - } -} - -/** - * Custom event implementation for the IndeterminateChange event. - */ -export class FluidCheckboxIndeterminateChangeEvent extends CustomEvent { - constructor(public checked: boolean) { - super('indeterminateChange', { bubbles: true, composed: true }); - } -} diff --git a/libs/fluid-elements/checkbox/src/lib/checkbox.spec.ts b/libs/fluid-elements/checkbox/src/lib/checkbox.spec.ts deleted file mode 100644 index d99648e737..0000000000 --- a/libs/fluid-elements/checkbox/src/lib/checkbox.spec.ts +++ /dev/null @@ -1,347 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidCheckbox } from './checkbox'; -import { SPACE } from '@dynatrace/shared/keycodes'; -import { dispatchKeyboardEvent } from '@dynatrace/testing/browser'; - -function tick(): Promise { - return Promise.resolve(); -} - -describe('Fluid checkbox', () => { - let fixture: FluidCheckbox; - let changeSpy: jest.Mock; - let indeterminateChangeSpy: jest.Mock; - - /** Checks if the current fixture is displaying the checkmark */ - function showsCheckmark(): boolean { - const svg = fixture.shadowRoot?.querySelector('svg'); - return Boolean(svg?.classList.contains('fluid-state--checked')); - } - - /** Checks if the current fixture is displaying the indeterminate line */ - function showsIndeterminate(): boolean { - const svg = fixture.shadowRoot?.querySelector('svg'); - return Boolean(svg?.classList.contains('fluid-state--indeterminate')); - } - - beforeEach(() => { - // Register the element, if it is not yet registered - if (!customElements.get('fluid-checkbox')) { - customElements.define('fluid-checkbox', FluidCheckbox); - } - // create the fixture - document.body.innerHTML = - 'I am the checkbox label'; - fixture = document.querySelector('fluid-checkbox')!; - - // Add spied eventListeners - changeSpy = jest.fn(); - fixture.addEventListener('change', changeSpy); - indeterminateChangeSpy = jest.fn(); - fixture.addEventListener('indeterminateChange', indeterminateChangeSpy); - }); - - afterEach(() => { - jest.restoreAllMocks(); - }); - - it('should create the checkbox', async () => { - expect(fixture).not.toBe(null); - }); - - describe('checked attribute', () => { - it('should set the state to checked when the attribute is set to true', async () => { - fixture.setAttribute('checked', ''); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(showsCheckmark()).toBeTruthy(); - expect(showsIndeterminate()).toBeFalsy(); - }); - - it('should set the state to checked when the property is set to true', async () => { - fixture.checked = true; - await tick(); - expect(fixture.hasAttribute('checked')).toBeTruthy(); - expect(showsCheckmark()).toBeTruthy(); - expect(showsIndeterminate()).toBeFalsy(); - }); - - it('should set the state to unchecked when the property is set to false', async () => { - fixture.checked = false; - await tick(); - expect(fixture.hasAttribute('checked')).toBeFalsy(); - expect(showsCheckmark()).toBeFalsy(); - expect(showsIndeterminate()).toBeFalsy(); - }); - - it('should not be checked after the attribute was added and removed', async () => { - fixture.setAttribute('checked', ''); - await tick(); - fixture.removeAttribute('checked'); - await tick(); - expect(fixture.checked).toBeFalsy(); - expect(showsCheckmark()).toBeFalsy(); - expect(showsIndeterminate()).toBeFalsy(); - }); - - it('should change the checked state if the label is clicked', async () => { - const label = fixture.shadowRoot?.querySelector('label'); - // We need to call click on the label instead of dispatching a MouseEvent - // on the label, as jsdom will not fire secondary events (label to input connection) - // click() has a shimmed implementation that will trigger input changes as - // the browser does. - label?.click(); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(showsCheckmark()).toBeTruthy(); - expect(showsIndeterminate()).toBeFalsy(); - }); - - it('should unset change the checked state if the label is clicked twice', async () => { - const label = fixture.shadowRoot?.querySelector('label'); - label?.click(); - await tick(); - label?.click(); - await tick(); - expect(fixture.checked).toBeFalsy(); - expect(showsCheckmark()).toBeFalsy(); - expect(showsIndeterminate()).toBeFalsy(); - }); - - // tslint:disable-next-line: dt-no-focused-tests - it.skip('should change the checked state when triggered by keyboard', async () => { - const checkbox = fixture.shadowRoot?.querySelector('svg'); - dispatchKeyboardEvent(checkbox!, 'keyup', SPACE); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(showsCheckmark()).toBeTruthy(); - expect(showsIndeterminate()).toBeFalsy(); - expect(changeSpy).toHaveBeenCalledTimes(1); - }); - }); - - describe('indeterminate attribute', () => { - it('should show the indeterminate state if the attribute is set', async () => { - fixture.setAttribute('indeterminate', ''); - await tick(); - expect(fixture.indeterminate).toBeTruthy(); - expect(showsCheckmark()).toBeFalsy(); - expect(showsIndeterminate()).toBeTruthy(); - }); - - it('should show the indeterminate state if the property is set', async () => { - fixture.indeterminate = true; - await tick(); - expect(fixture.hasAttribute('indeterminate')).toBeTruthy(); - expect(showsCheckmark()).toBeFalsy(); - expect(showsIndeterminate()).toBeTruthy(); - }); - - it('should not show the indeterminate state if the attribute is added and removed again', async () => { - fixture.setAttribute('indeterminate', ''); - await tick(); - fixture.removeAttribute('indeterminate'); - await tick(); - expect(fixture.indeterminate).toBeFalsy(); - expect(showsCheckmark()).toBeFalsy(); - expect(showsIndeterminate()).toBeFalsy(); - }); - - it('should show only the indeterminate state, even if checked is set already', async () => { - fixture.checked = true; - await tick(); - fixture.indeterminate = true; - await tick(); - expect(showsCheckmark()).toBeFalsy(); - expect(showsIndeterminate()).toBeTruthy(); - }); - - it('should show only the indeterminate state, even if checked is set in the same cycle', async () => { - fixture.checked = true; - fixture.indeterminate = true; - await tick(); - expect(showsCheckmark()).toBeFalsy(); - expect(showsIndeterminate()).toBeTruthy(); - }); - }); - - describe('disabled attribute', () => { - it('should set the disabled state when the attribute is present', async () => { - fixture.setAttribute('disabled', ''); - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input')!; - expect(shadowedInput.hasAttribute('disabled')).toBeTruthy(); - }); - - it('should set the disabled state when the attribute is set', async () => { - fixture.setAttribute('disabled', 'disabled'); - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input')!; - expect(shadowedInput.hasAttribute('disabled')).toBeTruthy(); - }); - - it('should set the disabled state when the property is set', async () => { - fixture.disabled = true; - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input')!; - expect(shadowedInput.hasAttribute('disabled')).toBeTruthy(); - }); - - it('should reset the disabled state when the attribute is removed', async () => { - fixture.setAttribute('disabled', ''); - await tick(); - fixture.removeAttribute('disabled'); - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input')!; - expect(shadowedInput.hasAttribute('disabled')).toBeFalsy(); - }); - - it('should reflect the disabled attribute to the host', async () => { - fixture.disabled = true; - await tick(); - expect(fixture.hasAttribute('disabled')).toBeTruthy(); - }); - }); - - describe('value', () => { - it('should have the correct default set', async () => { - const shadowedInput = fixture.shadowRoot?.querySelector('input'); - expect(shadowedInput?.getAttribute('value')).toBe('on'); - }); - - it('should set the value to customvalue when the property is set', async () => { - fixture.value = 'customvalue'; - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input'); - expect(shadowedInput?.getAttribute('value')).toBe('customvalue'); - }); - - it('should set the value to customvalue when the attribute is set', async () => { - fixture.setAttribute('value', 'customvalue'); - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input'); - expect(shadowedInput?.getAttribute('value')).toBe('customvalue'); - }); - }); - - describe('tabindex', () => { - it('should have a tabindex on the triggerable element when enabled', () => { - const checkbox = fixture.shadowRoot?.querySelector('svg'); - expect(checkbox?.hasAttribute('tabindex')).toBeTruthy(); - expect(checkbox?.getAttribute('tabindex')).toBe('0'); - }); - - it('should have a tabindex of -1 on the triggerable element when disabled', async () => { - fixture.disabled = true; - await tick(); - const checkbox = fixture.shadowRoot?.querySelector('svg'); - expect(checkbox?.hasAttribute('tabindex')).toBeTruthy(); - expect(checkbox?.getAttribute('tabindex')).toBe('-1'); - }); - }); - - describe('aria-checked attribute', () => { - it('should have aria-checked set to false by default', () => { - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('false'); - }); - - it('should have aria-checked set to false when the checkbox is not checked', async () => { - fixture.checked = false; - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('false'); - }); - - it('should have aria-checked set to true when the checkbox is checked', async () => { - fixture.checked = true; - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('true'); - }); - - it('should have aria-checked set to mixed when the checkbox is indeterminate and not checked', async () => { - fixture.checked = false; - fixture.indeterminate = true; - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('mixed'); - }); - - it('should have aria-checked set to mixed when the checkbox is indeterminate and checked', async () => { - fixture.checked = true; - fixture.indeterminate = true; - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('mixed'); - }); - }); - - describe('toggle method', () => { - it('should toggle the checkmark on when called on an unchecked element', async () => { - fixture.toggle(); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(showsCheckmark()).toBeTruthy(); - expect(showsIndeterminate()).toBeFalsy(); - }); - - it('should toggle the checkmark on when called on a checked element', async () => { - fixture.checked = true; - await tick(); - fixture.toggle(); - await tick(); - expect(fixture.checked).toBeFalsy(); - expect(showsCheckmark()).toBeFalsy(); - expect(showsIndeterminate()).toBeFalsy(); - }); - }); - - describe('change event', () => { - it('should emit the change event when the checkbox is toggled via click', async () => { - const label = fixture.shadowRoot?.querySelector('label'); - label?.click(); - await tick(); - expect(changeSpy).toHaveBeenCalledTimes(1); - }); - }); - - describe('indeterminateChange event', () => { - it('should emit the changeIndeterminate event when it is set', async () => { - fixture.indeterminate = true; - await tick(); - expect(indeterminateChangeSpy).toHaveBeenCalledTimes(1); - }); - - it('should emit the changeIndeterminate event when it is set and again unset', async () => { - fixture.indeterminate = true; - await tick(); - fixture.indeterminate = false; - await tick(); - expect(indeterminateChangeSpy).toHaveBeenCalledTimes(2); - }); - - it('should only fire the event once when indeterminate is set to the same value', async () => { - fixture.indeterminate = true; - await tick(); - fixture.indeterminate = true; - await tick(); - expect(indeterminateChangeSpy).toHaveBeenCalledTimes(1); - }); - }); -}); diff --git a/libs/fluid-elements/checkbox/src/lib/checkbox.ts b/libs/fluid-elements/checkbox/src/lib/checkbox.ts deleted file mode 100644 index 769b6d420b..0000000000 --- a/libs/fluid-elements/checkbox/src/lib/checkbox.ts +++ /dev/null @@ -1,409 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - html, - LitElement, - CSSResult, - TemplateResult, - property, - css, - unsafeCSS, - customElement, - PropertyValues, -} from 'lit-element'; -import { classMap } from 'lit-html/directives/class-map'; -import { SPACE } from '@dynatrace/shared/keycodes'; -import { - FLUID_SPACING_2X_SMALL, - FLUID_SPACING_X_SMALL, - fluidDtText, -} from '@dynatrace/fluid-design-tokens'; -import { - FluidCheckboxChangeEvent, - FluidCheckboxIndeterminateChangeEvent, -} from './checkbox-events'; - -let uniqueCounter = 0; - -// TODO: Add required property and validation? - -/** - * A basic representation of the checkbox input - * @element fluid-checkbox - * @slot - Default slot lets the user provide a label for the checkbox. - * @fires change - Event that is being fired when the checkbox state changes due - * to user interaction. - * @fires indeterminateChange - Event that is being fired when the indeterminate - * state of the checkbox changes. - * @cssprop --fluid-checkbox--label-color - Customize the label color. - * @cssprop --fluid-checkbox--box-glow-color - Customize the color of the checkbox glow when hovering. - * @cssprop --fluid-checkbox--border-color - Customize the border color of the checkbox. - * @cssprop --fluid-checkbox--background-color - Customize the background color of the checked/indeterminate checkbox. - * @cssprop --fluid-checkbox--mark-color - Customize the color of the mark / indeterminate marker. - */ -@customElement('fluid-checkbox') -export class FluidCheckbox extends LitElement { - /** - * Unique identifier used for the id and label connection - * within the checkbox. - */ - private _unique = `fluid-checkbox-${uniqueCounter++}`; - - /** Reference to the native input within the shadowed template. */ - private _inputElement: HTMLInputElement; - - /** Styles for the button component */ - static get styles(): CSSResult { - return css` - :host { - /** - * Legibility definitions should probably be - * shipped or imported from a core - */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - - --fluid-checkbox--label-color: var(--color-neutral-150); - --fluid-checkbox--box-glow-color: var(--color-neutral-150); - --fluid-checkbox--border-color: var(--color-neutral-150); - --fluid-checkbox--background-color: var(--color-primary-100); - --fluid-checkbox--mark-color: var(--color-background); - } - - /** - * Disabled state - */ - :host([disabled]) { - pointer-events: none; - } - :host([disabled]) .fluid-label { - color: var(--fluid-checkbox--label-color); - opacity: 0.5; - } - :host([disabled]) .fluid-svg-checkbox { - opacity: 0.5; - } - - .fluid-checkbox { - margin-left: -${unsafeCSS(FLUID_SPACING_2X_SMALL)}; - display: flex; - position: relative; - } - - .fluid-label { - ${unsafeCSS(fluidDtText())}; - color: var(--fluid-checkbox--label-color); - margin-left: ${unsafeCSS(FLUID_SPACING_X_SMALL)}; - } - - label { - cursor: pointer; - display: inline-flex; - align-items: center; - } - label:hover .fluid-svg-checkbox-background { - opacity: 0.1; - transform: scale(1); - } - - .fluid-checkbox-input { - position: absolute; - width: 24px; - height: 24px; - top: -${unsafeCSS(FLUID_SPACING_2X_SMALL)}; - left: -${unsafeCSS(FLUID_SPACING_2X_SMALL)}; - opacity: 0; - } - - .fluid-svg-checkbox { - /* TODO: Maybe move this one into the design tokens as soon as we - figure out how to map designToken values to viewBox values of - svgs? */ - width: 24px; - height: 24px; - cursor: pointer; - } - - .fluid-svg-checkbox-background { - fill: var(--fluid-checkbox--box-glow-color); - /* TODO: Replace with opacity token */ - opacity: 0; - /* TODO: Replace with transition and animation tokens */ - transition: opacity 125ms ease-in-out, transform 125ms ease-in-out; - transform: scale(0); - } - - .fluid-svg-checkbox-rect { - stroke: var(--fluid-checkbox--border-color); - fill: transparent; - } - - .fluid-svg-checkbox-tick, - .fluid-svg-checkbox-indeterminate { - fill: transparent; - } - - .fluid-state--checked .fluid-svg-checkbox-rect { - fill: var(--fluid-checkbox--background-color); - stroke: var(--fluid-checkbox--background-color); - } - .fluid-state--checked .fluid-svg-checkbox-tick { - fill: var(--fluid-checkbox--mark-color); - } - - .fluid-state--indeterminate .fluid-svg-checkbox-rect { - fill: var(--fluid-checkbox--background-color); - stroke: var(--fluid-checkbox--background-color); - } - .fluid-state--indeterminate .fluid-svg-checkbox-indeterminate { - fill: var(--fluid-checkbox--mark-color); - } - `; - } - - /** - * Defines if the checkbox is disabled or not. - * @attr - * @type boolean - */ - @property({ - type: Boolean, - reflect: true, - }) - disabled = false; - - /** The value attribute of the native input element */ - @property({ type: String, reflect: true }) - // Default string for the value is 'on' from MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox#Additional_attributes) - value = 'on'; - - /** - * Defines if the checkbox is checked or not. - * @attr - * @type boolean - */ - @property({ - type: Boolean, - reflect: true, - }) - get checked(): boolean { - return this._checked; - } - set checked(value: boolean) { - if (value !== this._checked) { - const oldValue = this._checked; - this._checked = value; - this.requestUpdate('checked', oldValue); - } - } - private _checked = false; - - /** - * Indeterminate state property. - * @attr - * @type boolean - */ - @property({ - type: Boolean, - reflect: true, - }) - get indeterminate(): boolean { - return this._indeterminate; - } - set indeterminate(value: boolean) { - if (value !== this._indeterminate) { - const oldValue = this._indeterminate; - this._indeterminate = value; - this.requestUpdate('indeterminate', oldValue); - this._dispatchIndeterminateChangeEvent(); - } - } - private _indeterminate = false; - - /** - * Role of the checkbox. - * @private - An internal prop that should not appear in the readme and should - * not be set by the outside. - */ - @property({ - type: String, - reflect: true, - }) - role: string = 'checkbox'; - - /** - * Aria-checked attribute of the checkbox. - * @private - An internal prop that should not appear in the readme and should - * not be set by the outside. - */ - @property({ - type: String, - reflect: true, - attribute: 'aria-checked', - }) - ariaChecked: string = 'false'; - - /** First updated lifecycle */ - firstUpdated(props: PropertyValues): void { - super.firstUpdated(props); - this._inputElement = this.shadowRoot?.querySelector('input')!; - } - - /** Update lifecycle */ - update(props: PropertyValues): void { - // Aria-checked depends on the value of checked, but is never actually - // set by the litElement reactivity. In the updated lifeCycle - // we need to manually update the ariaChecked attribute here. - if (props.has('checked') || props.has('indeterminate')) { - // TODO: extract 'mixed' into a shared constant. - this.ariaChecked = this.indeterminate ? 'mixed' : this.checked.toString(); - } - // Changing the aria-checked or any observed property in the update, will - // add it to the updated properties. When calling super first in, the change - // of properties in the update call will trigger an update, as the properties - // will have changed after the super.update() call. To prevent an additional - // cycle, we make the modifications before calling the super lifecycle - super.update(props); - } - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - const classMapData = { - 'fluid-svg-checkbox': true, - 'fluid-state--checked': this.checked && !this.indeterminate, - 'fluid-state--indeterminate': this.indeterminate, - }; - - return html` -
- - -
- `; - } - - /** - * Dispatches a change event for the checkbox - */ - private _dispatchChangeEvent(): void { - this.dispatchEvent(new FluidCheckboxChangeEvent(this.checked)); - } - - /** - * Dispatches a new IndeterminateChange event. - */ - private _dispatchIndeterminateChangeEvent(): void { - this.dispatchEvent( - new FluidCheckboxIndeterminateChangeEvent(this.indeterminate), - ); - } - - /** - * Handles the change of the native checkbox element and routes the - * event out. - */ - private _handleInputChange(event: Event): void { - this.checked = (event.target as HTMLInputElement).checked; - if (this.indeterminate) { - this.indeterminate = false; - this._dispatchIndeterminateChangeEvent(); - } - this._dispatchChangeEvent(); - } - - /** - * Handles the keyup event on the checkbox to proxy it to the native input - * element. - */ - private _handleKeyup(event: KeyboardEvent): void { - const proxiedEvent = new KeyboardEvent(event.type, event); - this._inputElement.dispatchEvent(proxiedEvent); - } - - /** - * Event handler to prevent scroll. - * @param event - */ - private _handleKeydown(event: KeyboardEvent): void { - if (event.code === SPACE) { - event.preventDefault(); - } - } - - /** - * Toggles the state of the checkbox. - * When called programmatically will not fire a `change` event. - */ - toggle(): void { - this.checked = !this.checked; - } -} diff --git a/libs/fluid-elements/checkbox/tsconfig.json b/libs/fluid-elements/checkbox/tsconfig.json deleted file mode 100644 index da7cd737a1..0000000000 --- a/libs/fluid-elements/checkbox/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "types": ["jest"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/checkbox/tsconfig.lib.json b/libs/fluid-elements/checkbox/tsconfig.lib.json deleted file mode 100644 index ea54e13d02..0000000000 --- a/libs/fluid-elements/checkbox/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "include": ["**/*.ts"], - "exclude": ["**/*.spec.ts"] -} diff --git a/libs/fluid-elements/checkbox/tsconfig.spec.json b/libs/fluid-elements/checkbox/tsconfig.spec.json deleted file mode 100644 index cc2764398d..0000000000 --- a/libs/fluid-elements/checkbox/tsconfig.spec.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "CommonJS", - "allowJs": true, - "types": ["jest", "node"], - "target": "es2015", - "lib": ["dom", "es2018"] - }, - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/libs/fluid-elements/checkbox/tslint.json b/libs/fluid-elements/checkbox/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/checkbox/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/fluid-elements/core/BUILD.bazel b/libs/fluid-elements/core/BUILD.bazel deleted file mode 100644 index 0a55698bd7..0000000000 --- a/libs/fluid-elements/core/BUILD.bazel +++ /dev/null @@ -1,51 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "jest", "stylelint") -load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_library") - -package(default_visibility = ["//libs/fluid-elements:__subpackages__"]) - -ts_library( - name = "compile", - srcs = glob( - include = ["src/**/*.ts"], - exclude = [ - "src/**/*.spec.ts", - "src/test-setup.ts", - ], - ), - module_name = "@dynatrace/fluid-elements/core", - module_root = "src", - tsconfig = "tsconfig_lib", - deps = [ - "//libs/shared/keycodes", - ], -) - -ts_config( - name = "tsconfig_lib", - src = "tsconfig.lib.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) - -jest( - name = "test", - srcs = glob(include = ["src/**/*.spec.ts"]), - jest_config = ":jest.config.json", - ts_config = ":tsconfig_test", - deps = [ - ":compile", - "//libs/shared/keycodes", - "//libs/testing/browser", - ], -) - -ts_config( - name = "tsconfig_test", - src = "tsconfig.spec.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) diff --git a/libs/fluid-elements/core/README.md b/libs/fluid-elements/core/README.md deleted file mode 100644 index 5d7dba8e6f..0000000000 --- a/libs/fluid-elements/core/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# shared-fluid-utils - -This library consists of utility functions primarily used by fluid elements. diff --git a/libs/fluid-elements/core/jest.config.json b/libs/fluid-elements/core/jest.config.json deleted file mode 100644 index 63e1e4d98b..0000000000 --- a/libs/fluid-elements/core/jest.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "name": "fluid-core" -} diff --git a/libs/fluid-elements/core/package.json b/libs/fluid-elements/core/package.json deleted file mode 100644 index 42d591ee64..0000000000 --- a/libs/fluid-elements/core/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "@dynatrace/fluid-core", - "description": "Dynatrace fluid-element core utilities", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": { - "@dynatrace/shared/keycodes": "" - } -} diff --git a/libs/fluid-elements/core/src/index.ts b/libs/fluid-elements/core/src/index.ts deleted file mode 100644 index 6484f6333f..0000000000 --- a/libs/fluid-elements/core/src/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/keyboard'; diff --git a/libs/fluid-elements/core/src/lib/keyboard/get-next-group-item-index.spec.ts b/libs/fluid-elements/core/src/lib/keyboard/get-next-group-item-index.spec.ts deleted file mode 100644 index ef0f95deae..0000000000 --- a/libs/fluid-elements/core/src/lib/keyboard/get-next-group-item-index.spec.ts +++ /dev/null @@ -1,74 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { getNextGroupItemIndex } from './get-next-group-item-index'; -import { - ARROW_RIGHT, - ARROW_LEFT, - ARROW_UP, - ARROW_DOWN, -} from '@dynatrace/shared/keycodes'; - -describe('get next group item index', () => { - it('should get 1 if the index is 0 and ARROW_RIGHT and the length is 4', () => { - expect(getNextGroupItemIndex(0, 4, ARROW_RIGHT)).toBe(1); - }); - it('should get 2 if the index is 1 and ARROW_RIGHT and the length is 4', () => { - expect(getNextGroupItemIndex(1, 4, ARROW_RIGHT)).toBe(2); - }); - it('should get 3 if the index is 2 and ARROW_RIGHT and the length is 4', () => { - expect(getNextGroupItemIndex(2, 4, ARROW_RIGHT)).toBe(3); - }); - it('should get 0 if the index is 3 and ARROW_RIGHT and the length is 4', () => { - expect(getNextGroupItemIndex(3, 4, ARROW_RIGHT)).toBe(0); - }); - it('should get 1 if the index is 0 and ARROW_DOWN and the length is 4', () => { - expect(getNextGroupItemIndex(0, 4, ARROW_DOWN)).toBe(1); - }); - it('should get 2 if the index is 1 and ARROW_DOWN and the length is 4', () => { - expect(getNextGroupItemIndex(1, 4, ARROW_DOWN)).toBe(2); - }); - it('should get 3 if the index is 2 and ARROW_DOWN and the length is 4', () => { - expect(getNextGroupItemIndex(2, 4, ARROW_DOWN)).toBe(3); - }); - it('should get 0 if the index is 3 and ARROW_DOWN and the length is 4', () => { - expect(getNextGroupItemIndex(3, 4, ARROW_DOWN)).toBe(0); - }); - it('should get 3 if the index is 0 and ARROW_LEFT and the length is 4', () => { - expect(getNextGroupItemIndex(0, 4, ARROW_LEFT)).toBe(3); - }); - it('should get 2 if the index is 3 and ARROW_LEFT and the length is 4', () => { - expect(getNextGroupItemIndex(3, 4, ARROW_LEFT)).toBe(2); - }); - it('should get 1 if the index is 2 and ARROW_LEFT and the length is 4', () => { - expect(getNextGroupItemIndex(2, 4, ARROW_LEFT)).toBe(1); - }); - it('should get 0 if the index is 1 and ARROW_LEFT and the length is 4', () => { - expect(getNextGroupItemIndex(1, 4, ARROW_LEFT)).toBe(0); - }); - it('should get 3 if the index is 0 and ARROW_UP and the length is 4', () => { - expect(getNextGroupItemIndex(0, 4, ARROW_UP)).toBe(3); - }); - it('should get 2 if the index is 3 and ARROW_UP and the length is 4', () => { - expect(getNextGroupItemIndex(3, 4, ARROW_UP)).toBe(2); - }); - it('should get 1 if the index is 2 and ARROW_UP and the length is 4', () => { - expect(getNextGroupItemIndex(2, 4, ARROW_UP)).toBe(1); - }); - it('should get 0 if the index is 1 and ARROW_UP and the length is 4', () => { - expect(getNextGroupItemIndex(1, 4, ARROW_UP)).toBe(0); - }); -}); diff --git a/libs/fluid-elements/core/src/lib/keyboard/get-next-group-item-index.ts b/libs/fluid-elements/core/src/lib/keyboard/get-next-group-item-index.ts deleted file mode 100644 index cd507b4991..0000000000 --- a/libs/fluid-elements/core/src/lib/keyboard/get-next-group-item-index.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - ARROW_LEFT, - ARROW_RIGHT, - ARROW_DOWN, - ARROW_UP, -} from '@dynatrace/shared/keycodes'; - -/** Calculate based on a length and the direction (arrow key) what the next index is supporting rotationing */ -export function getNextGroupItemIndex( - index: number, - length: number, - key: string, -): number { - switch (key) { - case ARROW_RIGHT: - case ARROW_DOWN: - index += 1; - break; - case ARROW_LEFT: - case ARROW_UP: - index -= 1; - break; - default: - break; - } - if (index > length - 1) { - index = 0; - } else if (index < 0) { - index = length - 1; - } - return index; -} diff --git a/libs/fluid-elements/core/src/lib/keyboard/index.ts b/libs/fluid-elements/core/src/lib/keyboard/index.ts deleted file mode 100644 index c5194b7608..0000000000 --- a/libs/fluid-elements/core/src/lib/keyboard/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './get-next-group-item-index'; diff --git a/libs/fluid-elements/core/tsconfig.json b/libs/fluid-elements/core/tsconfig.json deleted file mode 100644 index da7cd737a1..0000000000 --- a/libs/fluid-elements/core/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "types": ["jest"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/core/tsconfig.lib.json b/libs/fluid-elements/core/tsconfig.lib.json deleted file mode 100644 index 4848e3e498..0000000000 --- a/libs/fluid-elements/core/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "include": ["**/*.d.ts"], - "exclude": ["**/*.spec.ts"] -} diff --git a/libs/fluid-elements/core/tsconfig.spec.json b/libs/fluid-elements/core/tsconfig.spec.json deleted file mode 100644 index cc2764398d..0000000000 --- a/libs/fluid-elements/core/tsconfig.spec.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "CommonJS", - "allowJs": true, - "types": ["jest", "node"], - "target": "es2015", - "lib": ["dom", "es2018"] - }, - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/libs/fluid-elements/core/tslint.json b/libs/fluid-elements/core/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/core/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/fluid-elements/icon/BUILD.bazel b/libs/fluid-elements/icon/BUILD.bazel deleted file mode 100644 index cf2353f9fc..0000000000 --- a/libs/fluid-elements/icon/BUILD.bazel +++ /dev/null @@ -1,52 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "jest", "stylelint") -load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_library") - -package(default_visibility = ["//libs/fluid-elements:__subpackages__"]) - -ts_library( - name = "compile", - srcs = glob( - include = ["src/**/*.ts"], - exclude = [ - "src/**/*.spec.ts", - "src/test-setup.ts", - ], - ), - module_name = "@dynatrace/fluid-elements/icon", - module_root = "src", - tsconfig = "tsconfig_lib", - deps = [ - "//libs/shared/design-tokens", - "@npm//lit-element", - "@npm//lit-html", - "@npm//tslib", - ], -) - -jest( - name = "test", - srcs = glob(include = ["src/**/*.spec.ts"]), - jest_config = ":jest.config.json", - ts_config = ":tsconfig_test", - deps = [ - ":compile", - ], -) - -ts_config( - name = "tsconfig_lib", - src = "tsconfig.lib.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) - -ts_config( - name = "tsconfig_test", - src = "tsconfig.spec.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) diff --git a/libs/fluid-elements/icon/README.md b/libs/fluid-elements/icon/README.md deleted file mode 100644 index 4998d37e8b..0000000000 --- a/libs/fluid-elements/icon/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# fluid-icon - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `bazel test //libs/fluid-elements/icon:test` to execute the unit tests via -[Jest](https://jestjs.io). diff --git a/libs/fluid-elements/icon/jest.config.json b/libs/fluid-elements/icon/jest.config.json deleted file mode 100644 index 894304f0b6..0000000000 --- a/libs/fluid-elements/icon/jest.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "name": "fluid-icon" -} diff --git a/libs/fluid-elements/icon/package.json b/libs/fluid-elements/icon/package.json deleted file mode 100644 index 50c7a4a9b9..0000000000 --- a/libs/fluid-elements/icon/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@dynatrace/fluid-icon", - "description": "Dynatrace icon element based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": {} -} diff --git a/libs/fluid-elements/icon/src/index.ts b/libs/fluid-elements/icon/src/index.ts deleted file mode 100644 index 7b0da98d50..0000000000 --- a/libs/fluid-elements/icon/src/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/icon'; diff --git a/libs/fluid-elements/icon/src/lib/icon.spec.ts b/libs/fluid-elements/icon/src/lib/icon.spec.ts deleted file mode 100644 index c8a40fb759..0000000000 --- a/libs/fluid-elements/icon/src/lib/icon.spec.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidIcon } from './icon'; - -describe('Fluid icon', () => { - let fixture: FluidIcon; - - beforeEach(() => { - if (!customElements.get('fluid-icon')) { - customElements.define('fluid-icon', FluidIcon); - } - document.body.innerHTML = ''; - fixture = document.querySelector('fluid-icon')!; - }); - - it('should create the icon', async () => { - expect(fixture).not.toBe(null); - }); -}); diff --git a/libs/fluid-elements/icon/src/lib/icon.ts b/libs/fluid-elements/icon/src/lib/icon.ts deleted file mode 100644 index ed932016a9..0000000000 --- a/libs/fluid-elements/icon/src/lib/icon.ts +++ /dev/null @@ -1,91 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - css, - CSSResult, - customElement, - html, - LitElement, - property, - TemplateResult, -} from 'lit-element'; - -const ARROW_DOWN_ICON = html` - -`; - -const CHECKMARK_ICON = html` - -`; - -export type FluidIconType = 'arrow-down' | 'checkmark'; - -@customElement('fluid-icon') -export class FluidIcon extends LitElement { - /** Returns styles for FluidIcon component. */ - static get styles(): CSSResult { - return css` - :host { - display: inline-block; - - --fluid-icon--color: var(--color-neutral-100); - } - - svg { - height: 100%; - min-height: 14px; - fill: var(--fluid-icon--color); - } - `; - } - - /** - * Defines the icon to be displayed. - * @attr - * @type string - */ - @property({ type: String, reflect: false }) - name: FluidIconType; - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - switch (this.name) { - case 'arrow-down': - return ARROW_DOWN_ICON; - case 'checkmark': - return CHECKMARK_ICON; - default: - console.error('No icon selected'); - return html``; - } - } -} diff --git a/libs/fluid-elements/icon/tsconfig.json b/libs/fluid-elements/icon/tsconfig.json deleted file mode 100644 index f8121d873b..0000000000 --- a/libs/fluid-elements/icon/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "types": ["jest"] - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/icon/tsconfig.lib.json b/libs/fluid-elements/icon/tsconfig.lib.json deleted file mode 100644 index ab70c726d1..0000000000 --- a/libs/fluid-elements/icon/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "exclude": ["**/*.spec.ts"], - "include": ["**/*.ts"] -} diff --git a/libs/fluid-elements/icon/tsconfig.spec.json b/libs/fluid-elements/icon/tsconfig.spec.json deleted file mode 100644 index cf5206502e..0000000000 --- a/libs/fluid-elements/icon/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "allowJs": true, - "types": ["jest", "node"], - "target": "es2015", - "lib": ["dom", "es2018"] - }, - "include": [ - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.spec.js", - "**/*.spec.jsx", - "**/*.d.ts" - ] -} diff --git a/libs/fluid-elements/icon/tslint.json b/libs/fluid-elements/icon/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/icon/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/fluid-elements/input/BUILD.bazel b/libs/fluid-elements/input/BUILD.bazel deleted file mode 100644 index 94f61faefc..0000000000 --- a/libs/fluid-elements/input/BUILD.bazel +++ /dev/null @@ -1,52 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "jest", "stylelint") -load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_library") - -package(default_visibility = ["//libs/fluid-elements:__subpackages__"]) - -ts_library( - name = "compile", - srcs = glob( - include = ["src/**/*.ts"], - exclude = [ - "src/**/*.spec.ts", - "src/test-setup.ts", - ], - ), - module_name = "@dynatrace/fluid-elements/input", - module_root = "src", - tsconfig = "tsconfig_lib", - deps = [ - "//libs/shared/design-tokens", - "@npm//lit-element", - "@npm//lit-html", - "@npm//tslib", - ], -) - -jest( - name = "test", - srcs = glob(include = ["src/**/*.spec.ts"]), - jest_config = ":jest.config.json", - ts_config = ":tsconfig_test", - deps = [ - ":compile", - ], -) - -ts_config( - name = "tsconfig_lib", - src = "tsconfig.lib.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) - -ts_config( - name = "tsconfig_test", - src = "tsconfig.spec.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) diff --git a/libs/fluid-elements/input/README.md b/libs/fluid-elements/input/README.md deleted file mode 100644 index 9522004693..0000000000 --- a/libs/fluid-elements/input/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# fluid-input - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `bazel test //libs/fluid-elements/input:test` to execute the unit tests via -[Jest](https://jestjs.io). diff --git a/libs/fluid-elements/input/jest.config.json b/libs/fluid-elements/input/jest.config.json deleted file mode 100644 index cf52b98c59..0000000000 --- a/libs/fluid-elements/input/jest.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "name": "fluid-input" -} diff --git a/libs/fluid-elements/input/package.json b/libs/fluid-elements/input/package.json deleted file mode 100644 index 08df4b89ac..0000000000 --- a/libs/fluid-elements/input/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@dynatrace/fluid-input", - "description": "Dynatrace input element based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": {} -} diff --git a/libs/fluid-elements/input/src/index.ts b/libs/fluid-elements/input/src/index.ts deleted file mode 100644 index 964cd853f1..0000000000 --- a/libs/fluid-elements/input/src/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/input'; diff --git a/libs/fluid-elements/input/src/lib/input.spec.ts b/libs/fluid-elements/input/src/lib/input.spec.ts deleted file mode 100644 index 30a2defd84..0000000000 --- a/libs/fluid-elements/input/src/lib/input.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidInput } from './input'; - -describe('Fluid input', () => { - let fixture: FluidInput; - - beforeEach(() => { - if (!customElements.get('fluid-input')) { - customElements.define('fluid-input', FluidInput); - } - document.body.innerHTML = - ''; - fixture = document.querySelector('fluid-input')!; - }); - - it('should create the input', async () => { - expect(fixture).not.toBe(null); - }); -}); diff --git a/libs/fluid-elements/input/src/lib/input.styles.ts b/libs/fluid-elements/input/src/lib/input.styles.ts deleted file mode 100644 index 92effd8dce..0000000000 --- a/libs/fluid-elements/input/src/lib/input.styles.ts +++ /dev/null @@ -1,197 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { css, unsafeCSS, CSSResult } from 'lit-element'; -import { - FLUID_INPUT_BOX_SHADOW, - FLUID_INPUT_PADDING, - FLUID_INPUT_PADDING_INLINE, - fluidDtText, -} from '@dynatrace/fluid-design-tokens'; - -export const inputStyles: CSSResult = css` - :host { - /* - TODO - change hover/focus colors to rgba, according to figma colors - */ - display: inline-block; - - --fluid-input--padding: ${unsafeCSS(FLUID_INPUT_PADDING)}; - - --fluid-input--foreground-key: var(--color-neutral-140); - --fluid-input--background-key: var(--color-neutral-140); - --fluid-input--border-key: var(--color-neutral-100); - --fluid-input--foreground-key-hover: var(--color-primary-100); - --fluid-input--background-key-hover: var(--color-neutral-50); - --fluid-input--border-key-hover: var(--color-primary-100); - --fluid-input--foreground-key-focus: var(--color-primary-100); - --fluid-input--background-key-focus: var(--color-neutral-50); - --fluid-input--border-key-focus: var(--color-primary-100); - - --fluid-input--foreground-negative: var(--color-error-80); - --fluid-input--border-negative: var(--color-error-80); - --fluid-input--foreground-negative-hover: var(--color-error-80); - --fluid-input--border-negative-hover: var(--color-error-80); - --fluid-input--foreground-negative-focus: var(--color-error-80); - --fluid-input--border-negative-focus: var(--color-error-80); - - --fluid-input--foreground-disabled: var(--color-neutral-100); - --fluid-input--background-disabled: var(--color-neutral-60); - --fluid-input--border-disabled: var(--color-neutral-100); - - --fluid-input--placeholder: var(--color-neutral-100); - --fluid-input--hint: var(--color-neutral-100); - } - - /* COLORS */ - .fluid-color--main { - --fluid-input--foreground: var(--fluid-input--foreground-key); - --fluid-input--background: var(--fluid-input--background-key); - --fluid-input--border: var(--fluid-input--border-key); - - --fluid-input--foreground-hover: var(--fluid-input--foreground-key-hover); - --fluid-input--background-hover: var(--fluid-input--background-key-hover); - --fluid-input--border-hover: var(--fluid-input--border-key-hover); - - --fluid-input--foreground-focus: var(--fluid-input--foreground-key-focus); - --fluid-input--background-focus: var(--fluid-input--background-key-focus); - --fluid-input--border-focus: var(--fluid-input--border-key-focus); - } - - .fluid-color--error { - --fluid-input--foreground: var(--fluid-input--foreground-negative); - --fluid-input--border: var(--fluid-input--border-negative); - - --fluid-input--foreground-hover: var(--fluid-input--foreground-negative); - --fluid-input--border-hover: var(--fluid-input--border-negative); - } - - /* DISABLED */ - .fluid-color--disabled { - --fluid-input--foreground: var(--fluid-input--foreground-disabled); - --fluid-input--background: var(--fluid-input--background-disabled); - --fluid-input--border: var(--fluid-input--border-disabled); - } - - .fluid-input-container:hover { - --fluid-input--foreground: var(--fluid-input--foreground-hover); - --fluid-input--background: var(--fluid-input--background-hover); - --fluid-input--border: var(--fluid-input--border-hover); - } - - .fluid-input-container--focus { - --fluid-input--foreground: var(--fluid-input--foreground-focus); - --fluid-input--background: var(--fluid-input--background-focus); - --fluid-input--border: var(--fluid-input--border-focus); - } - - .fluid-input { - ${unsafeCSS(fluidDtText())}; - display: inline-grid; - color: var(--fluid-input--foreground); - } - - .fluid-input-hint-container { - display: inline-grid; - } - - .fluid-input-container { - position: relative; - display: inline-grid; - grid-template-columns: auto auto; - align-items: center; - padding: 0 ${unsafeCSS(FLUID_INPUT_PADDING_INLINE)}; - transition: background-color 100ms ease-in-out; - } - - .fluid-input-container--focus { - background-color: var(--fluid-input--background-focus); - box-shadow: ${unsafeCSS(FLUID_INPUT_BOX_SHADOW)} rgba(21, 23, 27, 0.2); - } - - .fluid-input-container::after { - content: ''; - position: absolute; - bottom: 0; - left: ${unsafeCSS(FLUID_INPUT_PADDING_INLINE)}; - width: calc(100% - 2 * ${unsafeCSS(FLUID_INPUT_PADDING_INLINE)}); - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: var(--fluid-input--border); - will-change: left width; - transition: left 100ms ease-in-out, width 100ms ease-in-out; - } - - .fluid-input-container--focus::after { - left: 0; - width: 100%; - } - - .fluid-input--label-left { - display: inline-block; - } - - .fluid-icon-container { - height: 1rem; - } - - .fluid-input-hint { - padding-left: ${unsafeCSS(FLUID_INPUT_PADDING_INLINE)}; - color: var(--fluid-input--hint); - font-size: 0.8rem; - } - - /* SLOTTED ELEMENTS STYLES */ - ::slotted(label) { - padding-left: ${unsafeCSS(FLUID_INPUT_PADDING_INLINE)}; - font-size: 0.8rem; - } - - .fluid-input--label-left ::slotted(label) { - padding-right: ${unsafeCSS(FLUID_INPUT_PADDING_INLINE)}; - font-size: 1rem; - } - - ::slotted(input) { - ${unsafeCSS(fluidDtText())}; - padding: ${unsafeCSS(FLUID_INPUT_PADDING)} 0; - width: 100%; - appearance: none; - background: none; - border: none; - color: var(--fluid-input--foreground-key); - text-overflow: ellipsis; - } - - ::slotted(input:focus) { - outline: none; - } - - ::slotted(input)::placeholder { - color: var(--fluid-input--placeholder); - transition: opacity 100ms ease-in-out; - } - - ::slotted(input:focus)::placeholder { - opacity: 0; - } - - ::slotted(fluid-icon) { - height: 100%; - --fluid-icon--primary-color: var(--fluid-input--foreground); - } -`; diff --git a/libs/fluid-elements/input/src/lib/input.ts b/libs/fluid-elements/input/src/lib/input.ts deleted file mode 100644 index 9aa8abcc0b..0000000000 --- a/libs/fluid-elements/input/src/lib/input.ts +++ /dev/null @@ -1,183 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - CSSResult, - LitElement, - TemplateResult, - customElement, - html, - property, -} from 'lit-element'; - -import { classMap } from 'lit-html/directives/class-map'; - -import { inputStyles } from './input.styles'; - -/** Defines the possible positions of the fluid-input label. */ -export type FluidInputLabelPosition = `top` | `left` | null; - -/** - * This is an experimental input element built with lit-elements and - * web-components. It registers itself as `fluid-input` custom element. - * @element fluid-input - * @cssprop --fluid-input--foreground-key - Controls the foreground color for the default state. - * @cssprop --fluid-input--background-key - Controls the background color for the default state. - * @cssprop --fluid-input--border-key - Controls the border color for the default state. - * @cssprop --fluid-input--foreground-key-hover - Controls the foreground hover color for the default state. - * @cssprop --fluid-input--background-key-hover - Controls the background hover color for the default state. - * @cssprop --fluid-input--border-key-hover - Controls the border hover color for the default state. - * @cssprop --fluid-input--foreground-key-focus - Controls the foreground focus color for the default state. - * @cssprop --fluid-input--background-key-focus - Controls the background focus color for the default state. - * @cssprop --fluid-input--border-key-focus - Controls the border focus color for the default state. - * @cssprop --fluid-input--foreground-negative - Controls the foreground color for the negative state. - * @cssprop --fluid-input--border-negative - Controls the border color for the negative state. - * @cssprop --fluid-input--foreground-negative-hover - Controls the foreground hover color for the negative state. - * @cssprop --fluid-input--border-negative-hover - Controls the border hover color for the negative state. - * @cssprop --fluid-input--foreground-negative-focus - Controls the foreground focus color for the negative state. - * @cssprop --fluid-input--border-negative-focus - Controls the border focus color for the negative state. - * @cssprop --fluid-input--foreground-disabled - Controls the foreground color for the disabled state. - * @cssprop --fluid-input--background-disabled - Controls the background color for the disabled state. - * @cssprop --fluid-input--border-disabled - Controls the border color for the disabled state. - * @cssprop --fluid-input--placeholder - Controls the placeholder color. - * @cssprop --fluid-input--hint - Controls the hint color. - */ -@customElement('fluid-input') -export class FluidInput extends LitElement { - /** Styles for the input component */ - static get styles(): CSSResult { - return inputStyles; - } - - /** - * Defines the aria label of the input input field. - * @attr - * @type string - */ - @property({ type: String, reflect: true }) - labelposition: FluidInputLabelPosition = `top`; - - /** - * Defines the hint of the input input field. - * @attr - * @type string - */ - @property({ type: String, reflect: true }) - hint: string = ``; - - /** - * @internal Defines if the input should be blurred - * Used in the fluid-combo-box to keep the input - * focused when clicking in the popover - */ - _preventBlur = false; - - /** - * Defines whether the input is disabled. - * Used for styling the input container - */ - @property({ type: Boolean, attribute: false }) - private _disabled = false; - - /** - * Defines whether the input is focused. - * Used for styling the container - */ - @property({ type: Boolean, attribute: false }) - private _focus = false; - - /** - * Validate slotted element(s) and add event listeners - * for focusing and blurring an input - */ - private _handleSlotChange({ target }: { target: HTMLSlotElement }): void { - const slottedElements = target.assignedElements({ - flatten: true, - }); - - // Only accept one element per slot - if (slottedElements.length > 1) { - throw new Error( - `The fluid-input only takes one input element in the default slot.`, - ); - } - - const element = slottedElements[0]; - - // Only accept input or label element as slotted elements - if (element.tagName !== `INPUT` && element.tagName !== `LABEL`) { - throw new Error( - `The fluid-input only takes an input element or a label as slotted elements.`, - ); - } - - // Add focus and blur listeners to the input element - if (element.tagName === `INPUT`) { - this._disabled = (element as HTMLInputElement).disabled; - element.addEventListener(`focus`, this._handleFocus.bind(this)); - element.addEventListener(`blur`, this._handleBlur.bind(this)); - } - } - - /** Set the fluid input focus to apply styles */ - private _handleFocus(): void { - this._focus = true; - } - - /** Set the fluid input focus to apply styles */ - private _handleBlur(): void { - if (!this._preventBlur) { - this._focus = false; - } - } - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - const classMapData = { - 'fluid-input': true, - 'fluid-color--main': true, - /* TODO: validation */ - 'fluid-color--error': false, - 'fluid-color--disabled': this._disabled, - 'fluid-input--label-left': this.labelposition === `left`, - }; - - const classMapDataInputContainer = { - 'fluid-input-container': true, - 'fluid-input-container--focus': this._focus, - }; - - return html` -
- -
-
- -
- -
-
- ${this.hint - ? html`${this.hint}` - : html` `} -
-
- `; - } -} diff --git a/libs/fluid-elements/input/tsconfig.json b/libs/fluid-elements/input/tsconfig.json deleted file mode 100644 index f8121d873b..0000000000 --- a/libs/fluid-elements/input/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "types": ["jest"] - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/input/tsconfig.lib.json b/libs/fluid-elements/input/tsconfig.lib.json deleted file mode 100644 index ab70c726d1..0000000000 --- a/libs/fluid-elements/input/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "exclude": ["**/*.spec.ts"], - "include": ["**/*.ts"] -} diff --git a/libs/fluid-elements/input/tsconfig.spec.json b/libs/fluid-elements/input/tsconfig.spec.json deleted file mode 100644 index 1798b378a9..0000000000 --- a/libs/fluid-elements/input/tsconfig.spec.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "include": [ - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.spec.js", - "**/*.spec.jsx", - "**/*.d.ts" - ] -} diff --git a/libs/fluid-elements/input/tslint.json b/libs/fluid-elements/input/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/input/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/fluid-elements/jest.config.js b/libs/fluid-elements/jest.config.js deleted file mode 100644 index 89e3dcccf7..0000000000 --- a/libs/fluid-elements/jest.config.js +++ /dev/null @@ -1,13 +0,0 @@ -const rootConfig = require('../../jest.config'); - -module.exports = { - ...rootConfig, - transformIgnorePatterns: [ - // We need to allowlist lit-html and lit-element so that jest will - // transform their code, as it is not shipped. - 'node_modules/(?!(lit-html|lit-element)/)', - ], - moduleNameMapper: { - '\\.(css|scss)$': 'libs/testing/custom-element/src/__mocks__/styleMock.js', - }, -}; diff --git a/libs/fluid-elements/package.json b/libs/fluid-elements/package.json deleted file mode 100644 index 02de0431d5..0000000000 --- a/libs/fluid-elements/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@dynatrace/fluid-elements", - "description": "Dynatrace elements based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": {} -} diff --git a/libs/fluid-elements/popover/BUILD.bazel b/libs/fluid-elements/popover/BUILD.bazel deleted file mode 100644 index c817ce9ee7..0000000000 --- a/libs/fluid-elements/popover/BUILD.bazel +++ /dev/null @@ -1,53 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "jest", "stylelint") -load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_library") - -package(default_visibility = ["//libs/fluid-elements:__subpackages__"]) - -ts_library( - name = "compile", - srcs = glob( - include = ["src/**/*.ts"], - exclude = [ - "src/**/*.spec.ts", - "src/test-setup.ts", - ], - ), - module_name = "@dynatrace/fluid-elements/popover", - module_root = "src", - tsconfig = "tsconfig_lib", - deps = [ - "//libs/shared/design-tokens", - "@npm//lit-element", - "@npm//lit-html", - "@npm//tslib", - "@npm//@popperjs", - ], -) - -jest( - name = "test", - srcs = glob(include = ["src/**/*.spec.ts"]), - jest_config = ":jest.config.json", - ts_config = ":tsconfig_test", - deps = [ - ":compile", - ], -) - -ts_config( - name = "tsconfig_lib", - src = "tsconfig.lib.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) - -ts_config( - name = "tsconfig_test", - src = "tsconfig.spec.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) diff --git a/libs/fluid-elements/popover/README.md b/libs/fluid-elements/popover/README.md deleted file mode 100644 index 3f089e923f..0000000000 --- a/libs/fluid-elements/popover/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# fluid-popover - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `bazel test //libs/fluid-elements/popover:test` to execute the unit tests -via [Jest](https://jestjs.io). diff --git a/libs/fluid-elements/popover/jest.config.json b/libs/fluid-elements/popover/jest.config.json deleted file mode 100644 index 20b902520e..0000000000 --- a/libs/fluid-elements/popover/jest.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "name": "fluid-popover" -} diff --git a/libs/fluid-elements/popover/package.json b/libs/fluid-elements/popover/package.json deleted file mode 100644 index aa6677a859..0000000000 --- a/libs/fluid-elements/popover/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@dynatrace/fluid-popover", - "description": "Dynatrace popover element based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": {} -} diff --git a/libs/fluid-elements/popover/src/index.ts b/libs/fluid-elements/popover/src/index.ts deleted file mode 100644 index 117f037c90..0000000000 --- a/libs/fluid-elements/popover/src/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/popover'; diff --git a/libs/fluid-elements/popover/src/lib/popover.spec.ts b/libs/fluid-elements/popover/src/lib/popover.spec.ts deleted file mode 100644 index 0b32829138..0000000000 --- a/libs/fluid-elements/popover/src/lib/popover.spec.ts +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidPopover } from './popover'; - -function tick(): Promise { - return Promise.resolve(); -} - -describe(`Fluid popover`, () => { - let fixture: FluidPopover; - - beforeEach(() => { - if (!customElements.get(`fluid-popover`)) { - customElements.define(`fluid-popover`, FluidPopover); - } - document.body.innerHTML = `Test`; - fixture = document.querySelector(`fluid-popover`)!; - }); - - it(`should create the popover`, async () => { - expect(fixture).not.toBe(null); - }); - - it(`should add the default classes to the shadow root`, () => { - const classList = Array.from( - fixture.shadowRoot?.querySelector(`div`)?.classList!, - ); - expect(classList).toContain(`fluid-popover`); - expect(classList).not.toContain(`fluid-popover--open`); - }); - - describe(`open attribute`, () => { - it(`should update the class list when the attribute is set`, async () => { - fixture.setAttribute(`open`, `true`); - await tick(); - const classList = Array.from( - fixture.shadowRoot?.querySelector(`div`)?.classList!, - ); - expect(classList).toContain(`fluid-popover--open`); - }); - - it(`should update the class list when the property is set`, async () => { - fixture.open = true; - await tick(); - const classList = Array.from( - fixture.shadowRoot?.querySelector(`div`)?.classList!, - ); - expect(classList).toContain(`fluid-popover--open`); - }); - - it(`should fall back to the default when removing the open attribute`, async () => { - fixture.setAttribute(`open`, `true`); - await tick(); - fixture.removeAttribute(`open`); - await tick(); - - const classList = Array.from( - fixture.shadowRoot?.querySelector(`div`)?.classList!, - ); - expect(classList).not.toContain(`fluid-popover--open`); - expect(fixture.open).toBeFalsy(); - }); - }); - - describe(`placement attribute`, () => { - it(`should set default if the attribute is not provided`, async () => { - expect(fixture.getAttribute(`placement`)).toEqual(`bottom-start`); - }); - - it(`should update the attribute when the property is set`, async () => { - fixture.placement = `bottom-end`; - await tick(); - expect(fixture.getAttribute(`placement`)).toEqual(`bottom-end`); - }); - - it(`should update the property when the attribute is set`, async () => { - fixture.setAttribute(`placement`, `bottom-end`); - await tick(); - expect(fixture.placement).toEqual(`bottom-end`); - }); - }); -}); diff --git a/libs/fluid-elements/popover/src/lib/popover.ts b/libs/fluid-elements/popover/src/lib/popover.ts deleted file mode 100644 index 0b1a04a260..0000000000 --- a/libs/fluid-elements/popover/src/lib/popover.ts +++ /dev/null @@ -1,223 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - CSSResult, - LitElement, - TemplateResult, - css, - customElement, - html, - property, - query, - unsafeCSS, -} from 'lit-element'; -import { classMap } from 'lit-html/directives/class-map'; -import { fluidDtText } from '@dynatrace/fluid-design-tokens'; - -import type { Placement } from '@popperjs/core/lib'; -import { Instance, createPopper, Rect } from '@popperjs/core/lib/popper-lite'; -import flip from '@popperjs/core/lib/modifiers/flip'; -import offset from '@popperjs/core/lib/modifiers/offset'; -import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow'; - -/** - * Set defaults for preventing overflow - * Applied to all instances of the FluidPopover - */ -preventOverflow.options = { - mainAxis: true, - altAxis: true, -}; - -export type FluidPopoverOffsetFunction = ({ - popper, - reference, - placement, -}: { - popper: Rect; - reference: Rect; - placement: Placement; -}) => [number | null | undefined, number | null | undefined]; - -export type FluidPopoverOffset = - | FluidPopoverOffsetFunction - | [number | null | undefined, number | null | undefined] - | undefined; - -/** - * This is an experimental popover element built with lit-elements and - * web-components. It registers itself as `fluid-popover` custom element. - * @element fluid-popover - * @cssprop --fluid-popover--foreground-key - Controls the foreground color for the key setting. - * @cssprop --fluid-popover--background-key - Controls the background color for the key setting. - * @cssprop --fluid-popover--background-key - Controls the background color for the key setting. - * @cssprop --fluid-popover--foreground-key-hover - Controls the foreground hover color for the key setting. - * @cssprop --fluid-popover--background-key-hover - Controls the background hover color for the key setting. - * @cssprop --fluid-popover--foreground-disabled - Controls the foreground color for the disabled state. - * @cssprop --fluid-popover--background-disabled - Controls the background color for the disabled state. - */ -@customElement('fluid-popover') -export class FluidPopover extends LitElement { - /** Styles for the popover component */ - static get styles(): CSSResult { - return css` - :host { - display: block; - - --fluid-popover--background: var(--color-neutral-50); - } - - .fluid-popover { - ${unsafeCSS(fluidDtText())}; - display: none; - overflow: hidden; - background: var(--fluid-popover--background); - box-shadow: 0 3px 10px rgba(21, 23, 27, 0.2); - transition: opacity 1500ms ease-in-out; - z-index: 10; - } - - .fluid-popover--open { - display: block; - } - `; - } - - /** - * Defines whether the popover is open. - * @attr - * @type boolean - * @default false - */ - @property({ type: Boolean, reflect: true }) - get open(): boolean { - return this._open; - } - set open(value: boolean) { - const oldOpen = this._open; - this._open = value; - this._togglePopover(); - this.requestUpdate(`open`, oldOpen); - } - private _open = false; - - /** - * The element to connect the popover to - * @type HTMLElement - */ - @property({ attribute: false }) - anchor: HTMLElement; - - /** Defines the placement of the popper.js popover */ - @property({ type: String, reflect: true }) - placement: Placement = `bottom-start`; - - /** Defines the placement of the popper.js popover */ - @property({ type: Array, reflect: true }) - get fallbackplacement(): Placement[] { - return this._fallbackplacement; - } - set fallbackplacement(value: Placement[]) { - const oldFallbackPlacement = this._fallbackplacement; - this._fallbackplacement = value; - // Set fallback options for popper.js directive - this._flipModifier.options = { - fallbackPlacements: this._fallbackplacement, - }; - this.requestUpdate(`fallbackplacement`, oldFallbackPlacement); - } - private _fallbackplacement: Placement[]; - - /** Defines the offset of the popper.js popover */ - @property({ type: Array, reflect: true }) - get offset(): FluidPopoverOffset { - return this._offset; - } - set offset(value: FluidPopoverOffset) { - const oldOffset = this._offset; - this._offset = value; - // Set offset for popper.js directive - this._offsetModifier.options = { - offset: this._offset, - }; - this.requestUpdate(`fallbackplacement`, oldOffset); - } - private _offset: FluidPopoverOffset; - - /** - * FLuid popover container element - * @type HTMLDivElement - */ - @query(`.fluid-popover`) - private _popover: HTMLDivElement; - - /** Clone of the offset modifier to be able to adjust the offsets of individual popovers */ - private _offsetModifier = Object.assign({}, offset); - - /** Clone of the flip modifier to be able to adjust the flip behaviour of individual popovers */ - private _flipModifier = Object.assign({}, flip); - - /** Instance of the created popper.js popover */ - private _popperPopoverInstance: Instance | null; - - /** - * Creates or destroys the options overlay and sets `open` accordingly - * Else, popperjs would calculate the updates for an existing overlay even if it is not visible - */ - private _togglePopover(): void { - requestAnimationFrame(() => { - if (this.open) { - this._createPopover(); - } else { - this._destroyPopover(); - } - }); - } - - /** Create a popperjs popover */ - private _createPopover(): void { - this._popperPopoverInstance = createPopper(this.anchor, this._popover, { - placement: this.placement, - modifiers: [preventOverflow, this._flipModifier, this._offsetModifier], - }); - } - - /** Destroy the popperjs popover instance */ - private _destroyPopover(): void { - if (this._popperPopoverInstance) { - this._popperPopoverInstance.destroy(); - this._popperPopoverInstance = null; - } - } - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - const classMapData = { - 'fluid-popover': true, - 'fluid-popover--open': this.open, - }; - - return html` -
- -
- `; - } -} diff --git a/libs/fluid-elements/popover/tsconfig.json b/libs/fluid-elements/popover/tsconfig.json deleted file mode 100644 index f8121d873b..0000000000 --- a/libs/fluid-elements/popover/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "types": ["jest"] - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/popover/tsconfig.lib.json b/libs/fluid-elements/popover/tsconfig.lib.json deleted file mode 100644 index ab70c726d1..0000000000 --- a/libs/fluid-elements/popover/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "exclude": ["**/*.spec.ts"], - "include": ["**/*.ts"] -} diff --git a/libs/fluid-elements/popover/tsconfig.spec.json b/libs/fluid-elements/popover/tsconfig.spec.json deleted file mode 100644 index cf5206502e..0000000000 --- a/libs/fluid-elements/popover/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "allowJs": true, - "types": ["jest", "node"], - "target": "es2015", - "lib": ["dom", "es2018"] - }, - "include": [ - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.spec.js", - "**/*.spec.jsx", - "**/*.d.ts" - ] -} diff --git a/libs/fluid-elements/popover/tslint.json b/libs/fluid-elements/popover/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/popover/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/fluid-elements/switch/.stylelintrc b/libs/fluid-elements/switch/.stylelintrc deleted file mode 100644 index 25e6a3549a..0000000000 --- a/libs/fluid-elements/switch/.stylelintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../../../../.stylelintrc", - "rules": { - "no-missing-end-of-source-newline": false - } -} diff --git a/libs/fluid-elements/switch/BUILD.bazel b/libs/fluid-elements/switch/BUILD.bazel deleted file mode 100644 index df0d25e509..0000000000 --- a/libs/fluid-elements/switch/BUILD.bazel +++ /dev/null @@ -1,10 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "stylelint") - -package(default_visibility = ["//:__subpackages__"]) - -stylelint( - name = "stylelint", - srcs = glob(["**/*.scss"]), - config = ":.stylelintrc", - allow_empty_input = True, -) diff --git a/libs/fluid-elements/switch/README.md b/libs/fluid-elements/switch/README.md deleted file mode 100644 index aa59320dab..0000000000 --- a/libs/fluid-elements/switch/README.md +++ /dev/null @@ -1,41 +0,0 @@ -# fluid-switch - -A basic representation of the switch input - -## Properties - -| Property | Attribute | Type | Default | Description | -| ---------- | ---------- | --------- | ------- | ----------------------------------------------- | -| `checked` | `checked` | `boolean` | | Whether the switch is considered `on` or `off`. | -| `disabled` | `disabled` | `boolean` | false | Whether the switch is disabled or not | -| `value` | `value` | `string` | "on" | The value attribute of the native input element | - -## Methods - -| Method | Type | Description | -| -------- | ---------- | ------------------------ | -| `toggle` | `(): void` | Toggle the checked state | - -## Events - -| Event | Description | -| -------- | ------------------------------------------------------------------------------------- | -| `change` | Event that is being fired when the switch state changes due
to user interaction. | - -## Slots - -| Name | Description | -| ---- | ---------------------------------------------------------- | -| | Default slot lets the user provide a label for the switch. | - -## CSS Custom Properties - -| Property | Description | -| ---------------------------------------- | ---------------------------------------------------------------------- | -| `--fluid-switch--container` | Customize the container color. | -| `--fluid-switch--container-fill-checked` | Customize the fill color when
the switch is in the checked state. | -| `--fluid-switch--fill` | Customize the switch fill color. | -| `--fluid-switch--focus` | Customize the focus color. | -| `--fluid-switch--knob` | Customize the knob color. | -| `--fluid-switch--knob-checked` | Customize the knob color when
the switch is in the checked state. | -| `--fluid-switch--label-color` | Customize the label color. | diff --git a/libs/fluid-elements/switch/jest.config.js b/libs/fluid-elements/switch/jest.config.js deleted file mode 100644 index 0c97539b94..0000000000 --- a/libs/fluid-elements/switch/jest.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - name: 'fluid-switch', - preset: '../jest.config.js', - coverageDirectory: '../../../coverage/libs/fluid-elements/switch', - globals: { 'ts-jest': { tsConfig: '/tsconfig.spec.json' } }, -}; diff --git a/libs/fluid-elements/switch/package.json b/libs/fluid-elements/switch/package.json deleted file mode 100644 index 08a8e6fabd..0000000000 --- a/libs/fluid-elements/switch/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@dynatrace/fluid-switch", - "description": "Dynatrace switch element based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": {} -} diff --git a/libs/fluid-elements/switch/src/index.ts b/libs/fluid-elements/switch/src/index.ts deleted file mode 100644 index 8d3f57bec0..0000000000 --- a/libs/fluid-elements/switch/src/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/switch'; diff --git a/libs/fluid-elements/switch/src/lib/switch-events.ts b/libs/fluid-elements/switch/src/lib/switch-events.ts deleted file mode 100644 index f67403beeb..0000000000 --- a/libs/fluid-elements/switch/src/lib/switch-events.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export class FluidSwitchChangeEvent extends CustomEvent { - constructor(public checked: boolean) { - super('change', { bubbles: true, composed: true }); - } -} diff --git a/libs/fluid-elements/switch/src/lib/switch.spec.ts b/libs/fluid-elements/switch/src/lib/switch.spec.ts deleted file mode 100644 index 4da1cd7758..0000000000 --- a/libs/fluid-elements/switch/src/lib/switch.spec.ts +++ /dev/null @@ -1,266 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidSwitch } from './switch'; -import { SPACE } from '@dynatrace/shared/keycodes'; -import { dispatchKeyboardEvent } from '@dynatrace/testing/browser'; - -function tick(): Promise { - return Promise.resolve(); -} - -describe('Fluid switch', () => { - let fixture: FluidSwitch; - let changeSpy: jest.Mock; - - function switchIsOn(): boolean { - const svg = fixture.shadowRoot?.querySelector('svg'); - return Boolean(svg?.classList.contains('checked')); - } - - beforeEach(() => { - // Register the element, if it is not yet registered - if (!customElements.get('fluid-switch')) { - customElements.define('fluid-switch', FluidSwitch); - } - // create the fixture - document.body.innerHTML = - 'I am the switch label'; - fixture = document.querySelector('fluid-switch')!; - - // Add spied eventListeners - changeSpy = jest.fn(); - fixture.addEventListener('change', changeSpy); - }); - - afterEach(() => { - jest.restoreAllMocks(); - }); - - it('should create the switch', async () => { - expect(fixture).not.toBe(null); - }); - - describe('checked attribute', () => { - it('should set the state to checked when the attribute is set to true', async () => { - fixture.setAttribute('checked', ''); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(switchIsOn()).toBeTruthy(); - }); - - it('should set the state to checked when the property is set to true', async () => { - fixture.checked = true; - await tick(); - expect(fixture.hasAttribute('checked')).toBeTruthy(); - expect(switchIsOn()).toBeTruthy(); - }); - - it('should set the state to unchecked when the property is set to false', async () => { - fixture.checked = false; - await tick(); - expect(fixture.hasAttribute('checked')).toBeFalsy(); - expect(switchIsOn()).toBeFalsy(); - }); - - it('should not be checked after the attribute was added and removed', async () => { - fixture.setAttribute('checked', ''); - await tick(); - fixture.removeAttribute('checked'); - await tick(); - expect(fixture.checked).toBeFalsy(); - expect(switchIsOn()).toBeFalsy(); - }); - - it('should change the checked state if the label is clicked', async () => { - const label = fixture.shadowRoot?.querySelector('label'); - label?.click(); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(switchIsOn()).toBeTruthy(); - }); - - it('should unset change the checked state if the label is clicked twice', async () => { - const label = fixture.shadowRoot?.querySelector('label'); - label?.click(); - await tick(); - label?.click(); - await tick(); - expect(fixture.checked).toBeFalsy(); - expect(switchIsOn()).toBeFalsy(); - }); - - it('should change the checked state when triggered by keyboard', async () => { - const checkbox = fixture.shadowRoot?.querySelector('svg'); - dispatchKeyboardEvent(checkbox!, 'keyup', SPACE); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(switchIsOn()).toBeTruthy(); - }); - }); - - describe('aria-checked attribute', () => { - it('should have aria-checked set to false by default', () => { - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('false'); - }); - - it('should have aria-checked set to false when the switch is not checked', async () => { - fixture.checked = false; - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('false'); - }); - - it('should have aria-checked set to true when the switch is checked', async () => { - fixture.checked = true; - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('true'); - }); - - it('should have aria-checked set to true when the switch is clicked', async () => { - const label = fixture.shadowRoot?.querySelector('label'); - label?.click(); - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('true'); - }); - it('should have aria-checked set to true when the switch is focused and space is pressed', async () => { - const checkbox = fixture.shadowRoot?.querySelector('svg'); - dispatchKeyboardEvent(checkbox!, 'keyup', SPACE); - await tick(); - expect(fixture.hasAttribute('aria-checked')).toBeTruthy(); - expect(fixture.getAttribute('aria-checked')).toBe('true'); - }); - }); - - describe('disabled attribute', () => { - it('should set the disabled state when the attribute is present', async () => { - fixture.setAttribute('disabled', ''); - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input')!; - expect(shadowedInput.hasAttribute('disabled')).toBeTruthy(); - }); - - it('should set the disabled state when the attribute is set', async () => { - fixture.setAttribute('disabled', 'disabled'); - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input')!; - expect(shadowedInput.hasAttribute('disabled')).toBeTruthy(); - }); - - it('should set the disabled state when the property is set', async () => { - fixture.disabled = true; - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input')!; - expect(shadowedInput.hasAttribute('disabled')).toBeTruthy(); - }); - - it('should reset the disabled state when the attribute is removed', async () => { - fixture.setAttribute('disabled', ''); - await tick(); - fixture.removeAttribute('disabled'); - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input')!; - expect(shadowedInput.hasAttribute('disabled')).toBeFalsy(); - }); - - it('should reflect the disabled attribute to the host', async () => { - fixture.disabled = true; - await tick(); - expect(fixture.hasAttribute('disabled')).toBeTruthy(); - }); - }); - - describe('value', () => { - it('should have the correct default set', async () => { - const shadowedInput = fixture.shadowRoot?.querySelector('input'); - expect(shadowedInput?.getAttribute('value')).toBe('on'); - }); - - it('should set the value to customvalue when the property is set', async () => { - fixture.value = 'customvalue'; - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input'); - expect(shadowedInput?.getAttribute('value')).toBe('customvalue'); - }); - - it('should set the value to customvalue when the attribute is set', async () => { - fixture.setAttribute('value', 'customvalue'); - await tick(); - const shadowedInput = fixture.shadowRoot?.querySelector('input'); - expect(shadowedInput?.getAttribute('value')).toBe('customvalue'); - }); - }); - - describe('tabindex', () => { - it('should have a tabindex on the triggerable element when enabled', () => { - const checkbox = fixture.shadowRoot?.querySelector('svg'); - expect(checkbox?.hasAttribute('tabindex')).toBeTruthy(); - expect(checkbox?.getAttribute('tabindex')).toBe('0'); - }); - - it('should have a tabindex of -1 on the triggerable element when disabled', async () => { - fixture.disabled = true; - await tick(); - const checkbox = fixture.shadowRoot?.querySelector('svg'); - expect(checkbox?.hasAttribute('tabindex')).toBeTruthy(); - expect(checkbox?.getAttribute('tabindex')).toBe('-1'); - }); - }); - - describe('toggle method', () => { - it('should toggle the switch on when called on an unchecked element', async () => { - fixture.toggle(); - await tick(); - expect(fixture.checked).toBeTruthy(); - expect(switchIsOn()).toBeTruthy(); - }); - - it('should toggle the switch on when called on a checked element', async () => { - fixture.checked = true; - await tick(); - fixture.toggle(); - await tick(); - expect(fixture.checked).toBeFalsy(); - expect(switchIsOn()).toBeFalsy(); - }); - }); - - describe('change event', () => { - it('should emit the change event when the switch is toggled via click', async () => { - const label = fixture.shadowRoot?.querySelector('label'); - label?.click(); - await tick(); - expect(changeSpy).toHaveBeenCalledTimes(1); - }); - - it('should emit the change event when the checkbox is clicked', async () => { - const checkbox = fixture.shadowRoot?.querySelector('input'); - checkbox!.click(); - await tick(); - expect(changeSpy).toHaveBeenCalledTimes(1); - }); - - it('should emit the change event when the switch is toggled via click', async () => { - const checkbox = fixture.shadowRoot?.querySelector('svg'); - dispatchKeyboardEvent(checkbox!, 'keyup', SPACE); - await tick(); - expect(changeSpy).toHaveBeenCalledTimes(1); - }); - }); -}); diff --git a/libs/fluid-elements/switch/src/lib/switch.ts b/libs/fluid-elements/switch/src/lib/switch.ts deleted file mode 100644 index 0bd8e170bb..0000000000 --- a/libs/fluid-elements/switch/src/lib/switch.ts +++ /dev/null @@ -1,344 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - LitElement, - TemplateResult, - html, - property, - CSSResult, - css, - unsafeCSS, - PropertyValues, -} from 'lit-element'; -import { classMap } from 'lit-html/directives/class-map'; -import { FluidSwitchChangeEvent } from './switch-events'; -import { SPACE } from '@dynatrace/shared/keycodes'; - -import { - FLUID_SPACING_3X_SMALL, - fluidDtText, -} from '@dynatrace/fluid-design-tokens'; - -let uniqueCounter = 0; - -/** - * A basic representation of the switch input - * @element fluid-switch - * @slot - Default slot lets the user provide a label for the switch. - * @fires change - Event that is being fired when the switch state changes due - * to user interaction. - * @cssprop --fluid-switch--label-color - Customize the label color. - * @cssprop --fluid-switch--fill - Customize the switch fill color. - * @cssprop --fluid-switch--container - Customize the container color. - * @cssprop --fluid-switch--container-fill-checked - Customize the fill color when - * the switch is in the checked state. - * @cssprop --fluid-switch--knob-checked - Customize the knob color when - * the switch is in the checked state. - * @cssprop --fluid-switch--knob - Customize the knob color. - * @cssprop --fluid-switch--focus - Customize the focus color. - */ -export class FluidSwitch extends LitElement { - /** - * Unique identifier used for the id and label connection - * within the switch. - */ - private _unique = `fluid-switch-${uniqueCounter++}`; - - /** Reference to the native input within the shadowed template. */ - private _inputElement: HTMLInputElement; - - /** Styles for the button component */ - static get styles(): CSSResult { - return css` - :host { - /** - * Legibility definitions should probably be - * shipped or imported from a core - */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - --fluid-switch--label-color: var(--color-neutral-150); - --fluid-switch--fill: var(--color-background); - --fluid-switch--container: var(--color-maxcontrast); - --fluid-switch--container-fill-checked: var(--color-primary-100); - --fluid-switch--knob-checked: var(--color-background); - --fluid-switch--knob: var(--color-maxcontrast); - --fluid-switch--focus: var(--color-maxcontrast); - } - :host([disabled]) { - pointer-events: none; - } - :host([disabled]) .fluid-switch > * { - opacity: 0.5; - } - .fluid-switch { - display: flex; - position: relative; - } - :host([disabled]) .fluid-switch-input, /* Switch should be hidden in the disabled state as well. */ - .fluid-switch-input { - position: absolute; - width: 35px; - height: 20px; - top: 7px; - left: 6px; - opacity: 0; - cursor: pointer; - } - .fluid-switch-input:hover ~ .fluid-switch-label .fluid-switch-glow { - opacity: 0.1; - } - .fluid-svg-switch:active { - outline: none; /* This is needed to prevent the outline around the switch on click. */ - } - .fluid-svg-switch.checked .fluid-switch-knob { - transform: translateX(16px); - transition: transform 0.3s; - } - .fluid-svg-switch.checked .fluid-switch-fill { - fill: var(--fluid-switch--container-fill-checked); - } - .fluid-svg-switch.checked .fluid-switch-knob { - fill: var(--fluid-switch--knob-checked); - } - .fluid-svg-switch.checked .fluid-switch-container { - stroke: var(--fluid-switch--container-fill-checked); - } - .fluid-svg-switch.checked:hover .fluid-switch-glow { - opacity: 0.1; - } - .fluid-svg-switch.checked .fluid-switch-glow { - transition: transform 0.3s; - transform: translateX(16px); - } - .fluid-svg-switch { - cursor: pointer; - } - .fluid-svg-switch .fluid-switch-knob { - transition: transform 0.3s; - } - .fluid-svg-switch .fluid-switch-fill { - fill: var(--fluid-switch--fill); - } - .fluid-svg-switch .fluid-switch-knob { - fill: var(--fluid-switch--knob); - } - .fluid-svg-switch .fluid-switch-container { - stroke: var(--fluid-switch--container); - } - .fluid-svg-switch:hover .fluid-switch-glow { - opacity: 0.1; - } - .fluid-switch-glow { - opacity: 0; - fill: var(--fluid-switch--focus); - } - .fluid-svg-switch .fluid-switch-glow { - transition: transform 0.3s; - } - .fluid-label { - ${unsafeCSS(fluidDtText())}; - display: inline-flex; - margin-left: ${unsafeCSS(FLUID_SPACING_3X_SMALL)}; - color: var(--fluid-switch--label-color); - } - .fluid-switch-label:hover .fluid-switch-glow { - opacity: 0.1; - } - - label { - cursor: pointer; - display: inline-flex; - align-items: center; - } - label:hover .fluid-knob--hover { - opacity: 0.1; - transform: scale(1); - } - `; - } - - /** Whether the switch is disabled or not */ - @property({ type: Boolean, reflect: true }) - disabled = false; - - /** The value attribute of the native input element */ - @property({ type: String, reflect: true }) - // Default string for the value is 'on' from MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox#Additional_attributes) - value = 'on'; - - /** Whether the switch is considered `on` or `off`. */ - @property({ type: Boolean, reflect: true }) - set checked(value: boolean) { - const oldValue = this.checked; - this._checked = value; - this.requestUpdate('checked', oldValue); - } - get checked(): boolean { - return this._checked; - } - private _checked = false; - - /** - * Role of the switch. - * @private - An internal prop that should not appear in the readme and should - * not be set by the outside. - */ - @property({ - type: String, - reflect: true, - }) - role: string = 'switch'; - - /** - * Aria-checked attribute of the switch. - * @private - An internal prop that should not appear in the readme and should - * not be set by the outside. - */ - @property({ - type: String, - reflect: true, - attribute: 'aria-checked', - }) - ariaChecked: string = 'false'; - - /** First updated lifecycle */ - firstUpdated(props: PropertyValues): void { - super.firstUpdated(props); - this._inputElement = this.shadowRoot?.querySelector('input')!; - } - - /** Update lifecycle */ - update(props: PropertyValues): void { - // Aria-checked depends on the value of checked, but is never actually - // set by the litElement reactivity. In the updated lifeCycle - // we need to manually update the ariaChecked attribute here. - if (props.has('checked')) { - this.ariaChecked = this.checked.toString(); - } - // Changing the aria-checked or any observed property in the update, will - // add it to the updated properties. When calling super first in, the change - // of properties in the update call will trigger an update, as the properties - // will have changed after the super.update() call. To prevent an additional - // cycle, we make the modifications before calling the super lifecycle - super.update(props); - } - - /** - * Render function. - */ - render(): TemplateResult { - const svgClassMapData = { - checked: this.checked, - 'fluid-svg-switch': true, - }; - - return html`
- - -
`; - } - - /** - * Dispatches a change event for the checkbox - */ - private _dispatchChangeEvent(): void { - this.dispatchEvent(new FluidSwitchChangeEvent(this.checked)); - } - - /** - * Handles the change of the native checkbox element and routes the - * event out. - */ - private _handleInputChange(event: Event): void { - this.checked = (event.target as HTMLInputElement).checked; - this._dispatchChangeEvent(); - } - - /** - * Handling the key down event on the svg. - * @param event - */ - private _handleKeyDown(event: KeyboardEvent): void { - if (event.code === SPACE) { - event.preventDefault(); - } - } - - /** - * Handling the key up event on the svg. - */ - private _handleKeyUp(event: KeyboardEvent): void { - if (event.code === SPACE) { - this._inputElement.click(); - } - } - - /** Toggle the checked state */ - toggle(): void { - this.checked = !this.checked; - } -} - -if (!customElements.get('fluid-switch')) { - customElements.define('fluid-switch', FluidSwitch); -} diff --git a/libs/fluid-elements/switch/tsconfig.json b/libs/fluid-elements/switch/tsconfig.json deleted file mode 100644 index da7cd737a1..0000000000 --- a/libs/fluid-elements/switch/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "types": ["jest"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/switch/tsconfig.lib.json b/libs/fluid-elements/switch/tsconfig.lib.json deleted file mode 100644 index ea54e13d02..0000000000 --- a/libs/fluid-elements/switch/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "include": ["**/*.ts"], - "exclude": ["**/*.spec.ts"] -} diff --git a/libs/fluid-elements/switch/tsconfig.spec.json b/libs/fluid-elements/switch/tsconfig.spec.json deleted file mode 100644 index cc2764398d..0000000000 --- a/libs/fluid-elements/switch/tsconfig.spec.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "CommonJS", - "allowJs": true, - "types": ["jest", "node"], - "target": "es2015", - "lib": ["dom", "es2018"] - }, - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/libs/fluid-elements/switch/tslint.json b/libs/fluid-elements/switch/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/switch/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/fluid-elements/tab-group/.stylelintrc b/libs/fluid-elements/tab-group/.stylelintrc deleted file mode 100644 index 25e6a3549a..0000000000 --- a/libs/fluid-elements/tab-group/.stylelintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../../../../.stylelintrc", - "rules": { - "no-missing-end-of-source-newline": false - } -} diff --git a/libs/fluid-elements/tab-group/BUILD.bazel b/libs/fluid-elements/tab-group/BUILD.bazel deleted file mode 100644 index df0d25e509..0000000000 --- a/libs/fluid-elements/tab-group/BUILD.bazel +++ /dev/null @@ -1,10 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "stylelint") - -package(default_visibility = ["//:__subpackages__"]) - -stylelint( - name = "stylelint", - srcs = glob(["**/*.scss"]), - config = ":.stylelintrc", - allow_empty_input = True, -) diff --git a/libs/fluid-elements/tab-group/README.md b/libs/fluid-elements/tab-group/README.md deleted file mode 100644 index 1c25d15919..0000000000 --- a/libs/fluid-elements/tab-group/README.md +++ /dev/null @@ -1,36 +0,0 @@ -# fluid-tab - -This is a experimental version of the tab component. It registers itself as -`fluid-tab` custom element. - -## Properties - -| Property | Attribute | Type | Default | Description | -| ---------- | ---------- | --------- | -------------------------- | -------------------------------------------- | -| `active` | `active` | `boolean` | | Defines whether a tab is active or not | -| `disabled` | `disabled` | `boolean` | | Defines whether a tab is disabled or not | -| `tabid` | `tabid` | `string` | "`fluid-tab-${_unique++}`" | Defines the tab element with an id attribute | -| `tabindex` | `tabindex` | `number` | | Defines the tabindex attribute | - -## Slots - -| Name | Description | -| ---- | -------------------------------------------- | -| | Default slot to provide a label for the tab. | - -# fluid-tag-group - -This is a experimental version of the tab group component. It registers itself -as `fluid-tab-group` custom element. - -## Properties - -| Property | Attribute | Type | Description | -| ------------- | ------------- | -------- | -------------------------- | -| `activetabid` | `activetabid` | `string` | Defines a tab to be active | - -## Slots - -| Name | Description | -| ---- | --------------------------------------------------------- | -| | Default slot lets the user provide a group of fluid-tabs. | diff --git a/libs/fluid-elements/tab-group/jest.config.js b/libs/fluid-elements/tab-group/jest.config.js deleted file mode 100644 index 9994724a2f..0000000000 --- a/libs/fluid-elements/tab-group/jest.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - name: 'fluid-checkbox', - preset: '../jest.config.js', - coverageDirectory: '../../../coverage/libs/fluid-elements/checkbox', - globals: { 'ts-jest': { tsConfig: '/tsconfig.spec.json' } }, -}; diff --git a/libs/fluid-elements/tab-group/package.json b/libs/fluid-elements/tab-group/package.json deleted file mode 100644 index f443413396..0000000000 --- a/libs/fluid-elements/tab-group/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@dynatrace/fluid-tab-group", - "description": "Dynatrace tab group element based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": {} -} diff --git a/libs/fluid-elements/tab-group/src/index.ts b/libs/fluid-elements/tab-group/src/index.ts deleted file mode 100644 index 993bb6d797..0000000000 --- a/libs/fluid-elements/tab-group/src/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/tab-group/tab-group'; -export * from './lib/tab/tab'; -export * from './lib/tab-events'; diff --git a/libs/fluid-elements/tab-group/src/lib/tab-events.ts b/libs/fluid-elements/tab-group/src/lib/tab-events.ts deleted file mode 100644 index a76ff70669..0000000000 --- a/libs/fluid-elements/tab-group/src/lib/tab-events.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** Custom event implementation fires when the active tab has changes */ -export class FluidTabGroupActiveTabChanged extends CustomEvent { - constructor(public activeTabId: string) { - super('activeTabChanged', { bubbles: true, composed: true }); - } -} - -/** Custom event implementation that fires when a tab is clicked providing the active tab id */ -export class FluidTabActivatedEvent extends CustomEvent { - constructor(public activeTabId: string) { - super('tabActivated', { bubbles: true, composed: true }); - } -} - -/** Custom event implementation that fires when the active attribute was set */ -export class FluidTabActiveSetEvent extends CustomEvent { - constructor(public tabId: string) { - super('activeSet', { bubbles: true, composed: true }); - } -} - -/** Custom event implementation that fires when a tab is disabled providing the disabled tab id */ -export class FluidTabDisabledEvent extends CustomEvent { - constructor(public tabId: string) { - super('disabled', { bubbles: true, composed: true }); - } -} - -/** Custom event implementation that fires when a tab is blurred */ -export class FluidTabBlurredEvent extends CustomEvent { - constructor(public tabId: string) { - super('blur', { bubbles: true, composed: true }); - } -} diff --git a/libs/fluid-elements/tab-group/src/lib/tab-group/tab-group.spec.ts b/libs/fluid-elements/tab-group/src/lib/tab-group/tab-group.spec.ts deleted file mode 100644 index ed5d4b5ea6..0000000000 --- a/libs/fluid-elements/tab-group/src/lib/tab-group/tab-group.spec.ts +++ /dev/null @@ -1,314 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidTabGroup } from './tab-group'; -import { - dispatchKeyboardEvent, - dispatchFakeEvent, -} from '@dynatrace/testing/browser'; -import { ARROW_RIGHT, SPACE } from '@dynatrace/shared/keycodes'; -import { FluidTab } from '../tab/tab'; - -function tick(): Promise { - return Promise.resolve(); -} - -describe('Fluid tab group', () => { - let fixture: FluidTabGroup; - let activeTabChangedSpy: jest.Mock; - let activeSetSpy: jest.Mock; - let keyupSpy: jest.Mock; - let blurSpy: jest.Mock; - - /** Get the first tab in the fluid-tab-group */ - function getFirstSpanElementFromFluidTab(): HTMLSpanElement { - return fixture - .querySelector('fluid-tab') - ?.shadowRoot?.querySelector('span')!; - } - - /** Get the last tab in the fluid-tab-group */ - function getLastSpanElementFromFluidTab(): HTMLSpanElement { - return fixture - .querySelector('fluid-tab:last-child') - ?.shadowRoot?.querySelector('span')!; - } - - beforeEach(() => { - // Register the element, if it is not yet registered - if (!customElements.get('fluid-tab')) { - customElements.define('fluid-tab', FluidTab); - } - if (!customElements.get('fluid-tab-group')) { - customElements.define('fluid-tab-group', FluidTabGroup); - } - // create the fixture - document.body.innerHTML = ` - - - Section 1 - - - Section 2 - - - `; - fixture = document.querySelector('fluid-tab-group')!; - - // Add spied eventListeners - activeTabChangedSpy = jest.fn(); - fixture.addEventListener('activeTabChanged', activeTabChangedSpy); - - activeSetSpy = jest.fn(); - fixture.addEventListener('activeSet', activeSetSpy); - - keyupSpy = jest.fn(); - fixture.addEventListener('keyup', keyupSpy); - - blurSpy = jest.fn(); - fixture.addEventListener('blur', blurSpy); - }); - - afterEach(() => { - jest.restoreAllMocks(); - }); - - it('should create the tabs', () => { - expect(fixture).not.toBe(null); - }); - - describe('activetabid attribute', () => { - it('should set the initial active tab', () => { - expect(fixture.getAttribute('activetabid')).toBe('section1'); // Passes on its own - }); - - it('should set active tab when property is set', async () => { - fixture.activetabid = 'section2'; - await tick(); - expect(fixture.getAttribute('activetabid')).toBe('section2'); - }); - - it('should set last activetabid attribute when a tab is clicked', async () => { - const tab = fixture - .querySelector('fluid-tab:last-child') - ?.shadowRoot?.querySelector('span'); - tab?.click(); - await tick(); - expect(fixture.getAttribute('activetabid')).toBe('section2'); - }); - - it('should set last activetabid attribute when using key events', async () => { - const tab = fixture.querySelector('fluid-tab'); - tab?.focus(); - await tick(); - expect(fixture.getAttribute('activetabid')).toBe('section1'); - dispatchKeyboardEvent(tab!, 'keyup', ARROW_RIGHT); - await tick(); - expect(keyupSpy).toBeCalledTimes(1); - dispatchKeyboardEvent(document.activeElement!, 'keyup', SPACE); - await tick(); - expect(activeTabChangedSpy).toHaveBeenCalledTimes(1); - expect(fixture.getAttribute('activetabid')).toBe('section2'); - }); - - it('should represent the correct activetabid if the tab itself is set to active', async () => { - await tick(); - const tab = fixture.querySelector('fluid-tab:last-child'); - tab!.active = true; - - await tick(); - expect(tab?.active).toBeTruthy(); - expect(fixture.getAttribute('activetabid')).toBe('section2'); - dispatchKeyboardEvent(tab!, 'keyup', ARROW_RIGHT); - await tick(); - expect(keyupSpy).toBeCalledTimes(1); - dispatchKeyboardEvent(document.activeElement!, 'keyup', SPACE); - await tick(); - expect(activeTabChangedSpy).toHaveBeenCalledTimes(1); - expect(fixture.getAttribute('activetabid')).toBe('section1'); - }); - }); - - describe('tabindex attribute', () => { - it('should set tabindex to 0 when tab is clicked', async () => { - const tab = getFirstSpanElementFromFluidTab(); - tab?.click(); - await tick(); - fixture.querySelector('fluid-tab:last-child')!.click(); - getLastSpanElementFromFluidTab().click(); - await tick(); - expect(getFirstSpanElementFromFluidTab().getAttribute('tabindex')).toBe( - '-1', - ); - expect(getLastSpanElementFromFluidTab().getAttribute('tabindex')).toBe( - '0', - ); - }); - - it('should set tabindex to 0 when tab is selected using keys', async () => { - const tab = fixture.querySelector('fluid-tab'); - tab?.focus(); - await tick(); - dispatchKeyboardEvent(tab!, 'keyup', ARROW_RIGHT); - await tick(); - dispatchKeyboardEvent(document.activeElement!, 'keyup', SPACE); - await tick(); - expect(getFirstSpanElementFromFluidTab().getAttribute('tabindex')).toBe( - '-1', - ); - expect(getLastSpanElementFromFluidTab().getAttribute('tabindex')).toBe( - '0', - ); - }); - - it('should set tabindex to -1 when tab is disabled', async () => { - fixture - .querySelector('fluid-tab') - ?.setAttribute('disabled', 'true'); - await tick(); - expect(getFirstSpanElementFromFluidTab().getAttribute('tabindex')).toBe( - '-1', - ); - }); - }); - - describe('activeTabChanged event', () => { - it('should fire an event when a tab is clicked', async () => { - const tab = getLastSpanElementFromFluidTab(); - tab?.click(); - await tick(); - expect(activeSetSpy).toBeCalledTimes(3); - }); - - it('should fire an event when using the key events', async () => { - const tab = fixture.querySelector('fluid-tab'); - tab?.focus(); - dispatchKeyboardEvent(tab!, 'keyup', ARROW_RIGHT); - await tick(); - dispatchKeyboardEvent(document.activeElement!, 'keyup', SPACE); - expect(activeTabChangedSpy).toBeCalledTimes(1); - }); - }); - - describe('active tab behaviour', () => { - it('should override the tab-groups activetabid attribute if the tab istelf is set to active', async () => { - document.body.innerHTML = ` - - - Section 1 - - - Section 2 - - - `; - - fixture = document.querySelector('fluid-tab-group')!; - await tick(); - expect( - getFirstSpanElementFromFluidTab().classList.contains( - 'fluid-state--active', - ), - ).toBeTruthy(); - }); - - it('should set a available tab active after removing the currently active tab', async () => { - document.body.innerHTML = ` - - - Section 1 - - - Section 2 - - - Section 3 - - - `; - // Ticking twice otherwise the dom isn't updated. - await tick(); - await tick(); - fixture = document.querySelector('fluid-tab-group')!; - await tick(); - expect(fixture.getAttribute('activetabid')).toBe('section1'); - - document.body.innerHTML = ` - - - Section 2 - - - Section 3 - - - `; - // Ticking twice otherwise the dom isn't updated. - await tick(); - await tick(); - fixture = document.querySelector('fluid-tab-group')!; - await tick(); - expect(fixture.getAttribute('activetabid')).toBe('section2'); - }); - - it('should set the active tab correctly after removing all tabs', async () => { - expect(fixture.getAttribute('activetabid')).toBe('section1'); - document.body.innerHTML = ` - - - `; - // Ticking twice otherwise the dom isn't updated. - await tick(); - await tick(); - fixture = document.querySelector('fluid-tab-group')!; - await tick(); - expect(fixture.getAttribute('activetabid')).toBe(null); - }); - - it('should set the active tab correctly after removing all tabs after interaction', async () => { - getLastSpanElementFromFluidTab()?.click(); - await tick(); - expect(fixture.getAttribute('activetabid')).toBe('section2'); - document.body.innerHTML = ` - - - `; - // Ticking twice otherwise the dom isn't updated. - await tick(); - await tick(); - fixture = document.querySelector('fluid-tab-group')!; - await tick(); - expect(fixture.getAttribute('activetabid')).toBe(null); - }); - }); - - describe('blur Event', () => { - it('should fire event when a tab is blurred', async () => { - const tab = fixture.querySelector('fluid-tab'); - tab?.focus(); - await tick(); - dispatchKeyboardEvent(tab!, 'keyup', ARROW_RIGHT); - await tick(); - dispatchFakeEvent(getLastSpanElementFromFluidTab(), 'blur'); - await tick(); - expect(blurSpy).toHaveBeenCalledTimes(1); - expect( - fixture.querySelector('fluid-tab:last-child')?.tabindex, - ).toBe(-1); - expect(fixture.querySelector('fluid-tab')?.tabindex).toBe(0); - }); - }); -}); diff --git a/libs/fluid-elements/tab-group/src/lib/tab-group/tab-group.ts b/libs/fluid-elements/tab-group/src/lib/tab-group/tab-group.ts deleted file mode 100644 index 1c154073d8..0000000000 --- a/libs/fluid-elements/tab-group/src/lib/tab-group/tab-group.ts +++ /dev/null @@ -1,274 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - LitElement, - CSSResult, - TemplateResult, - html, - property, - css, - unsafeCSS, - customElement, -} from 'lit-element'; - -import { FluidTab } from '../tab/tab'; -import { - FluidTabDisabledEvent, - FluidTabBlurredEvent, - FluidTabActiveSetEvent, - FluidTabGroupActiveTabChanged, - FluidTabActivatedEvent, -} from '../tab-events'; -import { - ENTER, - SPACE, - ARROW_RIGHT, - ARROW_LEFT, - TAB, -} from '@dynatrace/shared/keycodes'; - -import { - FLUID_SPACING_SMALL, - FLUID_SPACING_0, - FLUID_SPACING_MEDIUM, -} from '@dynatrace/fluid-design-tokens'; -import { getNextGroupItemIndex } from '@dynatrace/fluid-elements/core'; - -/** - * This is a experimental version of the tab group component - * It registers itself as `fluid-tab-group` custom element. - * @element fluid-tab-group - * @slot - Default slot lets the user provide a group of fluid-tabs. - */ -@customElement('fluid-tab-group') -export class FluidTabGroup extends LitElement { - /** Array of referrences to the fluid-tabs */ - private tabChildren: FluidTab[]; - - /** Styles for the tab list component */ - static get styles(): CSSResult { - return css` - :host { - /** - * Legibility definitions should probably be - * shipped or imported from a core - */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - } - - .fluid-tab-group { - margin-block-start: ${unsafeCSS(FLUID_SPACING_SMALL)}; - margin-block-end: ${unsafeCSS(FLUID_SPACING_SMALL)}; - margin-inline-start: ${unsafeCSS(FLUID_SPACING_0)}; - margin-inline-end: ${unsafeCSS(FLUID_SPACING_0)}; - padding-inline-start: ${unsafeCSS(FLUID_SPACING_MEDIUM)}; - } - `; - } - - /** - * Defines the currently active tabid - * @attr - * @type string - */ - @property({ type: String, reflect: true }) - activetabid: string; - - /** Sets the activeTabId. Handles programatically calling the active setter on the fluid-tab */ - private _setActiveTabId(activeSetEvent: FluidTabActiveSetEvent): void { - this.activetabid = activeSetEvent.tabId; - for (const tab of this.tabChildren) { - if (tab.tabid !== this.activetabid) { - tab.active = false; - } - } - } - - /** Sets the active tab on click */ - private _handleClick(event: FluidTabActivatedEvent): void { - const toActivateTab = this.tabChildren.find( - (tabItem) => tabItem.tabid === event.activeTabId, - ); - - if (toActivateTab) { - // Resets all tabs - const toResetTab = this.tabChildren.find((tab) => tab.active); - if (toResetTab) { - toResetTab.tabindex = -1; - toResetTab.active = false; - toResetTab.tabbed = false; - } - this.activetabid = event.activeTabId; - - toActivateTab.active = true; - toActivateTab.tabindex = 0; - this.dispatchEvent(new FluidTabGroupActiveTabChanged(event.activeTabId)); - } - } - - /** Sets the active tab on keydown (ArrowLeft and ArrowRight to select / Enter and Space to confirm) */ - private _handleKeyUp(event: KeyboardEvent): void { - // Sets the focus outline when user tabbed into the tab group - if (event.code === TAB) { - const focusableTab = this.tabChildren.find((tab) => tab.tabindex === 0); - - if (focusableTab) { - focusableTab.tabbed = true; - } - } - - // Selection control. Selects the tab that was focused using tab/arrowkeys - if (event.code === ENTER || event.code === SPACE) { - const toBeActivatedTab = this.tabChildren.find( - (tab) => tab.tabindex === 0, - ); - - if (toBeActivatedTab) { - const toDeactivateTab = this.tabChildren.find((tab) => tab.active); - if (toDeactivateTab) { - toDeactivateTab.active = false; - } - - toBeActivatedTab.active = true; - this.activetabid = toBeActivatedTab.tabid; - this.dispatchEvent(new FluidTabGroupActiveTabChanged(this.activetabid)); - } - } - // Arrow control (navigate tabs) - if (event.code === ARROW_RIGHT || event.code === ARROW_LEFT) { - let index = this.tabChildren.findIndex( - (tab: FluidTab) => tab.tabindex === 0, - ); - const oldIndex = index; - index = getNextGroupItemIndex(index, this.tabChildren.length, event.code); - - this.tabChildren[index].tabbed = true; - this.tabChildren[oldIndex].tabbed = false; - this.tabChildren[index].focus(); - } - } - - /** Event handler for key down events handling 'tab' key aswell. Prevention of default scroll behavior on the SPACE key */ - private _handleKeyDown(event: KeyboardEvent): void { - if (event.code === SPACE) { - event.preventDefault(); - } - } - - /** Checks whether the next tab is also disabled or not and sets the next available tab as active */ - private _handleDisabled(disableTabEvent: FluidTabDisabledEvent): void { - if (this.activetabid === disableTabEvent.tabId) { - this.setFirstEnabledTabActive(); - } - } - - /** Resets the tabindex if the user lost focus without activating the activated tab */ - private _handleBlur(event: FluidTabBlurredEvent): void { - // Sets the selected but not activated tabs tabindex to -1 - const toDisableTabIndexTab = this.tabChildren.find( - (tab) => tab.tabid === event.tabId, - ); - if (toDisableTabIndexTab) { - toDisableTabIndexTab.tabindex = -1; - } - // Sets the active tabs tabindex to 0 - const toEnableTabIndexTab = this.tabChildren.find((tab) => tab.active); - if (toEnableTabIndexTab) { - toEnableTabIndexTab.tabindex = 0; - } - } - - /** Handles changes in the slot. Initially sets the active item (default is first) */ - private _slotchange(): void { - this.tabChildren = Array.from(this.querySelectorAll('fluid-tab')); - // Set all tabindexes to -1 because the default is 0 - for (const tab of this.tabChildren) { - tab.tabindex = -1; - } - this.checkForMutipleActiveTabs(); - // Set a tab to active - const activeTab = this.tabChildren.find((tab) => tab.active); - if (activeTab) { - activeTab.tabindex = 0; - this.activetabid = activeTab.tabid; - } else { - this.setFirstEnabledTabActive(); - } - } - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - return html` -
- -
- `; - } - - /** Sets an available tab to active. (Not disabled) */ - setFirstEnabledTabActive(): void { - let tabToEnable; - if (this.activetabid) { - tabToEnable = this.tabChildren.find( - (tab) => tab.tabid === this.activetabid, - ); - } else { - tabToEnable = this.tabChildren.find((tab) => !tab.disabled); - } - if (tabToEnable) { - tabToEnable.active = true; - this.activetabid = tabToEnable.tabid; - } - } - - /** Checks whether multiple tabs are active. If so every other tab but the first active tab will be deactivated */ - checkForMutipleActiveTabs(): void { - if (this.tabChildren.length > 0) { - const tabs = this.tabChildren.filter((tab) => { - if (tab.active) { - return tab; - } - }); - - if (tabs.length > 1) { - const activeTab = tabs[0]; - for (const tab of this.tabChildren) { - tab.active = false; - } - const tabToBeActive = this.tabChildren.find( - (tab) => tab.tabid === activeTab?.tabid, - ); - if (tabToBeActive) { - tabToBeActive.active = true; - } - } - } - } -} diff --git a/libs/fluid-elements/tab-group/src/lib/tab/tab.spec.ts b/libs/fluid-elements/tab-group/src/lib/tab/tab.spec.ts deleted file mode 100644 index df17c89a60..0000000000 --- a/libs/fluid-elements/tab-group/src/lib/tab/tab.spec.ts +++ /dev/null @@ -1,184 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidTab } from './tab'; - -function tick(): Promise { - return Promise.resolve(); -} - -function getTabRootElement( - fixture: FluidTab, -): HTMLSpanElement | null | undefined { - return fixture.shadowRoot?.querySelector('span'); -} - -describe('Fluid tab', () => { - let fixture: FluidTab; - let tabActivatedSpy: jest.Mock; - - /** Checks if the current fixture has an active tab */ - function isActive(): boolean { - return ( - fixture.shadowRoot?.querySelector('fluid-state--active') !== undefined - ); - } - - beforeEach(() => { - // Register the element, if it is not yet registed - if (!customElements.get('fluid-tab')) { - customElements.define('fluid-tab', FluidTab); - } - // create the fixture - document.body.innerHTML = ` - - Section - - `; - - // Add spied eventListeners - fixture = document.querySelector('fluid-tab')!; - - tabActivatedSpy = jest.fn(); - fixture.addEventListener('activeSet', tabActivatedSpy); - }); - - afterEach(() => { - jest.restoreAllMocks(); - }); - - it('should create the tabs', async () => { - expect(fixture).not.toBe(null); - }); - - describe('active attribute', () => { - it('should set the state to active when the attribute is set to true', async () => { - fixture.setAttribute('active', ''); - await tick(); - expect(fixture.active).toBeTruthy(); - expect(isActive()).toBeTruthy(); - }); - - it('should set the state to active when the property is set to true', async () => { - fixture.active = true; - await tick(); - expect(fixture.active).toBeTruthy(); - expect(isActive()).toBeTruthy(); - }); - - it('should remove active when the attribute is removed', async () => { - fixture.setAttribute('active', 'true'); - await tick(); - fixture.removeAttribute('active'); - await tick(); - expect(fixture.active).toBeFalsy(); - }); - - it('should remove active when the property is set to false', async () => { - fixture.active = true; - await tick(); - expect( - fixture.shadowRoot - ?.querySelector('span') - ?.classList.contains('fluid-state--active'), - ).toBeTruthy(); - fixture.active = false; - await tick(); - expect(fixture.getAttribute('active')).toBeFalsy(); - }); - }); - - describe('disabled attribute', () => { - // Should set the disabled state when the attribute is present - it('Should set the disabled state when the attribute is present', async () => { - fixture.setAttribute('disabled', ''); - await tick(); - const shadowLi = getTabRootElement(fixture)!; - expect(shadowLi.hasAttribute('disabled')).toBeTruthy(); - }); - - it('Should set the disabled state when the attribute is set', async () => { - fixture.setAttribute('disabled', 'true'); - await tick(); - const shadowLi = getTabRootElement(fixture)!; - expect(shadowLi.hasAttribute('disabled')).toBeTruthy(); - }); - - // Should set the disabled state when the property is set - it('Should set the disabled state when the property is set', async () => { - fixture.disabled = true; - await tick(); - const shadowLi = getTabRootElement(fixture)!; - expect(shadowLi.hasAttribute('disabled')).toBeTruthy(); - }); - - it('Should reset the disabled state when the attribute is removed', async () => { - fixture.removeAttribute('disabled'); - await tick(); - const shadowLi = getTabRootElement(fixture)!; - expect(shadowLi.hasAttribute('disabled')).toBeFalsy(); - }); - - // Should reflect the disabled state attribute to the host - it('Should reflect the disabled state attribute to the host', async () => { - fixture.disabled = true; - await tick(); - expect(fixture.hasAttribute('disabled')).toBeTruthy(); - }); - - it('should set active to false when disabled is true', async () => { - fixture.disabled = true; - await tick(); - expect(fixture.active).toBeFalsy(); - }); - - it('should set tabindex to -1 when disabled is true', async () => { - fixture.disabled = true; - await tick(); - expect(fixture.tabindex).toBe(-1); - }); - }); - - describe('aria-selected attribute', () => { - it('should have aria-selected set to false by default', () => { - expect(fixture.hasAttribute('aria-selected')).toBeTruthy(); - expect(fixture.getAttribute('aria-selected')).toBe('false'); - }); - - it('should have aria-selected set to false when the tab is not active', async () => { - fixture.active = false; - await tick(); - expect(fixture.hasAttribute('aria-selected')).toBeTruthy(); - expect(fixture.getAttribute('aria-selected')).toBe('false'); - }); - - it('should have aria-selected set to true when the tab is active', async () => { - fixture.active = true; - await tick(); - expect(fixture.hasAttribute('aria-selected')).toBeTruthy(); - expect(fixture.getAttribute('aria-selected')).toBe('true'); - }); - }); - - describe('tabactive event', () => { - it('should fire event when tab is clicked', async () => { - expect(tabActivatedSpy).toHaveBeenCalledTimes(0); - getTabRootElement(fixture)?.click(); - await tick(); - expect(tabActivatedSpy).toHaveBeenCalledTimes(2); - }); - }); -}); diff --git a/libs/fluid-elements/tab-group/src/lib/tab/tab.ts b/libs/fluid-elements/tab-group/src/lib/tab/tab.ts deleted file mode 100644 index 3818cc1414..0000000000 --- a/libs/fluid-elements/tab-group/src/lib/tab/tab.ts +++ /dev/null @@ -1,304 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - LitElement, - CSSResult, - property, - TemplateResult, - html, - css, - unsafeCSS, - customElement, - PropertyValues, -} from 'lit-element'; -import { classMap } from 'lit-html/directives/class-map'; -import { - FluidTabDisabledEvent, - FluidTabBlurredEvent, - FluidTabActiveSetEvent, -} from '../tab-events'; - -import { - FLUID_SPACING_3X_SMALL, - FLUID_SPACING_MEDIUM, - fluidDtText, -} from '@dynatrace/fluid-design-tokens'; - -/** A unique id */ -let _unique = 0; - -/** - * This is a experimental version of the tab component - * It registers itself as `fluid-tab` custom element. - * @element fluid-tab - * @slot - Default slot to provide a label for the tab. - */ -@customElement('fluid-tab') -export class FluidTab extends LitElement { - /** Styles for the tab component */ - static get styles(): CSSResult { - return css` - :host { - /** - * Legibility definitions should probably be - * shipped or imported from a core - */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - margin-right: ${unsafeCSS(FLUID_SPACING_MEDIUM)}; - - --fluid-tab--label-color: var(--color-neutral-100); - --fluid-tab--label-hover-color: var(--color-neutral-150); - --fluid-tab--label-active-color: var(--color-neutral-150); - --fluid-tab--label-disabled-color: var(--color-neutral-80); - --fluid-tab--active-underline-color: var(--color-primary-100); - --fluid-tab--hover-underline-color: var(--color-neutral-100); - } - - /** - * Disabled state - */ - :host([disabled]) { - pointer-events: none; - } - :host([disabled]) .fluid-tab { - color: var(--fluid-tab--label-disabled-color); - } - :host([disabled]) .fluid-tab:hover::after { - background-color: none; - } - - ::slotted(*) { - text-decoration: none; - color: var(--fluid-tab--label-color); - } - - .fluid-tab { - ${unsafeCSS(fluidDtText())}; - cursor: pointer; - display: inline-block; - position: relative; - color: var(--fluid-tab--label-color); - white-space: unset; - } - - .fluid-tab::after { - position: absolute; - width: 100%; - height: ${unsafeCSS(FLUID_SPACING_3X_SMALL)}; - background-color: transparent; - bottom: -${unsafeCSS(FLUID_SPACING_3X_SMALL)}; - left: 0; - content: ''; - } - .fluid-tab:hover { - color: var(--fluid-tab--label-hover-color); - } - .fluid-tab:hover::after { - background-color: var(--fluid-tab--hover-underline-color); - } - - .fluid-state--active { - color: var(--fluid-tab--label-active-color); - } - .fluid-state--active:hover::after { - background-color: var(--fluid-tab--active-underline-color); - } - .fluid-state--active::after { - background-color: var(--fluid-tab--active-underline-color); - } - - .fluid-tab:not(.fluid-state--tabbed) { - outline: none; - } - `; - } - - /** - * Defines the tab element with an id attribute - * @attr - * @type string - */ - @property({ type: String, reflect: true }) - tabid = `fluid-tab-${_unique++}`; - - /** - * Defines whether a tab is disabled or not - * @attr - * @type boolean - */ - @property({ type: Boolean, reflect: true }) - get disabled(): boolean { - return this._disabled; - } - set disabled(value: boolean) { - const oldValue = this._disabled; - if (this._disabled !== value) { - this._disabled = value; - this.requestUpdate('disabled', oldValue); - if (this._disabled) { - this._active = false; - this.tabindex = -1; - this.dispatchEvent(new FluidTabDisabledEvent(this.tabid)); - } - } - } - private _disabled = false; - - /** - * Defines the tabindex attribute - * @attr - * @type number - */ - @property({ type: Number, reflect: false }) - tabindex = 0; - - /** - * Defines whether a tab is active or not - * @attr - * @type boolean - */ - @property({ type: Boolean, reflect: false }) - get active(): boolean { - return this._active; - } - set active(value: boolean) { - const oldActive = this._active; - // Only set active true if not disabled - this._active = this.disabled === false ? value : false; - this.requestUpdate('active', oldActive); - this.tabindex = this._active ? 0 : -1; - if (value) { - this._dispatchActiveSetEvent(); - } - } - private _active = false; - - /** - * Role of the tab. - * @private - An internal prop that should not appear in the readme and should - * not be set by the outside. - */ - @property({ - type: String, - reflect: true, - }) - role: string = 'tab'; - - /** - * Aria-selected attribute of the checkbox. - * @private - An internal prop that should not appear in the readme and should - * not be set by the outside. - */ - @property({ - type: String, - reflect: true, - attribute: 'aria-selected', - }) - ariaSelected: string = 'false'; - - /** Update lifecycle */ - update(props: Map): void { - // Aria-selected depends on the value of active, but is never actually - // set by the litElement reactivity. In the updated lifeCycle - // we need to manually update the ariaSelected attribute here. - this.ariaSelected = this._active.toString(); - // Changing the aria-selected or any observed property in the update, will - // add it to the updated properties. When calling super first in, the change - // of properties in the update call will trigger an update, as the properties - // will have changed after the super.update() call. To prevent an additional - // cycle, we make the modifications before calling the super lifecycle - super.update(props); - } - - /** Defines whether the user focused an element by tabbing or not */ - @property({ type: Boolean, reflect: false }) - get tabbed(): boolean { - return this._tabbed; - } - set tabbed(value: boolean) { - const oldTabbed = this._tabbed; - this._tabbed = value; - this.requestUpdate('tabbed', oldTabbed); - this.tabindex = value === true ? 0 : -1; - } - private _tabbed = false; - - /** Contains the span element of this template */ - private _rootElement: HTMLSpanElement; - - /** First updated lifecycle */ - firstUpdated(props: PropertyValues): void { - super.firstUpdated(props); - this._rootElement = this.shadowRoot?.querySelector( - '.fluid-tab', - )! as HTMLSpanElement; - } - - private _dispatchActiveSetEvent(): void { - this.dispatchEvent(new FluidTabActiveSetEvent(this.tabid)); - } - - /** Dispatches the custom event with the this tabid */ - private _dispatchActiveTabEvent(): void { - this.dispatchEvent(new FluidTabActiveSetEvent(this.tabid)); - } - - /** Handles the click event. Dispatches the tab when a new tab was clicked */ - private handleClick(): void { - if (!this._active) { - this.active = true; - this._dispatchActiveTabEvent(); - } - } - - /** Fires an event if the focused tab was tabbed to but not set to active */ - private handleBlur(): void { - if (this._tabbed && !this._active) { - this.dispatchEvent(new FluidTabBlurredEvent(this.tabid)); - } - } - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - const classes = { - 'fluid-tab': true, - 'fluid-state--tabbed': this._tabbed, - 'fluid-state--active': this._active, - }; - - // Linebreak causes the element to have a space - return html` - - `; - } - - /** Focuses the span element in the template */ - focus(): void { - this._rootElement.focus(); - } -} diff --git a/libs/fluid-elements/tab-group/tsconfig.json b/libs/fluid-elements/tab-group/tsconfig.json deleted file mode 100644 index da7cd737a1..0000000000 --- a/libs/fluid-elements/tab-group/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "types": ["jest"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/tab-group/tsconfig.lib.json b/libs/fluid-elements/tab-group/tsconfig.lib.json deleted file mode 100644 index ea54e13d02..0000000000 --- a/libs/fluid-elements/tab-group/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "include": ["**/*.ts"], - "exclude": ["**/*.spec.ts"] -} diff --git a/libs/fluid-elements/tab-group/tsconfig.spec.json b/libs/fluid-elements/tab-group/tsconfig.spec.json deleted file mode 100644 index cc2764398d..0000000000 --- a/libs/fluid-elements/tab-group/tsconfig.spec.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "CommonJS", - "allowJs": true, - "types": ["jest", "node"], - "target": "es2015", - "lib": ["dom", "es2018"] - }, - "include": ["**/*.spec.ts", "**/*.d.ts"] -} diff --git a/libs/fluid-elements/tab-group/tslint.json b/libs/fluid-elements/tab-group/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/tab-group/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/fluid-elements/tsconfig.json b/libs/fluid-elements/tsconfig.json deleted file mode 100644 index 54c18b0207..0000000000 --- a/libs/fluid-elements/tsconfig.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "types": ["node", "jest"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./button/tsconfig.json" - }, - { - "path": "./checkbox/tsconfig.json" - }, - { - "path": "./switch/tsconfig.json" - }, - { - "path": "./tab-group/tsconfig.json" - } - ] -} diff --git a/libs/fluid-elements/virtual-scroll-container/BUILD.bazel b/libs/fluid-elements/virtual-scroll-container/BUILD.bazel deleted file mode 100644 index 90e35d53ff..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/BUILD.bazel +++ /dev/null @@ -1,52 +0,0 @@ -load("//tools/bazel_rules:index.bzl", "jest") -load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_library") - -package(default_visibility = ["//libs/fluid-elements:__subpackages__"]) - -ts_library( - name = "compile", - srcs = glob( - include = ["src/**/*.ts"], - exclude = [ - "src/**/*.spec.ts", - "src/test-setup.ts", - ], - ), - module_name = "@dynatrace/fluid-elements/virtual-scroll-container", - module_root = "src", - tsconfig = "tsconfig_lib", - deps = [ - "//libs/shared/design-tokens", - "@npm//lit-element", - "@npm//lit-html", - "@npm//tslib", - ], -) - -jest( - name = "test", - srcs = glob(include = ["src/**/*.spec.ts"]), - jest_config = ":jest.config.json", - ts_config = ":tsconfig_test", - deps = [ - ":compile", - ], -) - -ts_config( - name = "tsconfig_lib", - src = "tsconfig.lib.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) - -ts_config( - name = "tsconfig_test", - src = "tsconfig.spec.json", - deps = [ - "tsconfig.json", - "//libs/barista-components:tsconfig", - ], -) diff --git a/libs/fluid-elements/virtual-scroll-container/README.md b/libs/fluid-elements/virtual-scroll-container/README.md deleted file mode 100644 index 1be05518bf..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# fluid-elements-fluid-virtual-scroll-container - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `bazel test //libs/fluid-elements/virtual-scroll-container:test` to execute -the unit tests via [Jest](https://jestjs.io). diff --git a/libs/fluid-elements/virtual-scroll-container/jest.config.json b/libs/fluid-elements/virtual-scroll-container/jest.config.json deleted file mode 100644 index fa087b8c7f..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/jest.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "name": "fluid-virtual-scroll-container" -} diff --git a/libs/fluid-elements/virtual-scroll-container/package.json b/libs/fluid-elements/virtual-scroll-container/package.json deleted file mode 100644 index 87ab9d11a9..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@dynatrace/fluid-virtual-scroll-container", - "description": "Dynatrace virtual-scroll-container element based on web-components", - "version": "", - "repository": { - "type": "git", - "url": "https://github.com/dynatrace-oss/barista" - }, - "keywords": [ - "dynatrace", - "components" - ], - "license": "Apache-2.0", - "homepage": "https://barista.dynatrace.com", - "bugs": { - "url": "https://github.com/dynatrace-oss/barista/issues" - }, - "dependencies": { - "lit-element": "", - "lit-html": "" - }, - "peerDependencies": {} -} diff --git a/libs/fluid-elements/virtual-scroll-container/src/index.ts b/libs/fluid-elements/virtual-scroll-container/src/index.ts deleted file mode 100644 index 319dde908a..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/src/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './lib/virtual-scroll-container'; -export * from './lib/virtual-scroll-events'; diff --git a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-container.ts b/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-container.ts deleted file mode 100644 index 8af8740bd0..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-container.ts +++ /dev/null @@ -1,616 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - CSSResult, - LitElement, - PropertyValues, - TemplateResult, - css, - customElement, - html, - property, - query, - unsafeCSS, -} from 'lit-element'; -import { render } from 'lit-html'; -import { ifDefined } from 'lit-html/directives/if-defined'; - -import { FLUID_INPUT_PADDING } from '@dynatrace/fluid-design-tokens'; - -import { FluidVirtualScrollState } from './virtual-scroll-state'; -import { FluidVirtualScrollContainerRenderedItemsChange } from './virtual-scroll-events'; -import { - virtualScrollAddInitialItemsBatch, - virtualScrollCalculatePlaceholderSize, - virtualScrollResetState, - virtualScrollUpdateEndScrollBuffer, - virtualScrollUpdateStartScrollBuffer, -} from './virtual-scroll-utils'; - -let _unique = 0; - -// Threshold to dertermine when the observer should trigger the callback -const VIRTUAL_SCROLL_THRESHOLD = 0.5; - -/** - * This is an experimental virtual-scroll-container element built with lit-elements and - * web-components. It registers itself as `fluid-virtual-scroll-container` custom element. - * @element fluid-virtual-scroll-container - */ -@customElement('fluid-virtual-scroll-container') -export class FluidVirtualScrollContainer extends LitElement { - /** Styles for the virtual-scroll-container component */ - static get styles(): CSSResult { - return css` - :host { - display: block; - width: 100%; - height: 100%; - } - - *, - *::before, - *::after { - box-sizing: border-box; - } - - .fluid-virtual-scroll-container { - --virtual-scroll-item-height: 0; - - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: scroll; - } - - .fluid-virtual-scroll-empty { - padding: ${unsafeCSS(FLUID_INPUT_PADDING)}; - } - - .fluid-virtual-scroll-item--fixed-height { - height: var(--virtual-scroll-item-height); - overflow: hidden; - } - `; - } - - /** - * Defines the tab element with an id attribute - * @attr - */ - @property({ type: String, reflect: true }) - scrollcontainerid = `fluid-virtual-scroll-container-${_unique++}`; - - /** - * Defines the class(es) to add to the rendered virtual scroll items - * @attr - */ - @property({ type: Boolean, reflect: true }) - equalitemheight: boolean = false; - - /** - * Defines the class(es) to add to the rendered virtual scroll items - * @attr - */ - @property({ type: String, reflect: true }) - itemclass: string; - - /** - * Defines what to display if there are no items to render - * @attr - */ - @property({ type: String, reflect: true }) - noitemsmessage = `No items to display.`; - - /** - * Defines the max height of the virtual scroll container - * If this is not set, a parent of the virtual scroll container should - * have an explicit height, else it will grow until all items are rendered - * @attr - */ - @property({ type: String, reflect: true }) - maxheight: string; - - /** - * Array of items to display in the scroll container. - * @attr - * @type array - */ - @property({ type: Array, attribute: false }) - get items(): T[] { - return this._items; - } - set items(value: T[]) { - if (value !== this._items) { - const oldItems = this._items; - this._items = value; - this._resetVirtualScroll(); - this.requestUpdate(`items`, oldItems); - } - } - private _items: T[] = []; - - /** - * Defines the function to use for rendering items - * @attr - * @type function - */ - @property({ attribute: false }) - renderItemFn: (item: T) => TemplateResult; - - /** - * Defines the function to use for rendering options - * @attr - * @type function - */ - @property({ attribute: false }) - trackByFn: (option: T) => any = (option: T): any => option; - - /** @internal Reference of the scroll container */ - @query(`.fluid-virtual-scroll-container`) - _scrollContainer: HTMLDivElement; - - /** @internal State of the virtual scroll */ - _scrollState = new FluidVirtualScrollState(); - - /** Reference of the virtual scroll items container */ - @query(`.fluid-virtual-scroll-items-container`) - private _scrollItemsContainer: HTMLDivElement; - - /** Reference of the placeholder above the rendered items */ - @query(`.fluid-virtual-scroll-start-placeholder`) - private _scrollStartPlaceholder: HTMLDivElement; - - /** Reference of the placeholder below the rendered items */ - @query(`.fluid-virtual-scroll-end-placeholder`) - private _scrollEndPlaceholder: HTMLDivElement; - - /** Defines whether the initially visible items have been rendered */ - private _initialRenderDone = false; - - /** Currently rendered virtual scroll items */ - private _renderedItems: TemplateResult[] = []; - - /** Map of template results to load items from if it has been rendered before */ - private _cachedItems: Map< - string, - { template: TemplateResult; height: number } - > = new Map(); - - /** - * The scroll container might not be visible when being first rendered - * Unless it is visible, no items should be rendered - */ - private _visibilityObserver: IntersectionObserver; - - /** Defines whether the virtual scroll container is visible */ - private _isVisible = false; - - /** - * Observer for updating the virtual scroll buffer when - * an item enters the container at the start or end of the list - */ - private _virtualScrollBufferObserver: IntersectionObserver; - - /** - * Set storing the indizes of observed items to avoid handling - * an observed item intersection when it was just added to the observer - */ - private _observedItemsIndices: Set = new Set(); - - /** Resets virtual scroll */ - private _resetVirtualScroll(): void { - this._initialRenderDone = false; - if (this._virtualScrollBufferObserver) { - this._virtualScrollBufferObserver.disconnect(); - } - this._renderedItems = []; - this._cachedItems.clear(); - this._scrollState = virtualScrollResetState(this._scrollState); - this._scrollState.itemsCount = this._items.length; - } - - /** Renders items to display when the popover is first opened */ - private _renderInitialVirtualScrollItems(): void { - // Add batch of items to render - this._scrollState = virtualScrollAddInitialItemsBatch(this._scrollState); - this._renderVirtualScrollItems(); - - // Only check if the initial render is complete after the browser - // actually rendered the first batch of virtual scroll items - requestAnimationFrame(() => { - if (!this._isInitialRenderDone()) { - // Call render initial again to add another batch of items - this._renderInitialVirtualScrollItems(); - } else if ( - this._scrollState.renderedItemsRangeEnd !== - this.items.length - 1 - ) { - // Call scroll state update end buffer to add the buffer items - this._scrollState = virtualScrollUpdateEndScrollBuffer( - this._scrollState, - ); - - this._renderVirtualScrollItems(); - - // Calculate average item height and set it in the scroll state - let totalHeight = 0; - for ( - let i = this._scrollState.renderedItemsRangeStart; - i <= this._scrollState.renderedItemsRangeEnd; - i += 1 - ) { - totalHeight += this._cachedItems.get(this.trackByFn(this._items[i]))! - .height; - } - - this._scrollState.avgItemHeight = - totalHeight / - (this._scrollState.renderedItemsRangeEnd - - this._scrollState.renderedItemsRangeStart + - 1); - - // Update the placeholders to correctly display the scrollbar - this._updatePlaceholders(); - } - }); - } - - /** Renders new virtual scroll items and add them to the list of rendered items */ - private _renderVirtualScrollItems(): void { - // Array of rendered items - const renderedItems: TemplateResult[] = []; - - if (this._items.length) { - for ( - let i = this._scrollState.renderedItemsRangeStart; - i <= this._scrollState.renderedItemsRangeEnd; - i += 1 - ) { - // Return cached item if available, else create TemplateResult for new item - let renderedItem: TemplateResult; - const itemId = this.trackByFn(this._items[i]); - - if (this._cachedItems.has(itemId)) { - renderedItem = this._cachedItems.get(itemId)!.template; - } else { - renderedItem = html` -
- ${this.renderItemFn(this._items[i])} -
- `; - - this._cachedItems.set(itemId, { template: renderedItem, height: 0 }); - } - - // Push the new item to the list of rendered items - renderedItems.push(renderedItem); - } - - this._renderedItems = [...renderedItems]; - } else { - this._renderedItems = [ - html`
- ${this.noitemsmessage} -
`, - ]; - this._setPlaceholders(); - } - - // Render items into the virtual scroll items container - render(html`${this._renderedItems}`, this._scrollItemsContainer); - - for ( - let i = this._scrollState.renderedItemsRangeStart; - i <= this._scrollState.renderedItemsRangeEnd; - i += 1 - ) { - if (this.equalitemheight) { - this._setEqualItemHeight(i); - } else { - this._cacheItemHeight(i); - } - } - - // Update the observed items and dispatch an event notifying - // listeners that the range of rendered items has changed - this._observeVirtualScrollPadding(); - - this.dispatchEvent( - new FluidVirtualScrollContainerRenderedItemsChange( - this._scrollState.renderedItemsRangeStart, - this._scrollState.renderedItemsRangeEnd, - ), - ); - } - - /** - * Re-renders currently displayed virtual scroll items - * In case the render method gets called due to an update to - * one of the observed properties, we have to also re-render - * the currently displayed virtual scroll items - */ - private _renderExistingVirtualScrollItems(): void { - render(html`${this._renderedItems}`, this._scrollItemsContainer); - - this.requestUpdate(); - } - - /** Stores the height of the first item in a css property to set all items' height equally */ - private _setEqualItemHeight(index: number): void { - const item = this._scrollContainer.querySelector( - `.fluid-virtual-scroll-item[data-index="${index}"]`, - ); - - // If all items should be equally high and the height is not yet set, - // get the height of the first combo-box option and set the item-height - // css property to the retrieved value - if ( - parseInt( - window - .getComputedStyle(this._scrollContainer) - .getPropertyValue(`--virtual-scroll-item-height`), - ) === 0 - ) { - this._scrollContainer.style.setProperty( - `--virtual-scroll-item-height`, - `${item?.getBoundingClientRect().height || 0}px`, - ); - } - - if (item) { - // Add fixed-height class to every item if applicable - item.classList.add(`fluid-virtual-scroll-item--fixed-height`); - this._storeItemHeight(item, index); - } - } - - /** Adds the items height to the cached item */ - private _cacheItemHeight(index: number): void { - const item = this._scrollContainer.querySelector( - `.fluid-virtual-scroll-item[data-index="${index}"]`, - ); - - if (item) { - this._storeItemHeight(item, index); - } - } - - /** Adds the height of the rendered item to the item's cached object */ - private _storeItemHeight(item: Element, index: number): void { - const itemId = this.trackByFn(this._items[index]); - this._cachedItems.get(itemId)!.height = item.getBoundingClientRect().height; - } - - /** - * Observes intersections of the middle item of the scroll buffer - * As soon as it is half visible, another batch of items is rendered - */ - private _observeVirtualScrollPadding(): void { - // Get elements to observe and add them to the observer - const observedItemStart = this._scrollContainer.querySelector( - `.fluid-virtual-scroll-item[data-index="${this._scrollState.bufferStartObservedItemIndex}"]`, - ); - - if (observedItemStart) { - this._virtualScrollBufferObserver.observe(observedItemStart); - } - - const observedItemEnd = this._scrollContainer.querySelector( - `.fluid-virtual-scroll-item[data-index="${this._scrollState.bufferEndObservedItemIndex}"]`, - ); - - if (observedItemEnd) { - this._virtualScrollBufferObserver.observe(observedItemEnd); - } - } - - private _handleHostIntersection( - observedItems: IntersectionObserverEntry[], - ): void { - observedItems.forEach((entry) => { - this._isVisible = entry.isIntersecting; - this.requestUpdate(); - }); - } - - /** - * Handles intersection of items observed for updating the virtual scroll buffer - * @param observedItems List of observed items whose intersection ratio changed - */ - private _handlePaddingIntersection( - observedItems: IntersectionObserverEntry[], - ): void { - observedItems.forEach((entry) => { - const item = entry.target as HTMLDivElement; - const itemIndex = parseInt(item.dataset.index!); - - /* - * TODO - * figure out a way to continuosly render items, even when scrolling - * very fast. - */ - // Don't handle intersection triggered when adding an observed item - // except when the item has already passed the position where it is normally - // intersecting for the first time (end observed item at the bottom/right edge of the container, - // start observed item at the top/left edge) - // This might happen when the user is scrolling very fast and the observer - // calls the callback only when the item is already past the bottom/right edge of the - // container when scrolling downwards or the top/left edge when scrolling upwards - if (!this._observedItemsIndices.has(itemIndex)) { - if ( - itemIndex === this._scrollState.bufferEndObservedItemIndex && - item.getBoundingClientRect().bottom - - this._cachedItems.get(this.trackByFn(this._items[itemIndex]))! - .height * - VIRTUAL_SCROLL_THRESHOLD <= - entry.rootBounds!.bottom - ) { - // Observed item is at the end of the list, the item is already above the - // bottom edge of the container, hence the observer would not trigger again - // when scrolling further down - this._clearVirtualScrollBufferObserver(); - this._scrollState = virtualScrollUpdateEndScrollBuffer( - this._scrollState, - ); - this._renderVirtualScrollItems(); - this._updatePlaceholders(); - } else if ( - itemIndex === this._scrollState.bufferStartObservedItemIndex && - item.getBoundingClientRect().top + - this._cachedItems.get(this.trackByFn(this._items[itemIndex]))! - .height * - VIRTUAL_SCROLL_THRESHOLD >= - entry.rootBounds!.top - ) { - // Observed item is at the start of the list, the item is already below the - // bottom edge of the container, hence the observer would not trigger again - // when scrolling further up - this._clearVirtualScrollBufferObserver(); - this._scrollState = virtualScrollUpdateStartScrollBuffer( - this._scrollState, - ); - this._renderVirtualScrollItems(); - this._updatePlaceholders(); - } - - this._observedItemsIndices.add(itemIndex); - - return; - } - - // Request buffer update and render updated items - if (entry.isIntersecting) { - this._clearVirtualScrollBufferObserver(); - - this._scrollState = - itemIndex === this._scrollState.bufferStartObservedItemIndex - ? virtualScrollUpdateStartScrollBuffer(this._scrollState) - : virtualScrollUpdateEndScrollBuffer(this._scrollState); - - this._renderVirtualScrollItems(); - this._updatePlaceholders(); - } - }); - } - - /** Clears items observed for handling the virtual scroll buffer */ - private _clearVirtualScrollBufferObserver(): void { - this._virtualScrollBufferObserver.disconnect(); - this._observedItemsIndices.clear(); - } - - /** Checks, if the rendered items are filling up the available space */ - private _isInitialRenderDone(): boolean { - if ( - this._scrollContainer.clientHeight < - this._scrollItemsContainer.clientHeight || - this._scrollState.renderedItemsRangeEnd === this.items.length - 1 - ) { - // The container is completely filled up or the last item is rendered - this._initialRenderDone = true; - } - - return this._initialRenderDone; - } - - /** - * Calculates average item height of the currently rendered items - * and sets the height of the placeholders - */ - private _updatePlaceholders(): void { - // Store the current scrollTop and reset it after setting the height to avoid jumping - const currentScroll = this._scrollContainer.scrollTop; - - // Recalculate the size of the placeholders - this._scrollState = virtualScrollCalculatePlaceholderSize( - this._scrollState, - ); - // Set height of the placeholders above and below the rendered items - // to correctly display the scroll bar - this._setPlaceholders(); - - this._scrollContainer.scrollTop = currentScroll; - } - - /** Sets the height of the placeholder */ - private _setPlaceholders(): void { - if (this._items.length) { - this._scrollStartPlaceholder.style.height = `${this._scrollState.startPlaceholderSize}px`; - this._scrollEndPlaceholder.style.height = `${this._scrollState.endPlaceholderSize}px`; - - return; - } - - this._scrollStartPlaceholder.style.height = `0`; - this._scrollEndPlaceholder.style.height = `0`; - } - - /** - * Creates intersection observers for observing - * the items in the virtual scroll container - */ - firstUpdated(props: PropertyValues): void { - super.firstUpdated(props); - - // Intersection observer for observing items relevant for updating - // the currently rendered items - this._virtualScrollBufferObserver = new IntersectionObserver( - this._handlePaddingIntersection.bind(this), - { - root: this._scrollContainer, - threshold: VIRTUAL_SCROLL_THRESHOLD, - }, - ); - - this._visibilityObserver = new IntersectionObserver( - this._handleHostIntersection.bind(this), - ); - this._visibilityObserver.observe(this); - } - - /** - * Render function of the custom element. It is called when one of the - * observedProperties (annotated with @property) changes. - */ - render(): TemplateResult { - if (this._isVisible && this._scrollContainer) { - if (!this._initialRenderDone) { - this._renderInitialVirtualScrollItems(); - } else { - this._renderExistingVirtualScrollItems(); - } - } - - return html` -
-
-
-
-
- `; - } -} diff --git a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-events.ts b/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-events.ts deleted file mode 100644 index 8e62db8c7c..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-events.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** Custom event implementation fires when the active tab has changes */ -export class FluidVirtualScrollContainerRenderedItemsChange extends CustomEvent { - constructor(public rangeStart: number, public rangeEnd: number) { - super('renderedItemsChange', { bubbles: true, composed: true }); - } -} diff --git a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-state.ts b/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-state.ts deleted file mode 100644 index 457444f774..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-state.ts +++ /dev/null @@ -1,78 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export interface FluidVirtualScrollOptions { - itemsBatchSize?: number; - itemsBufferSize?: number; -} - -// Number of items to render each time until the container is filled up -const VIRTUAL_SCROLL_BATCH_SIZE = 5; -// Number of items to render in addition to the initially rendered items -const VIRTUAL_SCROLL_BUFFER_SIZE = 3; - -/** - * @internal This class holds all the values representing the - * current state of a virtual scroll container - */ -export class FluidVirtualScrollState { - /** Average item height */ - avgItemHeight: number; - - /** Index of the first rendered item */ - renderedItemsRangeStart = -1; - - /** Index of the first rendered item */ - renderedItemsRangeEnd = -1; - - /** Empty placeholder before the rendered items to correctly render the scrollbar */ - startPlaceholderSize = 0; - - /** Empty placeholder after the rendered items to correctly render the scrollbar */ - endPlaceholderSize = 0; - - /** Number of currently rendered start buffer items */ - startItemsBufferSize = 0; - - /** Number of currently rendered end buffer items */ - endItemsBufferSize = 0; - - /** Index of the item to observe for adjusting the start buffer */ - bufferStartObservedItemIndex = -1; - - /** Index of the item to observe for adjusting the end buffer */ - bufferEndObservedItemIndex = -1; - - /** Total number of items in the virtual scroll panel */ - itemsCount = 0; - - /** Number of items to render when initialising */ - itemsBatchSize: number; - - /** Number of initial batches rendered to fill up the whole container */ - initialBatches = 0; - - /** Number of items rendered above and below the fold */ - itemsBufferSize: number; - - constructor({ - itemsBatchSize, - itemsBufferSize, - }: FluidVirtualScrollOptions = {}) { - this.itemsBatchSize = itemsBatchSize ?? VIRTUAL_SCROLL_BATCH_SIZE; - this.itemsBufferSize = itemsBufferSize ?? VIRTUAL_SCROLL_BUFFER_SIZE; - } -} diff --git a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-utils.spec.ts b/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-utils.spec.ts deleted file mode 100644 index 5814b3673f..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-utils.spec.ts +++ /dev/null @@ -1,195 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidVirtualScrollState } from './virtual-scroll-state'; - -import { - virtualScrollAddInitialItemsBatch, - virtualScrollCalculatePlaceholderSize, - virtualScrollResetState, - virtualScrollUpdateEndScrollBuffer, -} from './virtual-scroll-utils'; - -const BATCH_SIZE = 5; -const BUFFER_SIZE = 3; -const AVG_ITME_HEIGHT = 20; - -function checkScrollState( - instance: FluidVirtualScrollState, - renderedItemsRangeStart: number, - renderedItemsRangeEnd: number, - startPlaceholderSize: number, - endPlaceholderSize: number, - startItemsBufferSize: number, - endItemsBufferSize: number, - bufferStartObservedItemIndex: number, - bufferEndObservedItemIndex: number, -): void { - expect(instance.renderedItemsRangeStart).toEqual(renderedItemsRangeStart); - expect(instance.renderedItemsRangeEnd).toEqual(renderedItemsRangeEnd); - expect(instance.startPlaceholderSize).toEqual(startPlaceholderSize); - expect(instance.endPlaceholderSize).toEqual(endPlaceholderSize); - expect(instance.startItemsBufferSize).toEqual(startItemsBufferSize); - expect(instance.endItemsBufferSize).toEqual(endItemsBufferSize); - expect(instance.bufferStartObservedItemIndex).toEqual( - bufferStartObservedItemIndex, - ); - expect(instance.bufferEndObservedItemIndex).toEqual( - bufferEndObservedItemIndex, - ); -} - -describe(`Fluid virtual scroll state`, () => { - let instance: FluidVirtualScrollState; - - beforeEach(() => { - instance = new FluidVirtualScrollState({ - itemsBatchSize: BATCH_SIZE, - itemsBufferSize: BUFFER_SIZE, - }); - }); - - it(`should create the scroll state instance`, () => { - expect(instance).not.toBe(null); - expect(instance.avgItemHeight).toBeUndefined(); - checkScrollState(instance, -1, -1, 0, 0, 0, 0, -1, -1); - }); - - it(`should not update items range as long as items count is 0`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - expect(instance.renderedItemsRangeStart).toEqual(-1); - expect(instance.renderedItemsRangeEnd).toEqual(-1); - }); - - describe(`no need to scroll due to too little items`, () => { - beforeEach(() => { - instance = virtualScrollResetState(instance); - instance.itemsCount = 3; - }); - - it(`should reset the virtual scroll state when the items count changes`, () => { - expect(instance.avgItemHeight).toBeUndefined(); - checkScrollState(instance, -1, -1, 0, 0, 0, 0, -1, -1); - }); - - it(`should not add more items than available`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - checkScrollState(instance, 0, 2, 0, 0, 0, 0, -1, -1); - - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - checkScrollState(instance, 0, 2, 0, 0, 0, 0, -1, -1); - }); - }); - - describe(`items count = 20`, () => { - beforeEach(() => { - instance.itemsCount = 20; - instance.avgItemHeight = AVG_ITME_HEIGHT; - }); - - it(`should add one batch of items`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - checkScrollState(instance, 0, 4, 0, 0, 0, 0, -1, -1); - }); - - it(`should add two batches of items`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollAddInitialItemsBatch(instance); - checkScrollState(instance, 0, 9, 0, 0, 0, 0, -1, -1); - }); - - it(`should add items plus buffer`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - checkScrollState(instance, 0, 7, 0, 0, 0, 3, -1, 6); - }); - - it(`should not remove items at start, if there is no buffer yet`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollCalculatePlaceholderSize(instance); - checkScrollState(instance, 0, 10, 0, 180, 3, 3, 1, 9); - }); - - it(`should remove items at the start`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollCalculatePlaceholderSize(instance); - checkScrollState(instance, 3, 13, 60, 120, 3, 3, 4, 12); - }); - }); - - describe(`initialise virtual scroll state with options`, () => { - beforeEach(() => { - instance = new FluidVirtualScrollState({ - itemsBatchSize: 10, - itemsBufferSize: 5, - }); - }); - - it(`should not update items range as long as items count is 0`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - expect(instance.renderedItemsRangeStart).toEqual(-1); - expect(instance.renderedItemsRangeEnd).toEqual(-1); - }); - - describe(`items count = 50`, () => { - beforeEach(() => { - instance.itemsCount = 50; - instance.avgItemHeight = AVG_ITME_HEIGHT; - }); - - it(`should add one batch of items`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - checkScrollState(instance, 0, 9, 0, 0, 0, 0, -1, -1); - }); - - it(`should add two batches of items`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollAddInitialItemsBatch(instance); - checkScrollState(instance, 0, 19, 0, 0, 0, 0, -1, -1); - }); - - it(`should add items plus buffer`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - checkScrollState(instance, 0, 14, 0, 0, 0, 5, -1, 12); - }); - - it(`should not remove items at start, if there is no buffer yet`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollCalculatePlaceholderSize(instance); - checkScrollState(instance, 0, 19, 0, 600, 5, 5, 2, 17); - }); - - it(`should remove items at the start`, () => { - instance = virtualScrollAddInitialItemsBatch(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollUpdateEndScrollBuffer(instance); - instance = virtualScrollCalculatePlaceholderSize(instance); - checkScrollState(instance, 5, 24, 100, 500, 5, 5, 7, 22); - }); - }); - }); -}); diff --git a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-utils.ts b/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-utils.ts deleted file mode 100644 index 8f2e08293d..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/src/lib/virtual-scroll-utils.ts +++ /dev/null @@ -1,261 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { FluidVirtualScrollState } from './virtual-scroll-state'; - -/** - * @internal Adds one batch of items to be intially rendered in the virtual scroll container - * @returns New scroll state with updated values - */ -export function virtualScrollAddInitialItemsBatch( - state: FluidVirtualScrollState, -): FluidVirtualScrollState { - if (!state.itemsCount) { - return state; - } - - const newState = appendItems(state, state.itemsBatchSize); - return { ...newState, initialBatches: (state.initialBatches += 1) }; -} - -/** - * @internal Adds new items to the start of the list, removes items from the end - * @returns New scroll state with updated values - */ -export function virtualScrollUpdateStartScrollBuffer( - state: FluidVirtualScrollState, -): FluidVirtualScrollState { - if (!state.itemsCount) { - return state; - } - - let newState = { ...state }; - const prevRenderedItemsCount = renderedItemsCount(newState); - - // Add items to the start - newState = prependItems(newState, newState.itemsBufferSize); - - // Calculate start buffer size - newState.startItemsBufferSize = - renderedItemsCount(newState) - prevRenderedItemsCount; - - // Remove items from the end depending on the amount of newly rendered items - newState.renderedItemsRangeEnd -= newState.startItemsBufferSize; - - // Calculate number of items of the end buffer - newState.endItemsBufferSize = - renderedItemsCount(newState) - - newState.initialBatches * newState.itemsBatchSize - - newState.startItemsBufferSize; - - return { ...newState, ...calculateObservedItemsIndices(newState) }; -} - -/** - * @internal Adds new items to the end of the list, remove items from the start - * @returns New scroll state with updated values - */ -export function virtualScrollUpdateEndScrollBuffer( - state: FluidVirtualScrollState, -): FluidVirtualScrollState { - if (!state.itemsCount) { - return state; - } - - let newState = { ...state }; - const prevRenderedItemsCount = renderedItemsCount(newState); - - // Add items to the end - newState = appendItems(newState, newState.itemsBufferSize); - - // Calculate end buffer size - newState.endItemsBufferSize = - renderedItemsCount(newState) - prevRenderedItemsCount; - - // Remove items from the start depending on the amount of newly rendered items - if (newState.startItemsBufferSize > 0) { - newState.renderedItemsRangeStart += newState.endItemsBufferSize; - } - - // Calculate number of items of the start buffer - newState.startItemsBufferSize = - renderedItemsCount(newState) - - newState.initialBatches * newState.itemsBatchSize - - newState.endItemsBufferSize; - newState.startItemsBufferSize = Math.max(0, newState.startItemsBufferSize); - - return { ...newState, ...calculateObservedItemsIndices(newState) }; -} - -/** - * @internal Calculates the size of the start and end placeholder based on the average item height - * @returns New scroll state with updated values - */ -export function virtualScrollCalculatePlaceholderSize( - state: FluidVirtualScrollState, -): FluidVirtualScrollState { - if (!state.itemsCount) { - return state; - } - - return { - ...state, - startPlaceholderSize: state.renderedItemsRangeStart * state.avgItemHeight, - endPlaceholderSize: - (state.itemsCount - state.renderedItemsRangeEnd - 1) * - state.avgItemHeight, - }; -} - -/** - * @internal Resets the virtual scroll state - * @returns New scroll state with default values - */ -export function virtualScrollResetState( - state: FluidVirtualScrollState, -): FluidVirtualScrollState { - return new FluidVirtualScrollState({ - itemsBatchSize: state.itemsBatchSize, - itemsBufferSize: state.itemsBufferSize, - }); -} - -/** - * @internal Adds items to the end of the rendered items array - * @returns New scroll state with updated items range - */ -function appendItems( - state: FluidVirtualScrollState, - itemCount: number, -): FluidVirtualScrollState { - return { - ...state, - ...calculateRenderedItemsRange( - state, - itemCount, - state.renderedItemsRangeEnd, - ), - }; -} - -/** - * @internal Adds items to the beginning of the rendered items array - * @returns New scroll state with updated items range - */ -function prependItems( - state: FluidVirtualScrollState, - itemCount: number, -): FluidVirtualScrollState { - const startAt = state.renderedItemsRangeStart - state.itemsBufferSize; - return { - ...state, - ...calculateRenderedItemsRange(state, itemCount, startAt), - }; -} - -/** - * @internal Calculates the range of items to render - * @returns Range start and end - */ -function calculateRenderedItemsRange( - state: FluidVirtualScrollState, - itemCount: number, - startAt: number, -): { renderedItemsRangeStart: number; renderedItemsRangeEnd: number } { - // Index of last item to add to the rendered items - const newItemsEndIndex = startAt + itemCount; - let { renderedItemsRangeStart, renderedItemsRangeEnd } = state; - - // If the index of the first item to render is smaller than the currently - // first rendered item's index (items are prepended), set the range's - // start index to the new startAt index - if ( - state.renderedItemsRangeStart === -1 || - startAt < state.renderedItemsRangeStart - ) { - renderedItemsRangeStart = Math.max(0, startAt); - } - - // If the index of the last item to render is bigger than the currently - // last rendered item's index (items are appended), set the range's - // end index to the new end index - if (newItemsEndIndex > state.renderedItemsRangeEnd) { - renderedItemsRangeEnd = - newItemsEndIndex > state.itemsCount - 1 - ? state.itemsCount - 1 - : newItemsEndIndex; - } - - return { renderedItemsRangeStart, renderedItemsRangeEnd }; -} - -/** - * @internal Calculates the indices of the first and last item to be observed - * @returns Index of first and last item to observe - */ -function calculateObservedItemsIndices( - state: FluidVirtualScrollState, -): { - bufferStartObservedItemIndex: number; - bufferEndObservedItemIndex: number; -} { - // No need to observe anything since there are not enough items to scroll virtually - if (state.itemsCount <= renderedItemsCount(state)) { - return { - bufferStartObservedItemIndex: -1, - bufferEndObservedItemIndex: -1, - }; - } - - // Last item of the list is rendered, no need to observe the end of the list - // Observe the start of the list to adjust the buffer when scrolling towards the start - if (state.renderedItemsRangeEnd === state.itemsCount - 1) { - return { - bufferStartObservedItemIndex: - state.renderedItemsRangeEnd - - state.initialBatches * state.itemsBatchSize - - Math.floor(state.itemsBufferSize * 0.5), - bufferEndObservedItemIndex: -1, - }; - } - - // First item of the list is rendered, no need to observe the start of the list - // Observe the end of the list to adjust the buffer when scrolling towards the end - if (state.startItemsBufferSize < state.itemsBufferSize) { - return { - bufferStartObservedItemIndex: -1, - bufferEndObservedItemIndex: - state.renderedItemsRangeEnd - Math.floor(state.itemsBufferSize * 0.5), - }; - } - - // Observe start and end of the rendered items - const bufferEndObservedItemIndex = - state.renderedItemsRangeEnd - Math.floor(state.itemsBufferSize * 0.5); - - return { - bufferStartObservedItemIndex: - bufferEndObservedItemIndex - - state.initialBatches * state.itemsBatchSize - - state.itemsBufferSize, - bufferEndObservedItemIndex, - }; -} - -/** @internal Number of currently rendered items */ -function renderedItemsCount(state: FluidVirtualScrollState): number { - return state.renderedItemsRangeEnd - state.renderedItemsRangeStart + 1; -} diff --git a/libs/fluid-elements/virtual-scroll-container/tsconfig.json b/libs/fluid-elements/virtual-scroll-container/tsconfig.json deleted file mode 100644 index 667a3463d1..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/fluid-elements/virtual-scroll-container/tsconfig.lib.json b/libs/fluid-elements/virtual-scroll-container/tsconfig.lib.json deleted file mode 100644 index ab70c726d1..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/tsconfig.lib.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "allowSyntheticDefaultImports": true, - "target": "es2015", - "declaration": true, - "inlineSources": true, - "moduleResolution": "node", - "types": ["node"], - "lib": ["dom", "es2018"] - }, - "exclude": ["**/*.spec.ts"], - "include": ["**/*.ts"] -} diff --git a/libs/fluid-elements/virtual-scroll-container/tsconfig.spec.json b/libs/fluid-elements/virtual-scroll-container/tsconfig.spec.json deleted file mode 100644 index cf5206502e..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "allowJs": true, - "types": ["jest", "node"], - "target": "es2015", - "lib": ["dom", "es2018"] - }, - "include": [ - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.spec.js", - "**/*.spec.jsx", - "**/*.d.ts" - ] -} diff --git a/libs/fluid-elements/virtual-scroll-container/tslint.json b/libs/fluid-elements/virtual-scroll-container/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/fluid-elements/virtual-scroll-container/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/shared/design-system/interfaces/src/index.ts b/libs/shared/design-system/interfaces/src/index.ts index 54c5161667..1f99c31cae 100644 --- a/libs/shared/design-system/interfaces/src/index.ts +++ b/libs/shared/design-system/interfaces/src/index.ts @@ -14,8 +14,5 @@ * limitations under the License. */ -export * from './lib/next-definitions'; -export * from './lib/design-tokens-definitions'; - -// Legacy Barista interfaces +// Barista interfaces export * from './lib/barista'; diff --git a/libs/shared/design-system/interfaces/src/lib/design-tokens-definitions.ts b/libs/shared/design-system/interfaces/src/lib/design-tokens-definitions.ts deleted file mode 100644 index 032274be74..0000000000 --- a/libs/shared/design-system/interfaces/src/lib/design-tokens-definitions.ts +++ /dev/null @@ -1,112 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** Preliminary interface for the source of a generated palette. */ -export interface FluidPaletteSource { - aliases: FluidPaletteSourceAlias[]; - meta: any; -} - -export type FluidPaletteColorspace = - | 'CAM02' - | 'HSLuv' - | 'LCH' - | 'LAB' - | 'HSL' - | 'HSV' - | 'RGB'; - -export interface FluidPaletteSourceAlias { - /** Root name of the alias. */ - name: string; - /** Key color(s) on which the calculations are based on. */ - keyColor: string | string[]; - /** Base color used to calculate the contrast ratios to. */ - baseColor: string; - /** Type of calculations that should be used. Currently only adobe-leonardo is available. */ - type: 'adobe-leonardo' | undefined; - /** Colorspace to use */ - colorspace: FluidPaletteColorspace; - /** List of shades that should be generated. */ - shades: FluidPaletteSourceShade[]; - /** Function easing options */ - generationOptions?: FluidPaletteGenerationOptions; - /** The theme this palette belongs to */ - theme: string; -} - -/** Definition for a shade of color */ -export interface FluidPaletteSourceShade { - /** Name of the shade. */ - name: string; - /** Target contrast ratio level. */ - ratio: number; - /** Comment for this particular alias. */ - comment: string; - /** Output alias name. */ - aliasName: string; -} - -export interface FluidPaletteAlias { - [aliasName: string]: { - value: string; - comment?: string; - originalRatio?: number; - }; -} - -/** Preliminary interface for alias typings. */ -export interface FluidPaletteAliases { - aliases: FluidPaletteAlias; - global: { - type: string; - category: string; - }; -} - -export type FluidEasingType = - | 'ease-in' - | 'ease-out' - | 'ease-in-out-quad' - | 'ease-in-out-cubic' - | 'ease-in-expo' - | 'ease-out-expo' - | 'ease-in-out-expo'; - -/** Data required for automated palette generation */ -export interface FluidPaletteGenerationOptions { - /** Easing type for the contrast values under the base contrast */ - lowerEasing: FluidEasingType; - /** Easing type for the contrast values above the base contrast */ - upperEasing: FluidEasingType; - /** Easing exponent for the contrast values under the base contrast */ - lowerExponent: number; - /** Easing exponent for the contrast values above the base contrast */ - upperExponent: number; - /** Middle contrast value used for generating the base color */ - baseContrast: number; - /** Minimum contrast value */ - minContrast: number; - /** Maximum contrast value */ - maxContrast: number; - /** Whether these generation options are used globally for a theme */ - globalType?: boolean; -} - -/** Simple generic key-value design token */ -export interface FluidKeyValueTokens { - [name: string]: string; -} diff --git a/libs/shared/design-system/interfaces/src/lib/next-definitions.ts b/libs/shared/design-system/interfaces/src/lib/next-definitions.ts deleted file mode 100644 index 77ce6d032d..0000000000 --- a/libs/shared/design-system/interfaces/src/lib/next-definitions.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export interface DsPage { - content: string; - group: string; - section: string; -} - -export enum NextContentType { - NextPages = 'nextpages', -} diff --git a/libs/shared/design-tokens/BUILD.bazel b/libs/shared/design-tokens/BUILD.bazel deleted file mode 100755 index 37ec877934..0000000000 --- a/libs/shared/design-tokens/BUILD.bazel +++ /dev/null @@ -1,14 +0,0 @@ -load("@npm//@bazel/typescript:index.bzl", "ts_library") - -package(default_visibility = ["//:__subpackages__"]) - -ts_library( - name = "design-tokens", - srcs = glob(["generated/**/*.ts"]), - module_name = "@dynatrace/fluid-design-tokens", - module_root = "generated", - tsconfig = "//:tsconfig.base.json", - deps = [ - "@npm//tslib", - ], -) diff --git a/libs/shared/design-tokens/generated/aliases/base-color.alias.json b/libs/shared/design-tokens/generated/aliases/base-color.alias.json deleted file mode 100644 index e0922301a4..0000000000 --- a/libs/shared/design-tokens/generated/aliases/base-color.alias.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "aliases": { - "color-abyss-background": "#111216", - "color-abyss-maxcontrast": "#fafbfb", - "color-surface-background": "#fafbfb", - "color-surface-maxcontrast": "#111216" - } -} diff --git a/libs/shared/design-tokens/generated/aliases/font.alias.json b/libs/shared/design-tokens/generated/aliases/font.alias.json deleted file mode 100644 index b6370c13b8..0000000000 --- a/libs/shared/design-tokens/generated/aliases/font.alias.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "aliases": { - "font-family-sans-serif": "Roboto, Helvetica, sans-serif", - "font-family-serif": "serif", - "font-family-monospaced": "monospace" - } -} diff --git a/libs/shared/design-tokens/generated/aliases/palette-source.alias.json b/libs/shared/design-tokens/generated/aliases/palette-source.alias.json deleted file mode 100644 index c305fccb24..0000000000 --- a/libs/shared/design-tokens/generated/aliases/palette-source.alias.json +++ /dev/null @@ -1,988 +0,0 @@ -{ - "aliases": [ - { - "name": "primary", - "theme": "abyss", - "keyColor": "#3481F4", - "baseColor": "#111216", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 2, - "comment": "abyss primary, contrast 70", - "aliasName": "color-abyss-primary-70" - }, - { - "name": "contrast-80", - "ratio": 3, - "comment": "abyss primary, contrast 80", - "aliasName": "color-abyss-primary-80" - }, - { - "name": "contrast-90", - "ratio": 4, - "comment": "abyss primary, contrast 90", - "aliasName": "color-abyss-primary-90" - }, - { - "name": "contrast-100", - "ratio": 5, - "comment": "abyss primary, contrast 100", - "aliasName": "color-abyss-primary-100" - }, - { - "name": "contrast-110", - "ratio": 7, - "comment": "abyss primary, contrast 110", - "aliasName": "color-abyss-primary-110" - }, - { - "name": "contrast-120", - "ratio": 9.5, - "comment": "abyss primary, contrast 120", - "aliasName": "color-abyss-primary-120" - }, - { - "name": "contrast-130", - "ratio": 12.5, - "comment": "abyss primary, contrast 130", - "aliasName": "color-abyss-primary-130" - } - ] - }, - { - "name": "positive", - "theme": "abyss", - "keyColor": "#36C687", - "baseColor": "#111216", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 2.5, - "comment": "abyss positive, contrast 70", - "aliasName": "color-abyss-positive-70" - }, - { - "name": "contrast-80", - "ratio": 4.5, - "comment": "abyss positive, contrast 80", - "aliasName": "color-abyss-positive-80" - }, - { - "name": "contrast-90", - "ratio": 6.5, - "comment": "abyss positive, contrast 90", - "aliasName": "color-abyss-positive-90" - }, - { - "name": "contrast-100", - "ratio": 8.5, - "comment": "abyss positive, contrast 100", - "aliasName": "color-abyss-positive-100" - }, - { - "name": "contrast-110", - "ratio": 10.5, - "comment": "abyss positive, contrast 110", - "aliasName": "color-abyss-positive-110" - }, - { - "name": "contrast-120", - "ratio": 13, - "comment": "abyss positive, contrast 120", - "aliasName": "color-abyss-positive-120" - }, - { - "name": "contrast-130", - "ratio": 16, - "comment": "abyss positive, contrast 130", - "aliasName": "color-abyss-positive-130" - } - ] - }, - { - "name": "warning", - "theme": "abyss", - "keyColor": "#FDC300", - "baseColor": "#111216", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 4, - "comment": "abyss warning, contrast 70", - "aliasName": "color-abyss-warning-70" - }, - { - "name": "contrast-80", - "ratio": 6.5, - "comment": "abyss warning, contrast 80", - "aliasName": "color-abyss-warning-80" - }, - { - "name": "contrast-90", - "ratio": 9, - "comment": "abyss warning, contrast 90", - "aliasName": "color-abyss-warning-90" - }, - { - "name": "contrast-100", - "ratio": 11.5, - "comment": "abyss warning, contrast 100", - "aliasName": "color-abyss-warning-100" - }, - { - "name": "contrast-110", - "ratio": 13.5, - "comment": "abyss warning, contrast 110", - "aliasName": "color-abyss-warning-110" - }, - { - "name": "contrast-120", - "ratio": 15.5, - "comment": "abyss warning, contrast 120", - "aliasName": "color-abyss-warning-120" - }, - { - "name": "contrast-130", - "ratio": 16.5, - "comment": "abyss warning, contrast 130", - "aliasName": "color-abyss-warning-130" - } - ] - }, - { - "name": "error", - "theme": "abyss", - "keyColor": "#F43D5A", - "baseColor": "#111216", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 2, - "comment": "abyss error, contrast 70", - "aliasName": "color-abyss-error-70" - }, - { - "name": "contrast-80", - "ratio": 3, - "comment": "abyss error, contrast 80", - "aliasName": "color-abyss-error-80" - }, - { - "name": "contrast-90", - "ratio": 4, - "comment": "abyss error, contrast 90", - "aliasName": "color-abyss-error-90" - }, - { - "name": "contrast-100", - "ratio": 5, - "comment": "abyss error, contrast 100", - "aliasName": "color-abyss-error-100" - }, - { - "name": "contrast-110", - "ratio": 7, - "comment": "abyss error, contrast 110", - "aliasName": "color-abyss-error-110" - }, - { - "name": "contrast-120", - "ratio": 9.5, - "comment": "abyss error, contrast 120", - "aliasName": "color-abyss-error-120" - }, - { - "name": "contrast-130", - "ratio": 12.5, - "comment": "abyss error, contrast 130", - "aliasName": "color-abyss-error-130" - } - ] - }, - { - "name": "nasty-orange", - "theme": "abyss", - "keyColor": "#FD8C30", - "baseColor": "#111216", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 2, - "comment": "abyss nasty-orange, contrast 70", - "aliasName": "color-abyss-nasty-orange-70" - }, - { - "name": "contrast-80", - "ratio": 4, - "comment": "abyss nasty-orange, contrast 80", - "aliasName": "color-abyss-nasty-orange-80" - }, - { - "name": "contrast-90", - "ratio": 6, - "comment": "abyss nasty-orange, contrast 90", - "aliasName": "color-abyss-nasty-orange-90" - }, - { - "name": "contrast-100", - "ratio": 8, - "comment": "abyss nasty-orange, contrast 100", - "aliasName": "color-abyss-nasty-orange-100" - }, - { - "name": "contrast-110", - "ratio": 10, - "comment": "abyss nasty-orange, contrast 110", - "aliasName": "color-abyss-nasty-orange-110" - }, - { - "name": "contrast-120", - "ratio": 12.5, - "comment": "abyss nasty-orange, contrast 120", - "aliasName": "color-abyss-nasty-orange-120" - }, - { - "name": "contrast-130", - "ratio": 15.5, - "comment": "abyss nasty-orange, contrast 130", - "aliasName": "color-abyss-nasty-orange-130" - } - ] - }, - { - "name": "hot-pink", - "theme": "abyss", - "keyColor": "#E13093", - "baseColor": "#111216", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.5, - "comment": "abyss hot-pink, contrast 70", - "aliasName": "color-abyss-hot-pink-70" - }, - { - "name": "contrast-80", - "ratio": 2.5, - "comment": "abyss hot-pink, contrast 80", - "aliasName": "color-abyss-hot-pink-80" - }, - { - "name": "contrast-90", - "ratio": 3.5, - "comment": "abyss hot-pink, contrast 90", - "aliasName": "color-abyss-hot-pink-90" - }, - { - "name": "contrast-100", - "ratio": 4.5, - "comment": "abyss hot-pink, contrast 100", - "aliasName": "color-abyss-hot-pink-100" - }, - { - "name": "contrast-110", - "ratio": 6.5, - "comment": "abyss hot-pink, contrast 110", - "aliasName": "color-abyss-hot-pink-110" - }, - { - "name": "contrast-120", - "ratio": 9, - "comment": "abyss hot-pink, contrast 120", - "aliasName": "color-abyss-hot-pink-120" - }, - { - "name": "contrast-130", - "ratio": 12, - "comment": "abyss hot-pink, contrast 130", - "aliasName": "color-abyss-hot-pink-130" - } - ] - }, - { - "name": "soylent-green", - "theme": "abyss", - "keyColor": "#3CB5B5", - "baseColor": "#111216", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 2.5, - "comment": "abyss soylent-green, contrast 70", - "aliasName": "color-abyss-soylent-green-70" - }, - { - "name": "contrast-80", - "ratio": 4.5, - "comment": "abyss soylent-green, contrast 80", - "aliasName": "color-abyss-soylent-green-80" - }, - { - "name": "contrast-90", - "ratio": 5.5, - "comment": "abyss soylent-green, contrast 90", - "aliasName": "color-abyss-soylent-green-90" - }, - { - "name": "contrast-100", - "ratio": 7.5, - "comment": "abyss soylent-green, contrast 100", - "aliasName": "color-abyss-soylent-green-100" - }, - { - "name": "contrast-110", - "ratio": 9.5, - "comment": "abyss soylent-green, contrast 110", - "aliasName": "color-abyss-soylent-green-110" - }, - { - "name": "contrast-120", - "ratio": 12, - "comment": "abyss soylent-green, contrast 120", - "aliasName": "color-abyss-soylent-green-120" - }, - { - "name": "contrast-130", - "ratio": 15, - "comment": "abyss soylent-green, contrast 130", - "aliasName": "color-abyss-soylent-green-130" - } - ] - }, - { - "name": "naughty-purple", - "theme": "abyss", - "keyColor": "#AE80C9", - "baseColor": "#111216", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.5, - "comment": "abyss naughty-purple, contrast 70", - "aliasName": "color-abyss-naughty-purple-70" - }, - { - "name": "contrast-80", - "ratio": 3, - "comment": "abyss naughty-purple, contrast 80", - "aliasName": "color-abyss-naughty-purple-80" - }, - { - "name": "contrast-90", - "ratio": 4.5, - "comment": "abyss naughty-purple, contrast 90", - "aliasName": "color-abyss-naughty-purple-90" - }, - { - "name": "contrast-100", - "ratio": 6, - "comment": "abyss naughty-purple, contrast 100", - "aliasName": "color-abyss-naughty-purple-100" - }, - { - "name": "contrast-110", - "ratio": 8, - "comment": "abyss naughty-purple, contrast 110", - "aliasName": "color-abyss-naughty-purple-110" - }, - { - "name": "contrast-120", - "ratio": 10.5, - "comment": "abyss naughty-purple, contrast 120", - "aliasName": "color-abyss-naughty-purple-120" - }, - { - "name": "contrast-130", - "ratio": 13.5, - "comment": "abyss naughty-purple, contrast 130", - "aliasName": "color-abyss-naughty-purple-130" - } - ] - }, - { - "name": "neutral", - "theme": "abyss", - "keyColor": "#747B90", - "baseColor": "#111216", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-50", - "ratio": 1.1, - "comment": "abyss neutral, contrast 50", - "aliasName": "color-abyss-neutral-50" - }, - { - "name": "contrast-60", - "ratio": 1.2, - "comment": "abyss neutral, contrast 60", - "aliasName": "color-abyss-neutral-60" - }, - { - "name": "contrast-70", - "ratio": 1.3, - "comment": "abyss neutral, contrast 70", - "aliasName": "color-abyss-neutral-70" - }, - { - "name": "contrast-80", - "ratio": 1.6, - "comment": "abyss neutral, contrast 80", - "aliasName": "color-abyss-neutral-80" - }, - { - "name": "contrast-90", - "ratio": 2.5, - "comment": "abyss neutral, contrast 90", - "aliasName": "color-abyss-neutral-90" - }, - { - "name": "contrast-100", - "ratio": 4.5, - "comment": "abyss neutral, contrast 100", - "aliasName": "color-abyss-neutral-100" - }, - { - "name": "contrast-110", - "ratio": 7, - "comment": "abyss neutral, contrast 110", - "aliasName": "color-abyss-neutral-110" - }, - { - "name": "contrast-120", - "ratio": 9.5, - "comment": "abyss neutral, contrast 120", - "aliasName": "color-abyss-neutral-120" - }, - { - "name": "contrast-130", - "ratio": 12.2, - "comment": "abyss neutral, contrast 130", - "aliasName": "color-abyss-neutral-130" - }, - { - "name": "contrast-140", - "ratio": 15, - "comment": "abyss neutral, contrast 140", - "aliasName": "color-abyss-neutral-140" - }, - { - "name": "contrast-150", - "ratio": 18, - "comment": "abyss neutral, contrast 150", - "aliasName": "color-abyss-neutral-150" - } - ] - }, - { - "name": "primary", - "theme": "surface", - "keyColor": "#0B55C4", - "baseColor": "#FAFBFB", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.8, - "comment": "surface primary, contrast 70", - "aliasName": "color-surface-primary-70" - }, - { - "name": "contrast-80", - "ratio": 2.8, - "comment": "surface primary, contrast 80", - "aliasName": "color-surface-primary-80" - }, - { - "name": "contrast-90", - "ratio": 4.5, - "comment": "surface primary, contrast 90", - "aliasName": "color-surface-primary-90" - }, - { - "name": "contrast-100", - "ratio": 6.5, - "comment": "surface primary, contrast 100", - "aliasName": "color-surface-primary-100" - }, - { - "name": "contrast-110", - "ratio": 8.5, - "comment": "surface primary, contrast 110", - "aliasName": "color-surface-primary-110" - }, - { - "name": "contrast-120", - "ratio": 11.5, - "comment": "surface primary, contrast 120", - "aliasName": "color-surface-primary-120" - }, - { - "name": "contrast-130", - "ratio": 14.5, - "comment": "surface primary, contrast 130", - "aliasName": "color-surface-primary-130" - } - ] - }, - { - "name": "positive", - "theme": "surface", - "keyColor": "#207550", - "baseColor": "#fafbfb", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.3, - "comment": "surface positive, contrast 70", - "aliasName": "color-surface-positive-70" - }, - { - "name": "contrast-80", - "ratio": 1.9, - "comment": "surface positive, contrast 80", - "aliasName": "color-surface-positive-80" - }, - { - "name": "contrast-90", - "ratio": 3.5, - "comment": "surface positive, contrast 90", - "aliasName": "color-surface-positive-90" - }, - { - "name": "contrast-100", - "ratio": 5.5, - "comment": "surface positive, contrast 100", - "aliasName": "color-surface-positive-100" - }, - { - "name": "contrast-110", - "ratio": 7.5, - "comment": "surface positive, contrast 110", - "aliasName": "color-surface-positive-110" - }, - { - "name": "contrast-120", - "ratio": 10.5, - "comment": "surface positive, contrast 120", - "aliasName": "color-surface-positive-120" - }, - { - "name": "contrast-130", - "ratio": 13.5, - "comment": "surface positive, contrast 130", - "aliasName": "color-surface-positive-130" - } - ] - }, - { - "name": "warning", - "theme": "surface", - "keyColor": "#906E00", - "baseColor": "#FAFBFB", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.12, - "comment": "surface warning, contrast 70", - "aliasName": "color-surface-warning-70" - }, - { - "name": "contrast-80", - "ratio": 1.35, - "comment": "surface warning, contrast 80", - "aliasName": "color-surface-warning-80" - }, - { - "name": "contrast-90", - "ratio": 2, - "comment": "surface warning, contrast 90", - "aliasName": "color-surface-warning-90" - }, - { - "name": "contrast-100", - "ratio": 4.6, - "comment": "surface warning, contrast 100", - "aliasName": "color-surface-warning-100" - }, - { - "name": "contrast-110", - "ratio": 6.5, - "comment": "surface warning, contrast 110", - "aliasName": "color-surface-warning-110" - }, - { - "name": "contrast-120", - "ratio": 9.5, - "comment": "surface warning, contrast 120", - "aliasName": "color-surface-warning-120" - }, - { - "name": "contrast-130", - "ratio": 12.4, - "comment": "surface warning, contrast 130", - "aliasName": "color-surface-warning-130" - } - ] - }, - { - "name": "error", - "theme": "surface", - "keyColor": "#C20B29", - "baseColor": "#FAFBFB", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.5, - "comment": "surface error, contrast 70", - "aliasName": "color-surface-error-70" - }, - { - "name": "contrast-80", - "ratio": 2.2, - "comment": "surface error, contrast 80", - "aliasName": "color-surface-error-80" - }, - { - "name": "contrast-90", - "ratio": 3.5, - "comment": "surface error, contrast 90", - "aliasName": "color-surface-error-90" - }, - { - "name": "contrast-100", - "ratio": 6, - "comment": "surface error, contrast 100", - "aliasName": "color-surface-error-100" - }, - { - "name": "contrast-110", - "ratio": 8, - "comment": "surface error, contrast 110", - "aliasName": "color-surface-error-110" - }, - { - "name": "contrast-120", - "ratio": 11, - "comment": "surface error, contrast 120", - "aliasName": "color-surface-error-120" - }, - { - "name": "contrast-130", - "ratio": 14, - "comment": "surface error, contrast 130", - "aliasName": "color-surface-error-130" - } - ] - }, - { - "name": "nasty-orange", - "theme": "surface", - "keyColor": "#BE5602", - "baseColor": "#FAFBFB", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.35, - "comment": "surface nasty-orange, contrast 70", - "aliasName": "color-surface-nasty-orange-70" - }, - { - "name": "contrast-80", - "ratio": 1.8, - "comment": "surface nasty-orange, contrast 80", - "aliasName": "color-surface-nasty-orange-80" - }, - { - "name": "contrast-90", - "ratio": 3, - "comment": "surface nasty-orange, contrast 90", - "aliasName": "color-surface-nasty-orange-90" - }, - { - "name": "contrast-100", - "ratio": 4.5, - "comment": "surface nasty-orange, contrast 100", - "aliasName": "color-surface-nasty-orange-100" - }, - { - "name": "contrast-110", - "ratio": 7, - "comment": "surface nasty-orange, contrast 110", - "aliasName": "color-surface-nasty-orange-110" - }, - { - "name": "contrast-120", - "ratio": 10, - "comment": "surface nasty-orange, contrast 120", - "aliasName": "color-surface-nasty-orange-120" - }, - { - "name": "contrast-130", - "ratio": 13, - "comment": "surface nasty-orange, contrast 130", - "aliasName": "color-surface-nasty-orange-130" - } - ] - }, - { - "name": "hot-pink", - "theme": "surface", - "keyColor": "#CC1D7F", - "baseColor": "#FAFBFB", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.5, - "comment": "surface hot-pink, contrast 70", - "aliasName": "color-surface-hot-pink-70" - }, - { - "name": "contrast-80", - "ratio": 2.2, - "comment": "surface hot-pink, contrast 80", - "aliasName": "color-surface-hot-pink-80" - }, - { - "name": "contrast-90", - "ratio": 3, - "comment": "surface hot-pink, contrast 90", - "aliasName": "color-surface-hot-pink-90" - }, - { - "name": "contrast-100", - "ratio": 5, - "comment": "surface hot-pink, contrast 100", - "aliasName": "color-surface-hot-pink-100" - }, - { - "name": "contrast-110", - "ratio": 7, - "comment": "surface hot-pink, contrast 110", - "aliasName": "color-surface-hot-pink-110" - }, - { - "name": "contrast-120", - "ratio": 10, - "comment": "surface hot-pink, contrast 120", - "aliasName": "color-surface-hot-pink-120" - }, - { - "name": "contrast-130", - "ratio": 13, - "comment": "surface hot-pink, contrast 130", - "aliasName": "color-surface-hot-pink-130" - } - ] - }, - { - "name": "soylent-green", - "theme": "surface", - "keyColor": "#287878", - "baseColor": "#fafbfb", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.5, - "comment": "surface soylent-green, contrast 70", - "aliasName": "color-surface-soylent-green-70" - }, - { - "name": "contrast-80", - "ratio": 2, - "comment": "surface soylent-green, contrast 80", - "aliasName": "color-surface-soylent-green-80" - }, - { - "name": "contrast-90", - "ratio": 3, - "comment": "surface soylent-green, contrast 90", - "aliasName": "color-surface-soylent-green-90" - }, - { - "name": "contrast-100", - "ratio": 5, - "comment": "surface soylent-green, contrast 100", - "aliasName": "color-surface-soylent-green-100" - }, - { - "name": "contrast-110", - "ratio": 7, - "comment": "surface soylent-green, contrast 110", - "aliasName": "color-surface-soylent-green-110" - }, - { - "name": "contrast-120", - "ratio": 10, - "comment": "surface soylent-green, contrast 120", - "aliasName": "color-surface-soylent-green-120" - }, - { - "name": "contrast-130", - "ratio": 13, - "comment": "surface soylent-green, contrast 130", - "aliasName": "color-surface-soylent-green-130" - } - ] - }, - { - "name": "naughty-purple", - "theme": "surface", - "keyColor": "#9151B5", - "baseColor": "#FAFBFB", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-70", - "ratio": 1.5, - "comment": "surface naughty-purple, contrast 70", - "aliasName": "color-surface-naughty-purple-70" - }, - { - "name": "contrast-80", - "ratio": 3, - "comment": "surface naughty-purple, contrast 80", - "aliasName": "color-surface-naughty-purple-80" - }, - { - "name": "contrast-90", - "ratio": 4, - "comment": "surface naughty-purple, contrast 90", - "aliasName": "color-surface-naughty-purple-90" - }, - { - "name": "contrast-100", - "ratio": 5, - "comment": "surface naughty-purple, contrast 100", - "aliasName": "color-surface-naughty-purple-100" - }, - { - "name": "contrast-110", - "ratio": 7, - "comment": "surface naughty-purple, contrast 110", - "aliasName": "color-surface-naughty-purple-110" - }, - { - "name": "contrast-120", - "ratio": 10, - "comment": "surface naughty-purple, contrast 120", - "aliasName": "color-surface-naughty-purple-120" - }, - { - "name": "contrast-130", - "ratio": 13, - "comment": "surface naughty-purple, contrast 130", - "aliasName": "color-surface-naughty-purple-130" - } - ] - }, - { - "name": "neutral", - "theme": "surface", - "keyColor": "#747B90", - "baseColor": "#FAFBFB", - "type": "adobe-leonardo", - "colorspace": "HSL", - "shades": [ - { - "name": "contrast-50", - "ratio": 1.1, - "comment": "surface neutral, contrast 50", - "aliasName": "color-surface-neutral-50" - }, - { - "name": "contrast-60", - "ratio": 1.2, - "comment": "surface neutral, contrast 60", - "aliasName": "color-surface-neutral-60" - }, - { - "name": "contrast-70", - "ratio": 1.3, - "comment": "surface neutral, contrast 70", - "aliasName": "color-surface-neutral-70" - }, - { - "name": "contrast-80", - "ratio": 1.6, - "comment": "surface neutral, contrast 80", - "aliasName": "color-surface-neutral-80" - }, - { - "name": "contrast-90", - "ratio": 2.5, - "comment": "surface neutral, contrast 90", - "aliasName": "color-surface-neutral-90" - }, - { - "name": "contrast-100", - "ratio": 4.5, - "comment": "surface neutral, contrast 100", - "aliasName": "color-surface-neutral-100" - }, - { - "name": "contrast-110", - "ratio": 7, - "comment": "surface neutral, contrast 110", - "aliasName": "color-surface-neutral-110" - }, - { - "name": "contrast-120", - "ratio": 9.5, - "comment": "surface neutral, contrast 120", - "aliasName": "color-surface-neutral-120" - }, - { - "name": "contrast-130", - "ratio": 12.2, - "comment": "surface neutral, contrast 130", - "aliasName": "color-surface-neutral-130" - }, - { - "name": "contrast-140", - "ratio": 15, - "comment": "surface neutral, contrast 140", - "aliasName": "color-surface-neutral-140" - }, - { - "name": "contrast-150", - "ratio": 18, - "comment": "surface neutral, contrast 150", - "aliasName": "color-surface-neutral-150" - } - ] - } - ] -} diff --git a/libs/shared/design-tokens/generated/aliases/palette.alias.json b/libs/shared/design-tokens/generated/aliases/palette.alias.json deleted file mode 100644 index 9c0e2038dc..0000000000 --- a/libs/shared/design-tokens/generated/aliases/palette.alias.json +++ /dev/null @@ -1,675 +0,0 @@ -{ - "aliases": { - "color-abyss-primary-70": { - "value": "#084298", - "comment": "abyss primary, contrast 70", - "originalRatio": 2 - }, - "color-abyss-primary-80": { - "value": "#0b5ace", - "comment": "abyss primary, contrast 80", - "originalRatio": 3 - }, - "color-abyss-primary-90": { - "value": "#136cf2", - "comment": "abyss primary, contrast 90", - "originalRatio": 4 - }, - "color-abyss-primary-100": { - "value": "#3582f4", - "comment": "abyss primary, contrast 100", - "originalRatio": 5 - }, - "color-abyss-primary-110": { - "value": "#659ff7", - "comment": "abyss primary, contrast 110", - "originalRatio": 7 - }, - "color-abyss-primary-120": { - "value": "#91bbf9", - "comment": "abyss primary, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-primary-130": { - "value": "#bbd5fb", - "comment": "abyss primary, contrast 130", - "originalRatio": 12.5 - }, - "color-abyss-positive-70": { - "value": "#1a6142", - "comment": "abyss positive, contrast 70", - "originalRatio": 2.5 - }, - "color-abyss-positive-80": { - "value": "#268d60", - "comment": "abyss positive, contrast 80", - "originalRatio": 4.5 - }, - "color-abyss-positive-90": { - "value": "#2fad76", - "comment": "abyss positive, contrast 90", - "originalRatio": 6.5 - }, - "color-abyss-positive-100": { - "value": "#36c587", - "comment": "abyss positive, contrast 100", - "originalRatio": 8.5 - }, - "color-abyss-positive-110": { - "value": "#69d6a7", - "comment": "abyss positive, contrast 110", - "originalRatio": 10.5 - }, - "color-abyss-positive-120": { - "value": "#a2e6c8", - "comment": "abyss positive, contrast 120", - "originalRatio": 13 - }, - "color-abyss-positive-130": { - "value": "#d6f4e7", - "comment": "abyss positive, contrast 130", - "originalRatio": 16 - }, - "color-abyss-warning-70": { - "value": "#917000", - "comment": "abyss warning, contrast 70", - "originalRatio": 4 - }, - "color-abyss-warning-80": { - "value": "#bd9200", - "comment": "abyss warning, contrast 80", - "originalRatio": 6.5 - }, - "color-abyss-warning-90": { - "value": "#e0ad00", - "comment": "abyss warning, contrast 90", - "originalRatio": 9 - }, - "color-abyss-warning-100": { - "value": "#fcc300", - "comment": "abyss warning, contrast 100", - "originalRatio": 11.5 - }, - "color-abyss-warning-110": { - "value": "#ffd752", - "comment": "abyss warning, contrast 110", - "originalRatio": 13.5 - }, - "color-abyss-warning-120": { - "value": "#ffe99d", - "comment": "abyss warning, contrast 120", - "originalRatio": 15.5 - }, - "color-abyss-warning-130": { - "value": "#fff0bf", - "comment": "abyss warning, contrast 130", - "originalRatio": 16.5 - }, - "color-abyss-error-70": { - "value": "#90081e", - "comment": "abyss error, contrast 70", - "originalRatio": 2 - }, - "color-abyss-error-80": { - "value": "#c20b28", - "comment": "abyss error, contrast 80", - "originalRatio": 3 - }, - "color-abyss-error-90": { - "value": "#e60d30", - "comment": "abyss error, contrast 90", - "originalRatio": 4 - }, - "color-abyss-error-100": { - "value": "#f43b58", - "comment": "abyss error, contrast 100", - "originalRatio": 5 - }, - "color-abyss-error-110": { - "value": "#f77589", - "comment": "abyss error, contrast 110", - "originalRatio": 7 - }, - "color-abyss-error-120": { - "value": "#fa9fae", - "comment": "abyss error, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-error-130": { - "value": "#fcc6ce", - "comment": "abyss error, contrast 130", - "originalRatio": 12.5 - }, - "color-abyss-nasty-orange-70": { - "value": "#743501", - "comment": "abyss nasty-orange, contrast 70", - "originalRatio": 2 - }, - "color-abyss-nasty-orange-80": { - "value": "#bc5602", - "comment": "abyss nasty-orange, contrast 80", - "originalRatio": 4 - }, - "color-abyss-nasty-orange-90": { - "value": "#ed6b02", - "comment": "abyss nasty-orange, contrast 90", - "originalRatio": 6 - }, - "color-abyss-nasty-orange-100": { - "value": "#fd8c30", - "comment": "abyss nasty-orange, contrast 100", - "originalRatio": 8 - }, - "color-abyss-nasty-orange-110": { - "value": "#feab67", - "comment": "abyss nasty-orange, contrast 110", - "originalRatio": 10 - }, - "color-abyss-nasty-orange-120": { - "value": "#fec89d", - "comment": "abyss nasty-orange, contrast 120", - "originalRatio": 12.5 - }, - "color-abyss-nasty-orange-130": { - "value": "#ffe6d1", - "comment": "abyss nasty-orange, contrast 130", - "originalRatio": 15.5 - }, - "color-abyss-hot-pink-70": { - "value": "#640f3f", - "comment": "abyss hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-hot-pink-80": { - "value": "#a01764", - "comment": "abyss hot-pink, contrast 80", - "originalRatio": 2.5 - }, - "color-abyss-hot-pink-90": { - "value": "#c81d7d", - "comment": "abyss hot-pink, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-hot-pink-100": { - "value": "#e13093", - "comment": "abyss hot-pink, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-hot-pink-110": { - "value": "#ea6db3", - "comment": "abyss hot-pink, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-hot-pink-120": { - "value": "#f098c9", - "comment": "abyss hot-pink, contrast 120", - "originalRatio": 9 - }, - "color-abyss-hot-pink-130": { - "value": "#f6c0de", - "comment": "abyss hot-pink, contrast 130", - "originalRatio": 12 - }, - "color-abyss-soylent-green-70": { - "value": "#1f5d5d", - "comment": "abyss soylent-green, contrast 70", - "originalRatio": 2.5 - }, - "color-abyss-soylent-green-80": { - "value": "#2d8989", - "comment": "abyss soylent-green, contrast 80", - "originalRatio": 4.5 - }, - "color-abyss-soylent-green-90": { - "value": "#339a9a", - "comment": "abyss soylent-green, contrast 90", - "originalRatio": 5.5 - }, - "color-abyss-soylent-green-100": { - "value": "#3cb5b5", - "comment": "abyss soylent-green, contrast 100", - "originalRatio": 7.5 - }, - "color-abyss-soylent-green-110": { - "value": "#5dc9c9", - "comment": "abyss soylent-green, contrast 110", - "originalRatio": 9.5 - }, - "color-abyss-soylent-green-120": { - "value": "#94dcdc", - "comment": "abyss soylent-green, contrast 120", - "originalRatio": 12 - }, - "color-abyss-soylent-green-130": { - "value": "#c9eded", - "comment": "abyss soylent-green, contrast 130", - "originalRatio": 15 - }, - "color-abyss-naughty-purple-70": { - "value": "#462658", - "comment": "abyss naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-naughty-purple-80": { - "value": "#8246a5", - "comment": "abyss naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-abyss-naughty-purple-90": { - "value": "#9d65be", - "comment": "abyss naughty-purple, contrast 90", - "originalRatio": 4.5 - }, - "color-abyss-naughty-purple-100": { - "value": "#ae80c9", - "comment": "abyss naughty-purple, contrast 100", - "originalRatio": 6 - }, - "color-abyss-naughty-purple-110": { - "value": "#c09cd5", - "comment": "abyss naughty-purple, contrast 110", - "originalRatio": 8 - }, - "color-abyss-naughty-purple-120": { - "value": "#d3b9e1", - "comment": "abyss naughty-purple, contrast 120", - "originalRatio": 10.5 - }, - "color-abyss-naughty-purple-130": { - "value": "#e5d6ed", - "comment": "abyss naughty-purple, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-neutral-50": { - "value": "#1a1c21", - "comment": "abyss neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-abyss-neutral-60": { - "value": "#21242a", - "comment": "abyss neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-abyss-neutral-70": { - "value": "#272a31", - "comment": "abyss neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-abyss-neutral-80": { - "value": "#343842", - "comment": "abyss neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-abyss-neutral-90": { - "value": "#505564", - "comment": "abyss neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-abyss-neutral-100": { - "value": "#757c91", - "comment": "abyss neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-neutral-110": { - "value": "#999ead", - "comment": "abyss neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-neutral-120": { - "value": "#b5b9c4", - "comment": "abyss neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-neutral-130": { - "value": "#ced1d8", - "comment": "abyss neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-abyss-neutral-140": { - "value": "#e5e6ea", - "comment": "abyss neutral, contrast 140", - "originalRatio": 15 - }, - "color-abyss-neutral-150": { - "value": "#fafbfb", - "comment": "abyss neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-primary-70": { - "value": "#9ac0f9", - "comment": "surface primary, contrast 70", - "originalRatio": 1.8 - }, - "color-surface-primary-80": { - "value": "#5998f6", - "comment": "surface primary, contrast 80", - "originalRatio": 2.8 - }, - "color-surface-primary-90": { - "value": "#156df2", - "comment": "surface primary, contrast 90", - "originalRatio": 4.5 - }, - "color-surface-primary-100": { - "value": "#0b55c5", - "comment": "surface primary, contrast 100", - "originalRatio": 6.5 - }, - "color-surface-primary-110": { - "value": "#0945a0", - "comment": "surface primary, contrast 110", - "originalRatio": 8.5 - }, - "color-surface-primary-120": { - "value": "#073477", - "comment": "surface primary, contrast 120", - "originalRatio": 11.5 - }, - "color-surface-primary-130": { - "value": "#052554", - "comment": "surface primary, contrast 130", - "originalRatio": 14.5 - }, - "color-surface-positive-70": { - "value": "#b1ead1", - "comment": "surface positive, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-positive-80": { - "value": "#4ecf96", - "comment": "surface positive, contrast 80", - "originalRatio": 1.9 - }, - "color-surface-positive-90": { - "value": "#2a9868", - "comment": "surface positive, contrast 90", - "originalRatio": 3.5 - }, - "color-surface-positive-100": { - "value": "#207450", - "comment": "surface positive, contrast 100", - "originalRatio": 5.5 - }, - "color-surface-positive-110": { - "value": "#1a5d40", - "comment": "surface positive, contrast 110", - "originalRatio": 7.5 - }, - "color-surface-positive-120": { - "value": "#134630", - "comment": "surface positive, contrast 120", - "originalRatio": 10.5 - }, - "color-surface-positive-130": { - "value": "#0e3223", - "comment": "surface positive, contrast 130", - "originalRatio": 13.5 - }, - "color-surface-warning-70": { - "value": "#ffedb2", - "comment": "surface warning, contrast 70", - "originalRatio": 1.12 - }, - "color-surface-warning-80": { - "value": "#ffd651", - "comment": "surface warning, contrast 80", - "originalRatio": 1.35 - }, - "color-surface-warning-90": { - "value": "#e2ac00", - "comment": "surface warning, contrast 90", - "originalRatio": 2 - }, - "color-surface-warning-100": { - "value": "#8f6e00", - "comment": "surface warning, contrast 100", - "originalRatio": 4.6 - }, - "color-surface-warning-110": { - "value": "#735700", - "comment": "surface warning, contrast 110", - "originalRatio": 6.5 - }, - "color-surface-warning-120": { - "value": "#544100", - "comment": "surface warning, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-warning-130": { - "value": "#3f3000", - "comment": "surface warning, contrast 130", - "originalRatio": 12.4 - }, - "color-surface-error-70": { - "value": "#fbc0ca", - "comment": "surface error, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-error-80": { - "value": "#f88b9d", - "comment": "surface error, contrast 80", - "originalRatio": 2.2 - }, - "color-surface-error-90": { - "value": "#f4425f", - "comment": "surface error, contrast 90", - "originalRatio": 3.5 - }, - "color-surface-error-100": { - "value": "#c20b29", - "comment": "surface error, contrast 100", - "originalRatio": 6 - }, - "color-surface-error-110": { - "value": "#9e0921", - "comment": "surface error, contrast 110", - "originalRatio": 8 - }, - "color-surface-error-120": { - "value": "#780719", - "comment": "surface error, contrast 120", - "originalRatio": 11 - }, - "color-surface-error-130": { - "value": "#590513", - "comment": "surface error, contrast 130", - "originalRatio": 14 - }, - "color-surface-nasty-orange-70": { - "value": "#fed2af", - "comment": "surface nasty-orange, contrast 70", - "originalRatio": 1.35 - }, - "color-surface-nasty-orange-80": { - "value": "#fdac69", - "comment": "surface nasty-orange, contrast 80", - "originalRatio": 1.8 - }, - "color-surface-nasty-orange-90": { - "value": "#ee6c03", - "comment": "surface nasty-orange, contrast 90", - "originalRatio": 3 - }, - "color-surface-nasty-orange-100": { - "value": "#be5602", - "comment": "surface nasty-orange, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-110": { - "value": "#8e4001", - "comment": "surface nasty-orange, contrast 110", - "originalRatio": 7 - }, - "color-surface-nasty-orange-120": { - "value": "#6a3001", - "comment": "surface nasty-orange, contrast 120", - "originalRatio": 10 - }, - "color-surface-nasty-orange-130": { - "value": "#4e2301", - "comment": "surface nasty-orange, contrast 130", - "originalRatio": 13 - }, - "color-surface-hot-pink-70": { - "value": "#f6c0de", - "comment": "surface hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-hot-pink-80": { - "value": "#ef8cc3", - "comment": "surface hot-pink, contrast 80", - "originalRatio": 2.2 - }, - "color-surface-hot-pink-90": { - "value": "#e861ad", - "comment": "surface hot-pink, contrast 90", - "originalRatio": 3 - }, - "color-surface-hot-pink-100": { - "value": "#cc1d7f", - "comment": "surface hot-pink, contrast 100", - "originalRatio": 5 - }, - "color-surface-hot-pink-110": { - "value": "#a41766", - "comment": "surface hot-pink, contrast 110", - "originalRatio": 7 - }, - "color-surface-hot-pink-120": { - "value": "#7b114c", - "comment": "surface hot-pink, contrast 120", - "originalRatio": 10 - }, - "color-surface-hot-pink-130": { - "value": "#5b0d38", - "comment": "surface hot-pink, contrast 130", - "originalRatio": 13 - }, - "color-surface-soylent-green-70": { - "value": "#95dcdc", - "comment": "surface soylent-green, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-soylent-green-80": { - "value": "#51c5c5", - "comment": "surface soylent-green, contrast 80", - "originalRatio": 2 - }, - "color-surface-soylent-green-90": { - "value": "#36a1a1", - "comment": "surface soylent-green, contrast 90", - "originalRatio": 3 - }, - "color-surface-soylent-green-100": { - "value": "#287878", - "comment": "surface soylent-green, contrast 100", - "originalRatio": 5 - }, - "color-surface-soylent-green-110": { - "value": "#206060", - "comment": "surface soylent-green, contrast 110", - "originalRatio": 7 - }, - "color-surface-soylent-green-120": { - "value": "#184747", - "comment": "surface soylent-green, contrast 120", - "originalRatio": 10 - }, - "color-surface-soylent-green-130": { - "value": "#113434", - "comment": "surface soylent-green, contrast 130", - "originalRatio": 13 - }, - "color-surface-naughty-purple-70": { - "value": "#dcc8e8", - "comment": "surface naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-naughty-purple-80": { - "value": "#af80c9", - "comment": "surface naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-naughty-purple-90": { - "value": "#9e65be", - "comment": "surface naughty-purple, contrast 90", - "originalRatio": 4 - }, - "color-surface-naughty-purple-100": { - "value": "#9151b5", - "comment": "surface naughty-purple, contrast 100", - "originalRatio": 5 - }, - "color-surface-naughty-purple-110": { - "value": "#753f94", - "comment": "surface naughty-purple, contrast 110", - "originalRatio": 7 - }, - "color-surface-naughty-purple-120": { - "value": "#572e6d", - "comment": "surface naughty-purple, contrast 120", - "originalRatio": 10 - }, - "color-surface-naughty-purple-130": { - "value": "#402250", - "comment": "surface naughty-purple, contrast 130", - "originalRatio": 13 - }, - "color-surface-neutral-50": { - "value": "#eff0f3", - "comment": "surface neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-neutral-60": { - "value": "#e5e7ea", - "comment": "surface neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-neutral-70": { - "value": "#dcdee3", - "comment": "surface neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-neutral-80": { - "value": "#c6c9d1", - "comment": "surface neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-neutral-90": { - "value": "#9ba1b0", - "comment": "surface neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-neutral-100": { - "value": "#6d7488", - "comment": "surface neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-neutral-110": { - "value": "#515666", - "comment": "surface neutral, contrast 110", - "originalRatio": 7 - }, - "color-surface-neutral-120": { - "value": "#404450", - "comment": "surface neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-neutral-130": { - "value": "#30333c", - "comment": "surface neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-surface-neutral-140": { - "value": "#21242a", - "comment": "surface neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-neutral-150": { - "value": "#111316", - "comment": "surface neutral, contrast 150", - "originalRatio": 18 - } - }, - "global": { "type": "color", "category": "color" } -} diff --git a/libs/shared/design-tokens/generated/aliases/spacing.alias.json b/libs/shared/design-tokens/generated/aliases/spacing.alias.json deleted file mode 100644 index 4355edefce..0000000000 --- a/libs/shared/design-tokens/generated/aliases/spacing.alias.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "aliases": { - "spacing--0": 0, - "spacing--3x-small": "2px", - "spacing--2x-small": "4px", - "spacing--x-small": "8px", - "spacing--small": "12px", - "spacing--medium": "16px", - "spacing--large": "32px", - "spacing--x-large": "48px", - "spacing--2x-large": "64px", - "spacing--3x-large": "128px" - }, - "global": { "type": "number", "category": "spacing" } -} diff --git a/libs/shared/design-tokens/generated/aliases/typography.alias.json b/libs/shared/design-tokens/generated/aliases/typography.alias.json deleted file mode 100644 index 82d37d29fd..0000000000 --- a/libs/shared/design-tokens/generated/aliases/typography.alias.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "aliases": { - "typography--emphasis-regular": 400, - "typography--emphasis-medium": 500, - "typography--emphasis-high": 700, - "typography--font-size-4xl": "2.027rem", - "typography--font-size-3xl": "1.802rem", - "typography--font-size-2xl": "1.602rem", - "typography--font-size-xl": "1.424rem", - "typography--font-size-l": "1.266rem", - "typography--font-size-m": "1.125rem", - "typography--font-size": "1rem", - "typography--font-size-s": "0.89rem", - "typography--font-size-xs": "0.79rem", - "typography--font-size-2xs": "0.702rem", - "typography--line-height-4xl": "38px", - "typography--line-height-3xl": "34px", - "typography--line-height-2xl": "30px", - "typography--line-height-xl": "27px", - "typography--line-height-l": "24px", - "typography--line-height-m": "21px", - "typography--line-height": "19px", - "typography--line-height-s": "17px", - "typography--line-height-xs": "15px", - "typography--line-height-2xs": "13px" - } -} diff --git a/libs/shared/design-tokens/generated/global/palette.js b/libs/shared/design-tokens/generated/global/palette.js deleted file mode 100644 index 9e7c4052f2..0000000000 --- a/libs/shared/design-tokens/generated/global/palette.js +++ /dev/null @@ -1,160 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export const FLUID_COLOR_ABYSS_BACKGROUND = '#111216'; -export const FLUID_COLOR_ABYSS_MAXCONTRAST = '#fafbfb'; -export const FLUID_COLOR_ABYSS_PRIMARY_70 = '#084298'; -export const FLUID_COLOR_ABYSS_PRIMARY_80 = '#0b5ace'; -export const FLUID_COLOR_ABYSS_PRIMARY_90 = '#136cf2'; -export const FLUID_COLOR_ABYSS_PRIMARY_100 = '#3582f4'; -export const FLUID_COLOR_ABYSS_PRIMARY_110 = '#659ff7'; -export const FLUID_COLOR_ABYSS_PRIMARY_120 = '#91bbf9'; -export const FLUID_COLOR_ABYSS_PRIMARY_130 = '#bbd5fb'; -export const FLUID_COLOR_ABYSS_POSITIVE_70 = '#1a6142'; -export const FLUID_COLOR_ABYSS_POSITIVE_80 = '#268d60'; -export const FLUID_COLOR_ABYSS_POSITIVE_90 = '#2fad76'; -export const FLUID_COLOR_ABYSS_POSITIVE_100 = '#36c587'; -export const FLUID_COLOR_ABYSS_POSITIVE_110 = '#69d6a7'; -export const FLUID_COLOR_ABYSS_POSITIVE_120 = '#a2e6c8'; -export const FLUID_COLOR_ABYSS_POSITIVE_130 = '#d6f4e7'; -export const FLUID_COLOR_ABYSS_WARNING_70 = '#917000'; -export const FLUID_COLOR_ABYSS_WARNING_80 = '#bd9200'; -export const FLUID_COLOR_ABYSS_WARNING_90 = '#e0ad00'; -export const FLUID_COLOR_ABYSS_WARNING_100 = '#fcc300'; -export const FLUID_COLOR_ABYSS_WARNING_110 = '#ffd752'; -export const FLUID_COLOR_ABYSS_WARNING_120 = '#ffe99d'; -export const FLUID_COLOR_ABYSS_WARNING_130 = '#fff0bf'; -export const FLUID_COLOR_ABYSS_ERROR_70 = '#90081e'; -export const FLUID_COLOR_ABYSS_ERROR_80 = '#c20b28'; -export const FLUID_COLOR_ABYSS_ERROR_90 = '#e60d30'; -export const FLUID_COLOR_ABYSS_ERROR_100 = '#f43b58'; -export const FLUID_COLOR_ABYSS_ERROR_110 = '#f77589'; -export const FLUID_COLOR_ABYSS_ERROR_120 = '#fa9fae'; -export const FLUID_COLOR_ABYSS_ERROR_130 = '#fcc6ce'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_70 = '#743501'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_80 = '#bc5602'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_90 = '#ed6b02'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_100 = '#fd8c30'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_110 = '#feab67'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_120 = '#fec89d'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_130 = '#ffe6d1'; -export const FLUID_COLOR_ABYSS_HOT_PINK_70 = '#640f3f'; -export const FLUID_COLOR_ABYSS_HOT_PINK_80 = '#a01764'; -export const FLUID_COLOR_ABYSS_HOT_PINK_90 = '#c81d7d'; -export const FLUID_COLOR_ABYSS_HOT_PINK_100 = '#e13093'; -export const FLUID_COLOR_ABYSS_HOT_PINK_110 = '#ea6db3'; -export const FLUID_COLOR_ABYSS_HOT_PINK_120 = '#f098c9'; -export const FLUID_COLOR_ABYSS_HOT_PINK_130 = '#f6c0de'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_70 = '#1f5d5d'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_80 = '#2d8989'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_90 = '#339a9a'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_100 = '#3cb5b5'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_110 = '#5dc9c9'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_120 = '#94dcdc'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_130 = '#c9eded'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_70 = '#462658'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_80 = '#8246a5'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_90 = '#9d65be'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_100 = '#ae80c9'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_110 = '#c09cd5'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_120 = '#d3b9e1'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_130 = '#e5d6ed'; -export const FLUID_COLOR_ABYSS_NEUTRAL_50 = '#1a1c21'; -export const FLUID_COLOR_ABYSS_NEUTRAL_60 = '#21242a'; -export const FLUID_COLOR_ABYSS_NEUTRAL_70 = '#272a31'; -export const FLUID_COLOR_ABYSS_NEUTRAL_80 = '#343842'; -export const FLUID_COLOR_ABYSS_NEUTRAL_90 = '#505564'; -export const FLUID_COLOR_ABYSS_NEUTRAL_100 = '#757c91'; -export const FLUID_COLOR_ABYSS_NEUTRAL_110 = '#999ead'; -export const FLUID_COLOR_ABYSS_NEUTRAL_120 = '#b5b9c4'; -export const FLUID_COLOR_ABYSS_NEUTRAL_130 = '#ced1d8'; -export const FLUID_COLOR_ABYSS_NEUTRAL_140 = '#e5e6ea'; -export const FLUID_COLOR_ABYSS_NEUTRAL_150 = '#fafbfb'; -export const FLUID_COLOR_SURFACE_BACKGROUND = '#fafbfb'; -export const FLUID_COLOR_SURFACE_MAXCONTRAST = '#111216'; -export const FLUID_COLOR_SURFACE_PRIMARY_70 = '#9ac0f9'; -export const FLUID_COLOR_SURFACE_PRIMARY_80 = '#5998f6'; -export const FLUID_COLOR_SURFACE_PRIMARY_90 = '#156df2'; -export const FLUID_COLOR_SURFACE_PRIMARY_100 = '#0b55c5'; -export const FLUID_COLOR_SURFACE_PRIMARY_110 = '#0945a0'; -export const FLUID_COLOR_SURFACE_PRIMARY_120 = '#073477'; -export const FLUID_COLOR_SURFACE_PRIMARY_130 = '#052554'; -export const FLUID_COLOR_SURFACE_POSITIVE_70 = '#b1ead1'; -export const FLUID_COLOR_SURFACE_POSITIVE_80 = '#4ecf96'; -export const FLUID_COLOR_SURFACE_POSITIVE_90 = '#2a9868'; -export const FLUID_COLOR_SURFACE_POSITIVE_100 = '#207450'; -export const FLUID_COLOR_SURFACE_POSITIVE_110 = '#1a5d40'; -export const FLUID_COLOR_SURFACE_POSITIVE_120 = '#134630'; -export const FLUID_COLOR_SURFACE_POSITIVE_130 = '#0e3223'; -export const FLUID_COLOR_SURFACE_WARNING_70 = '#ffedb2'; -export const FLUID_COLOR_SURFACE_WARNING_80 = '#ffd651'; -export const FLUID_COLOR_SURFACE_WARNING_90 = '#e2ac00'; -export const FLUID_COLOR_SURFACE_WARNING_100 = '#8f6e00'; -export const FLUID_COLOR_SURFACE_WARNING_110 = '#735700'; -export const FLUID_COLOR_SURFACE_WARNING_120 = '#544100'; -export const FLUID_COLOR_SURFACE_WARNING_130 = '#3f3000'; -export const FLUID_COLOR_SURFACE_ERROR_70 = '#fbc0ca'; -export const FLUID_COLOR_SURFACE_ERROR_80 = '#f88b9d'; -export const FLUID_COLOR_SURFACE_ERROR_90 = '#f4425f'; -export const FLUID_COLOR_SURFACE_ERROR_100 = '#c20b29'; -export const FLUID_COLOR_SURFACE_ERROR_110 = '#9e0921'; -export const FLUID_COLOR_SURFACE_ERROR_120 = '#780719'; -export const FLUID_COLOR_SURFACE_ERROR_130 = '#590513'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_70 = '#fed2af'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_80 = '#fdac69'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_90 = '#ee6c03'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_100 = '#be5602'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_110 = '#8e4001'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_120 = '#6a3001'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_130 = '#4e2301'; -export const FLUID_COLOR_SURFACE_HOT_PINK_70 = '#f6c0de'; -export const FLUID_COLOR_SURFACE_HOT_PINK_80 = '#ef8cc3'; -export const FLUID_COLOR_SURFACE_HOT_PINK_90 = '#e861ad'; -export const FLUID_COLOR_SURFACE_HOT_PINK_100 = '#cc1d7f'; -export const FLUID_COLOR_SURFACE_HOT_PINK_110 = '#a41766'; -export const FLUID_COLOR_SURFACE_HOT_PINK_120 = '#7b114c'; -export const FLUID_COLOR_SURFACE_HOT_PINK_130 = '#5b0d38'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_70 = '#95dcdc'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_80 = '#51c5c5'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_90 = '#36a1a1'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_100 = '#287878'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_110 = '#206060'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_120 = '#184747'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_130 = '#113434'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_70 = '#dcc8e8'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_80 = '#af80c9'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_90 = '#9e65be'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_100 = '#9151b5'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_110 = '#753f94'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_120 = '#572e6d'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_130 = '#402250'; -export const FLUID_COLOR_SURFACE_NEUTRAL_50 = '#eff0f3'; -export const FLUID_COLOR_SURFACE_NEUTRAL_60 = '#e5e7ea'; -export const FLUID_COLOR_SURFACE_NEUTRAL_70 = '#dcdee3'; -export const FLUID_COLOR_SURFACE_NEUTRAL_80 = '#c6c9d1'; -export const FLUID_COLOR_SURFACE_NEUTRAL_90 = '#9ba1b0'; -export const FLUID_COLOR_SURFACE_NEUTRAL_100 = '#6d7488'; -export const FLUID_COLOR_SURFACE_NEUTRAL_110 = '#515666'; -export const FLUID_COLOR_SURFACE_NEUTRAL_120 = '#404450'; -export const FLUID_COLOR_SURFACE_NEUTRAL_130 = '#30333c'; -export const FLUID_COLOR_SURFACE_NEUTRAL_140 = '#21242a'; -export const FLUID_COLOR_SURFACE_NEUTRAL_150 = '#111316'; diff --git a/libs/shared/design-tokens/generated/global/palette.json b/libs/shared/design-tokens/generated/global/palette.json deleted file mode 100644 index 522d929512..0000000000 --- a/libs/shared/design-tokens/generated/global/palette.json +++ /dev/null @@ -1,2496 +0,0 @@ -{ - "outputs": [ - { - "type": "scss", - "formatter": "dt-scss" - }, - { - "type": "ts", - "formatter": "dt-typescript" - }, - { - "type": "js", - "formatter": "dt-javascript" - } - ], - "props": { - "fluid-color-abyss-background": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-background", - "value": "#111216", - "meta": { - "friendlyName": "abyss background", - "sassVariable": "$color-abyss-background", - "customProperty": "--color-abyss-background", - "customizable": false - }, - "originalValue": "{!color-abyss-background}" - }, - "fluid-color-abyss-maxcontrast": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-maxcontrast", - "value": "#fafbfb", - "meta": { - "friendlyName": "abyss maxcontrast", - "sassVariable": "$color-abyss-maxcontrast", - "customProperty": "--color-abyss-maxcontrast", - "customizable": false - }, - "originalValue": "{!color-abyss-maxcontrast}" - }, - "fluid-color-abyss-primary-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-primary-70", - "value": "#084298", - "meta": { - "friendlyName": "abyss primary, contrast 70", - "sassVariable": "$color-abyss-primary-70", - "customProperty": "--color-abyss-primary-70", - "customizable": false - }, - "originalValue": "{!color-abyss-primary-70}" - }, - "fluid-color-abyss-primary-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-primary-80", - "value": "#0b5ace", - "meta": { - "friendlyName": "abyss primary, contrast 80", - "sassVariable": "$color-abyss-primary-80", - "customProperty": "--color-abyss-primary-80", - "customizable": false - }, - "originalValue": "{!color-abyss-primary-80}" - }, - "fluid-color-abyss-primary-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-primary-90", - "value": "#136cf2", - "meta": { - "friendlyName": "abyss primary, contrast 90", - "sassVariable": "$color-abyss-primary-90", - "customProperty": "--color-abyss-primary-90", - "customizable": false - }, - "originalValue": "{!color-abyss-primary-90}" - }, - "fluid-color-abyss-primary-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-primary-100", - "value": "#3582f4", - "meta": { - "friendlyName": "abyss primary, contrast 100", - "sassVariable": "$color-abyss-primary-100", - "customProperty": "--color-abyss-primary-100", - "customizable": false - }, - "originalValue": "{!color-abyss-primary-100}" - }, - "fluid-color-abyss-primary-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-primary-110", - "value": "#659ff7", - "meta": { - "friendlyName": "abyss primary, contrast 110", - "sassVariable": "$color-abyss-primary-110", - "customProperty": "--color-abyss-primary-110", - "customizable": false - }, - "originalValue": "{!color-abyss-primary-110}" - }, - "fluid-color-abyss-primary-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-primary-120", - "value": "#91bbf9", - "meta": { - "friendlyName": "abyss primary, contrast 120", - "sassVariable": "$color-abyss-primary-120", - "customProperty": "--color-abyss-primary-120", - "customizable": false - }, - "originalValue": "{!color-abyss-primary-120}" - }, - "fluid-color-abyss-primary-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-primary-130", - "value": "#bbd5fb", - "meta": { - "friendlyName": "abyss primary, contrast 130", - "sassVariable": "$color-abyss-primary-130", - "customProperty": "--color-abyss-primary-130", - "customizable": false - }, - "originalValue": "{!color-abyss-primary-130}" - }, - "fluid-color-abyss-positive-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-positive-70", - "value": "#1a6142", - "meta": { - "friendlyName": "abyss positive, contrast 70", - "sassVariable": "$color-abyss-positive-70", - "customProperty": "--color-abyss-positive-70", - "customizable": false - }, - "originalValue": "{!color-abyss-positive-70}" - }, - "fluid-color-abyss-positive-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-positive-80", - "value": "#268d60", - "meta": { - "friendlyName": "abyss positive, contrast 80", - "sassVariable": "$color-abyss-positive-80", - "customProperty": "--color-abyss-positive-80", - "customizable": false - }, - "originalValue": "{!color-abyss-positive-80}" - }, - "fluid-color-abyss-positive-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-positive-90", - "value": "#2fad76", - "meta": { - "friendlyName": "abyss positive, contrast 90", - "sassVariable": "$color-abyss-positive-90", - "customProperty": "--color-abyss-positive-90", - "customizable": false - }, - "originalValue": "{!color-abyss-positive-90}" - }, - "fluid-color-abyss-positive-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-positive-100", - "value": "#36c587", - "meta": { - "friendlyName": "abyss positive, contrast 100", - "sassVariable": "$color-abyss-positive-100", - "customProperty": "--color-abyss-positive-100", - "customizable": false - }, - "originalValue": "{!color-abyss-positive-100}" - }, - "fluid-color-abyss-positive-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-positive-110", - "value": "#69d6a7", - "meta": { - "friendlyName": "abyss positive, contrast 110", - "sassVariable": "$color-abyss-positive-110", - "customProperty": "--color-abyss-positive-110", - "customizable": false - }, - "originalValue": "{!color-abyss-positive-110}" - }, - "fluid-color-abyss-positive-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-positive-120", - "value": "#a2e6c8", - "meta": { - "friendlyName": "abyss positive, contrast 120", - "sassVariable": "$color-abyss-positive-120", - "customProperty": "--color-abyss-positive-120", - "customizable": false - }, - "originalValue": "{!color-abyss-positive-120}" - }, - "fluid-color-abyss-positive-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-positive-130", - "value": "#d6f4e7", - "meta": { - "friendlyName": "abyss positive, contrast 130", - "sassVariable": "$color-abyss-positive-130", - "customProperty": "--color-abyss-positive-130", - "customizable": false - }, - "originalValue": "{!color-abyss-positive-130}" - }, - "fluid-color-abyss-warning-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-warning-70", - "value": "#917000", - "meta": { - "friendlyName": "abyss warning, contrast 70", - "sassVariable": "$color-abyss-warning-70", - "customProperty": "--color-abyss-warning-70", - "customizable": false - }, - "originalValue": "{!color-abyss-warning-70}" - }, - "fluid-color-abyss-warning-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-warning-80", - "value": "#bd9200", - "meta": { - "friendlyName": "abyss warning, contrast 80", - "sassVariable": "$color-abyss-warning-80", - "customProperty": "--color-abyss-warning-80", - "customizable": false - }, - "originalValue": "{!color-abyss-warning-80}" - }, - "fluid-color-abyss-warning-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-warning-90", - "value": "#e0ad00", - "meta": { - "friendlyName": "abyss warning, contrast 90", - "sassVariable": "$color-abyss-warning-90", - "customProperty": "--color-abyss-warning-90", - "customizable": false - }, - "originalValue": "{!color-abyss-warning-90}" - }, - "fluid-color-abyss-warning-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-warning-100", - "value": "#fcc300", - "meta": { - "friendlyName": "abyss warning, contrast 100", - "sassVariable": "$color-abyss-warning-100", - "customProperty": "--color-abyss-warning-100", - "customizable": false - }, - "originalValue": "{!color-abyss-warning-100}" - }, - "fluid-color-abyss-warning-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-warning-110", - "value": "#ffd752", - "meta": { - "friendlyName": "abyss warning, contrast 110", - "sassVariable": "$color-abyss-warning-110", - "customProperty": "--color-abyss-warning-110", - "customizable": false - }, - "originalValue": "{!color-abyss-warning-110}" - }, - "fluid-color-abyss-warning-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-warning-120", - "value": "#ffe99d", - "meta": { - "friendlyName": "abyss warning, contrast 120", - "sassVariable": "$color-abyss-warning-120", - "customProperty": "--color-abyss-warning-120", - "customizable": false - }, - "originalValue": "{!color-abyss-warning-120}" - }, - "fluid-color-abyss-warning-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-warning-130", - "value": "#fff0bf", - "meta": { - "friendlyName": "abyss warning, contrast 130", - "sassVariable": "$color-abyss-warning-130", - "customProperty": "--color-abyss-warning-130", - "customizable": false - }, - "originalValue": "{!color-abyss-warning-130}" - }, - "fluid-color-abyss-error-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-error-70", - "value": "#90081e", - "meta": { - "friendlyName": "abyss error, contrast 70", - "sassVariable": "$color-abyss-error-70", - "customProperty": "--color-abyss-error-70", - "customizable": false - }, - "originalValue": "{!color-abyss-error-70}" - }, - "fluid-color-abyss-error-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-error-80", - "value": "#c20b28", - "meta": { - "friendlyName": "abyss error, contrast 80", - "sassVariable": "$color-abyss-error-80", - "customProperty": "--color-abyss-error-80", - "customizable": false - }, - "originalValue": "{!color-abyss-error-80}" - }, - "fluid-color-abyss-error-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-error-90", - "value": "#e60d30", - "meta": { - "friendlyName": "abyss error, contrast 90", - "sassVariable": "$color-abyss-error-90", - "customProperty": "--color-abyss-error-90", - "customizable": false - }, - "originalValue": "{!color-abyss-error-90}" - }, - "fluid-color-abyss-error-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-error-100", - "value": "#f43b58", - "meta": { - "friendlyName": "abyss error, contrast 100", - "sassVariable": "$color-abyss-error-100", - "customProperty": "--color-abyss-error-100", - "customizable": false - }, - "originalValue": "{!color-abyss-error-100}" - }, - "fluid-color-abyss-error-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-error-110", - "value": "#f77589", - "meta": { - "friendlyName": "abyss error, contrast 110", - "sassVariable": "$color-abyss-error-110", - "customProperty": "--color-abyss-error-110", - "customizable": false - }, - "originalValue": "{!color-abyss-error-110}" - }, - "fluid-color-abyss-error-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-error-120", - "value": "#fa9fae", - "meta": { - "friendlyName": "abyss error, contrast 120", - "sassVariable": "$color-abyss-error-120", - "customProperty": "--color-abyss-error-120", - "customizable": false - }, - "originalValue": "{!color-abyss-error-120}" - }, - "fluid-color-abyss-error-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-error-130", - "value": "#fcc6ce", - "meta": { - "friendlyName": "abyss error, contrast 130", - "sassVariable": "$color-abyss-error-130", - "customProperty": "--color-abyss-error-130", - "customizable": false - }, - "originalValue": "{!color-abyss-error-130}" - }, - "fluid-color-abyss-nasty-orange-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-nasty-orange-70", - "value": "#743501", - "meta": { - "friendlyName": "abyss nasty-orange, contrast 70", - "sassVariable": "$color-abyss-nasty-orange-70", - "customProperty": "--color-abyss-nasty-orange-70", - "customizable": false - }, - "originalValue": "{!color-abyss-nasty-orange-70}" - }, - "fluid-color-abyss-nasty-orange-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-nasty-orange-80", - "value": "#bc5602", - "meta": { - "friendlyName": "abyss nasty-orange, contrast 80", - "sassVariable": "$color-abyss-nasty-orange-80", - "customProperty": "--color-abyss-nasty-orange-80", - "customizable": false - }, - "originalValue": "{!color-abyss-nasty-orange-80}" - }, - "fluid-color-abyss-nasty-orange-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-nasty-orange-90", - "value": "#ed6b02", - "meta": { - "friendlyName": "abyss nasty-orange, contrast 90", - "sassVariable": "$color-abyss-nasty-orange-90", - "customProperty": "--color-abyss-nasty-orange-90", - "customizable": false - }, - "originalValue": "{!color-abyss-nasty-orange-90}" - }, - "fluid-color-abyss-nasty-orange-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-nasty-orange-100", - "value": "#fd8c30", - "meta": { - "friendlyName": "abyss nasty-orange, contrast 100", - "sassVariable": "$color-abyss-nasty-orange-100", - "customProperty": "--color-abyss-nasty-orange-100", - "customizable": false - }, - "originalValue": "{!color-abyss-nasty-orange-100}" - }, - "fluid-color-abyss-nasty-orange-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-nasty-orange-110", - "value": "#feab67", - "meta": { - "friendlyName": "abyss nasty-orange, contrast 110", - "sassVariable": "$color-abyss-nasty-orange-110", - "customProperty": "--color-abyss-nasty-orange-110", - "customizable": false - }, - "originalValue": "{!color-abyss-nasty-orange-110}" - }, - "fluid-color-abyss-nasty-orange-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-nasty-orange-120", - "value": "#fec89d", - "meta": { - "friendlyName": "abyss nasty-orange, contrast 120", - "sassVariable": "$color-abyss-nasty-orange-120", - "customProperty": "--color-abyss-nasty-orange-120", - "customizable": false - }, - "originalValue": "{!color-abyss-nasty-orange-120}" - }, - "fluid-color-abyss-nasty-orange-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-nasty-orange-130", - "value": "#ffe6d1", - "meta": { - "friendlyName": "abyss nasty-orange, contrast 130", - "sassVariable": "$color-abyss-nasty-orange-130", - "customProperty": "--color-abyss-nasty-orange-130", - "customizable": false - }, - "originalValue": "{!color-abyss-nasty-orange-130}" - }, - "fluid-color-abyss-hot-pink-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-hot-pink-70", - "value": "#640f3f", - "meta": { - "friendlyName": "abyss hot-pink, contrast 70", - "sassVariable": "$color-abyss-hot-pink-70", - "customProperty": "--color-abyss-hot-pink-70", - "customizable": false - }, - "originalValue": "{!color-abyss-hot-pink-70}" - }, - "fluid-color-abyss-hot-pink-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-hot-pink-80", - "value": "#a01764", - "meta": { - "friendlyName": "abyss hot-pink, contrast 80", - "sassVariable": "$color-abyss-hot-pink-80", - "customProperty": "--color-abyss-hot-pink-80", - "customizable": false - }, - "originalValue": "{!color-abyss-hot-pink-80}" - }, - "fluid-color-abyss-hot-pink-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-hot-pink-90", - "value": "#c81d7d", - "meta": { - "friendlyName": "abyss hot-pink, contrast 90", - "sassVariable": "$color-abyss-hot-pink-90", - "customProperty": "--color-abyss-hot-pink-90", - "customizable": false - }, - "originalValue": "{!color-abyss-hot-pink-90}" - }, - "fluid-color-abyss-hot-pink-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-hot-pink-100", - "value": "#e13093", - "meta": { - "friendlyName": "abyss hot-pink, contrast 100", - "sassVariable": "$color-abyss-hot-pink-100", - "customProperty": "--color-abyss-hot-pink-100", - "customizable": false - }, - "originalValue": "{!color-abyss-hot-pink-100}" - }, - "fluid-color-abyss-hot-pink-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-hot-pink-110", - "value": "#ea6db3", - "meta": { - "friendlyName": "abyss hot-pink, contrast 110", - "sassVariable": "$color-abyss-hot-pink-110", - "customProperty": "--color-abyss-hot-pink-110", - "customizable": false - }, - "originalValue": "{!color-abyss-hot-pink-110}" - }, - "fluid-color-abyss-hot-pink-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-hot-pink-120", - "value": "#f098c9", - "meta": { - "friendlyName": "abyss hot-pink, contrast 120", - "sassVariable": "$color-abyss-hot-pink-120", - "customProperty": "--color-abyss-hot-pink-120", - "customizable": false - }, - "originalValue": "{!color-abyss-hot-pink-120}" - }, - "fluid-color-abyss-hot-pink-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-hot-pink-130", - "value": "#f6c0de", - "meta": { - "friendlyName": "abyss hot-pink, contrast 130", - "sassVariable": "$color-abyss-hot-pink-130", - "customProperty": "--color-abyss-hot-pink-130", - "customizable": false - }, - "originalValue": "{!color-abyss-hot-pink-130}" - }, - "fluid-color-abyss-soylent-green-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-soylent-green-70", - "value": "#1f5d5d", - "meta": { - "friendlyName": "abyss soylent-green, contrast 70", - "sassVariable": "$color-abyss-soylent-green-70", - "customProperty": "--color-abyss-soylent-green-70", - "customizable": false - }, - "originalValue": "{!color-abyss-soylent-green-70}" - }, - "fluid-color-abyss-soylent-green-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-soylent-green-80", - "value": "#2d8989", - "meta": { - "friendlyName": "abyss soylent-green, contrast 80", - "sassVariable": "$color-abyss-soylent-green-80", - "customProperty": "--color-abyss-soylent-green-80", - "customizable": false - }, - "originalValue": "{!color-abyss-soylent-green-80}" - }, - "fluid-color-abyss-soylent-green-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-soylent-green-90", - "value": "#339a9a", - "meta": { - "friendlyName": "abyss soylent-green, contrast 90", - "sassVariable": "$color-abyss-soylent-green-90", - "customProperty": "--color-abyss-soylent-green-90", - "customizable": false - }, - "originalValue": "{!color-abyss-soylent-green-90}" - }, - "fluid-color-abyss-soylent-green-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-soylent-green-100", - "value": "#3cb5b5", - "meta": { - "friendlyName": "abyss soylent-green, contrast 100", - "sassVariable": "$color-abyss-soylent-green-100", - "customProperty": "--color-abyss-soylent-green-100", - "customizable": false - }, - "originalValue": "{!color-abyss-soylent-green-100}" - }, - "fluid-color-abyss-soylent-green-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-soylent-green-110", - "value": "#5dc9c9", - "meta": { - "friendlyName": "abyss soylent-green, contrast 110", - "sassVariable": "$color-abyss-soylent-green-110", - "customProperty": "--color-abyss-soylent-green-110", - "customizable": false - }, - "originalValue": "{!color-abyss-soylent-green-110}" - }, - "fluid-color-abyss-soylent-green-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-soylent-green-120", - "value": "#94dcdc", - "meta": { - "friendlyName": "abyss soylent-green, contrast 120", - "sassVariable": "$color-abyss-soylent-green-120", - "customProperty": "--color-abyss-soylent-green-120", - "customizable": false - }, - "originalValue": "{!color-abyss-soylent-green-120}" - }, - "fluid-color-abyss-soylent-green-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-soylent-green-130", - "value": "#c9eded", - "meta": { - "friendlyName": "abyss soylent-green, contrast 130", - "sassVariable": "$color-abyss-soylent-green-130", - "customProperty": "--color-abyss-soylent-green-130", - "customizable": false - }, - "originalValue": "{!color-abyss-soylent-green-130}" - }, - "fluid-color-abyss-naughty-purple-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-naughty-purple-70", - "value": "#462658", - "meta": { - "friendlyName": "abyss naughty-purple, contrast 70", - "sassVariable": "$color-abyss-naughty-purple-70", - "customProperty": "--color-abyss-naughty-purple-70", - "customizable": false - }, - "originalValue": "{!color-abyss-naughty-purple-70}" - }, - "fluid-color-abyss-naughty-purple-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-naughty-purple-80", - "value": "#8246a5", - "meta": { - "friendlyName": "abyss naughty-purple, contrast 80", - "sassVariable": "$color-abyss-naughty-purple-80", - "customProperty": "--color-abyss-naughty-purple-80", - "customizable": false - }, - "originalValue": "{!color-abyss-naughty-purple-80}" - }, - "fluid-color-abyss-naughty-purple-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-naughty-purple-90", - "value": "#9d65be", - "meta": { - "friendlyName": "abyss naughty-purple, contrast 90", - "sassVariable": "$color-abyss-naughty-purple-90", - "customProperty": "--color-abyss-naughty-purple-90", - "customizable": false - }, - "originalValue": "{!color-abyss-naughty-purple-90}" - }, - "fluid-color-abyss-naughty-purple-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-naughty-purple-100", - "value": "#ae80c9", - "meta": { - "friendlyName": "abyss naughty-purple, contrast 100", - "sassVariable": "$color-abyss-naughty-purple-100", - "customProperty": "--color-abyss-naughty-purple-100", - "customizable": false - }, - "originalValue": "{!color-abyss-naughty-purple-100}" - }, - "fluid-color-abyss-naughty-purple-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-naughty-purple-110", - "value": "#c09cd5", - "meta": { - "friendlyName": "abyss naughty-purple, contrast 110", - "sassVariable": "$color-abyss-naughty-purple-110", - "customProperty": "--color-abyss-naughty-purple-110", - "customizable": false - }, - "originalValue": "{!color-abyss-naughty-purple-110}" - }, - "fluid-color-abyss-naughty-purple-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-naughty-purple-120", - "value": "#d3b9e1", - "meta": { - "friendlyName": "abyss naughty-purple, contrast 120", - "sassVariable": "$color-abyss-naughty-purple-120", - "customProperty": "--color-abyss-naughty-purple-120", - "customizable": false - }, - "originalValue": "{!color-abyss-naughty-purple-120}" - }, - "fluid-color-abyss-naughty-purple-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-naughty-purple-130", - "value": "#e5d6ed", - "meta": { - "friendlyName": "abyss naughty-purple, contrast 130", - "sassVariable": "$color-abyss-naughty-purple-130", - "customProperty": "--color-abyss-naughty-purple-130", - "customizable": false - }, - "originalValue": "{!color-abyss-naughty-purple-130}" - }, - "fluid-color-abyss-neutral-50": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-50", - "value": "#1a1c21", - "meta": { - "friendlyName": "abyss neutral, contrast 50", - "sassVariable": "$color-abyss-neutral-50", - "customProperty": "--color-abyss-neutral-50", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-50}" - }, - "fluid-color-abyss-neutral-60": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-60", - "value": "#21242a", - "meta": { - "friendlyName": "abyss neutral, contrast 60", - "sassVariable": "$color-abyss-neutral-60", - "customProperty": "--color-abyss-neutral-60", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-60}" - }, - "fluid-color-abyss-neutral-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-70", - "value": "#272a31", - "meta": { - "friendlyName": "abyss neutral, contrast 70", - "sassVariable": "$color-abyss-neutral-70", - "customProperty": "--color-abyss-neutral-70", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-70}" - }, - "fluid-color-abyss-neutral-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-80", - "value": "#343842", - "meta": { - "friendlyName": "abyss neutral, contrast 80", - "sassVariable": "$color-abyss-neutral-80", - "customProperty": "--color-abyss-neutral-80", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-80}" - }, - "fluid-color-abyss-neutral-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-90", - "value": "#505564", - "meta": { - "friendlyName": "abyss neutral, contrast 90", - "sassVariable": "$color-abyss-neutral-90", - "customProperty": "--color-abyss-neutral-90", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-90}" - }, - "fluid-color-abyss-neutral-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-100", - "value": "#757c91", - "meta": { - "friendlyName": "abyss neutral, contrast 100", - "sassVariable": "$color-abyss-neutral-100", - "customProperty": "--color-abyss-neutral-100", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-100}" - }, - "fluid-color-abyss-neutral-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-110", - "value": "#999ead", - "meta": { - "friendlyName": "abyss neutral, contrast 110", - "sassVariable": "$color-abyss-neutral-110", - "customProperty": "--color-abyss-neutral-110", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-110}" - }, - "fluid-color-abyss-neutral-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-120", - "value": "#b5b9c4", - "meta": { - "friendlyName": "abyss neutral, contrast 120", - "sassVariable": "$color-abyss-neutral-120", - "customProperty": "--color-abyss-neutral-120", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-120}" - }, - "fluid-color-abyss-neutral-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-130", - "value": "#ced1d8", - "meta": { - "friendlyName": "abyss neutral, contrast 130", - "sassVariable": "$color-abyss-neutral-130", - "customProperty": "--color-abyss-neutral-130", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-130}" - }, - "fluid-color-abyss-neutral-140": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-140", - "value": "#e5e6ea", - "meta": { - "friendlyName": "abyss neutral, contrast 140", - "sassVariable": "$color-abyss-neutral-140", - "customProperty": "--color-abyss-neutral-140", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-140}" - }, - "fluid-color-abyss-neutral-150": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-abyss-neutral-150", - "value": "#fafbfb", - "meta": { - "friendlyName": "abyss neutral, contrast 150", - "sassVariable": "$color-abyss-neutral-150", - "customProperty": "--color-abyss-neutral-150", - "customizable": false - }, - "originalValue": "{!color-abyss-neutral-150}" - }, - "fluid-color-surface-background": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-background", - "value": "#fafbfb", - "meta": { - "friendlyName": "surface background", - "sassVariable": "$color-surface-background", - "customProperty": "--color-surface-background", - "customizable": false - }, - "originalValue": "{!color-surface-background}" - }, - "fluid-color-surface-maxcontrast": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-maxcontrast", - "value": "#111216", - "meta": { - "friendlyName": "surface maxcontrast", - "sassVariable": "$color-surface-maxcontrast", - "customProperty": "--color-surface-maxcontrast", - "customizable": false - }, - "originalValue": "{!color-surface-maxcontrast}" - }, - "fluid-color-surface-primary-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-primary-70", - "value": "#9ac0f9", - "meta": { - "friendlyName": "surface primary, contrast 70", - "sassVariable": "$color-surface-primary-70", - "customProperty": "--color-surface-primary-70", - "customizable": false - }, - "originalValue": "{!color-surface-primary-70}" - }, - "fluid-color-surface-primary-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-primary-80", - "value": "#5998f6", - "meta": { - "friendlyName": "surface primary, contrast 80", - "sassVariable": "$color-surface-primary-80", - "customProperty": "--color-surface-primary-80", - "customizable": false - }, - "originalValue": "{!color-surface-primary-80}" - }, - "fluid-color-surface-primary-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-primary-90", - "value": "#156df2", - "meta": { - "friendlyName": "surface primary, contrast 90", - "sassVariable": "$color-surface-primary-90", - "customProperty": "--color-surface-primary-90", - "customizable": false - }, - "originalValue": "{!color-surface-primary-90}" - }, - "fluid-color-surface-primary-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-primary-100", - "value": "#0b55c5", - "meta": { - "friendlyName": "surface primary, contrast 100", - "sassVariable": "$color-surface-primary-100", - "customProperty": "--color-surface-primary-100", - "customizable": false - }, - "originalValue": "{!color-surface-primary-100}" - }, - "fluid-color-surface-primary-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-primary-110", - "value": "#0945a0", - "meta": { - "friendlyName": "surface primary, contrast 110", - "sassVariable": "$color-surface-primary-110", - "customProperty": "--color-surface-primary-110", - "customizable": false - }, - "originalValue": "{!color-surface-primary-110}" - }, - "fluid-color-surface-primary-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-primary-120", - "value": "#073477", - "meta": { - "friendlyName": "surface primary, contrast 120", - "sassVariable": "$color-surface-primary-120", - "customProperty": "--color-surface-primary-120", - "customizable": false - }, - "originalValue": "{!color-surface-primary-120}" - }, - "fluid-color-surface-primary-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-primary-130", - "value": "#052554", - "meta": { - "friendlyName": "surface primary, contrast 130", - "sassVariable": "$color-surface-primary-130", - "customProperty": "--color-surface-primary-130", - "customizable": false - }, - "originalValue": "{!color-surface-primary-130}" - }, - "fluid-color-surface-positive-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-positive-70", - "value": "#b1ead1", - "meta": { - "friendlyName": "surface positive, contrast 70", - "sassVariable": "$color-surface-positive-70", - "customProperty": "--color-surface-positive-70", - "customizable": false - }, - "originalValue": "{!color-surface-positive-70}" - }, - "fluid-color-surface-positive-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-positive-80", - "value": "#4ecf96", - "meta": { - "friendlyName": "surface positive, contrast 80", - "sassVariable": "$color-surface-positive-80", - "customProperty": "--color-surface-positive-80", - "customizable": false - }, - "originalValue": "{!color-surface-positive-80}" - }, - "fluid-color-surface-positive-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-positive-90", - "value": "#2a9868", - "meta": { - "friendlyName": "surface positive, contrast 90", - "sassVariable": "$color-surface-positive-90", - "customProperty": "--color-surface-positive-90", - "customizable": false - }, - "originalValue": "{!color-surface-positive-90}" - }, - "fluid-color-surface-positive-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-positive-100", - "value": "#207450", - "meta": { - "friendlyName": "surface positive, contrast 100", - "sassVariable": "$color-surface-positive-100", - "customProperty": "--color-surface-positive-100", - "customizable": false - }, - "originalValue": "{!color-surface-positive-100}" - }, - "fluid-color-surface-positive-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-positive-110", - "value": "#1a5d40", - "meta": { - "friendlyName": "surface positive, contrast 110", - "sassVariable": "$color-surface-positive-110", - "customProperty": "--color-surface-positive-110", - "customizable": false - }, - "originalValue": "{!color-surface-positive-110}" - }, - "fluid-color-surface-positive-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-positive-120", - "value": "#134630", - "meta": { - "friendlyName": "surface positive, contrast 120", - "sassVariable": "$color-surface-positive-120", - "customProperty": "--color-surface-positive-120", - "customizable": false - }, - "originalValue": "{!color-surface-positive-120}" - }, - "fluid-color-surface-positive-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-positive-130", - "value": "#0e3223", - "meta": { - "friendlyName": "surface positive, contrast 130", - "sassVariable": "$color-surface-positive-130", - "customProperty": "--color-surface-positive-130", - "customizable": false - }, - "originalValue": "{!color-surface-positive-130}" - }, - "fluid-color-surface-warning-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-warning-70", - "value": "#ffedb2", - "meta": { - "friendlyName": "surface warning, contrast 70", - "sassVariable": "$color-surface-warning-70", - "customProperty": "--color-surface-warning-70", - "customizable": false - }, - "originalValue": "{!color-surface-warning-70}" - }, - "fluid-color-surface-warning-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-warning-80", - "value": "#ffd651", - "meta": { - "friendlyName": "surface warning, contrast 80", - "sassVariable": "$color-surface-warning-80", - "customProperty": "--color-surface-warning-80", - "customizable": false - }, - "originalValue": "{!color-surface-warning-80}" - }, - "fluid-color-surface-warning-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-warning-90", - "value": "#e2ac00", - "meta": { - "friendlyName": "surface warning, contrast 90", - "sassVariable": "$color-surface-warning-90", - "customProperty": "--color-surface-warning-90", - "customizable": false - }, - "originalValue": "{!color-surface-warning-90}" - }, - "fluid-color-surface-warning-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-warning-100", - "value": "#8f6e00", - "meta": { - "friendlyName": "surface warning, contrast 100", - "sassVariable": "$color-surface-warning-100", - "customProperty": "--color-surface-warning-100", - "customizable": false - }, - "originalValue": "{!color-surface-warning-100}" - }, - "fluid-color-surface-warning-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-warning-110", - "value": "#735700", - "meta": { - "friendlyName": "surface warning, contrast 110", - "sassVariable": "$color-surface-warning-110", - "customProperty": "--color-surface-warning-110", - "customizable": false - }, - "originalValue": "{!color-surface-warning-110}" - }, - "fluid-color-surface-warning-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-warning-120", - "value": "#544100", - "meta": { - "friendlyName": "surface warning, contrast 120", - "sassVariable": "$color-surface-warning-120", - "customProperty": "--color-surface-warning-120", - "customizable": false - }, - "originalValue": "{!color-surface-warning-120}" - }, - "fluid-color-surface-warning-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-warning-130", - "value": "#3f3000", - "meta": { - "friendlyName": "surface warning, contrast 130", - "sassVariable": "$color-surface-warning-130", - "customProperty": "--color-surface-warning-130", - "customizable": false - }, - "originalValue": "{!color-surface-warning-130}" - }, - "fluid-color-surface-error-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-error-70", - "value": "#fbc0ca", - "meta": { - "friendlyName": "surface error, contrast 70", - "sassVariable": "$color-surface-error-70", - "customProperty": "--color-surface-error-70", - "customizable": false - }, - "originalValue": "{!color-surface-error-70}" - }, - "fluid-color-surface-error-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-error-80", - "value": "#f88b9d", - "meta": { - "friendlyName": "surface error, contrast 80", - "sassVariable": "$color-surface-error-80", - "customProperty": "--color-surface-error-80", - "customizable": false - }, - "originalValue": "{!color-surface-error-80}" - }, - "fluid-color-surface-error-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-error-90", - "value": "#f4425f", - "meta": { - "friendlyName": "surface error, contrast 90", - "sassVariable": "$color-surface-error-90", - "customProperty": "--color-surface-error-90", - "customizable": false - }, - "originalValue": "{!color-surface-error-90}" - }, - "fluid-color-surface-error-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-error-100", - "value": "#c20b29", - "meta": { - "friendlyName": "surface error, contrast 100", - "sassVariable": "$color-surface-error-100", - "customProperty": "--color-surface-error-100", - "customizable": false - }, - "originalValue": "{!color-surface-error-100}" - }, - "fluid-color-surface-error-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-error-110", - "value": "#9e0921", - "meta": { - "friendlyName": "surface error, contrast 110", - "sassVariable": "$color-surface-error-110", - "customProperty": "--color-surface-error-110", - "customizable": false - }, - "originalValue": "{!color-surface-error-110}" - }, - "fluid-color-surface-error-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-error-120", - "value": "#780719", - "meta": { - "friendlyName": "surface error, contrast 120", - "sassVariable": "$color-surface-error-120", - "customProperty": "--color-surface-error-120", - "customizable": false - }, - "originalValue": "{!color-surface-error-120}" - }, - "fluid-color-surface-error-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-error-130", - "value": "#590513", - "meta": { - "friendlyName": "surface error, contrast 130", - "sassVariable": "$color-surface-error-130", - "customProperty": "--color-surface-error-130", - "customizable": false - }, - "originalValue": "{!color-surface-error-130}" - }, - "fluid-color-surface-nasty-orange-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-nasty-orange-70", - "value": "#fed2af", - "meta": { - "friendlyName": "surface nasty-orange, contrast 70", - "sassVariable": "$color-surface-nasty-orange-70", - "customProperty": "--color-surface-nasty-orange-70", - "customizable": false - }, - "originalValue": "{!color-surface-nasty-orange-70}" - }, - "fluid-color-surface-nasty-orange-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-nasty-orange-80", - "value": "#fdac69", - "meta": { - "friendlyName": "surface nasty-orange, contrast 80", - "sassVariable": "$color-surface-nasty-orange-80", - "customProperty": "--color-surface-nasty-orange-80", - "customizable": false - }, - "originalValue": "{!color-surface-nasty-orange-80}" - }, - "fluid-color-surface-nasty-orange-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-nasty-orange-90", - "value": "#ee6c03", - "meta": { - "friendlyName": "surface nasty-orange, contrast 90", - "sassVariable": "$color-surface-nasty-orange-90", - "customProperty": "--color-surface-nasty-orange-90", - "customizable": false - }, - "originalValue": "{!color-surface-nasty-orange-90}" - }, - "fluid-color-surface-nasty-orange-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-nasty-orange-100", - "value": "#be5602", - "meta": { - "friendlyName": "surface nasty-orange, contrast 100", - "sassVariable": "$color-surface-nasty-orange-100", - "customProperty": "--color-surface-nasty-orange-100", - "customizable": false - }, - "originalValue": "{!color-surface-nasty-orange-100}" - }, - "fluid-color-surface-nasty-orange-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-nasty-orange-110", - "value": "#8e4001", - "meta": { - "friendlyName": "surface nasty-orange, contrast 110", - "sassVariable": "$color-surface-nasty-orange-110", - "customProperty": "--color-surface-nasty-orange-110", - "customizable": false - }, - "originalValue": "{!color-surface-nasty-orange-110}" - }, - "fluid-color-surface-nasty-orange-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-nasty-orange-120", - "value": "#6a3001", - "meta": { - "friendlyName": "surface nasty-orange, contrast 120", - "sassVariable": "$color-surface-nasty-orange-120", - "customProperty": "--color-surface-nasty-orange-120", - "customizable": false - }, - "originalValue": "{!color-surface-nasty-orange-120}" - }, - "fluid-color-surface-nasty-orange-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-nasty-orange-130", - "value": "#4e2301", - "meta": { - "friendlyName": "surface nasty-orange, contrast 130", - "sassVariable": "$color-surface-nasty-orange-130", - "customProperty": "--color-surface-nasty-orange-130", - "customizable": false - }, - "originalValue": "{!color-surface-nasty-orange-130}" - }, - "fluid-color-surface-hot-pink-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-hot-pink-70", - "value": "#f6c0de", - "meta": { - "friendlyName": "surface hot-pink, contrast 70", - "sassVariable": "$color-surface-hot-pink-70", - "customProperty": "--color-surface-hot-pink-70", - "customizable": false - }, - "originalValue": "{!color-surface-hot-pink-70}" - }, - "fluid-color-surface-hot-pink-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-hot-pink-80", - "value": "#ef8cc3", - "meta": { - "friendlyName": "surface hot-pink, contrast 80", - "sassVariable": "$color-surface-hot-pink-80", - "customProperty": "--color-surface-hot-pink-80", - "customizable": false - }, - "originalValue": "{!color-surface-hot-pink-80}" - }, - "fluid-color-surface-hot-pink-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-hot-pink-90", - "value": "#e861ad", - "meta": { - "friendlyName": "surface hot-pink, contrast 90", - "sassVariable": "$color-surface-hot-pink-90", - "customProperty": "--color-surface-hot-pink-90", - "customizable": false - }, - "originalValue": "{!color-surface-hot-pink-90}" - }, - "fluid-color-surface-hot-pink-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-hot-pink-100", - "value": "#cc1d7f", - "meta": { - "friendlyName": "surface hot-pink, contrast 100", - "sassVariable": "$color-surface-hot-pink-100", - "customProperty": "--color-surface-hot-pink-100", - "customizable": false - }, - "originalValue": "{!color-surface-hot-pink-100}" - }, - "fluid-color-surface-hot-pink-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-hot-pink-110", - "value": "#a41766", - "meta": { - "friendlyName": "surface hot-pink, contrast 110", - "sassVariable": "$color-surface-hot-pink-110", - "customProperty": "--color-surface-hot-pink-110", - "customizable": false - }, - "originalValue": "{!color-surface-hot-pink-110}" - }, - "fluid-color-surface-hot-pink-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-hot-pink-120", - "value": "#7b114c", - "meta": { - "friendlyName": "surface hot-pink, contrast 120", - "sassVariable": "$color-surface-hot-pink-120", - "customProperty": "--color-surface-hot-pink-120", - "customizable": false - }, - "originalValue": "{!color-surface-hot-pink-120}" - }, - "fluid-color-surface-hot-pink-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-hot-pink-130", - "value": "#5b0d38", - "meta": { - "friendlyName": "surface hot-pink, contrast 130", - "sassVariable": "$color-surface-hot-pink-130", - "customProperty": "--color-surface-hot-pink-130", - "customizable": false - }, - "originalValue": "{!color-surface-hot-pink-130}" - }, - "fluid-color-surface-soylent-green-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-soylent-green-70", - "value": "#95dcdc", - "meta": { - "friendlyName": "surface soylent-green, contrast 70", - "sassVariable": "$color-surface-soylent-green-70", - "customProperty": "--color-surface-soylent-green-70", - "customizable": false - }, - "originalValue": "{!color-surface-soylent-green-70}" - }, - "fluid-color-surface-soylent-green-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-soylent-green-80", - "value": "#51c5c5", - "meta": { - "friendlyName": "surface soylent-green, contrast 80", - "sassVariable": "$color-surface-soylent-green-80", - "customProperty": "--color-surface-soylent-green-80", - "customizable": false - }, - "originalValue": "{!color-surface-soylent-green-80}" - }, - "fluid-color-surface-soylent-green-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-soylent-green-90", - "value": "#36a1a1", - "meta": { - "friendlyName": "surface soylent-green, contrast 90", - "sassVariable": "$color-surface-soylent-green-90", - "customProperty": "--color-surface-soylent-green-90", - "customizable": false - }, - "originalValue": "{!color-surface-soylent-green-90}" - }, - "fluid-color-surface-soylent-green-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-soylent-green-100", - "value": "#287878", - "meta": { - "friendlyName": "surface soylent-green, contrast 100", - "sassVariable": "$color-surface-soylent-green-100", - "customProperty": "--color-surface-soylent-green-100", - "customizable": false - }, - "originalValue": "{!color-surface-soylent-green-100}" - }, - "fluid-color-surface-soylent-green-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-soylent-green-110", - "value": "#206060", - "meta": { - "friendlyName": "surface soylent-green, contrast 110", - "sassVariable": "$color-surface-soylent-green-110", - "customProperty": "--color-surface-soylent-green-110", - "customizable": false - }, - "originalValue": "{!color-surface-soylent-green-110}" - }, - "fluid-color-surface-soylent-green-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-soylent-green-120", - "value": "#184747", - "meta": { - "friendlyName": "surface soylent-green, contrast 120", - "sassVariable": "$color-surface-soylent-green-120", - "customProperty": "--color-surface-soylent-green-120", - "customizable": false - }, - "originalValue": "{!color-surface-soylent-green-120}" - }, - "fluid-color-surface-soylent-green-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-soylent-green-130", - "value": "#113434", - "meta": { - "friendlyName": "surface soylent-green, contrast 130", - "sassVariable": "$color-surface-soylent-green-130", - "customProperty": "--color-surface-soylent-green-130", - "customizable": false - }, - "originalValue": "{!color-surface-soylent-green-130}" - }, - "fluid-color-surface-naughty-purple-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-naughty-purple-70", - "value": "#dcc8e8", - "meta": { - "friendlyName": "surface naughty-purple, contrast 70", - "sassVariable": "$color-surface-naughty-purple-70", - "customProperty": "--color-surface-naughty-purple-70", - "customizable": false - }, - "originalValue": "{!color-surface-naughty-purple-70}" - }, - "fluid-color-surface-naughty-purple-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-naughty-purple-80", - "value": "#af80c9", - "meta": { - "friendlyName": "surface naughty-purple, contrast 80", - "sassVariable": "$color-surface-naughty-purple-80", - "customProperty": "--color-surface-naughty-purple-80", - "customizable": false - }, - "originalValue": "{!color-surface-naughty-purple-80}" - }, - "fluid-color-surface-naughty-purple-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-naughty-purple-90", - "value": "#9e65be", - "meta": { - "friendlyName": "surface naughty-purple, contrast 90", - "sassVariable": "$color-surface-naughty-purple-90", - "customProperty": "--color-surface-naughty-purple-90", - "customizable": false - }, - "originalValue": "{!color-surface-naughty-purple-90}" - }, - "fluid-color-surface-naughty-purple-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-naughty-purple-100", - "value": "#9151b5", - "meta": { - "friendlyName": "surface naughty-purple, contrast 100", - "sassVariable": "$color-surface-naughty-purple-100", - "customProperty": "--color-surface-naughty-purple-100", - "customizable": false - }, - "originalValue": "{!color-surface-naughty-purple-100}" - }, - "fluid-color-surface-naughty-purple-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-naughty-purple-110", - "value": "#753f94", - "meta": { - "friendlyName": "surface naughty-purple, contrast 110", - "sassVariable": "$color-surface-naughty-purple-110", - "customProperty": "--color-surface-naughty-purple-110", - "customizable": false - }, - "originalValue": "{!color-surface-naughty-purple-110}" - }, - "fluid-color-surface-naughty-purple-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-naughty-purple-120", - "value": "#572e6d", - "meta": { - "friendlyName": "surface naughty-purple, contrast 120", - "sassVariable": "$color-surface-naughty-purple-120", - "customProperty": "--color-surface-naughty-purple-120", - "customizable": false - }, - "originalValue": "{!color-surface-naughty-purple-120}" - }, - "fluid-color-surface-naughty-purple-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-naughty-purple-130", - "value": "#402250", - "meta": { - "friendlyName": "surface naughty-purple, contrast 130", - "sassVariable": "$color-surface-naughty-purple-130", - "customProperty": "--color-surface-naughty-purple-130", - "customizable": false - }, - "originalValue": "{!color-surface-naughty-purple-130}" - }, - "fluid-color-surface-neutral-50": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-50", - "value": "#eff0f3", - "meta": { - "friendlyName": "surface neutral, contrast 50", - "sassVariable": "$color-surface-neutral-50", - "customProperty": "--color-surface-neutral-50", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-50}" - }, - "fluid-color-surface-neutral-60": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-60", - "value": "#e5e7ea", - "meta": { - "friendlyName": "surface neutral, contrast 60", - "sassVariable": "$color-surface-neutral-60", - "customProperty": "--color-surface-neutral-60", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-60}" - }, - "fluid-color-surface-neutral-70": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-70", - "value": "#dcdee3", - "meta": { - "friendlyName": "surface neutral, contrast 70", - "sassVariable": "$color-surface-neutral-70", - "customProperty": "--color-surface-neutral-70", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-70}" - }, - "fluid-color-surface-neutral-80": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-80", - "value": "#c6c9d1", - "meta": { - "friendlyName": "surface neutral, contrast 80", - "sassVariable": "$color-surface-neutral-80", - "customProperty": "--color-surface-neutral-80", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-80}" - }, - "fluid-color-surface-neutral-90": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-90", - "value": "#9ba1b0", - "meta": { - "friendlyName": "surface neutral, contrast 90", - "sassVariable": "$color-surface-neutral-90", - "customProperty": "--color-surface-neutral-90", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-90}" - }, - "fluid-color-surface-neutral-100": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-100", - "value": "#6d7488", - "meta": { - "friendlyName": "surface neutral, contrast 100", - "sassVariable": "$color-surface-neutral-100", - "customProperty": "--color-surface-neutral-100", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-100}" - }, - "fluid-color-surface-neutral-110": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-110", - "value": "#515666", - "meta": { - "friendlyName": "surface neutral, contrast 110", - "sassVariable": "$color-surface-neutral-110", - "customProperty": "--color-surface-neutral-110", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-110}" - }, - "fluid-color-surface-neutral-120": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-120", - "value": "#404450", - "meta": { - "friendlyName": "surface neutral, contrast 120", - "sassVariable": "$color-surface-neutral-120", - "customProperty": "--color-surface-neutral-120", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-120}" - }, - "fluid-color-surface-neutral-130": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-130", - "value": "#30333c", - "meta": { - "friendlyName": "surface neutral, contrast 130", - "sassVariable": "$color-surface-neutral-130", - "customProperty": "--color-surface-neutral-130", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-130}" - }, - "fluid-color-surface-neutral-140": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-140", - "value": "#21242a", - "meta": { - "friendlyName": "surface neutral, contrast 140", - "sassVariable": "$color-surface-neutral-140", - "customProperty": "--color-surface-neutral-140", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-140}" - }, - "fluid-color-surface-neutral-150": { - "type": "dt-palette", - "category": "dt-palette", - "name": "fluid-color-surface-neutral-150", - "value": "#111316", - "meta": { - "friendlyName": "surface neutral, contrast 150", - "sassVariable": "$color-surface-neutral-150", - "customProperty": "--color-surface-neutral-150", - "customizable": false - }, - "originalValue": "{!color-surface-neutral-150}" - } - }, - "aliases": { - "color-abyss-neutral-50": { - "value": "#1a1c21", - "comment": "abyss neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-neutral-110": { - "value": "#515666", - "comment": "surface neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-warning-110": { - "value": "#ffd752", - "comment": "abyss warning, contrast 110", - "originalRatio": 13.5 - }, - "color-surface-error-120": { - "value": "#780719", - "comment": "surface error, contrast 120", - "originalRatio": 11 - }, - "color-abyss-primary-90": { - "value": "#136cf2", - "comment": "abyss primary, contrast 90", - "originalRatio": 4 - }, - "color-surface-hot-pink-130": { - "value": "#5b0d38", - "comment": "surface hot-pink, contrast 130", - "originalRatio": 13 - }, - "color-surface-positive-90": { - "value": "#2a9868", - "comment": "surface positive, contrast 90", - "originalRatio": 3.5 - }, - "color-surface-nasty-orange-130": { - "value": "#4e2301", - "comment": "surface nasty-orange, contrast 130", - "originalRatio": 13 - }, - "color-surface-neutral-100": { - "value": "#6d7488", - "comment": "surface neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-naughty-purple-130": { - "value": "#e5d6ed", - "comment": "abyss naughty-purple, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-warning-100": { - "value": "#fcc300", - "comment": "abyss warning, contrast 100", - "originalRatio": 11.5 - }, - "color-surface-error-110": { - "value": "#9e0921", - "comment": "surface error, contrast 110", - "originalRatio": 8 - }, - "color-surface-hot-pink-120": { - "value": "#7b114c", - "comment": "surface hot-pink, contrast 120", - "originalRatio": 10 - }, - "color-surface-positive-80": { - "value": "#4ecf96", - "comment": "surface positive, contrast 80", - "originalRatio": 1.9 - }, - "color-surface-nasty-orange-120": { - "value": "#6a3001", - "comment": "surface nasty-orange, contrast 120", - "originalRatio": 10 - }, - "color-abyss-naughty-purple-120": { - "value": "#d3b9e1", - "comment": "abyss naughty-purple, contrast 120", - "originalRatio": 10.5 - }, - "color-surface-error-100": { - "value": "#c20b29", - "comment": "surface error, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-80": { - "value": "#0b5ace", - "comment": "abyss primary, contrast 80", - "originalRatio": 3 - }, - "color-surface-hot-pink-110": { - "value": "#a41766", - "comment": "surface hot-pink, contrast 110", - "originalRatio": 7 - }, - "color-surface-positive-70": { - "value": "#b1ead1", - "comment": "surface positive, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-nasty-orange-110": { - "value": "#8e4001", - "comment": "surface nasty-orange, contrast 110", - "originalRatio": 7 - }, - "color-abyss-naughty-purple-110": { - "value": "#c09cd5", - "comment": "abyss naughty-purple, contrast 110", - "originalRatio": 8 - }, - "color-abyss-primary-70": { - "value": "#084298", - "comment": "abyss primary, contrast 70", - "originalRatio": 2 - }, - "color-abyss-naughty-purple-90": { - "value": "#9d65be", - "comment": "abyss naughty-purple, contrast 90", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-100": { - "value": "#be5602", - "comment": "surface nasty-orange, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-90": { - "value": "#ee6c03", - "comment": "surface nasty-orange, contrast 90", - "originalRatio": 3 - }, - "color-surface-positive-130": { - "value": "#0e3223", - "comment": "surface positive, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-naughty-purple-100": { - "value": "#ae80c9", - "comment": "abyss naughty-purple, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-130": { - "value": "#bbd5fb", - "comment": "abyss primary, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-hot-pink-90": { - "value": "#e861ad", - "comment": "surface hot-pink, contrast 90", - "originalRatio": 3 - }, - "color-surface-hot-pink-100": { - "value": "#cc1d7f", - "comment": "surface hot-pink, contrast 100", - "originalRatio": 5 - }, - "color-abyss-naughty-purple-80": { - "value": "#8246a5", - "comment": "abyss naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-nasty-orange-80": { - "value": "#fdac69", - "comment": "surface nasty-orange, contrast 80", - "originalRatio": 1.8 - }, - "color-surface-positive-120": { - "value": "#134630", - "comment": "surface positive, contrast 120", - "originalRatio": 10.5 - }, - "color-abyss-primary-120": { - "value": "#91bbf9", - "comment": "abyss primary, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-hot-pink-80": { - "value": "#ef8cc3", - "comment": "surface hot-pink, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-naughty-purple-70": { - "value": "#462658", - "comment": "abyss naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-nasty-orange-70": { - "value": "#fed2af", - "comment": "surface nasty-orange, contrast 70", - "originalRatio": 1.35 - }, - "color-surface-positive-110": { - "value": "#1a5d40", - "comment": "surface positive, contrast 110", - "originalRatio": 7.5 - }, - "color-abyss-primary-110": { - "value": "#659ff7", - "comment": "abyss primary, contrast 110", - "originalRatio": 7 - }, - "color-surface-hot-pink-70": { - "value": "#f6c0de", - "comment": "surface hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-error-90": { - "value": "#f4425f", - "comment": "surface error, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-warning-90": { - "value": "#e0ad00", - "comment": "abyss warning, contrast 90", - "originalRatio": 9 - }, - "color-abyss-neutral-150": { - "value": "#fafbfb", - "comment": "abyss neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-neutral-90": { - "value": "#9ba1b0", - "comment": "surface neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-positive-100": { - "value": "#207450", - "comment": "surface positive, contrast 100", - "originalRatio": 5.5 - }, - "color-abyss-primary-100": { - "value": "#3582f4", - "comment": "abyss primary, contrast 100", - "originalRatio": 5 - }, - "color-surface-error-80": { - "value": "#f88b9d", - "comment": "surface error, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-warning-80": { - "value": "#bd9200", - "comment": "abyss warning, contrast 80", - "originalRatio": 6.5 - }, - "color-abyss-neutral-140": { - "value": "#e5e6ea", - "comment": "abyss neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-neutral-80": { - "value": "#c6c9d1", - "comment": "surface neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-error-70": { - "value": "#fbc0ca", - "comment": "surface error, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-neutral-70": { - "value": "#dcdee3", - "comment": "surface neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-soylent-green-130": { - "value": "#113434", - "comment": "surface soylent-green, contrast 130", - "originalRatio": 13 - }, - "color-abyss-warning-70": { - "value": "#917000", - "comment": "abyss warning, contrast 70", - "originalRatio": 4 - }, - "color-abyss-neutral-130": { - "value": "#ced1d8", - "comment": "abyss neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-surface-neutral-60": { - "value": "#e5e7ea", - "comment": "surface neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-soylent-green-120": { - "value": "#184747", - "comment": "surface soylent-green, contrast 120", - "originalRatio": 10 - }, - "color-abyss-neutral-120": { - "value": "#b5b9c4", - "comment": "abyss neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-error-130": { - "value": "#fcc6ce", - "comment": "abyss error, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-neutral-50": { - "value": "#eff0f3", - "comment": "surface neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-soylent-green-110": { - "value": "#206060", - "comment": "surface soylent-green, contrast 110", - "originalRatio": 7 - }, - "color-abyss-neutral-110": { - "value": "#999ead", - "comment": "abyss neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-error-120": { - "value": "#fa9fae", - "comment": "abyss error, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-soylent-green-100": { - "value": "#287878", - "comment": "surface soylent-green, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-90": { - "value": "#2fad76", - "comment": "abyss positive, contrast 90", - "originalRatio": 6.5 - }, - "color-surface-naughty-purple-130": { - "value": "#402250", - "comment": "surface naughty-purple, contrast 130", - "originalRatio": 13 - }, - "color-surface-primary-90": { - "value": "#156df2", - "comment": "surface primary, contrast 90", - "originalRatio": 4.5 - }, - "color-abyss-neutral-100": { - "value": "#757c91", - "comment": "abyss neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-error-110": { - "value": "#f77589", - "comment": "abyss error, contrast 110", - "originalRatio": 7 - }, - "color-abyss-positive-80": { - "value": "#268d60", - "comment": "abyss positive, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-naughty-purple-120": { - "value": "#572e6d", - "comment": "surface naughty-purple, contrast 120", - "originalRatio": 10 - }, - "color-surface-primary-80": { - "value": "#5998f6", - "comment": "surface primary, contrast 80", - "originalRatio": 2.8 - }, - "color-abyss-error-100": { - "value": "#f43b58", - "comment": "abyss error, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-70": { - "value": "#1a6142", - "comment": "abyss positive, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-naughty-purple-110": { - "value": "#753f94", - "comment": "surface naughty-purple, contrast 110", - "originalRatio": 7 - }, - "color-surface-primary-70": { - "value": "#9ac0f9", - "comment": "surface primary, contrast 70", - "originalRatio": 1.8 - }, - "color-abyss-nasty-orange-90": { - "value": "#ed6b02", - "comment": "abyss nasty-orange, contrast 90", - "originalRatio": 6 - }, - "color-surface-naughty-purple-100": { - "value": "#9151b5", - "comment": "surface naughty-purple, contrast 100", - "originalRatio": 5 - }, - "color-abyss-hot-pink-90": { - "value": "#c81d7d", - "comment": "abyss hot-pink, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-nasty-orange-80": { - "value": "#bc5602", - "comment": "abyss nasty-orange, contrast 80", - "originalRatio": 4 - }, - "color-abyss-hot-pink-80": { - "value": "#a01764", - "comment": "abyss hot-pink, contrast 80", - "originalRatio": 2.5 - }, - "color-abyss-nasty-orange-70": { - "value": "#743501", - "comment": "abyss nasty-orange, contrast 70", - "originalRatio": 2 - }, - "color-abyss-soylent-green-90": { - "value": "#339a9a", - "comment": "abyss soylent-green, contrast 90", - "originalRatio": 5.5 - }, - "color-abyss-hot-pink-70": { - "value": "#640f3f", - "comment": "abyss hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-soylent-green-80": { - "value": "#2d8989", - "comment": "abyss soylent-green, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-warning-90": { - "value": "#e2ac00", - "comment": "surface warning, contrast 90", - "originalRatio": 2 - }, - "color-surface-warning-130": { - "value": "#3f3000", - "comment": "surface warning, contrast 130", - "originalRatio": 12.4 - }, - "color-abyss-soylent-green-70": { - "value": "#1f5d5d", - "comment": "abyss soylent-green, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-warning-80": { - "value": "#ffd651", - "comment": "surface warning, contrast 80", - "originalRatio": 1.35 - }, - "color-abyss-soylent-green-130": { - "value": "#c9eded", - "comment": "abyss soylent-green, contrast 130", - "originalRatio": 15 - }, - "color-surface-warning-120": { - "value": "#544100", - "comment": "surface warning, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-warning-70": { - "value": "#ffedb2", - "comment": "surface warning, contrast 70", - "originalRatio": 1.12 - }, - "color-abyss-soylent-green-120": { - "value": "#94dcdc", - "comment": "abyss soylent-green, contrast 120", - "originalRatio": 12 - }, - "color-surface-warning-110": { - "value": "#735700", - "comment": "surface warning, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-hot-pink-130": { - "value": "#f6c0de", - "comment": "abyss hot-pink, contrast 130", - "originalRatio": 12 - }, - "color-abyss-soylent-green-110": { - "value": "#5dc9c9", - "comment": "abyss soylent-green, contrast 110", - "originalRatio": 9.5 - }, - "color-surface-warning-100": { - "value": "#8f6e00", - "comment": "surface warning, contrast 100", - "originalRatio": 4.6 - }, - "color-abyss-nasty-orange-130": { - "value": "#ffe6d1", - "comment": "abyss nasty-orange, contrast 130", - "originalRatio": 15.5 - }, - "color-abyss-hot-pink-120": { - "value": "#f098c9", - "comment": "abyss hot-pink, contrast 120", - "originalRatio": 9 - }, - "color-abyss-soylent-green-100": { - "value": "#3cb5b5", - "comment": "abyss soylent-green, contrast 100", - "originalRatio": 7.5 - }, - "color-abyss-nasty-orange-120": { - "value": "#fec89d", - "comment": "abyss nasty-orange, contrast 120", - "originalRatio": 12.5 - }, - "color-abyss-hot-pink-110": { - "value": "#ea6db3", - "comment": "abyss hot-pink, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-nasty-orange-110": { - "value": "#feab67", - "comment": "abyss nasty-orange, contrast 110", - "originalRatio": 10 - }, - "color-abyss-hot-pink-100": { - "value": "#e13093", - "comment": "abyss hot-pink, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-primary-130": { - "value": "#052554", - "comment": "surface primary, contrast 130", - "originalRatio": 14.5 - }, - "color-abyss-positive-130": { - "value": "#d6f4e7", - "comment": "abyss positive, contrast 130", - "originalRatio": 16 - }, - "color-abyss-nasty-orange-100": { - "value": "#fd8c30", - "comment": "abyss nasty-orange, contrast 100", - "originalRatio": 8 - }, - "color-surface-naughty-purple-90": { - "value": "#9e65be", - "comment": "surface naughty-purple, contrast 90", - "originalRatio": 4 - }, - "color-surface-primary-120": { - "value": "#073477", - "comment": "surface primary, contrast 120", - "originalRatio": 11.5 - }, - "color-abyss-positive-120": { - "value": "#a2e6c8", - "comment": "abyss positive, contrast 120", - "originalRatio": 13 - }, - "color-surface-naughty-purple-80": { - "value": "#af80c9", - "comment": "surface naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-primary-110": { - "value": "#0945a0", - "comment": "surface primary, contrast 110", - "originalRatio": 8.5 - }, - "color-abyss-positive-110": { - "value": "#69d6a7", - "comment": "abyss positive, contrast 110", - "originalRatio": 10.5 - }, - "color-abyss-error-90": { - "value": "#e60d30", - "comment": "abyss error, contrast 90", - "originalRatio": 4 - }, - "color-surface-naughty-purple-70": { - "value": "#dcc8e8", - "comment": "surface naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-soylent-green-90": { - "value": "#36a1a1", - "comment": "surface soylent-green, contrast 90", - "originalRatio": 3 - }, - "color-surface-primary-100": { - "value": "#0b55c5", - "comment": "surface primary, contrast 100", - "originalRatio": 6.5 - }, - "color-abyss-positive-100": { - "value": "#36c587", - "comment": "abyss positive, contrast 100", - "originalRatio": 8.5 - }, - "color-abyss-error-80": { - "value": "#c20b28", - "comment": "abyss error, contrast 80", - "originalRatio": 3 - }, - "color-abyss-neutral-90": { - "value": "#505564", - "comment": "abyss neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-neutral-150": { - "value": "#111316", - "comment": "surface neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-soylent-green-80": { - "value": "#51c5c5", - "comment": "surface soylent-green, contrast 80", - "originalRatio": 2 - }, - "color-abyss-error-70": { - "value": "#90081e", - "comment": "abyss error, contrast 70", - "originalRatio": 2 - }, - "color-abyss-neutral-80": { - "value": "#343842", - "comment": "abyss neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-neutral-140": { - "value": "#21242a", - "comment": "surface neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-soylent-green-70": { - "value": "#95dcdc", - "comment": "surface soylent-green, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-neutral-70": { - "value": "#272a31", - "comment": "abyss neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-neutral-130": { - "value": "#30333c", - "comment": "surface neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-abyss-warning-130": { - "value": "#fff0bf", - "comment": "abyss warning, contrast 130", - "originalRatio": 16.5 - }, - "color-abyss-neutral-60": { - "value": "#21242a", - "comment": "abyss neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-neutral-120": { - "value": "#404450", - "comment": "surface neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-warning-120": { - "value": "#ffe99d", - "comment": "abyss warning, contrast 120", - "originalRatio": 15.5 - }, - "color-surface-error-130": { - "value": "#590513", - "comment": "surface error, contrast 130", - "originalRatio": 14 - }, - "color-abyss-background": { - "value": "#111216" - }, - "color-abyss-maxcontrast": { - "value": "#fafbfb" - }, - "color-surface-background": { - "value": "#fafbfb" - }, - "color-surface-maxcontrast": { - "value": "#111216" - } - } -} diff --git a/libs/shared/design-tokens/generated/global/palette.scss b/libs/shared/design-tokens/generated/global/palette.scss deleted file mode 100644 index 1eeae1c5da..0000000000 --- a/libs/shared/design-tokens/generated/global/palette.scss +++ /dev/null @@ -1,144 +0,0 @@ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -$fluid-color-abyss-background: #111216 !default; -$fluid-color-abyss-maxcontrast: #fafbfb !default; -$fluid-color-abyss-primary-70: #084298 !default; -$fluid-color-abyss-primary-80: #0b5ace !default; -$fluid-color-abyss-primary-90: #136cf2 !default; -$fluid-color-abyss-primary-100: #3582f4 !default; -$fluid-color-abyss-primary-110: #659ff7 !default; -$fluid-color-abyss-primary-120: #91bbf9 !default; -$fluid-color-abyss-primary-130: #bbd5fb !default; -$fluid-color-abyss-positive-70: #1a6142 !default; -$fluid-color-abyss-positive-80: #268d60 !default; -$fluid-color-abyss-positive-90: #2fad76 !default; -$fluid-color-abyss-positive-100: #36c587 !default; -$fluid-color-abyss-positive-110: #69d6a7 !default; -$fluid-color-abyss-positive-120: #a2e6c8 !default; -$fluid-color-abyss-positive-130: #d6f4e7 !default; -$fluid-color-abyss-warning-70: #917000 !default; -$fluid-color-abyss-warning-80: #bd9200 !default; -$fluid-color-abyss-warning-90: #e0ad00 !default; -$fluid-color-abyss-warning-100: #fcc300 !default; -$fluid-color-abyss-warning-110: #ffd752 !default; -$fluid-color-abyss-warning-120: #ffe99d !default; -$fluid-color-abyss-warning-130: #fff0bf !default; -$fluid-color-abyss-error-70: #90081e !default; -$fluid-color-abyss-error-80: #c20b28 !default; -$fluid-color-abyss-error-90: #e60d30 !default; -$fluid-color-abyss-error-100: #f43b58 !default; -$fluid-color-abyss-error-110: #f77589 !default; -$fluid-color-abyss-error-120: #fa9fae !default; -$fluid-color-abyss-error-130: #fcc6ce !default; -$fluid-color-abyss-nasty-orange-70: #743501 !default; -$fluid-color-abyss-nasty-orange-80: #bc5602 !default; -$fluid-color-abyss-nasty-orange-90: #ed6b02 !default; -$fluid-color-abyss-nasty-orange-100: #fd8c30 !default; -$fluid-color-abyss-nasty-orange-110: #feab67 !default; -$fluid-color-abyss-nasty-orange-120: #fec89d !default; -$fluid-color-abyss-nasty-orange-130: #ffe6d1 !default; -$fluid-color-abyss-hot-pink-70: #640f3f !default; -$fluid-color-abyss-hot-pink-80: #a01764 !default; -$fluid-color-abyss-hot-pink-90: #c81d7d !default; -$fluid-color-abyss-hot-pink-100: #e13093 !default; -$fluid-color-abyss-hot-pink-110: #ea6db3 !default; -$fluid-color-abyss-hot-pink-120: #f098c9 !default; -$fluid-color-abyss-hot-pink-130: #f6c0de !default; -$fluid-color-abyss-soylent-green-70: #1f5d5d !default; -$fluid-color-abyss-soylent-green-80: #2d8989 !default; -$fluid-color-abyss-soylent-green-90: #339a9a !default; -$fluid-color-abyss-soylent-green-100: #3cb5b5 !default; -$fluid-color-abyss-soylent-green-110: #5dc9c9 !default; -$fluid-color-abyss-soylent-green-120: #94dcdc !default; -$fluid-color-abyss-soylent-green-130: #c9eded !default; -$fluid-color-abyss-naughty-purple-70: #462658 !default; -$fluid-color-abyss-naughty-purple-80: #8246a5 !default; -$fluid-color-abyss-naughty-purple-90: #9d65be !default; -$fluid-color-abyss-naughty-purple-100: #ae80c9 !default; -$fluid-color-abyss-naughty-purple-110: #c09cd5 !default; -$fluid-color-abyss-naughty-purple-120: #d3b9e1 !default; -$fluid-color-abyss-naughty-purple-130: #e5d6ed !default; -$fluid-color-abyss-neutral-50: #1a1c21 !default; -$fluid-color-abyss-neutral-60: #21242a !default; -$fluid-color-abyss-neutral-70: #272a31 !default; -$fluid-color-abyss-neutral-80: #343842 !default; -$fluid-color-abyss-neutral-90: #505564 !default; -$fluid-color-abyss-neutral-100: #757c91 !default; -$fluid-color-abyss-neutral-110: #999ead !default; -$fluid-color-abyss-neutral-120: #b5b9c4 !default; -$fluid-color-abyss-neutral-130: #ced1d8 !default; -$fluid-color-abyss-neutral-140: #e5e6ea !default; -$fluid-color-abyss-neutral-150: #fafbfb !default; -$fluid-color-surface-background: #fafbfb !default; -$fluid-color-surface-maxcontrast: #111216 !default; -$fluid-color-surface-primary-70: #9ac0f9 !default; -$fluid-color-surface-primary-80: #5998f6 !default; -$fluid-color-surface-primary-90: #156df2 !default; -$fluid-color-surface-primary-100: #0b55c5 !default; -$fluid-color-surface-primary-110: #0945a0 !default; -$fluid-color-surface-primary-120: #073477 !default; -$fluid-color-surface-primary-130: #052554 !default; -$fluid-color-surface-positive-70: #b1ead1 !default; -$fluid-color-surface-positive-80: #4ecf96 !default; -$fluid-color-surface-positive-90: #2a9868 !default; -$fluid-color-surface-positive-100: #207450 !default; -$fluid-color-surface-positive-110: #1a5d40 !default; -$fluid-color-surface-positive-120: #134630 !default; -$fluid-color-surface-positive-130: #0e3223 !default; -$fluid-color-surface-warning-70: #ffedb2 !default; -$fluid-color-surface-warning-80: #ffd651 !default; -$fluid-color-surface-warning-90: #e2ac00 !default; -$fluid-color-surface-warning-100: #8f6e00 !default; -$fluid-color-surface-warning-110: #735700 !default; -$fluid-color-surface-warning-120: #544100 !default; -$fluid-color-surface-warning-130: #3f3000 !default; -$fluid-color-surface-error-70: #fbc0ca !default; -$fluid-color-surface-error-80: #f88b9d !default; -$fluid-color-surface-error-90: #f4425f !default; -$fluid-color-surface-error-100: #c20b29 !default; -$fluid-color-surface-error-110: #9e0921 !default; -$fluid-color-surface-error-120: #780719 !default; -$fluid-color-surface-error-130: #590513 !default; -$fluid-color-surface-nasty-orange-70: #fed2af !default; -$fluid-color-surface-nasty-orange-80: #fdac69 !default; -$fluid-color-surface-nasty-orange-90: #ee6c03 !default; -$fluid-color-surface-nasty-orange-100: #be5602 !default; -$fluid-color-surface-nasty-orange-110: #8e4001 !default; -$fluid-color-surface-nasty-orange-120: #6a3001 !default; -$fluid-color-surface-nasty-orange-130: #4e2301 !default; -$fluid-color-surface-hot-pink-70: #f6c0de !default; -$fluid-color-surface-hot-pink-80: #ef8cc3 !default; -$fluid-color-surface-hot-pink-90: #e861ad !default; -$fluid-color-surface-hot-pink-100: #cc1d7f !default; -$fluid-color-surface-hot-pink-110: #a41766 !default; -$fluid-color-surface-hot-pink-120: #7b114c !default; -$fluid-color-surface-hot-pink-130: #5b0d38 !default; -$fluid-color-surface-soylent-green-70: #95dcdc !default; -$fluid-color-surface-soylent-green-80: #51c5c5 !default; -$fluid-color-surface-soylent-green-90: #36a1a1 !default; -$fluid-color-surface-soylent-green-100: #287878 !default; -$fluid-color-surface-soylent-green-110: #206060 !default; -$fluid-color-surface-soylent-green-120: #184747 !default; -$fluid-color-surface-soylent-green-130: #113434 !default; -$fluid-color-surface-naughty-purple-70: #dcc8e8 !default; -$fluid-color-surface-naughty-purple-80: #af80c9 !default; -$fluid-color-surface-naughty-purple-90: #9e65be !default; -$fluid-color-surface-naughty-purple-100: #9151b5 !default; -$fluid-color-surface-naughty-purple-110: #753f94 !default; -$fluid-color-surface-naughty-purple-120: #572e6d !default; -$fluid-color-surface-naughty-purple-130: #402250 !default; -$fluid-color-surface-neutral-50: #eff0f3 !default; -$fluid-color-surface-neutral-60: #e5e7ea !default; -$fluid-color-surface-neutral-70: #dcdee3 !default; -$fluid-color-surface-neutral-80: #c6c9d1 !default; -$fluid-color-surface-neutral-90: #9ba1b0 !default; -$fluid-color-surface-neutral-100: #6d7488 !default; -$fluid-color-surface-neutral-110: #515666 !default; -$fluid-color-surface-neutral-120: #404450 !default; -$fluid-color-surface-neutral-130: #30333c !default; -$fluid-color-surface-neutral-140: #21242a !default; -$fluid-color-surface-neutral-150: #111316 !default; diff --git a/libs/shared/design-tokens/generated/global/palette.ts b/libs/shared/design-tokens/generated/global/palette.ts deleted file mode 100644 index 9e7c4052f2..0000000000 --- a/libs/shared/design-tokens/generated/global/palette.ts +++ /dev/null @@ -1,160 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export const FLUID_COLOR_ABYSS_BACKGROUND = '#111216'; -export const FLUID_COLOR_ABYSS_MAXCONTRAST = '#fafbfb'; -export const FLUID_COLOR_ABYSS_PRIMARY_70 = '#084298'; -export const FLUID_COLOR_ABYSS_PRIMARY_80 = '#0b5ace'; -export const FLUID_COLOR_ABYSS_PRIMARY_90 = '#136cf2'; -export const FLUID_COLOR_ABYSS_PRIMARY_100 = '#3582f4'; -export const FLUID_COLOR_ABYSS_PRIMARY_110 = '#659ff7'; -export const FLUID_COLOR_ABYSS_PRIMARY_120 = '#91bbf9'; -export const FLUID_COLOR_ABYSS_PRIMARY_130 = '#bbd5fb'; -export const FLUID_COLOR_ABYSS_POSITIVE_70 = '#1a6142'; -export const FLUID_COLOR_ABYSS_POSITIVE_80 = '#268d60'; -export const FLUID_COLOR_ABYSS_POSITIVE_90 = '#2fad76'; -export const FLUID_COLOR_ABYSS_POSITIVE_100 = '#36c587'; -export const FLUID_COLOR_ABYSS_POSITIVE_110 = '#69d6a7'; -export const FLUID_COLOR_ABYSS_POSITIVE_120 = '#a2e6c8'; -export const FLUID_COLOR_ABYSS_POSITIVE_130 = '#d6f4e7'; -export const FLUID_COLOR_ABYSS_WARNING_70 = '#917000'; -export const FLUID_COLOR_ABYSS_WARNING_80 = '#bd9200'; -export const FLUID_COLOR_ABYSS_WARNING_90 = '#e0ad00'; -export const FLUID_COLOR_ABYSS_WARNING_100 = '#fcc300'; -export const FLUID_COLOR_ABYSS_WARNING_110 = '#ffd752'; -export const FLUID_COLOR_ABYSS_WARNING_120 = '#ffe99d'; -export const FLUID_COLOR_ABYSS_WARNING_130 = '#fff0bf'; -export const FLUID_COLOR_ABYSS_ERROR_70 = '#90081e'; -export const FLUID_COLOR_ABYSS_ERROR_80 = '#c20b28'; -export const FLUID_COLOR_ABYSS_ERROR_90 = '#e60d30'; -export const FLUID_COLOR_ABYSS_ERROR_100 = '#f43b58'; -export const FLUID_COLOR_ABYSS_ERROR_110 = '#f77589'; -export const FLUID_COLOR_ABYSS_ERROR_120 = '#fa9fae'; -export const FLUID_COLOR_ABYSS_ERROR_130 = '#fcc6ce'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_70 = '#743501'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_80 = '#bc5602'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_90 = '#ed6b02'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_100 = '#fd8c30'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_110 = '#feab67'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_120 = '#fec89d'; -export const FLUID_COLOR_ABYSS_NASTY_ORANGE_130 = '#ffe6d1'; -export const FLUID_COLOR_ABYSS_HOT_PINK_70 = '#640f3f'; -export const FLUID_COLOR_ABYSS_HOT_PINK_80 = '#a01764'; -export const FLUID_COLOR_ABYSS_HOT_PINK_90 = '#c81d7d'; -export const FLUID_COLOR_ABYSS_HOT_PINK_100 = '#e13093'; -export const FLUID_COLOR_ABYSS_HOT_PINK_110 = '#ea6db3'; -export const FLUID_COLOR_ABYSS_HOT_PINK_120 = '#f098c9'; -export const FLUID_COLOR_ABYSS_HOT_PINK_130 = '#f6c0de'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_70 = '#1f5d5d'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_80 = '#2d8989'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_90 = '#339a9a'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_100 = '#3cb5b5'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_110 = '#5dc9c9'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_120 = '#94dcdc'; -export const FLUID_COLOR_ABYSS_SOYLENT_GREEN_130 = '#c9eded'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_70 = '#462658'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_80 = '#8246a5'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_90 = '#9d65be'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_100 = '#ae80c9'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_110 = '#c09cd5'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_120 = '#d3b9e1'; -export const FLUID_COLOR_ABYSS_NAUGHTY_PURPLE_130 = '#e5d6ed'; -export const FLUID_COLOR_ABYSS_NEUTRAL_50 = '#1a1c21'; -export const FLUID_COLOR_ABYSS_NEUTRAL_60 = '#21242a'; -export const FLUID_COLOR_ABYSS_NEUTRAL_70 = '#272a31'; -export const FLUID_COLOR_ABYSS_NEUTRAL_80 = '#343842'; -export const FLUID_COLOR_ABYSS_NEUTRAL_90 = '#505564'; -export const FLUID_COLOR_ABYSS_NEUTRAL_100 = '#757c91'; -export const FLUID_COLOR_ABYSS_NEUTRAL_110 = '#999ead'; -export const FLUID_COLOR_ABYSS_NEUTRAL_120 = '#b5b9c4'; -export const FLUID_COLOR_ABYSS_NEUTRAL_130 = '#ced1d8'; -export const FLUID_COLOR_ABYSS_NEUTRAL_140 = '#e5e6ea'; -export const FLUID_COLOR_ABYSS_NEUTRAL_150 = '#fafbfb'; -export const FLUID_COLOR_SURFACE_BACKGROUND = '#fafbfb'; -export const FLUID_COLOR_SURFACE_MAXCONTRAST = '#111216'; -export const FLUID_COLOR_SURFACE_PRIMARY_70 = '#9ac0f9'; -export const FLUID_COLOR_SURFACE_PRIMARY_80 = '#5998f6'; -export const FLUID_COLOR_SURFACE_PRIMARY_90 = '#156df2'; -export const FLUID_COLOR_SURFACE_PRIMARY_100 = '#0b55c5'; -export const FLUID_COLOR_SURFACE_PRIMARY_110 = '#0945a0'; -export const FLUID_COLOR_SURFACE_PRIMARY_120 = '#073477'; -export const FLUID_COLOR_SURFACE_PRIMARY_130 = '#052554'; -export const FLUID_COLOR_SURFACE_POSITIVE_70 = '#b1ead1'; -export const FLUID_COLOR_SURFACE_POSITIVE_80 = '#4ecf96'; -export const FLUID_COLOR_SURFACE_POSITIVE_90 = '#2a9868'; -export const FLUID_COLOR_SURFACE_POSITIVE_100 = '#207450'; -export const FLUID_COLOR_SURFACE_POSITIVE_110 = '#1a5d40'; -export const FLUID_COLOR_SURFACE_POSITIVE_120 = '#134630'; -export const FLUID_COLOR_SURFACE_POSITIVE_130 = '#0e3223'; -export const FLUID_COLOR_SURFACE_WARNING_70 = '#ffedb2'; -export const FLUID_COLOR_SURFACE_WARNING_80 = '#ffd651'; -export const FLUID_COLOR_SURFACE_WARNING_90 = '#e2ac00'; -export const FLUID_COLOR_SURFACE_WARNING_100 = '#8f6e00'; -export const FLUID_COLOR_SURFACE_WARNING_110 = '#735700'; -export const FLUID_COLOR_SURFACE_WARNING_120 = '#544100'; -export const FLUID_COLOR_SURFACE_WARNING_130 = '#3f3000'; -export const FLUID_COLOR_SURFACE_ERROR_70 = '#fbc0ca'; -export const FLUID_COLOR_SURFACE_ERROR_80 = '#f88b9d'; -export const FLUID_COLOR_SURFACE_ERROR_90 = '#f4425f'; -export const FLUID_COLOR_SURFACE_ERROR_100 = '#c20b29'; -export const FLUID_COLOR_SURFACE_ERROR_110 = '#9e0921'; -export const FLUID_COLOR_SURFACE_ERROR_120 = '#780719'; -export const FLUID_COLOR_SURFACE_ERROR_130 = '#590513'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_70 = '#fed2af'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_80 = '#fdac69'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_90 = '#ee6c03'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_100 = '#be5602'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_110 = '#8e4001'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_120 = '#6a3001'; -export const FLUID_COLOR_SURFACE_NASTY_ORANGE_130 = '#4e2301'; -export const FLUID_COLOR_SURFACE_HOT_PINK_70 = '#f6c0de'; -export const FLUID_COLOR_SURFACE_HOT_PINK_80 = '#ef8cc3'; -export const FLUID_COLOR_SURFACE_HOT_PINK_90 = '#e861ad'; -export const FLUID_COLOR_SURFACE_HOT_PINK_100 = '#cc1d7f'; -export const FLUID_COLOR_SURFACE_HOT_PINK_110 = '#a41766'; -export const FLUID_COLOR_SURFACE_HOT_PINK_120 = '#7b114c'; -export const FLUID_COLOR_SURFACE_HOT_PINK_130 = '#5b0d38'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_70 = '#95dcdc'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_80 = '#51c5c5'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_90 = '#36a1a1'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_100 = '#287878'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_110 = '#206060'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_120 = '#184747'; -export const FLUID_COLOR_SURFACE_SOYLENT_GREEN_130 = '#113434'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_70 = '#dcc8e8'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_80 = '#af80c9'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_90 = '#9e65be'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_100 = '#9151b5'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_110 = '#753f94'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_120 = '#572e6d'; -export const FLUID_COLOR_SURFACE_NAUGHTY_PURPLE_130 = '#402250'; -export const FLUID_COLOR_SURFACE_NEUTRAL_50 = '#eff0f3'; -export const FLUID_COLOR_SURFACE_NEUTRAL_60 = '#e5e7ea'; -export const FLUID_COLOR_SURFACE_NEUTRAL_70 = '#dcdee3'; -export const FLUID_COLOR_SURFACE_NEUTRAL_80 = '#c6c9d1'; -export const FLUID_COLOR_SURFACE_NEUTRAL_90 = '#9ba1b0'; -export const FLUID_COLOR_SURFACE_NEUTRAL_100 = '#6d7488'; -export const FLUID_COLOR_SURFACE_NEUTRAL_110 = '#515666'; -export const FLUID_COLOR_SURFACE_NEUTRAL_120 = '#404450'; -export const FLUID_COLOR_SURFACE_NEUTRAL_130 = '#30333c'; -export const FLUID_COLOR_SURFACE_NEUTRAL_140 = '#21242a'; -export const FLUID_COLOR_SURFACE_NEUTRAL_150 = '#111316'; diff --git a/libs/shared/design-tokens/generated/global/spacing.css b/libs/shared/design-tokens/generated/global/spacing.css deleted file mode 100644 index 53cb38e159..0000000000 --- a/libs/shared/design-tokens/generated/global/spacing.css +++ /dev/null @@ -1,475 +0,0 @@ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -.dt-m-0 { - margin: 0; -} -.dt-mx-0 { - margin-left: 0; - margin-right: 0; -} -.dt-my-0 { - margin-top: 0; - margin-bottom: 0; -} -.dt-mt-0 { - margin-top: 0; -} -.dt-mr-0 { - margin-right: 0; -} -.dt-mb-0 { - margin-bottom: 0; -} -.dt-ml-0 { - margin-left: 0; -} -.dt-p-0 { - padding: 0; -} -.dt-px-0 { - padding-left: 0; - padding-right: 0; -} -.dt-py-0 { - padding-top: 0; - padding-bottom: 0; -} -.dt-pt-0 { - padding-top: 0; -} -.dt-pr-0 { - padding-right: 0; -} -.dt-pb-0 { - padding-bottom: 0; -} -.dt-pl-0 { - padding-left: 0; -} - -.dt-m-3xs { - margin: 2px; -} -.dt-mx-3xs { - margin-left: 2px; - margin-right: 2px; -} -.dt-my-3xs { - margin-top: 2px; - margin-bottom: 2px; -} -.dt-mt-3xs { - margin-top: 2px; -} -.dt-mr-3xs { - margin-right: 2px; -} -.dt-mb-3xs { - margin-bottom: 2px; -} -.dt-ml-3xs { - margin-left: 2px; -} -.dt-p-3xs { - padding: 2px; -} -.dt-px-3xs { - padding-left: 2px; - padding-right: 2px; -} -.dt-py-3xs { - padding-top: 2px; - padding-bottom: 2px; -} -.dt-pt-3xs { - padding-top: 2px; -} -.dt-pr-3xs { - padding-right: 2px; -} -.dt-pb-3xs { - padding-bottom: 2px; -} -.dt-pl-3xs { - padding-left: 2px; -} - -.dt-m-2xs { - margin: 4px; -} -.dt-mx-2xs { - margin-left: 4px; - margin-right: 4px; -} -.dt-my-2xs { - margin-top: 4px; - margin-bottom: 4px; -} -.dt-mt-2xs { - margin-top: 4px; -} -.dt-mr-2xs { - margin-right: 4px; -} -.dt-mb-2xs { - margin-bottom: 4px; -} -.dt-ml-2xs { - margin-left: 4px; -} -.dt-p-2xs { - padding: 4px; -} -.dt-px-2xs { - padding-left: 4px; - padding-right: 4px; -} -.dt-py-2xs { - padding-top: 4px; - padding-bottom: 4px; -} -.dt-pt-2xs { - padding-top: 4px; -} -.dt-pr-2xs { - padding-right: 4px; -} -.dt-pb-2xs { - padding-bottom: 4px; -} -.dt-pl-2xs { - padding-left: 4px; -} - -.dt-m-xs { - margin: 8px; -} -.dt-mx-xs { - margin-left: 8px; - margin-right: 8px; -} -.dt-my-xs { - margin-top: 8px; - margin-bottom: 8px; -} -.dt-mt-xs { - margin-top: 8px; -} -.dt-mr-xs { - margin-right: 8px; -} -.dt-mb-xs { - margin-bottom: 8px; -} -.dt-ml-xs { - margin-left: 8px; -} -.dt-p-xs { - padding: 8px; -} -.dt-px-xs { - padding-left: 8px; - padding-right: 8px; -} -.dt-py-xs { - padding-top: 8px; - padding-bottom: 8px; -} -.dt-pt-xs { - padding-top: 8px; -} -.dt-pr-xs { - padding-right: 8px; -} -.dt-pb-xs { - padding-bottom: 8px; -} -.dt-pl-xs { - padding-left: 8px; -} - -.dt-m-s { - margin: 12px; -} -.dt-mx-s { - margin-left: 12px; - margin-right: 12px; -} -.dt-my-s { - margin-top: 12px; - margin-bottom: 12px; -} -.dt-mt-s { - margin-top: 12px; -} -.dt-mr-s { - margin-right: 12px; -} -.dt-mb-s { - margin-bottom: 12px; -} -.dt-ml-s { - margin-left: 12px; -} -.dt-p-s { - padding: 12px; -} -.dt-px-s { - padding-left: 12px; - padding-right: 12px; -} -.dt-py-s { - padding-top: 12px; - padding-bottom: 12px; -} -.dt-pt-s { - padding-top: 12px; -} -.dt-pr-s { - padding-right: 12px; -} -.dt-pb-s { - padding-bottom: 12px; -} -.dt-pl-s { - padding-left: 12px; -} - -.dt-m-m { - margin: 16px; -} -.dt-mx-m { - margin-left: 16px; - margin-right: 16px; -} -.dt-my-m { - margin-top: 16px; - margin-bottom: 16px; -} -.dt-mt-m { - margin-top: 16px; -} -.dt-mr-m { - margin-right: 16px; -} -.dt-mb-m { - margin-bottom: 16px; -} -.dt-ml-m { - margin-left: 16px; -} -.dt-p-m { - padding: 16px; -} -.dt-px-m { - padding-left: 16px; - padding-right: 16px; -} -.dt-py-m { - padding-top: 16px; - padding-bottom: 16px; -} -.dt-pt-m { - padding-top: 16px; -} -.dt-pr-m { - padding-right: 16px; -} -.dt-pb-m { - padding-bottom: 16px; -} -.dt-pl-m { - padding-left: 16px; -} - -.dt-m-l { - margin: 32px; -} -.dt-mx-l { - margin-left: 32px; - margin-right: 32px; -} -.dt-my-l { - margin-top: 32px; - margin-bottom: 32px; -} -.dt-mt-l { - margin-top: 32px; -} -.dt-mr-l { - margin-right: 32px; -} -.dt-mb-l { - margin-bottom: 32px; -} -.dt-ml-l { - margin-left: 32px; -} -.dt-p-l { - padding: 32px; -} -.dt-px-l { - padding-left: 32px; - padding-right: 32px; -} -.dt-py-l { - padding-top: 32px; - padding-bottom: 32px; -} -.dt-pt-l { - padding-top: 32px; -} -.dt-pr-l { - padding-right: 32px; -} -.dt-pb-l { - padding-bottom: 32px; -} -.dt-pl-l { - padding-left: 32px; -} - -.dt-m-xl { - margin: 48px; -} -.dt-mx-xl { - margin-left: 48px; - margin-right: 48px; -} -.dt-my-xl { - margin-top: 48px; - margin-bottom: 48px; -} -.dt-mt-xl { - margin-top: 48px; -} -.dt-mr-xl { - margin-right: 48px; -} -.dt-mb-xl { - margin-bottom: 48px; -} -.dt-ml-xl { - margin-left: 48px; -} -.dt-p-xl { - padding: 48px; -} -.dt-px-xl { - padding-left: 48px; - padding-right: 48px; -} -.dt-py-xl { - padding-top: 48px; - padding-bottom: 48px; -} -.dt-pt-xl { - padding-top: 48px; -} -.dt-pr-xl { - padding-right: 48px; -} -.dt-pb-xl { - padding-bottom: 48px; -} -.dt-pl-xl { - padding-left: 48px; -} - -.dt-m-2xl { - margin: 64px; -} -.dt-mx-2xl { - margin-left: 64px; - margin-right: 64px; -} -.dt-my-2xl { - margin-top: 64px; - margin-bottom: 64px; -} -.dt-mt-2xl { - margin-top: 64px; -} -.dt-mr-2xl { - margin-right: 64px; -} -.dt-mb-2xl { - margin-bottom: 64px; -} -.dt-ml-2xl { - margin-left: 64px; -} -.dt-p-2xl { - padding: 64px; -} -.dt-px-2xl { - padding-left: 64px; - padding-right: 64px; -} -.dt-py-2xl { - padding-top: 64px; - padding-bottom: 64px; -} -.dt-pt-2xl { - padding-top: 64px; -} -.dt-pr-2xl { - padding-right: 64px; -} -.dt-pb-2xl { - padding-bottom: 64px; -} -.dt-pl-2xl { - padding-left: 64px; -} - -.dt-m-3xl { - margin: 128px; -} -.dt-mx-3xl { - margin-left: 128px; - margin-right: 128px; -} -.dt-my-3xl { - margin-top: 128px; - margin-bottom: 128px; -} -.dt-mt-3xl { - margin-top: 128px; -} -.dt-mr-3xl { - margin-right: 128px; -} -.dt-mb-3xl { - margin-bottom: 128px; -} -.dt-ml-3xl { - margin-left: 128px; -} -.dt-p-3xl { - padding: 128px; -} -.dt-px-3xl { - padding-left: 128px; - padding-right: 128px; -} -.dt-py-3xl { - padding-top: 128px; - padding-bottom: 128px; -} -.dt-pt-3xl { - padding-top: 128px; -} -.dt-pr-3xl { - padding-right: 128px; -} -.dt-pb-3xl { - padding-bottom: 128px; -} -.dt-pl-3xl { - padding-left: 128px; -} diff --git a/libs/shared/design-tokens/generated/global/spacing.js b/libs/shared/design-tokens/generated/global/spacing.js deleted file mode 100644 index 351b8bbbf4..0000000000 --- a/libs/shared/design-tokens/generated/global/spacing.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export const FLUID_SPACING_0 = '0'; -export const FLUID_SPACING_3X_SMALL = '2px'; -export const FLUID_SPACING_2X_SMALL = '4px'; -export const FLUID_SPACING_X_SMALL = '8px'; -export const FLUID_SPACING_SMALL = '12px'; -export const FLUID_SPACING_MEDIUM = '16px'; -export const FLUID_SPACING_LARGE = '32px'; -export const FLUID_SPACING_X_LARGE = '48px'; -export const FLUID_SPACING_2X_LARGE = '64px'; -export const FLUID_SPACING_3X_LARGE = '128px'; diff --git a/libs/shared/design-tokens/generated/global/spacing.json b/libs/shared/design-tokens/generated/global/spacing.json deleted file mode 100644 index 3be3291488..0000000000 --- a/libs/shared/design-tokens/generated/global/spacing.json +++ /dev/null @@ -1,174 +0,0 @@ -{ - "outputs": [ - { - "type": "scss", - "formatter": "dt-scss" - }, - { - "type": "css", - "formatter": "dt-css-spacing" - }, - { - "type": "ts", - "formatter": "dt-typescript" - }, - { - "type": "js", - "formatter": "dt-javascript" - } - ], - "props": { - "fluid-spacing--0": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--0", - "value": "0", - "meta": { - "friendlyName": "No spacing", - "sizeIdentifier": 0, - "customizable": false - }, - "originalValue": "{!spacing--0}" - }, - "fluid-spacing--3x-small": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--3x-small", - "value": "2px", - "meta": { - "friendlyName": "Spacing, 3x-small", - "sizeIdentifier": "3xs", - "customizable": false - }, - "originalValue": "{!spacing--3x-small}" - }, - "fluid-spacing--2x-small": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--2x-small", - "value": "4px", - "meta": { - "friendlyName": "Spacing, 2x-small", - "sizeIdentifier": "2xs", - "customizable": false - }, - "originalValue": "{!spacing--2x-small}" - }, - "fluid-spacing--x-small": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--x-small", - "value": "8px", - "meta": { - "friendlyName": "Spacing, x-small", - "sizeIdentifier": "xs", - "customizable": false - }, - "originalValue": "{!spacing--x-small}" - }, - "fluid-spacing--small": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--small", - "value": "12px", - "meta": { - "friendlyName": "Spacing, small", - "sizeIdentifier": "s", - "customizable": false - }, - "originalValue": "{!spacing--small}" - }, - "fluid-spacing--medium": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--medium", - "value": "16px", - "meta": { - "friendlyName": "Spacing, medium", - "sizeIdentifier": "m", - "customizable": false - }, - "originalValue": "{!spacing--medium}" - }, - "fluid-spacing--large": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--large", - "value": "32px", - "meta": { - "friendlyName": "Spacing, large", - "sizeIdentifier": "l", - "customizable": false - }, - "originalValue": "{!spacing--large}" - }, - "fluid-spacing--x-large": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--x-large", - "value": "48px", - "meta": { - "friendlyName": "Spacing, x-large", - "sizeIdentifier": "xl", - "customizable": false - }, - "originalValue": "{!spacing--x-large}" - }, - "fluid-spacing--2x-large": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--2x-large", - "value": "64px", - "meta": { - "friendlyName": "Spacing, 2x-large", - "sizeIdentifier": "2xl", - "customizable": false - }, - "originalValue": "{!spacing--2x-large}" - }, - "fluid-spacing--3x-large": { - "type": "number", - "category": "spacing", - "name": "fluid-spacing--3x-large", - "value": "128px", - "meta": { - "friendlyName": "Spacing, 3x-large", - "sizeIdentifier": "3xl", - "customizable": false - }, - "originalValue": "{!spacing--3x-large}" - } - }, - "aliases": { - "spacing--3x-small": { - "value": "2px" - }, - "spacing--2x-small": { - "value": "4px" - }, - "spacing--x-large": { - "value": "48px" - }, - "spacing--small": { - "value": "12px" - }, - "spacing--0": { - "value": 0 - }, - "spacing--x-small": { - "value": "8px" - }, - "spacing--3x-large": { - "value": "128px" - }, - "spacing--2x-large": { - "value": "64px" - }, - "spacing--medium": { - "value": "16px" - }, - "spacing--large": { - "value": "32px" - } - } -} diff --git a/libs/shared/design-tokens/generated/global/spacing.scss b/libs/shared/design-tokens/generated/global/spacing.scss deleted file mode 100644 index 8243e09a53..0000000000 --- a/libs/shared/design-tokens/generated/global/spacing.scss +++ /dev/null @@ -1,16 +0,0 @@ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -$fluid-spacing--0: 0 !default; -$fluid-spacing--3x-small: 2px !default; -$fluid-spacing--2x-small: 4px !default; -$fluid-spacing--x-small: 8px !default; -$fluid-spacing--small: 12px !default; -$fluid-spacing--medium: 16px !default; -$fluid-spacing--large: 32px !default; -$fluid-spacing--x-large: 48px !default; -$fluid-spacing--2x-large: 64px !default; -$fluid-spacing--3x-large: 128px !default; diff --git a/libs/shared/design-tokens/generated/global/spacing.ts b/libs/shared/design-tokens/generated/global/spacing.ts deleted file mode 100644 index 351b8bbbf4..0000000000 --- a/libs/shared/design-tokens/generated/global/spacing.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export const FLUID_SPACING_0 = '0'; -export const FLUID_SPACING_3X_SMALL = '2px'; -export const FLUID_SPACING_2X_SMALL = '4px'; -export const FLUID_SPACING_X_SMALL = '8px'; -export const FLUID_SPACING_SMALL = '12px'; -export const FLUID_SPACING_MEDIUM = '16px'; -export const FLUID_SPACING_LARGE = '32px'; -export const FLUID_SPACING_X_LARGE = '48px'; -export const FLUID_SPACING_2X_LARGE = '64px'; -export const FLUID_SPACING_3X_LARGE = '128px'; diff --git a/libs/shared/design-tokens/generated/global/theme.json b/libs/shared/design-tokens/generated/global/theme.json deleted file mode 100644 index 4f3b55865d..0000000000 --- a/libs/shared/design-tokens/generated/global/theme.json +++ /dev/null @@ -1,1595 +0,0 @@ -{ - "outputs": [ - { - "type": "scss", - "formatter": "dt-scss-theme" - }, - { - "type": "ts", - "formatter": "dt-typescript-theme" - } - ], - "props": { - "color-background": { - "type": "number", - "category": "theme", - "name": "color-background", - "value": { - "surface": "#fafbfb", - "abyss": "#111216" - }, - "originalValue": { - "surface": "{!color-surface-background}", - "abyss": "{!color-abyss-background}" - } - }, - "color-maxcontrast": { - "type": "number", - "category": "theme", - "name": "color-maxcontrast", - "value": { - "surface": "#111216", - "abyss": "#fafbfb" - }, - "originalValue": { - "surface": "{!color-surface-maxcontrast}", - "abyss": "{!color-abyss-maxcontrast}" - } - }, - "color-primary-70": { - "type": "number", - "category": "theme", - "name": "color-primary-70", - "value": { - "surface": "#9ac0f9", - "abyss": "#084298" - }, - "originalValue": { - "surface": "{!color-surface-primary-70}", - "abyss": "{!color-abyss-primary-70}" - } - }, - "color-primary-80": { - "type": "number", - "category": "theme", - "name": "color-primary-80", - "value": { - "surface": "#5998f6", - "abyss": "#0b5ace" - }, - "originalValue": { - "surface": "{!color-surface-primary-80}", - "abyss": "{!color-abyss-primary-80}" - } - }, - "color-primary-90": { - "type": "number", - "category": "theme", - "name": "color-primary-90", - "value": { - "surface": "#156df2", - "abyss": "#136cf2" - }, - "originalValue": { - "surface": "{!color-surface-primary-90}", - "abyss": "{!color-abyss-primary-90}" - } - }, - "color-primary-100": { - "type": "number", - "category": "theme", - "name": "color-primary-100", - "value": { - "surface": "#0b55c5", - "abyss": "#3582f4" - }, - "originalValue": { - "surface": "{!color-surface-primary-100}", - "abyss": "{!color-abyss-primary-100}" - } - }, - "color-primary-110": { - "type": "number", - "category": "theme", - "name": "color-primary-110", - "value": { - "surface": "#0945a0", - "abyss": "#659ff7" - }, - "originalValue": { - "surface": "{!color-surface-primary-110}", - "abyss": "{!color-abyss-primary-110}" - } - }, - "color-primary-120": { - "type": "number", - "category": "theme", - "name": "color-primary-120", - "value": { - "surface": "#073477", - "abyss": "#91bbf9" - }, - "originalValue": { - "surface": "{!color-surface-primary-120}", - "abyss": "{!color-abyss-primary-120}" - } - }, - "color-primary-130": { - "type": "number", - "category": "theme", - "name": "color-primary-130", - "value": { - "surface": "#052554", - "abyss": "#bbd5fb" - }, - "originalValue": { - "surface": "{!color-surface-primary-130}", - "abyss": "{!color-abyss-primary-130}" - } - }, - "color-positive-70": { - "type": "number", - "category": "theme", - "name": "color-positive-70", - "value": { - "surface": "#b1ead1", - "abyss": "#1a6142" - }, - "originalValue": { - "surface": "{!color-surface-positive-70}", - "abyss": "{!color-abyss-positive-70}" - } - }, - "color-positive-80": { - "type": "number", - "category": "theme", - "name": "color-positive-80", - "value": { - "surface": "#4ecf96", - "abyss": "#268d60" - }, - "originalValue": { - "surface": "{!color-surface-positive-80}", - "abyss": "{!color-abyss-positive-80}" - } - }, - "color-positive-90": { - "type": "number", - "category": "theme", - "name": "color-positive-90", - "value": { - "surface": "#2a9868", - "abyss": "#2fad76" - }, - "originalValue": { - "surface": "{!color-surface-positive-90}", - "abyss": "{!color-abyss-positive-90}" - } - }, - "color-positive-100": { - "type": "number", - "category": "theme", - "name": "color-positive-100", - "value": { - "surface": "#207450", - "abyss": "#36c587" - }, - "originalValue": { - "surface": "{!color-surface-positive-100}", - "abyss": "{!color-abyss-positive-100}" - } - }, - "color-positive-110": { - "type": "number", - "category": "theme", - "name": "color-positive-110", - "value": { - "surface": "#1a5d40", - "abyss": "#69d6a7" - }, - "originalValue": { - "surface": "{!color-surface-positive-110}", - "abyss": "{!color-abyss-positive-110}" - } - }, - "color-positive-120": { - "type": "number", - "category": "theme", - "name": "color-positive-120", - "value": { - "surface": "#134630", - "abyss": "#a2e6c8" - }, - "originalValue": { - "surface": "{!color-surface-positive-120}", - "abyss": "{!color-abyss-positive-120}" - } - }, - "color-positive-130": { - "type": "number", - "category": "theme", - "name": "color-positive-130", - "value": { - "surface": "#0e3223", - "abyss": "#d6f4e7" - }, - "originalValue": { - "surface": "{!color-surface-positive-130}", - "abyss": "{!color-abyss-positive-130}" - } - }, - "color-warning-70": { - "type": "number", - "category": "theme", - "name": "color-warning-70", - "value": { - "surface": "#ffedb2", - "abyss": "#917000" - }, - "originalValue": { - "surface": "{!color-surface-warning-70}", - "abyss": "{!color-abyss-warning-70}" - } - }, - "color-warning-80": { - "type": "number", - "category": "theme", - "name": "color-warning-80", - "value": { - "surface": "#ffd651", - "abyss": "#bd9200" - }, - "originalValue": { - "surface": "{!color-surface-warning-80}", - "abyss": "{!color-abyss-warning-80}" - } - }, - "color-warning-90": { - "type": "number", - "category": "theme", - "name": "color-warning-90", - "value": { - "surface": "#e2ac00", - "abyss": "#e0ad00" - }, - "originalValue": { - "surface": "{!color-surface-warning-90}", - "abyss": "{!color-abyss-warning-90}" - } - }, - "color-warning-100": { - "type": "number", - "category": "theme", - "name": "color-warning-100", - "value": { - "surface": "#8f6e00", - "abyss": "#fcc300" - }, - "originalValue": { - "surface": "{!color-surface-warning-100}", - "abyss": "{!color-abyss-warning-100}" - } - }, - "color-warning-110": { - "type": "number", - "category": "theme", - "name": "color-warning-110", - "value": { - "surface": "#735700", - "abyss": "#ffd752" - }, - "originalValue": { - "surface": "{!color-surface-warning-110}", - "abyss": "{!color-abyss-warning-110}" - } - }, - "color-warning-120": { - "type": "number", - "category": "theme", - "name": "color-warning-120", - "value": { - "surface": "#544100", - "abyss": "#ffe99d" - }, - "originalValue": { - "surface": "{!color-surface-warning-120}", - "abyss": "{!color-abyss-warning-120}" - } - }, - "color-warning-130": { - "type": "number", - "category": "theme", - "name": "color-warning-130", - "value": { - "surface": "#3f3000", - "abyss": "#fff0bf" - }, - "originalValue": { - "surface": "{!color-surface-warning-130}", - "abyss": "{!color-abyss-warning-130}" - } - }, - "color-error-70": { - "type": "number", - "category": "theme", - "name": "color-error-70", - "value": { - "surface": "#fbc0ca", - "abyss": "#90081e" - }, - "originalValue": { - "surface": "{!color-surface-error-70}", - "abyss": "{!color-abyss-error-70}" - } - }, - "color-error-80": { - "type": "number", - "category": "theme", - "name": "color-error-80", - "value": { - "surface": "#f88b9d", - "abyss": "#c20b28" - }, - "originalValue": { - "surface": "{!color-surface-error-80}", - "abyss": "{!color-abyss-error-80}" - } - }, - "color-error-90": { - "type": "number", - "category": "theme", - "name": "color-error-90", - "value": { - "surface": "#f4425f", - "abyss": "#e60d30" - }, - "originalValue": { - "surface": "{!color-surface-error-90}", - "abyss": "{!color-abyss-error-90}" - } - }, - "color-error-100": { - "type": "number", - "category": "theme", - "name": "color-error-100", - "value": { - "surface": "#c20b29", - "abyss": "#f43b58" - }, - "originalValue": { - "surface": "{!color-surface-error-100}", - "abyss": "{!color-abyss-error-100}" - } - }, - "color-error-110": { - "type": "number", - "category": "theme", - "name": "color-error-110", - "value": { - "surface": "#9e0921", - "abyss": "#f77589" - }, - "originalValue": { - "surface": "{!color-surface-error-110}", - "abyss": "{!color-abyss-error-110}" - } - }, - "color-error-120": { - "type": "number", - "category": "theme", - "name": "color-error-120", - "value": { - "surface": "#780719", - "abyss": "#fa9fae" - }, - "originalValue": { - "surface": "{!color-surface-error-120}", - "abyss": "{!color-abyss-error-120}" - } - }, - "color-error-130": { - "type": "number", - "category": "theme", - "name": "color-error-130", - "value": { - "surface": "#590513", - "abyss": "#fcc6ce" - }, - "originalValue": { - "surface": "{!color-surface-error-130}", - "abyss": "{!color-abyss-error-130}" - } - }, - "color-nasty-orange-70": { - "type": "number", - "category": "theme", - "name": "color-nasty-orange-70", - "value": { - "surface": "#fed2af", - "abyss": "#743501" - }, - "originalValue": { - "surface": "{!color-surface-nasty-orange-70}", - "abyss": "{!color-abyss-nasty-orange-70}" - } - }, - "color-nasty-orange-80": { - "type": "number", - "category": "theme", - "name": "color-nasty-orange-80", - "value": { - "surface": "#fdac69", - "abyss": "#bc5602" - }, - "originalValue": { - "surface": "{!color-surface-nasty-orange-80}", - "abyss": "{!color-abyss-nasty-orange-80}" - } - }, - "color-nasty-orange-90": { - "type": "number", - "category": "theme", - "name": "color-nasty-orange-90", - "value": { - "surface": "#ee6c03", - "abyss": "#ed6b02" - }, - "originalValue": { - "surface": "{!color-surface-nasty-orange-90}", - "abyss": "{!color-abyss-nasty-orange-90}" - } - }, - "color-nasty-orange-100": { - "type": "number", - "category": "theme", - "name": "color-nasty-orange-100", - "value": { - "surface": "#be5602", - "abyss": "#fd8c30" - }, - "originalValue": { - "surface": "{!color-surface-nasty-orange-100}", - "abyss": "{!color-abyss-nasty-orange-100}" - } - }, - "color-nasty-orange-110": { - "type": "number", - "category": "theme", - "name": "color-nasty-orange-110", - "value": { - "surface": "#8e4001", - "abyss": "#feab67" - }, - "originalValue": { - "surface": "{!color-surface-nasty-orange-110}", - "abyss": "{!color-abyss-nasty-orange-110}" - } - }, - "color-nasty-orange-120": { - "type": "number", - "category": "theme", - "name": "color-nasty-orange-120", - "value": { - "surface": "#6a3001", - "abyss": "#fec89d" - }, - "originalValue": { - "surface": "{!color-surface-nasty-orange-120}", - "abyss": "{!color-abyss-nasty-orange-120}" - } - }, - "color-nasty-orange-130": { - "type": "number", - "category": "theme", - "name": "color-nasty-orange-130", - "value": { - "surface": "#4e2301", - "abyss": "#ffe6d1" - }, - "originalValue": { - "surface": "{!color-surface-nasty-orange-130}", - "abyss": "{!color-abyss-nasty-orange-130}" - } - }, - "color-hot-pink-70": { - "type": "number", - "category": "theme", - "name": "color-hot-pink-70", - "value": { - "surface": "#f6c0de", - "abyss": "#640f3f" - }, - "originalValue": { - "surface": "{!color-surface-hot-pink-70}", - "abyss": "{!color-abyss-hot-pink-70}" - } - }, - "color-hot-pink-80": { - "type": "number", - "category": "theme", - "name": "color-hot-pink-80", - "value": { - "surface": "#ef8cc3", - "abyss": "#a01764" - }, - "originalValue": { - "surface": "{!color-surface-hot-pink-80}", - "abyss": "{!color-abyss-hot-pink-80}" - } - }, - "color-hot-pink-90": { - "type": "number", - "category": "theme", - "name": "color-hot-pink-90", - "value": { - "surface": "#e861ad", - "abyss": "#c81d7d" - }, - "originalValue": { - "surface": "{!color-surface-hot-pink-90}", - "abyss": "{!color-abyss-hot-pink-90}" - } - }, - "color-hot-pink-100": { - "type": "number", - "category": "theme", - "name": "color-hot-pink-100", - "value": { - "surface": "#cc1d7f", - "abyss": "#e13093" - }, - "originalValue": { - "surface": "{!color-surface-hot-pink-100}", - "abyss": "{!color-abyss-hot-pink-100}" - } - }, - "color-hot-pink-110": { - "type": "number", - "category": "theme", - "name": "color-hot-pink-110", - "value": { - "surface": "#a41766", - "abyss": "#ea6db3" - }, - "originalValue": { - "surface": "{!color-surface-hot-pink-110}", - "abyss": "{!color-abyss-hot-pink-110}" - } - }, - "color-hot-pink-120": { - "type": "number", - "category": "theme", - "name": "color-hot-pink-120", - "value": { - "surface": "#7b114c", - "abyss": "#f098c9" - }, - "originalValue": { - "surface": "{!color-surface-hot-pink-120}", - "abyss": "{!color-abyss-hot-pink-120}" - } - }, - "color-hot-pink-130": { - "type": "number", - "category": "theme", - "name": "color-hot-pink-130", - "value": { - "surface": "#5b0d38", - "abyss": "#f6c0de" - }, - "originalValue": { - "surface": "{!color-surface-hot-pink-130}", - "abyss": "{!color-abyss-hot-pink-130}" - } - }, - "color-soylent-green-70": { - "type": "number", - "category": "theme", - "name": "color-soylent-green-70", - "value": { - "surface": "#95dcdc", - "abyss": "#1f5d5d" - }, - "originalValue": { - "surface": "{!color-surface-soylent-green-70}", - "abyss": "{!color-abyss-soylent-green-70}" - } - }, - "color-soylent-green-80": { - "type": "number", - "category": "theme", - "name": "color-soylent-green-80", - "value": { - "surface": "#51c5c5", - "abyss": "#2d8989" - }, - "originalValue": { - "surface": "{!color-surface-soylent-green-80}", - "abyss": "{!color-abyss-soylent-green-80}" - } - }, - "color-soylent-green-90": { - "type": "number", - "category": "theme", - "name": "color-soylent-green-90", - "value": { - "surface": "#36a1a1", - "abyss": "#339a9a" - }, - "originalValue": { - "surface": "{!color-surface-soylent-green-90}", - "abyss": "{!color-abyss-soylent-green-90}" - } - }, - "color-soylent-green-100": { - "type": "number", - "category": "theme", - "name": "color-soylent-green-100", - "value": { - "surface": "#287878", - "abyss": "#3cb5b5" - }, - "originalValue": { - "surface": "{!color-surface-soylent-green-100}", - "abyss": "{!color-abyss-soylent-green-100}" - } - }, - "color-soylent-green-110": { - "type": "number", - "category": "theme", - "name": "color-soylent-green-110", - "value": { - "surface": "#206060", - "abyss": "#5dc9c9" - }, - "originalValue": { - "surface": "{!color-surface-soylent-green-110}", - "abyss": "{!color-abyss-soylent-green-110}" - } - }, - "color-soylent-green-120": { - "type": "number", - "category": "theme", - "name": "color-soylent-green-120", - "value": { - "surface": "#184747", - "abyss": "#94dcdc" - }, - "originalValue": { - "surface": "{!color-surface-soylent-green-120}", - "abyss": "{!color-abyss-soylent-green-120}" - } - }, - "color-soylent-green-130": { - "type": "number", - "category": "theme", - "name": "color-soylent-green-130", - "value": { - "surface": "#113434", - "abyss": "#c9eded" - }, - "originalValue": { - "surface": "{!color-surface-soylent-green-130}", - "abyss": "{!color-abyss-soylent-green-130}" - } - }, - "color-naughty-purple-70": { - "type": "number", - "category": "theme", - "name": "color-naughty-purple-70", - "value": { - "surface": "#dcc8e8", - "abyss": "#462658" - }, - "originalValue": { - "surface": "{!color-surface-naughty-purple-70}", - "abyss": "{!color-abyss-naughty-purple-70}" - } - }, - "color-naughty-purple-80": { - "type": "number", - "category": "theme", - "name": "color-naughty-purple-80", - "value": { - "surface": "#af80c9", - "abyss": "#8246a5" - }, - "originalValue": { - "surface": "{!color-surface-naughty-purple-80}", - "abyss": "{!color-abyss-naughty-purple-80}" - } - }, - "color-naughty-purple-90": { - "type": "number", - "category": "theme", - "name": "color-naughty-purple-90", - "value": { - "surface": "#9e65be", - "abyss": "#9d65be" - }, - "originalValue": { - "surface": "{!color-surface-naughty-purple-90}", - "abyss": "{!color-abyss-naughty-purple-90}" - } - }, - "color-naughty-purple-100": { - "type": "number", - "category": "theme", - "name": "color-naughty-purple-100", - "value": { - "surface": "#9151b5", - "abyss": "#ae80c9" - }, - "originalValue": { - "surface": "{!color-surface-naughty-purple-100}", - "abyss": "{!color-abyss-naughty-purple-100}" - } - }, - "color-naughty-purple-110": { - "type": "number", - "category": "theme", - "name": "color-naughty-purple-110", - "value": { - "surface": "#753f94", - "abyss": "#c09cd5" - }, - "originalValue": { - "surface": "{!color-surface-naughty-purple-110}", - "abyss": "{!color-abyss-naughty-purple-110}" - } - }, - "color-naughty-purple-120": { - "type": "number", - "category": "theme", - "name": "color-naughty-purple-120", - "value": { - "surface": "#572e6d", - "abyss": "#d3b9e1" - }, - "originalValue": { - "surface": "{!color-surface-naughty-purple-120}", - "abyss": "{!color-abyss-naughty-purple-120}" - } - }, - "color-naughty-purple-130": { - "type": "number", - "category": "theme", - "name": "color-naughty-purple-130", - "value": { - "surface": "#402250", - "abyss": "#e5d6ed" - }, - "originalValue": { - "surface": "{!color-surface-naughty-purple-130}", - "abyss": "{!color-abyss-naughty-purple-130}" - } - }, - "color-neutral-50": { - "type": "number", - "category": "theme", - "name": "color-neutral-50", - "value": { - "surface": "#eff0f3", - "abyss": "#1a1c21" - }, - "originalValue": { - "surface": "{!color-surface-neutral-50}", - "abyss": "{!color-abyss-neutral-50}" - } - }, - "color-neutral-60": { - "type": "number", - "category": "theme", - "name": "color-neutral-60", - "value": { - "surface": "#e5e7ea", - "abyss": "#21242a" - }, - "originalValue": { - "surface": "{!color-surface-neutral-60}", - "abyss": "{!color-abyss-neutral-60}" - } - }, - "color-neutral-70": { - "type": "number", - "category": "theme", - "name": "color-neutral-70", - "value": { - "surface": "#dcdee3", - "abyss": "#272a31" - }, - "originalValue": { - "surface": "{!color-surface-neutral-70}", - "abyss": "{!color-abyss-neutral-70}" - } - }, - "color-neutral-80": { - "type": "number", - "category": "theme", - "name": "color-neutral-80", - "value": { - "surface": "#c6c9d1", - "abyss": "#343842" - }, - "originalValue": { - "surface": "{!color-surface-neutral-80}", - "abyss": "{!color-abyss-neutral-80}" - } - }, - "color-neutral-90": { - "type": "number", - "category": "theme", - "name": "color-neutral-90", - "value": { - "surface": "#9ba1b0", - "abyss": "#505564" - }, - "originalValue": { - "surface": "{!color-surface-neutral-90}", - "abyss": "{!color-abyss-neutral-90}" - } - }, - "color-neutral-100": { - "type": "number", - "category": "theme", - "name": "color-neutral-100", - "value": { - "surface": "#6d7488", - "abyss": "#757c91" - }, - "originalValue": { - "surface": "{!color-surface-neutral-100}", - "abyss": "{!color-abyss-neutral-100}" - } - }, - "color-neutral-110": { - "type": "number", - "category": "theme", - "name": "color-neutral-110", - "value": { - "surface": "#515666", - "abyss": "#999ead" - }, - "originalValue": { - "surface": "{!color-surface-neutral-110}", - "abyss": "{!color-abyss-neutral-110}" - } - }, - "color-neutral-120": { - "type": "number", - "category": "theme", - "name": "color-neutral-120", - "value": { - "surface": "#404450", - "abyss": "#b5b9c4" - }, - "originalValue": { - "surface": "{!color-surface-neutral-120}", - "abyss": "{!color-abyss-neutral-120}" - } - }, - "color-neutral-130": { - "type": "number", - "category": "theme", - "name": "color-neutral-130", - "value": { - "surface": "#30333c", - "abyss": "#ced1d8" - }, - "originalValue": { - "surface": "{!color-surface-neutral-130}", - "abyss": "{!color-abyss-neutral-130}" - } - }, - "color-neutral-140": { - "type": "number", - "category": "theme", - "name": "color-neutral-140", - "value": { - "surface": "#21242a", - "abyss": "#e5e6ea" - }, - "originalValue": { - "surface": "{!color-surface-neutral-140}", - "abyss": "{!color-abyss-neutral-140}" - } - }, - "color-neutral-150": { - "type": "number", - "category": "theme", - "name": "color-neutral-150", - "value": { - "surface": "#111316", - "abyss": "#fafbfb" - }, - "originalValue": { - "surface": "{!color-surface-neutral-150}", - "abyss": "{!color-abyss-neutral-150}" - } - } - }, - "aliases": { - "color-abyss-neutral-50": { - "value": "#1a1c21", - "comment": "abyss neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-neutral-110": { - "value": "#515666", - "comment": "surface neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-warning-110": { - "value": "#ffd752", - "comment": "abyss warning, contrast 110", - "originalRatio": 13.5 - }, - "color-surface-error-120": { - "value": "#780719", - "comment": "surface error, contrast 120", - "originalRatio": 11 - }, - "color-abyss-primary-90": { - "value": "#136cf2", - "comment": "abyss primary, contrast 90", - "originalRatio": 4 - }, - "color-surface-hot-pink-130": { - "value": "#5b0d38", - "comment": "surface hot-pink, contrast 130", - "originalRatio": 13 - }, - "color-surface-positive-90": { - "value": "#2a9868", - "comment": "surface positive, contrast 90", - "originalRatio": 3.5 - }, - "color-surface-nasty-orange-130": { - "value": "#4e2301", - "comment": "surface nasty-orange, contrast 130", - "originalRatio": 13 - }, - "color-surface-neutral-100": { - "value": "#6d7488", - "comment": "surface neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-naughty-purple-130": { - "value": "#e5d6ed", - "comment": "abyss naughty-purple, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-warning-100": { - "value": "#fcc300", - "comment": "abyss warning, contrast 100", - "originalRatio": 11.5 - }, - "color-surface-error-110": { - "value": "#9e0921", - "comment": "surface error, contrast 110", - "originalRatio": 8 - }, - "color-surface-hot-pink-120": { - "value": "#7b114c", - "comment": "surface hot-pink, contrast 120", - "originalRatio": 10 - }, - "color-surface-positive-80": { - "value": "#4ecf96", - "comment": "surface positive, contrast 80", - "originalRatio": 1.9 - }, - "color-surface-nasty-orange-120": { - "value": "#6a3001", - "comment": "surface nasty-orange, contrast 120", - "originalRatio": 10 - }, - "color-abyss-naughty-purple-120": { - "value": "#d3b9e1", - "comment": "abyss naughty-purple, contrast 120", - "originalRatio": 10.5 - }, - "color-surface-error-100": { - "value": "#c20b29", - "comment": "surface error, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-80": { - "value": "#0b5ace", - "comment": "abyss primary, contrast 80", - "originalRatio": 3 - }, - "color-surface-hot-pink-110": { - "value": "#a41766", - "comment": "surface hot-pink, contrast 110", - "originalRatio": 7 - }, - "color-surface-positive-70": { - "value": "#b1ead1", - "comment": "surface positive, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-nasty-orange-110": { - "value": "#8e4001", - "comment": "surface nasty-orange, contrast 110", - "originalRatio": 7 - }, - "color-abyss-naughty-purple-110": { - "value": "#c09cd5", - "comment": "abyss naughty-purple, contrast 110", - "originalRatio": 8 - }, - "color-abyss-primary-70": { - "value": "#084298", - "comment": "abyss primary, contrast 70", - "originalRatio": 2 - }, - "color-abyss-naughty-purple-90": { - "value": "#9d65be", - "comment": "abyss naughty-purple, contrast 90", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-100": { - "value": "#be5602", - "comment": "surface nasty-orange, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-90": { - "value": "#ee6c03", - "comment": "surface nasty-orange, contrast 90", - "originalRatio": 3 - }, - "color-surface-positive-130": { - "value": "#0e3223", - "comment": "surface positive, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-naughty-purple-100": { - "value": "#ae80c9", - "comment": "abyss naughty-purple, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-130": { - "value": "#bbd5fb", - "comment": "abyss primary, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-hot-pink-90": { - "value": "#e861ad", - "comment": "surface hot-pink, contrast 90", - "originalRatio": 3 - }, - "color-surface-hot-pink-100": { - "value": "#cc1d7f", - "comment": "surface hot-pink, contrast 100", - "originalRatio": 5 - }, - "color-abyss-naughty-purple-80": { - "value": "#8246a5", - "comment": "abyss naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-nasty-orange-80": { - "value": "#fdac69", - "comment": "surface nasty-orange, contrast 80", - "originalRatio": 1.8 - }, - "color-surface-positive-120": { - "value": "#134630", - "comment": "surface positive, contrast 120", - "originalRatio": 10.5 - }, - "color-abyss-primary-120": { - "value": "#91bbf9", - "comment": "abyss primary, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-hot-pink-80": { - "value": "#ef8cc3", - "comment": "surface hot-pink, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-naughty-purple-70": { - "value": "#462658", - "comment": "abyss naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-nasty-orange-70": { - "value": "#fed2af", - "comment": "surface nasty-orange, contrast 70", - "originalRatio": 1.35 - }, - "color-surface-positive-110": { - "value": "#1a5d40", - "comment": "surface positive, contrast 110", - "originalRatio": 7.5 - }, - "color-abyss-primary-110": { - "value": "#659ff7", - "comment": "abyss primary, contrast 110", - "originalRatio": 7 - }, - "color-surface-hot-pink-70": { - "value": "#f6c0de", - "comment": "surface hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-error-90": { - "value": "#f4425f", - "comment": "surface error, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-warning-90": { - "value": "#e0ad00", - "comment": "abyss warning, contrast 90", - "originalRatio": 9 - }, - "color-abyss-neutral-150": { - "value": "#fafbfb", - "comment": "abyss neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-neutral-90": { - "value": "#9ba1b0", - "comment": "surface neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-positive-100": { - "value": "#207450", - "comment": "surface positive, contrast 100", - "originalRatio": 5.5 - }, - "color-abyss-primary-100": { - "value": "#3582f4", - "comment": "abyss primary, contrast 100", - "originalRatio": 5 - }, - "color-surface-error-80": { - "value": "#f88b9d", - "comment": "surface error, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-warning-80": { - "value": "#bd9200", - "comment": "abyss warning, contrast 80", - "originalRatio": 6.5 - }, - "color-abyss-neutral-140": { - "value": "#e5e6ea", - "comment": "abyss neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-neutral-80": { - "value": "#c6c9d1", - "comment": "surface neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-error-70": { - "value": "#fbc0ca", - "comment": "surface error, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-neutral-70": { - "value": "#dcdee3", - "comment": "surface neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-soylent-green-130": { - "value": "#113434", - "comment": "surface soylent-green, contrast 130", - "originalRatio": 13 - }, - "color-abyss-warning-70": { - "value": "#917000", - "comment": "abyss warning, contrast 70", - "originalRatio": 4 - }, - "color-abyss-neutral-130": { - "value": "#ced1d8", - "comment": "abyss neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-surface-neutral-60": { - "value": "#e5e7ea", - "comment": "surface neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-soylent-green-120": { - "value": "#184747", - "comment": "surface soylent-green, contrast 120", - "originalRatio": 10 - }, - "color-abyss-neutral-120": { - "value": "#b5b9c4", - "comment": "abyss neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-error-130": { - "value": "#fcc6ce", - "comment": "abyss error, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-neutral-50": { - "value": "#eff0f3", - "comment": "surface neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-soylent-green-110": { - "value": "#206060", - "comment": "surface soylent-green, contrast 110", - "originalRatio": 7 - }, - "color-abyss-neutral-110": { - "value": "#999ead", - "comment": "abyss neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-error-120": { - "value": "#fa9fae", - "comment": "abyss error, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-soylent-green-100": { - "value": "#287878", - "comment": "surface soylent-green, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-90": { - "value": "#2fad76", - "comment": "abyss positive, contrast 90", - "originalRatio": 6.5 - }, - "color-surface-naughty-purple-130": { - "value": "#402250", - "comment": "surface naughty-purple, contrast 130", - "originalRatio": 13 - }, - "color-surface-primary-90": { - "value": "#156df2", - "comment": "surface primary, contrast 90", - "originalRatio": 4.5 - }, - "color-abyss-neutral-100": { - "value": "#757c91", - "comment": "abyss neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-error-110": { - "value": "#f77589", - "comment": "abyss error, contrast 110", - "originalRatio": 7 - }, - "color-abyss-positive-80": { - "value": "#268d60", - "comment": "abyss positive, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-naughty-purple-120": { - "value": "#572e6d", - "comment": "surface naughty-purple, contrast 120", - "originalRatio": 10 - }, - "color-surface-primary-80": { - "value": "#5998f6", - "comment": "surface primary, contrast 80", - "originalRatio": 2.8 - }, - "color-abyss-error-100": { - "value": "#f43b58", - "comment": "abyss error, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-70": { - "value": "#1a6142", - "comment": "abyss positive, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-naughty-purple-110": { - "value": "#753f94", - "comment": "surface naughty-purple, contrast 110", - "originalRatio": 7 - }, - "color-surface-primary-70": { - "value": "#9ac0f9", - "comment": "surface primary, contrast 70", - "originalRatio": 1.8 - }, - "color-abyss-nasty-orange-90": { - "value": "#ed6b02", - "comment": "abyss nasty-orange, contrast 90", - "originalRatio": 6 - }, - "color-surface-naughty-purple-100": { - "value": "#9151b5", - "comment": "surface naughty-purple, contrast 100", - "originalRatio": 5 - }, - "color-abyss-hot-pink-90": { - "value": "#c81d7d", - "comment": "abyss hot-pink, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-nasty-orange-80": { - "value": "#bc5602", - "comment": "abyss nasty-orange, contrast 80", - "originalRatio": 4 - }, - "color-abyss-hot-pink-80": { - "value": "#a01764", - "comment": "abyss hot-pink, contrast 80", - "originalRatio": 2.5 - }, - "color-abyss-nasty-orange-70": { - "value": "#743501", - "comment": "abyss nasty-orange, contrast 70", - "originalRatio": 2 - }, - "color-abyss-soylent-green-90": { - "value": "#339a9a", - "comment": "abyss soylent-green, contrast 90", - "originalRatio": 5.5 - }, - "color-abyss-hot-pink-70": { - "value": "#640f3f", - "comment": "abyss hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-soylent-green-80": { - "value": "#2d8989", - "comment": "abyss soylent-green, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-warning-90": { - "value": "#e2ac00", - "comment": "surface warning, contrast 90", - "originalRatio": 2 - }, - "color-surface-warning-130": { - "value": "#3f3000", - "comment": "surface warning, contrast 130", - "originalRatio": 12.4 - }, - "color-abyss-soylent-green-70": { - "value": "#1f5d5d", - "comment": "abyss soylent-green, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-warning-80": { - "value": "#ffd651", - "comment": "surface warning, contrast 80", - "originalRatio": 1.35 - }, - "color-abyss-soylent-green-130": { - "value": "#c9eded", - "comment": "abyss soylent-green, contrast 130", - "originalRatio": 15 - }, - "color-surface-warning-120": { - "value": "#544100", - "comment": "surface warning, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-warning-70": { - "value": "#ffedb2", - "comment": "surface warning, contrast 70", - "originalRatio": 1.12 - }, - "color-abyss-soylent-green-120": { - "value": "#94dcdc", - "comment": "abyss soylent-green, contrast 120", - "originalRatio": 12 - }, - "color-surface-warning-110": { - "value": "#735700", - "comment": "surface warning, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-hot-pink-130": { - "value": "#f6c0de", - "comment": "abyss hot-pink, contrast 130", - "originalRatio": 12 - }, - "color-abyss-soylent-green-110": { - "value": "#5dc9c9", - "comment": "abyss soylent-green, contrast 110", - "originalRatio": 9.5 - }, - "color-surface-warning-100": { - "value": "#8f6e00", - "comment": "surface warning, contrast 100", - "originalRatio": 4.6 - }, - "color-abyss-nasty-orange-130": { - "value": "#ffe6d1", - "comment": "abyss nasty-orange, contrast 130", - "originalRatio": 15.5 - }, - "color-abyss-hot-pink-120": { - "value": "#f098c9", - "comment": "abyss hot-pink, contrast 120", - "originalRatio": 9 - }, - "color-abyss-soylent-green-100": { - "value": "#3cb5b5", - "comment": "abyss soylent-green, contrast 100", - "originalRatio": 7.5 - }, - "color-abyss-nasty-orange-120": { - "value": "#fec89d", - "comment": "abyss nasty-orange, contrast 120", - "originalRatio": 12.5 - }, - "color-abyss-hot-pink-110": { - "value": "#ea6db3", - "comment": "abyss hot-pink, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-nasty-orange-110": { - "value": "#feab67", - "comment": "abyss nasty-orange, contrast 110", - "originalRatio": 10 - }, - "color-abyss-hot-pink-100": { - "value": "#e13093", - "comment": "abyss hot-pink, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-primary-130": { - "value": "#052554", - "comment": "surface primary, contrast 130", - "originalRatio": 14.5 - }, - "color-abyss-positive-130": { - "value": "#d6f4e7", - "comment": "abyss positive, contrast 130", - "originalRatio": 16 - }, - "color-abyss-nasty-orange-100": { - "value": "#fd8c30", - "comment": "abyss nasty-orange, contrast 100", - "originalRatio": 8 - }, - "color-surface-naughty-purple-90": { - "value": "#9e65be", - "comment": "surface naughty-purple, contrast 90", - "originalRatio": 4 - }, - "color-surface-primary-120": { - "value": "#073477", - "comment": "surface primary, contrast 120", - "originalRatio": 11.5 - }, - "color-abyss-positive-120": { - "value": "#a2e6c8", - "comment": "abyss positive, contrast 120", - "originalRatio": 13 - }, - "color-surface-naughty-purple-80": { - "value": "#af80c9", - "comment": "surface naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-primary-110": { - "value": "#0945a0", - "comment": "surface primary, contrast 110", - "originalRatio": 8.5 - }, - "color-abyss-positive-110": { - "value": "#69d6a7", - "comment": "abyss positive, contrast 110", - "originalRatio": 10.5 - }, - "color-abyss-error-90": { - "value": "#e60d30", - "comment": "abyss error, contrast 90", - "originalRatio": 4 - }, - "color-surface-naughty-purple-70": { - "value": "#dcc8e8", - "comment": "surface naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-soylent-green-90": { - "value": "#36a1a1", - "comment": "surface soylent-green, contrast 90", - "originalRatio": 3 - }, - "color-surface-primary-100": { - "value": "#0b55c5", - "comment": "surface primary, contrast 100", - "originalRatio": 6.5 - }, - "color-abyss-positive-100": { - "value": "#36c587", - "comment": "abyss positive, contrast 100", - "originalRatio": 8.5 - }, - "color-abyss-error-80": { - "value": "#c20b28", - "comment": "abyss error, contrast 80", - "originalRatio": 3 - }, - "color-abyss-neutral-90": { - "value": "#505564", - "comment": "abyss neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-neutral-150": { - "value": "#111316", - "comment": "surface neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-soylent-green-80": { - "value": "#51c5c5", - "comment": "surface soylent-green, contrast 80", - "originalRatio": 2 - }, - "color-abyss-error-70": { - "value": "#90081e", - "comment": "abyss error, contrast 70", - "originalRatio": 2 - }, - "color-abyss-neutral-80": { - "value": "#343842", - "comment": "abyss neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-neutral-140": { - "value": "#21242a", - "comment": "surface neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-soylent-green-70": { - "value": "#95dcdc", - "comment": "surface soylent-green, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-neutral-70": { - "value": "#272a31", - "comment": "abyss neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-neutral-130": { - "value": "#30333c", - "comment": "surface neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-abyss-warning-130": { - "value": "#fff0bf", - "comment": "abyss warning, contrast 130", - "originalRatio": 16.5 - }, - "color-abyss-neutral-60": { - "value": "#21242a", - "comment": "abyss neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-neutral-120": { - "value": "#404450", - "comment": "surface neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-warning-120": { - "value": "#ffe99d", - "comment": "abyss warning, contrast 120", - "originalRatio": 15.5 - }, - "color-surface-error-130": { - "value": "#590513", - "comment": "surface error, contrast 130", - "originalRatio": 14 - }, - "color-abyss-background": { - "value": "#111216" - }, - "color-abyss-maxcontrast": { - "value": "#fafbfb" - }, - "color-surface-background": { - "value": "#fafbfb" - }, - "color-surface-maxcontrast": { - "value": "#111216" - } - } -} diff --git a/libs/shared/design-tokens/generated/global/theme.scss b/libs/shared/design-tokens/generated/global/theme.scss deleted file mode 100644 index 4798a0c0c4..0000000000 --- a/libs/shared/design-tokens/generated/global/theme.scss +++ /dev/null @@ -1,149 +0,0 @@ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -.fluid-theme--abyss { - --color-background: #111216; - --color-maxcontrast: #fafbfb; - --color-primary-70: #084298; - --color-primary-80: #0b5ace; - --color-primary-90: #136cf2; - --color-primary-100: #3582f4; - --color-primary-110: #659ff7; - --color-primary-120: #91bbf9; - --color-primary-130: #bbd5fb; - --color-positive-70: #1a6142; - --color-positive-80: #268d60; - --color-positive-90: #2fad76; - --color-positive-100: #36c587; - --color-positive-110: #69d6a7; - --color-positive-120: #a2e6c8; - --color-positive-130: #d6f4e7; - --color-warning-70: #917000; - --color-warning-80: #bd9200; - --color-warning-90: #e0ad00; - --color-warning-100: #fcc300; - --color-warning-110: #ffd752; - --color-warning-120: #ffe99d; - --color-warning-130: #fff0bf; - --color-error-70: #90081e; - --color-error-80: #c20b28; - --color-error-90: #e60d30; - --color-error-100: #f43b58; - --color-error-110: #f77589; - --color-error-120: #fa9fae; - --color-error-130: #fcc6ce; - --color-nasty-orange-70: #743501; - --color-nasty-orange-80: #bc5602; - --color-nasty-orange-90: #ed6b02; - --color-nasty-orange-100: #fd8c30; - --color-nasty-orange-110: #feab67; - --color-nasty-orange-120: #fec89d; - --color-nasty-orange-130: #ffe6d1; - --color-hot-pink-70: #640f3f; - --color-hot-pink-80: #a01764; - --color-hot-pink-90: #c81d7d; - --color-hot-pink-100: #e13093; - --color-hot-pink-110: #ea6db3; - --color-hot-pink-120: #f098c9; - --color-hot-pink-130: #f6c0de; - --color-soylent-green-70: #1f5d5d; - --color-soylent-green-80: #2d8989; - --color-soylent-green-90: #339a9a; - --color-soylent-green-100: #3cb5b5; - --color-soylent-green-110: #5dc9c9; - --color-soylent-green-120: #94dcdc; - --color-soylent-green-130: #c9eded; - --color-naughty-purple-70: #462658; - --color-naughty-purple-80: #8246a5; - --color-naughty-purple-90: #9d65be; - --color-naughty-purple-100: #ae80c9; - --color-naughty-purple-110: #c09cd5; - --color-naughty-purple-120: #d3b9e1; - --color-naughty-purple-130: #e5d6ed; - --color-neutral-50: #1a1c21; - --color-neutral-60: #21242a; - --color-neutral-70: #272a31; - --color-neutral-80: #343842; - --color-neutral-90: #505564; - --color-neutral-100: #757c91; - --color-neutral-110: #999ead; - --color-neutral-120: #b5b9c4; - --color-neutral-130: #ced1d8; - --color-neutral-140: #e5e6ea; - --color-neutral-150: #fafbfb; -} - -.fluid-theme--surface { - --color-background: #fafbfb; - --color-maxcontrast: #111216; - --color-primary-70: #9ac0f9; - --color-primary-80: #5998f6; - --color-primary-90: #156df2; - --color-primary-100: #0b55c5; - --color-primary-110: #0945a0; - --color-primary-120: #073477; - --color-primary-130: #052554; - --color-positive-70: #b1ead1; - --color-positive-80: #4ecf96; - --color-positive-90: #2a9868; - --color-positive-100: #207450; - --color-positive-110: #1a5d40; - --color-positive-120: #134630; - --color-positive-130: #0e3223; - --color-warning-70: #ffedb2; - --color-warning-80: #ffd651; - --color-warning-90: #e2ac00; - --color-warning-100: #8f6e00; - --color-warning-110: #735700; - --color-warning-120: #544100; - --color-warning-130: #3f3000; - --color-error-70: #fbc0ca; - --color-error-80: #f88b9d; - --color-error-90: #f4425f; - --color-error-100: #c20b29; - --color-error-110: #9e0921; - --color-error-120: #780719; - --color-error-130: #590513; - --color-nasty-orange-70: #fed2af; - --color-nasty-orange-80: #fdac69; - --color-nasty-orange-90: #ee6c03; - --color-nasty-orange-100: #be5602; - --color-nasty-orange-110: #8e4001; - --color-nasty-orange-120: #6a3001; - --color-nasty-orange-130: #4e2301; - --color-hot-pink-70: #f6c0de; - --color-hot-pink-80: #ef8cc3; - --color-hot-pink-90: #e861ad; - --color-hot-pink-100: #cc1d7f; - --color-hot-pink-110: #a41766; - --color-hot-pink-120: #7b114c; - --color-hot-pink-130: #5b0d38; - --color-soylent-green-70: #95dcdc; - --color-soylent-green-80: #51c5c5; - --color-soylent-green-90: #36a1a1; - --color-soylent-green-100: #287878; - --color-soylent-green-110: #206060; - --color-soylent-green-120: #184747; - --color-soylent-green-130: #113434; - --color-naughty-purple-70: #dcc8e8; - --color-naughty-purple-80: #af80c9; - --color-naughty-purple-90: #9e65be; - --color-naughty-purple-100: #9151b5; - --color-naughty-purple-110: #753f94; - --color-naughty-purple-120: #572e6d; - --color-naughty-purple-130: #402250; - --color-neutral-50: #eff0f3; - --color-neutral-60: #e5e7ea; - --color-neutral-70: #dcdee3; - --color-neutral-80: #c6c9d1; - --color-neutral-90: #9ba1b0; - --color-neutral-100: #6d7488; - --color-neutral-110: #515666; - --color-neutral-120: #404450; - --color-neutral-130: #30333c; - --color-neutral-140: #21242a; - --color-neutral-150: #111316; -} diff --git a/libs/shared/design-tokens/generated/global/theme.ts b/libs/shared/design-tokens/generated/global/theme.ts deleted file mode 100644 index 8c502d1df5..0000000000 --- a/libs/shared/design-tokens/generated/global/theme.ts +++ /dev/null @@ -1,166 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export const THEMES = { - ABYSS: { - COLOR_BACKGROUND: '#111216', - COLOR_MAXCONTRAST: '#fafbfb', - COLOR_PRIMARY_70: '#084298', - COLOR_PRIMARY_80: '#0b5ace', - COLOR_PRIMARY_90: '#136cf2', - COLOR_PRIMARY_100: '#3582f4', - COLOR_PRIMARY_110: '#659ff7', - COLOR_PRIMARY_120: '#91bbf9', - COLOR_PRIMARY_130: '#bbd5fb', - COLOR_POSITIVE_70: '#1a6142', - COLOR_POSITIVE_80: '#268d60', - COLOR_POSITIVE_90: '#2fad76', - COLOR_POSITIVE_100: '#36c587', - COLOR_POSITIVE_110: '#69d6a7', - COLOR_POSITIVE_120: '#a2e6c8', - COLOR_POSITIVE_130: '#d6f4e7', - COLOR_WARNING_70: '#917000', - COLOR_WARNING_80: '#bd9200', - COLOR_WARNING_90: '#e0ad00', - COLOR_WARNING_100: '#fcc300', - COLOR_WARNING_110: '#ffd752', - COLOR_WARNING_120: '#ffe99d', - COLOR_WARNING_130: '#fff0bf', - COLOR_ERROR_70: '#90081e', - COLOR_ERROR_80: '#c20b28', - COLOR_ERROR_90: '#e60d30', - COLOR_ERROR_100: '#f43b58', - COLOR_ERROR_110: '#f77589', - COLOR_ERROR_120: '#fa9fae', - COLOR_ERROR_130: '#fcc6ce', - COLOR_NASTY_ORANGE_70: '#743501', - COLOR_NASTY_ORANGE_80: '#bc5602', - COLOR_NASTY_ORANGE_90: '#ed6b02', - COLOR_NASTY_ORANGE_100: '#fd8c30', - COLOR_NASTY_ORANGE_110: '#feab67', - COLOR_NASTY_ORANGE_120: '#fec89d', - COLOR_NASTY_ORANGE_130: '#ffe6d1', - COLOR_HOT_PINK_70: '#640f3f', - COLOR_HOT_PINK_80: '#a01764', - COLOR_HOT_PINK_90: '#c81d7d', - COLOR_HOT_PINK_100: '#e13093', - COLOR_HOT_PINK_110: '#ea6db3', - COLOR_HOT_PINK_120: '#f098c9', - COLOR_HOT_PINK_130: '#f6c0de', - COLOR_SOYLENT_GREEN_70: '#1f5d5d', - COLOR_SOYLENT_GREEN_80: '#2d8989', - COLOR_SOYLENT_GREEN_90: '#339a9a', - COLOR_SOYLENT_GREEN_100: '#3cb5b5', - COLOR_SOYLENT_GREEN_110: '#5dc9c9', - COLOR_SOYLENT_GREEN_120: '#94dcdc', - COLOR_SOYLENT_GREEN_130: '#c9eded', - COLOR_NAUGHTY_PURPLE_70: '#462658', - COLOR_NAUGHTY_PURPLE_80: '#8246a5', - COLOR_NAUGHTY_PURPLE_90: '#9d65be', - COLOR_NAUGHTY_PURPLE_100: '#ae80c9', - COLOR_NAUGHTY_PURPLE_110: '#c09cd5', - COLOR_NAUGHTY_PURPLE_120: '#d3b9e1', - COLOR_NAUGHTY_PURPLE_130: '#e5d6ed', - COLOR_NEUTRAL_50: '#1a1c21', - COLOR_NEUTRAL_60: '#21242a', - COLOR_NEUTRAL_70: '#272a31', - COLOR_NEUTRAL_80: '#343842', - COLOR_NEUTRAL_90: '#505564', - COLOR_NEUTRAL_100: '#757c91', - COLOR_NEUTRAL_110: '#999ead', - COLOR_NEUTRAL_120: '#b5b9c4', - COLOR_NEUTRAL_130: '#ced1d8', - COLOR_NEUTRAL_140: '#e5e6ea', - COLOR_NEUTRAL_150: '#fafbfb', - }, - SURFACE: { - COLOR_BACKGROUND: '#fafbfb', - COLOR_MAXCONTRAST: '#111216', - COLOR_PRIMARY_70: '#9ac0f9', - COLOR_PRIMARY_80: '#5998f6', - COLOR_PRIMARY_90: '#156df2', - COLOR_PRIMARY_100: '#0b55c5', - COLOR_PRIMARY_110: '#0945a0', - COLOR_PRIMARY_120: '#073477', - COLOR_PRIMARY_130: '#052554', - COLOR_POSITIVE_70: '#b1ead1', - COLOR_POSITIVE_80: '#4ecf96', - COLOR_POSITIVE_90: '#2a9868', - COLOR_POSITIVE_100: '#207450', - COLOR_POSITIVE_110: '#1a5d40', - COLOR_POSITIVE_120: '#134630', - COLOR_POSITIVE_130: '#0e3223', - COLOR_WARNING_70: '#ffedb2', - COLOR_WARNING_80: '#ffd651', - COLOR_WARNING_90: '#e2ac00', - COLOR_WARNING_100: '#8f6e00', - COLOR_WARNING_110: '#735700', - COLOR_WARNING_120: '#544100', - COLOR_WARNING_130: '#3f3000', - COLOR_ERROR_70: '#fbc0ca', - COLOR_ERROR_80: '#f88b9d', - COLOR_ERROR_90: '#f4425f', - COLOR_ERROR_100: '#c20b29', - COLOR_ERROR_110: '#9e0921', - COLOR_ERROR_120: '#780719', - COLOR_ERROR_130: '#590513', - COLOR_NASTY_ORANGE_70: '#fed2af', - COLOR_NASTY_ORANGE_80: '#fdac69', - COLOR_NASTY_ORANGE_90: '#ee6c03', - COLOR_NASTY_ORANGE_100: '#be5602', - COLOR_NASTY_ORANGE_110: '#8e4001', - COLOR_NASTY_ORANGE_120: '#6a3001', - COLOR_NASTY_ORANGE_130: '#4e2301', - COLOR_HOT_PINK_70: '#f6c0de', - COLOR_HOT_PINK_80: '#ef8cc3', - COLOR_HOT_PINK_90: '#e861ad', - COLOR_HOT_PINK_100: '#cc1d7f', - COLOR_HOT_PINK_110: '#a41766', - COLOR_HOT_PINK_120: '#7b114c', - COLOR_HOT_PINK_130: '#5b0d38', - COLOR_SOYLENT_GREEN_70: '#95dcdc', - COLOR_SOYLENT_GREEN_80: '#51c5c5', - COLOR_SOYLENT_GREEN_90: '#36a1a1', - COLOR_SOYLENT_GREEN_100: '#287878', - COLOR_SOYLENT_GREEN_110: '#206060', - COLOR_SOYLENT_GREEN_120: '#184747', - COLOR_SOYLENT_GREEN_130: '#113434', - COLOR_NAUGHTY_PURPLE_70: '#dcc8e8', - COLOR_NAUGHTY_PURPLE_80: '#af80c9', - COLOR_NAUGHTY_PURPLE_90: '#9e65be', - COLOR_NAUGHTY_PURPLE_100: '#9151b5', - COLOR_NAUGHTY_PURPLE_110: '#753f94', - COLOR_NAUGHTY_PURPLE_120: '#572e6d', - COLOR_NAUGHTY_PURPLE_130: '#402250', - COLOR_NEUTRAL_50: '#eff0f3', - COLOR_NEUTRAL_60: '#e5e7ea', - COLOR_NEUTRAL_70: '#dcdee3', - COLOR_NEUTRAL_80: '#c6c9d1', - COLOR_NEUTRAL_90: '#9ba1b0', - COLOR_NEUTRAL_100: '#6d7488', - COLOR_NEUTRAL_110: '#515666', - COLOR_NEUTRAL_120: '#404450', - COLOR_NEUTRAL_130: '#30333c', - COLOR_NEUTRAL_140: '#21242a', - COLOR_NEUTRAL_150: '#111316', - }, -}; diff --git a/libs/shared/design-tokens/generated/global/typography.css b/libs/shared/design-tokens/generated/global/typography.css deleted file mode 100644 index c807aa816b..0000000000 --- a/libs/shared/design-tokens/generated/global/typography.css +++ /dev/null @@ -1,137 +0,0 @@ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -/* - * Token contains the styles for a headline 1 - */ -.dt-h1 { - font-family: Roboto, Helvetica, sans-serif; - font-size: 2.027rem; - font-weight: 500; - line-height: 38px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 2 - */ -.dt-h2 { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.802rem; - font-weight: 500; - line-height: 34px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 3 - */ -.dt-h3 { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.602rem; - font-weight: 500; - line-height: 30px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 4 - */ -.dt-h4 { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.424rem; - font-weight: 500; - line-height: 27px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 5 - */ -.dt-h5 { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.266rem; - font-weight: 500; - line-height: 24px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 6 - */ -.dt-h6 { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.125rem; - font-weight: 500; - line-height: 21px; - text-transform: none; -} - -/* - * Token contains the styles for a body text - */ -.dt-text { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 400; - line-height: 24px; - text-transform: none; -} - -/* - * Token contains the styles for a body emphasized text - */ -.dt-text-em { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 500; - line-height: 19px; - text-transform: none; -} - -/* - * Token contains the styles for a body super emphasized text - */ -.dt-text-sem { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 700; - line-height: 19px; - text-transform: none; -} - -/* - * Token contains the styles for a body uppercased text - */ -.dt-text-u { - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 400; - line-height: 17px; - text-transform: uppercase; -} - -/* - * Token contains the styles for a body uppercased emphasized text - */ -.dt-text-u-em { - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 500; - line-height: 17px; - text-transform: uppercase; -} - -/* - * Token contains the styles for a body uppercased super emphasized text - */ -.dt-text-u-sem { - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 700; - line-height: 17px; - text-transform: uppercase; -} diff --git a/libs/shared/design-tokens/generated/global/typography.js b/libs/shared/design-tokens/generated/global/typography.js deleted file mode 100644 index c6e922b96f..0000000000 --- a/libs/shared/design-tokens/generated/global/typography.js +++ /dev/null @@ -1,161 +0,0 @@ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -/* - * Token contains the styles for a headline 1 - */ -export function fluidDtH1() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 2.027rem; - font-weight: 500; - line-height: 38px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 2 - */ -export function fluidDtH2() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.802rem; - font-weight: 500; - line-height: 34px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 3 - */ -export function fluidDtH3() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.602rem; - font-weight: 500; - line-height: 30px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 4 - */ -export function fluidDtH4() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.424rem; - font-weight: 500; - line-height: 27px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 5 - */ -export function fluidDtH5() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.266rem; - font-weight: 500; - line-height: 24px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 6 - */ -export function fluidDtH6() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.125rem; - font-weight: 500; - line-height: 21px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a body text - */ -export function fluidDtText() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 400; - line-height: 24px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a body emphasized text - */ -export function fluidDtTextEm() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 500; - line-height: 19px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a body super emphasized text - */ -export function fluidDtTextSem() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 700; - line-height: 19px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a body uppercased text - */ -export function fluidDtTextU() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 400; - line-height: 17px; - text-transform: uppercase; - `; -} - -/* - * Token contains the styles for a body uppercased emphasized text - */ -export function fluidDtTextUEm() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 500; - line-height: 17px; - text-transform: uppercase; - `; -} - -/* - * Token contains the styles for a body uppercased super emphasized text - */ -export function fluidDtTextUSem() { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 700; - line-height: 17px; - text-transform: uppercase; - `; -} diff --git a/libs/shared/design-tokens/generated/global/typography.json b/libs/shared/design-tokens/generated/global/typography.json deleted file mode 100644 index 9f943d9e3d..0000000000 --- a/libs/shared/design-tokens/generated/global/typography.json +++ /dev/null @@ -1,1084 +0,0 @@ -{ - "outputs": [ - { - "type": "css", - "formatter": "dt-css-typography" - }, - { - "type": "scss", - "formatter": "dt-scss-typography" - }, - { - "type": "ts", - "formatter": "dt-typescript-typography" - }, - { - "type": "js", - "formatter": "dt-javascript-typography" - } - ], - "props": { - "heading-1": { - "type": "tokens", - "category": "typography", - "name": "heading-1", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "2.027rem", - "fontWeight": "500", - "lineHeight": "38px", - "textTransform": "none" - }, - "comment": "Token contains the styles for a headline 1", - "meta": { - "friendlyName": "Headline 1", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-h1", - "mixinName": "dt-h1" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size-4xl}", - "fontWeight": "{!typography--emphasis-medium}", - "lineHeight": "{!typography--line-height-4xl}", - "textTransform": "none" - } - }, - "heading-2": { - "type": "tokens", - "category": "typography", - "name": "heading-2", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "1.802rem", - "fontWeight": "500", - "lineHeight": "34px", - "textTransform": "none" - }, - "comment": "Token contains the styles for a headline 2", - "meta": { - "friendlyName": "Headline 2", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-h2", - "mixinName": "dt-h2" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size-3xl}", - "fontWeight": "{!typography--emphasis-medium}", - "lineHeight": "{!typography--line-height-3xl}", - "textTransform": "none" - } - }, - "heading-3": { - "type": "tokens", - "category": "typography", - "name": "heading-3", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "1.602rem", - "fontWeight": "500", - "lineHeight": "30px", - "textTransform": "none" - }, - "comment": "Token contains the styles for a headline 3", - "meta": { - "friendlyName": "Headline 3", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-h3", - "mixinName": "dt-h3" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size-2xl}", - "fontWeight": "{!typography--emphasis-medium}", - "lineHeight": "{!typography--line-height-2xl}", - "textTransform": "none" - } - }, - "heading-4": { - "type": "tokens", - "category": "typography", - "name": "heading-4", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "1.424rem", - "fontWeight": "500", - "lineHeight": "27px", - "textTransform": "none" - }, - "comment": "Token contains the styles for a headline 4", - "meta": { - "friendlyName": "Headline 4", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-h4", - "mixinName": "dt-h4" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size-xl}", - "fontWeight": "{!typography--emphasis-medium}", - "lineHeight": "{!typography--line-height-xl}", - "textTransform": "none" - } - }, - "heading-5": { - "type": "tokens", - "category": "typography", - "name": "heading-5", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "1.266rem", - "fontWeight": "500", - "lineHeight": "24px", - "textTransform": "none" - }, - "comment": "Token contains the styles for a headline 5", - "meta": { - "friendlyName": "Headline 5", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-h5", - "mixinName": "dt-h5" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size-l}", - "fontWeight": "{!typography--emphasis-medium}", - "lineHeight": "{!typography--line-height-l}", - "textTransform": "none" - } - }, - "heading-6": { - "type": "tokens", - "category": "typography", - "name": "heading-6", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "1.125rem", - "fontWeight": "500", - "lineHeight": "21px", - "textTransform": "none" - }, - "comment": "Token contains the styles for a headline 6", - "meta": { - "friendlyName": "Headline 6", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-h6", - "mixinName": "dt-h6" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size-m}", - "fontWeight": "{!typography--emphasis-medium}", - "lineHeight": "{!typography--line-height-m}", - "textTransform": "none" - } - }, - "body": { - "type": "tokens", - "category": "typography", - "name": "body", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "1rem", - "fontWeight": "400", - "lineHeight": "24px", - "textTransform": "none" - }, - "comment": "Token contains the styles for a body text", - "meta": { - "friendlyName": "Body", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-text", - "mixinName": "dt-text" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size}", - "fontWeight": "{!typography--emphasis-regular}", - "lineHeight": "{!typography--line-height-l}", - "textTransform": "none" - } - }, - "body-emphasized": { - "type": "tokens", - "category": "typography", - "name": "body-emphasized", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "1rem", - "fontWeight": "500", - "lineHeight": "19px", - "textTransform": "none" - }, - "comment": "Token contains the styles for a body emphasized text", - "meta": { - "friendlyName": "Body emphasized", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-text-em", - "mixinName": "dt-text-em" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size}", - "fontWeight": "{!typography--emphasis-medium}", - "lineHeight": "{!typography--line-height}", - "textTransform": "none" - } - }, - "body-super-emphasized": { - "type": "tokens", - "category": "typography", - "name": "body-super-emphasized", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "1rem", - "fontWeight": "700", - "lineHeight": "19px", - "textTransform": "none" - }, - "comment": "Token contains the styles for a body super emphasized text", - "meta": { - "friendlyName": "Body super emphasized", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-text-sem", - "mixinName": "dt-text-sem" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size}", - "fontWeight": "{!typography--emphasis-high}", - "lineHeight": "{!typography--line-height}", - "textTransform": "none" - } - }, - "body-uppercased": { - "type": "tokens", - "category": "typography", - "name": "body-uppercased", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "0.89rem", - "fontWeight": "400", - "lineHeight": "17px", - "textTransform": "uppercase" - }, - "comment": "Token contains the styles for a body uppercased text", - "meta": { - "friendlyName": "Body uppercased", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-text-u", - "mixinName": "dt-text-u" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size-s}", - "fontWeight": "{!typography--emphasis-regular}", - "lineHeight": "{!typography--line-height-s}", - "textTransform": "uppercase" - } - }, - "body-uppercased-emphasized": { - "type": "tokens", - "category": "typography", - "name": "body-uppercased-emphasized", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "0.89rem", - "fontWeight": "500", - "lineHeight": "17px", - "textTransform": "uppercase" - }, - "comment": "Token contains the styles for a body uppercased emphasized text", - "meta": { - "friendlyName": "Body uppercased emphasized", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-text-u-em", - "mixinName": "dt-text-u-em" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size-s}", - "fontWeight": "{!typography--emphasis-medium}", - "lineHeight": "{!typography--line-height-s}", - "textTransform": "uppercase" - } - }, - "body-uppercased-super-emphasized": { - "type": "tokens", - "category": "typography", - "name": "body-uppercased-super-emphasized", - "value": { - "fontFamily": "Roboto, Helvetica, sans-serif", - "fontSize": "0.89rem", - "fontWeight": "700", - "lineHeight": "17px", - "textTransform": "uppercase" - }, - "comment": "Token contains the styles for a body uppercased super emphasized text", - "meta": { - "friendlyName": "Body uppercased super emphasized", - "pangram": "The quick brown fox jumps over a lazy dog", - "selector": ".dt-text-u-sem", - "mixinName": "dt-text-u-sem" - }, - "originalValue": { - "fontFamily": "{!font-family-sans-serif}", - "fontSize": "{!typography--font-size-s}", - "fontWeight": "{!typography--emphasis-high}", - "lineHeight": "{!typography--line-height-s}", - "textTransform": "uppercase" - } - } - }, - "aliases": { - "font-family-sans-serif": { - "value": "Roboto, Helvetica, sans-serif" - }, - "font-family-serif": { - "value": "serif" - }, - "font-family-monospaced": { - "value": "monospace" - }, - "typography--emphasis-high": { - "value": 700 - }, - "typography--font-size-2xl": { - "value": "1.602rem" - }, - "typography--line-height-2xl": { - "value": "30px" - }, - "typography--font-size-3xl": { - "value": "1.802rem" - }, - "typography--line-height-3xl": { - "value": "34px" - }, - "typography--font-size-4xl": { - "value": "2.027rem" - }, - "typography--line-height-4xl": { - "value": "38px" - }, - "typography--font-size-l": { - "value": "1.266rem" - }, - "typography--line-height-l": { - "value": "24px" - }, - "typography--font-size": { - "value": "1rem" - }, - "typography--font-size-m": { - "value": "1.125rem" - }, - "typography--line-height-xl": { - "value": "27px" - }, - "typography--font-size-2xs": { - "value": "0.702rem" - }, - "typography--line-height-m": { - "value": "21px" - }, - "typography--font-size-xl": { - "value": "1.424rem" - }, - "typography--line-height-2xs": { - "value": "13px" - }, - "typography--line-height": { - "value": "19px" - }, - "typography--font-size-s": { - "value": "0.89rem" - }, - "typography--line-height-s": { - "value": "17px" - }, - "typography--emphasis-medium": { - "value": 500 - }, - "typography--line-height-xs": { - "value": "15px" - }, - "typography--font-size-xs": { - "value": "0.79rem" - }, - "typography--emphasis-regular": { - "value": 400 - }, - "color-abyss-neutral-50": { - "value": "#1a1c21", - "comment": "abyss neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-neutral-110": { - "value": "#515666", - "comment": "surface neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-warning-110": { - "value": "#ffd752", - "comment": "abyss warning, contrast 110", - "originalRatio": 13.5 - }, - "color-surface-error-120": { - "value": "#780719", - "comment": "surface error, contrast 120", - "originalRatio": 11 - }, - "color-abyss-primary-90": { - "value": "#136cf2", - "comment": "abyss primary, contrast 90", - "originalRatio": 4 - }, - "color-surface-hot-pink-130": { - "value": "#5b0d38", - "comment": "surface hot-pink, contrast 130", - "originalRatio": 13 - }, - "color-surface-positive-90": { - "value": "#2a9868", - "comment": "surface positive, contrast 90", - "originalRatio": 3.5 - }, - "color-surface-nasty-orange-130": { - "value": "#4e2301", - "comment": "surface nasty-orange, contrast 130", - "originalRatio": 13 - }, - "color-surface-neutral-100": { - "value": "#6d7488", - "comment": "surface neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-naughty-purple-130": { - "value": "#e5d6ed", - "comment": "abyss naughty-purple, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-warning-100": { - "value": "#fcc300", - "comment": "abyss warning, contrast 100", - "originalRatio": 11.5 - }, - "color-surface-error-110": { - "value": "#9e0921", - "comment": "surface error, contrast 110", - "originalRatio": 8 - }, - "color-surface-hot-pink-120": { - "value": "#7b114c", - "comment": "surface hot-pink, contrast 120", - "originalRatio": 10 - }, - "color-surface-positive-80": { - "value": "#4ecf96", - "comment": "surface positive, contrast 80", - "originalRatio": 1.9 - }, - "color-surface-nasty-orange-120": { - "value": "#6a3001", - "comment": "surface nasty-orange, contrast 120", - "originalRatio": 10 - }, - "color-abyss-naughty-purple-120": { - "value": "#d3b9e1", - "comment": "abyss naughty-purple, contrast 120", - "originalRatio": 10.5 - }, - "color-surface-error-100": { - "value": "#c20b29", - "comment": "surface error, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-80": { - "value": "#0b5ace", - "comment": "abyss primary, contrast 80", - "originalRatio": 3 - }, - "color-surface-hot-pink-110": { - "value": "#a41766", - "comment": "surface hot-pink, contrast 110", - "originalRatio": 7 - }, - "color-surface-positive-70": { - "value": "#b1ead1", - "comment": "surface positive, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-nasty-orange-110": { - "value": "#8e4001", - "comment": "surface nasty-orange, contrast 110", - "originalRatio": 7 - }, - "color-abyss-naughty-purple-110": { - "value": "#c09cd5", - "comment": "abyss naughty-purple, contrast 110", - "originalRatio": 8 - }, - "color-abyss-primary-70": { - "value": "#084298", - "comment": "abyss primary, contrast 70", - "originalRatio": 2 - }, - "color-abyss-naughty-purple-90": { - "value": "#9d65be", - "comment": "abyss naughty-purple, contrast 90", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-100": { - "value": "#be5602", - "comment": "surface nasty-orange, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-90": { - "value": "#ee6c03", - "comment": "surface nasty-orange, contrast 90", - "originalRatio": 3 - }, - "color-surface-positive-130": { - "value": "#0e3223", - "comment": "surface positive, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-naughty-purple-100": { - "value": "#ae80c9", - "comment": "abyss naughty-purple, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-130": { - "value": "#bbd5fb", - "comment": "abyss primary, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-hot-pink-90": { - "value": "#e861ad", - "comment": "surface hot-pink, contrast 90", - "originalRatio": 3 - }, - "color-surface-hot-pink-100": { - "value": "#cc1d7f", - "comment": "surface hot-pink, contrast 100", - "originalRatio": 5 - }, - "color-abyss-naughty-purple-80": { - "value": "#8246a5", - "comment": "abyss naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-nasty-orange-80": { - "value": "#fdac69", - "comment": "surface nasty-orange, contrast 80", - "originalRatio": 1.8 - }, - "color-surface-positive-120": { - "value": "#134630", - "comment": "surface positive, contrast 120", - "originalRatio": 10.5 - }, - "color-abyss-primary-120": { - "value": "#91bbf9", - "comment": "abyss primary, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-hot-pink-80": { - "value": "#ef8cc3", - "comment": "surface hot-pink, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-naughty-purple-70": { - "value": "#462658", - "comment": "abyss naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-nasty-orange-70": { - "value": "#fed2af", - "comment": "surface nasty-orange, contrast 70", - "originalRatio": 1.35 - }, - "color-surface-positive-110": { - "value": "#1a5d40", - "comment": "surface positive, contrast 110", - "originalRatio": 7.5 - }, - "color-abyss-primary-110": { - "value": "#659ff7", - "comment": "abyss primary, contrast 110", - "originalRatio": 7 - }, - "color-surface-hot-pink-70": { - "value": "#f6c0de", - "comment": "surface hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-error-90": { - "value": "#f4425f", - "comment": "surface error, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-warning-90": { - "value": "#e0ad00", - "comment": "abyss warning, contrast 90", - "originalRatio": 9 - }, - "color-abyss-neutral-150": { - "value": "#fafbfb", - "comment": "abyss neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-neutral-90": { - "value": "#9ba1b0", - "comment": "surface neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-positive-100": { - "value": "#207450", - "comment": "surface positive, contrast 100", - "originalRatio": 5.5 - }, - "color-abyss-primary-100": { - "value": "#3582f4", - "comment": "abyss primary, contrast 100", - "originalRatio": 5 - }, - "color-surface-error-80": { - "value": "#f88b9d", - "comment": "surface error, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-warning-80": { - "value": "#bd9200", - "comment": "abyss warning, contrast 80", - "originalRatio": 6.5 - }, - "color-abyss-neutral-140": { - "value": "#e5e6ea", - "comment": "abyss neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-neutral-80": { - "value": "#c6c9d1", - "comment": "surface neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-error-70": { - "value": "#fbc0ca", - "comment": "surface error, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-neutral-70": { - "value": "#dcdee3", - "comment": "surface neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-soylent-green-130": { - "value": "#113434", - "comment": "surface soylent-green, contrast 130", - "originalRatio": 13 - }, - "color-abyss-warning-70": { - "value": "#917000", - "comment": "abyss warning, contrast 70", - "originalRatio": 4 - }, - "color-abyss-neutral-130": { - "value": "#ced1d8", - "comment": "abyss neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-surface-neutral-60": { - "value": "#e5e7ea", - "comment": "surface neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-soylent-green-120": { - "value": "#184747", - "comment": "surface soylent-green, contrast 120", - "originalRatio": 10 - }, - "color-abyss-neutral-120": { - "value": "#b5b9c4", - "comment": "abyss neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-error-130": { - "value": "#fcc6ce", - "comment": "abyss error, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-neutral-50": { - "value": "#eff0f3", - "comment": "surface neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-soylent-green-110": { - "value": "#206060", - "comment": "surface soylent-green, contrast 110", - "originalRatio": 7 - }, - "color-abyss-neutral-110": { - "value": "#999ead", - "comment": "abyss neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-error-120": { - "value": "#fa9fae", - "comment": "abyss error, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-soylent-green-100": { - "value": "#287878", - "comment": "surface soylent-green, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-90": { - "value": "#2fad76", - "comment": "abyss positive, contrast 90", - "originalRatio": 6.5 - }, - "color-surface-naughty-purple-130": { - "value": "#402250", - "comment": "surface naughty-purple, contrast 130", - "originalRatio": 13 - }, - "color-surface-primary-90": { - "value": "#156df2", - "comment": "surface primary, contrast 90", - "originalRatio": 4.5 - }, - "color-abyss-neutral-100": { - "value": "#757c91", - "comment": "abyss neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-error-110": { - "value": "#f77589", - "comment": "abyss error, contrast 110", - "originalRatio": 7 - }, - "color-abyss-positive-80": { - "value": "#268d60", - "comment": "abyss positive, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-naughty-purple-120": { - "value": "#572e6d", - "comment": "surface naughty-purple, contrast 120", - "originalRatio": 10 - }, - "color-surface-primary-80": { - "value": "#5998f6", - "comment": "surface primary, contrast 80", - "originalRatio": 2.8 - }, - "color-abyss-error-100": { - "value": "#f43b58", - "comment": "abyss error, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-70": { - "value": "#1a6142", - "comment": "abyss positive, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-naughty-purple-110": { - "value": "#753f94", - "comment": "surface naughty-purple, contrast 110", - "originalRatio": 7 - }, - "color-surface-primary-70": { - "value": "#9ac0f9", - "comment": "surface primary, contrast 70", - "originalRatio": 1.8 - }, - "color-abyss-nasty-orange-90": { - "value": "#ed6b02", - "comment": "abyss nasty-orange, contrast 90", - "originalRatio": 6 - }, - "color-surface-naughty-purple-100": { - "value": "#9151b5", - "comment": "surface naughty-purple, contrast 100", - "originalRatio": 5 - }, - "color-abyss-hot-pink-90": { - "value": "#c81d7d", - "comment": "abyss hot-pink, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-nasty-orange-80": { - "value": "#bc5602", - "comment": "abyss nasty-orange, contrast 80", - "originalRatio": 4 - }, - "color-abyss-hot-pink-80": { - "value": "#a01764", - "comment": "abyss hot-pink, contrast 80", - "originalRatio": 2.5 - }, - "color-abyss-nasty-orange-70": { - "value": "#743501", - "comment": "abyss nasty-orange, contrast 70", - "originalRatio": 2 - }, - "color-abyss-soylent-green-90": { - "value": "#339a9a", - "comment": "abyss soylent-green, contrast 90", - "originalRatio": 5.5 - }, - "color-abyss-hot-pink-70": { - "value": "#640f3f", - "comment": "abyss hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-soylent-green-80": { - "value": "#2d8989", - "comment": "abyss soylent-green, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-warning-90": { - "value": "#e2ac00", - "comment": "surface warning, contrast 90", - "originalRatio": 2 - }, - "color-surface-warning-130": { - "value": "#3f3000", - "comment": "surface warning, contrast 130", - "originalRatio": 12.4 - }, - "color-abyss-soylent-green-70": { - "value": "#1f5d5d", - "comment": "abyss soylent-green, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-warning-80": { - "value": "#ffd651", - "comment": "surface warning, contrast 80", - "originalRatio": 1.35 - }, - "color-abyss-soylent-green-130": { - "value": "#c9eded", - "comment": "abyss soylent-green, contrast 130", - "originalRatio": 15 - }, - "color-surface-warning-120": { - "value": "#544100", - "comment": "surface warning, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-warning-70": { - "value": "#ffedb2", - "comment": "surface warning, contrast 70", - "originalRatio": 1.12 - }, - "color-abyss-soylent-green-120": { - "value": "#94dcdc", - "comment": "abyss soylent-green, contrast 120", - "originalRatio": 12 - }, - "color-surface-warning-110": { - "value": "#735700", - "comment": "surface warning, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-hot-pink-130": { - "value": "#f6c0de", - "comment": "abyss hot-pink, contrast 130", - "originalRatio": 12 - }, - "color-abyss-soylent-green-110": { - "value": "#5dc9c9", - "comment": "abyss soylent-green, contrast 110", - "originalRatio": 9.5 - }, - "color-surface-warning-100": { - "value": "#8f6e00", - "comment": "surface warning, contrast 100", - "originalRatio": 4.6 - }, - "color-abyss-nasty-orange-130": { - "value": "#ffe6d1", - "comment": "abyss nasty-orange, contrast 130", - "originalRatio": 15.5 - }, - "color-abyss-hot-pink-120": { - "value": "#f098c9", - "comment": "abyss hot-pink, contrast 120", - "originalRatio": 9 - }, - "color-abyss-soylent-green-100": { - "value": "#3cb5b5", - "comment": "abyss soylent-green, contrast 100", - "originalRatio": 7.5 - }, - "color-abyss-nasty-orange-120": { - "value": "#fec89d", - "comment": "abyss nasty-orange, contrast 120", - "originalRatio": 12.5 - }, - "color-abyss-hot-pink-110": { - "value": "#ea6db3", - "comment": "abyss hot-pink, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-nasty-orange-110": { - "value": "#feab67", - "comment": "abyss nasty-orange, contrast 110", - "originalRatio": 10 - }, - "color-abyss-hot-pink-100": { - "value": "#e13093", - "comment": "abyss hot-pink, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-primary-130": { - "value": "#052554", - "comment": "surface primary, contrast 130", - "originalRatio": 14.5 - }, - "color-abyss-positive-130": { - "value": "#d6f4e7", - "comment": "abyss positive, contrast 130", - "originalRatio": 16 - }, - "color-abyss-nasty-orange-100": { - "value": "#fd8c30", - "comment": "abyss nasty-orange, contrast 100", - "originalRatio": 8 - }, - "color-surface-naughty-purple-90": { - "value": "#9e65be", - "comment": "surface naughty-purple, contrast 90", - "originalRatio": 4 - }, - "color-surface-primary-120": { - "value": "#073477", - "comment": "surface primary, contrast 120", - "originalRatio": 11.5 - }, - "color-abyss-positive-120": { - "value": "#a2e6c8", - "comment": "abyss positive, contrast 120", - "originalRatio": 13 - }, - "color-surface-naughty-purple-80": { - "value": "#af80c9", - "comment": "surface naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-primary-110": { - "value": "#0945a0", - "comment": "surface primary, contrast 110", - "originalRatio": 8.5 - }, - "color-abyss-positive-110": { - "value": "#69d6a7", - "comment": "abyss positive, contrast 110", - "originalRatio": 10.5 - }, - "color-abyss-error-90": { - "value": "#e60d30", - "comment": "abyss error, contrast 90", - "originalRatio": 4 - }, - "color-surface-naughty-purple-70": { - "value": "#dcc8e8", - "comment": "surface naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-soylent-green-90": { - "value": "#36a1a1", - "comment": "surface soylent-green, contrast 90", - "originalRatio": 3 - }, - "color-surface-primary-100": { - "value": "#0b55c5", - "comment": "surface primary, contrast 100", - "originalRatio": 6.5 - }, - "color-abyss-positive-100": { - "value": "#36c587", - "comment": "abyss positive, contrast 100", - "originalRatio": 8.5 - }, - "color-abyss-error-80": { - "value": "#c20b28", - "comment": "abyss error, contrast 80", - "originalRatio": 3 - }, - "color-abyss-neutral-90": { - "value": "#505564", - "comment": "abyss neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-neutral-150": { - "value": "#111316", - "comment": "surface neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-soylent-green-80": { - "value": "#51c5c5", - "comment": "surface soylent-green, contrast 80", - "originalRatio": 2 - }, - "color-abyss-error-70": { - "value": "#90081e", - "comment": "abyss error, contrast 70", - "originalRatio": 2 - }, - "color-abyss-neutral-80": { - "value": "#343842", - "comment": "abyss neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-neutral-140": { - "value": "#21242a", - "comment": "surface neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-soylent-green-70": { - "value": "#95dcdc", - "comment": "surface soylent-green, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-neutral-70": { - "value": "#272a31", - "comment": "abyss neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-neutral-130": { - "value": "#30333c", - "comment": "surface neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-abyss-warning-130": { - "value": "#fff0bf", - "comment": "abyss warning, contrast 130", - "originalRatio": 16.5 - }, - "color-abyss-neutral-60": { - "value": "#21242a", - "comment": "abyss neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-neutral-120": { - "value": "#404450", - "comment": "surface neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-warning-120": { - "value": "#ffe99d", - "comment": "abyss warning, contrast 120", - "originalRatio": 15.5 - }, - "color-surface-error-130": { - "value": "#590513", - "comment": "surface error, contrast 130", - "originalRatio": 14 - } - } -} diff --git a/libs/shared/design-tokens/generated/global/typography.scss b/libs/shared/design-tokens/generated/global/typography.scss deleted file mode 100644 index d4aadd14ca..0000000000 --- a/libs/shared/design-tokens/generated/global/typography.scss +++ /dev/null @@ -1,137 +0,0 @@ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -/* - * Token contains the styles for a headline 1 - */ -@mixin fluid-dt-h1() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 2.027rem; - font-weight: 500; - line-height: 38px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 2 - */ -@mixin fluid-dt-h2() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.802rem; - font-weight: 500; - line-height: 34px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 3 - */ -@mixin fluid-dt-h3() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.602rem; - font-weight: 500; - line-height: 30px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 4 - */ -@mixin fluid-dt-h4() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.424rem; - font-weight: 500; - line-height: 27px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 5 - */ -@mixin fluid-dt-h5() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.266rem; - font-weight: 500; - line-height: 24px; - text-transform: none; -} - -/* - * Token contains the styles for a headline 6 - */ -@mixin fluid-dt-h6() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.125rem; - font-weight: 500; - line-height: 21px; - text-transform: none; -} - -/* - * Token contains the styles for a body text - */ -@mixin fluid-dt-text() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 400; - line-height: 24px; - text-transform: none; -} - -/* - * Token contains the styles for a body emphasized text - */ -@mixin fluid-dt-text-em() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 500; - line-height: 19px; - text-transform: none; -} - -/* - * Token contains the styles for a body super emphasized text - */ -@mixin fluid-dt-text-sem() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 700; - line-height: 19px; - text-transform: none; -} - -/* - * Token contains the styles for a body uppercased text - */ -@mixin fluid-dt-text-u() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 400; - line-height: 17px; - text-transform: uppercase; -} - -/* - * Token contains the styles for a body uppercased emphasized text - */ -@mixin fluid-dt-text-u-em() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 500; - line-height: 17px; - text-transform: uppercase; -} - -/* - * Token contains the styles for a body uppercased super emphasized text - */ -@mixin fluid-dt-text-u-sem() { - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 700; - line-height: 17px; - text-transform: uppercase; -} diff --git a/libs/shared/design-tokens/generated/global/typography.ts b/libs/shared/design-tokens/generated/global/typography.ts deleted file mode 100644 index 170ed12c96..0000000000 --- a/libs/shared/design-tokens/generated/global/typography.ts +++ /dev/null @@ -1,176 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -/* - * Token contains the styles for a headline 1 - */ -export function fluidDtH1(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 2.027rem; - font-weight: 500; - line-height: 38px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 2 - */ -export function fluidDtH2(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.802rem; - font-weight: 500; - line-height: 34px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 3 - */ -export function fluidDtH3(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.602rem; - font-weight: 500; - line-height: 30px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 4 - */ -export function fluidDtH4(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.424rem; - font-weight: 500; - line-height: 27px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 5 - */ -export function fluidDtH5(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.266rem; - font-weight: 500; - line-height: 24px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a headline 6 - */ -export function fluidDtH6(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1.125rem; - font-weight: 500; - line-height: 21px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a body text - */ -export function fluidDtText(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 400; - line-height: 24px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a body emphasized text - */ -export function fluidDtTextEm(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 500; - line-height: 19px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a body super emphasized text - */ -export function fluidDtTextSem(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 1rem; - font-weight: 700; - line-height: 19px; - text-transform: none; - `; -} - -/* - * Token contains the styles for a body uppercased text - */ -export function fluidDtTextU(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 400; - line-height: 17px; - text-transform: uppercase; - `; -} - -/* - * Token contains the styles for a body uppercased emphasized text - */ -export function fluidDtTextUEm(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 500; - line-height: 17px; - text-transform: uppercase; - `; -} - -/* - * Token contains the styles for a body uppercased super emphasized text - */ -export function fluidDtTextUSem(): string { - return ` - font-family: Roboto, Helvetica, sans-serif; - font-size: 0.89rem; - font-weight: 700; - line-height: 17px; - text-transform: uppercase; - `; -} diff --git a/libs/shared/design-tokens/generated/index.js b/libs/shared/design-tokens/generated/index.js deleted file mode 100644 index b5bc9302b0..0000000000 --- a/libs/shared/design-tokens/generated/index.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export * from './global/palette'; -export * from './global/spacing'; -export * from './global/typography'; -export * from './patterns/button'; -export * from './patterns/input'; diff --git a/libs/shared/design-tokens/generated/index.ts b/libs/shared/design-tokens/generated/index.ts deleted file mode 100644 index ee123ad621..0000000000 --- a/libs/shared/design-tokens/generated/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export * from './global/palette'; -export * from './global/spacing'; -export * from './global/theme'; -export * from './global/typography'; -export * from './patterns/button'; -export * from './patterns/input'; diff --git a/libs/shared/design-tokens/generated/patterns/button.js b/libs/shared/design-tokens/generated/patterns/button.js deleted file mode 100644 index 4e9a51c7b4..0000000000 --- a/libs/shared/design-tokens/generated/patterns/button.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export const FLUID_BUTTON_PADDING_SMALL = '8px 48px'; -export const FLUID_BUTTON_PADDING_MEDIUM = '12px 48px'; -export const FLUID_BUTTON_PADDING_LARGE = '16px 48px'; diff --git a/libs/shared/design-tokens/generated/patterns/button.json b/libs/shared/design-tokens/generated/patterns/button.json deleted file mode 100644 index 2fa83b2c0a..0000000000 --- a/libs/shared/design-tokens/generated/patterns/button.json +++ /dev/null @@ -1,750 +0,0 @@ -{ - "outputs": [ - { - "type": "scss", - "formatter": "dt-scss" - }, - { - "type": "ts", - "formatter": "dt-typescript" - }, - { - "type": "js", - "formatter": "dt-javascript" - } - ], - "props": { - "fluid-button--padding-small": { - "type": "token", - "category": "global", - "name": "fluid-button--padding-small", - "value": "8px 48px", - "meta": { - "friendlyName": "Fluid button padding small" - }, - "originalValue": "{!spacing--x-small} {!spacing--x-large}" - }, - "fluid-button--padding-medium": { - "type": "token", - "category": "global", - "name": "fluid-button--padding-medium", - "value": "12px 48px", - "meta": { - "friendlyName": "Fluid button padding medium" - }, - "originalValue": "{!spacing--small} {!spacing--x-large}" - }, - "fluid-button--padding-large": { - "type": "token", - "category": "global", - "name": "fluid-button--padding-large", - "value": "16px 48px", - "meta": { - "friendlyName": "Fluid button padding large" - }, - "originalValue": "{!spacing--medium} {!spacing--x-large}" - } - }, - "aliases": { - "spacing--3x-small": { - "value": "2px" - }, - "spacing--2x-small": { - "value": "4px" - }, - "spacing--x-large": { - "value": "48px" - }, - "spacing--small": { - "value": "12px" - }, - "spacing--0": { - "value": 0 - }, - "spacing--x-small": { - "value": "8px" - }, - "spacing--3x-large": { - "value": "128px" - }, - "spacing--2x-large": { - "value": "64px" - }, - "spacing--medium": { - "value": "16px" - }, - "spacing--large": { - "value": "32px" - }, - "color-abyss-neutral-50": { - "value": "#1a1c21", - "comment": "abyss neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-neutral-110": { - "value": "#515666", - "comment": "surface neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-warning-110": { - "value": "#ffd752", - "comment": "abyss warning, contrast 110", - "originalRatio": 13.5 - }, - "color-surface-error-120": { - "value": "#780719", - "comment": "surface error, contrast 120", - "originalRatio": 11 - }, - "color-abyss-primary-90": { - "value": "#136cf2", - "comment": "abyss primary, contrast 90", - "originalRatio": 4 - }, - "color-surface-hot-pink-130": { - "value": "#5b0d38", - "comment": "surface hot-pink, contrast 130", - "originalRatio": 13 - }, - "color-surface-positive-90": { - "value": "#2a9868", - "comment": "surface positive, contrast 90", - "originalRatio": 3.5 - }, - "color-surface-nasty-orange-130": { - "value": "#4e2301", - "comment": "surface nasty-orange, contrast 130", - "originalRatio": 13 - }, - "color-surface-neutral-100": { - "value": "#6d7488", - "comment": "surface neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-naughty-purple-130": { - "value": "#e5d6ed", - "comment": "abyss naughty-purple, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-warning-100": { - "value": "#fcc300", - "comment": "abyss warning, contrast 100", - "originalRatio": 11.5 - }, - "color-surface-error-110": { - "value": "#9e0921", - "comment": "surface error, contrast 110", - "originalRatio": 8 - }, - "color-surface-hot-pink-120": { - "value": "#7b114c", - "comment": "surface hot-pink, contrast 120", - "originalRatio": 10 - }, - "color-surface-positive-80": { - "value": "#4ecf96", - "comment": "surface positive, contrast 80", - "originalRatio": 1.9 - }, - "color-surface-nasty-orange-120": { - "value": "#6a3001", - "comment": "surface nasty-orange, contrast 120", - "originalRatio": 10 - }, - "color-abyss-naughty-purple-120": { - "value": "#d3b9e1", - "comment": "abyss naughty-purple, contrast 120", - "originalRatio": 10.5 - }, - "color-surface-error-100": { - "value": "#c20b29", - "comment": "surface error, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-80": { - "value": "#0b5ace", - "comment": "abyss primary, contrast 80", - "originalRatio": 3 - }, - "color-surface-hot-pink-110": { - "value": "#a41766", - "comment": "surface hot-pink, contrast 110", - "originalRatio": 7 - }, - "color-surface-positive-70": { - "value": "#b1ead1", - "comment": "surface positive, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-nasty-orange-110": { - "value": "#8e4001", - "comment": "surface nasty-orange, contrast 110", - "originalRatio": 7 - }, - "color-abyss-naughty-purple-110": { - "value": "#c09cd5", - "comment": "abyss naughty-purple, contrast 110", - "originalRatio": 8 - }, - "color-abyss-primary-70": { - "value": "#084298", - "comment": "abyss primary, contrast 70", - "originalRatio": 2 - }, - "color-abyss-naughty-purple-90": { - "value": "#9d65be", - "comment": "abyss naughty-purple, contrast 90", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-100": { - "value": "#be5602", - "comment": "surface nasty-orange, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-90": { - "value": "#ee6c03", - "comment": "surface nasty-orange, contrast 90", - "originalRatio": 3 - }, - "color-surface-positive-130": { - "value": "#0e3223", - "comment": "surface positive, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-naughty-purple-100": { - "value": "#ae80c9", - "comment": "abyss naughty-purple, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-130": { - "value": "#bbd5fb", - "comment": "abyss primary, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-hot-pink-90": { - "value": "#e861ad", - "comment": "surface hot-pink, contrast 90", - "originalRatio": 3 - }, - "color-surface-hot-pink-100": { - "value": "#cc1d7f", - "comment": "surface hot-pink, contrast 100", - "originalRatio": 5 - }, - "color-abyss-naughty-purple-80": { - "value": "#8246a5", - "comment": "abyss naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-nasty-orange-80": { - "value": "#fdac69", - "comment": "surface nasty-orange, contrast 80", - "originalRatio": 1.8 - }, - "color-surface-positive-120": { - "value": "#134630", - "comment": "surface positive, contrast 120", - "originalRatio": 10.5 - }, - "color-abyss-primary-120": { - "value": "#91bbf9", - "comment": "abyss primary, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-hot-pink-80": { - "value": "#ef8cc3", - "comment": "surface hot-pink, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-naughty-purple-70": { - "value": "#462658", - "comment": "abyss naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-nasty-orange-70": { - "value": "#fed2af", - "comment": "surface nasty-orange, contrast 70", - "originalRatio": 1.35 - }, - "color-surface-positive-110": { - "value": "#1a5d40", - "comment": "surface positive, contrast 110", - "originalRatio": 7.5 - }, - "color-abyss-primary-110": { - "value": "#659ff7", - "comment": "abyss primary, contrast 110", - "originalRatio": 7 - }, - "color-surface-hot-pink-70": { - "value": "#f6c0de", - "comment": "surface hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-error-90": { - "value": "#f4425f", - "comment": "surface error, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-warning-90": { - "value": "#e0ad00", - "comment": "abyss warning, contrast 90", - "originalRatio": 9 - }, - "color-abyss-neutral-150": { - "value": "#fafbfb", - "comment": "abyss neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-neutral-90": { - "value": "#9ba1b0", - "comment": "surface neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-positive-100": { - "value": "#207450", - "comment": "surface positive, contrast 100", - "originalRatio": 5.5 - }, - "color-abyss-primary-100": { - "value": "#3582f4", - "comment": "abyss primary, contrast 100", - "originalRatio": 5 - }, - "color-surface-error-80": { - "value": "#f88b9d", - "comment": "surface error, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-warning-80": { - "value": "#bd9200", - "comment": "abyss warning, contrast 80", - "originalRatio": 6.5 - }, - "color-abyss-neutral-140": { - "value": "#e5e6ea", - "comment": "abyss neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-neutral-80": { - "value": "#c6c9d1", - "comment": "surface neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-error-70": { - "value": "#fbc0ca", - "comment": "surface error, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-neutral-70": { - "value": "#dcdee3", - "comment": "surface neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-soylent-green-130": { - "value": "#113434", - "comment": "surface soylent-green, contrast 130", - "originalRatio": 13 - }, - "color-abyss-warning-70": { - "value": "#917000", - "comment": "abyss warning, contrast 70", - "originalRatio": 4 - }, - "color-abyss-neutral-130": { - "value": "#ced1d8", - "comment": "abyss neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-surface-neutral-60": { - "value": "#e5e7ea", - "comment": "surface neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-soylent-green-120": { - "value": "#184747", - "comment": "surface soylent-green, contrast 120", - "originalRatio": 10 - }, - "color-abyss-neutral-120": { - "value": "#b5b9c4", - "comment": "abyss neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-error-130": { - "value": "#fcc6ce", - "comment": "abyss error, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-neutral-50": { - "value": "#eff0f3", - "comment": "surface neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-soylent-green-110": { - "value": "#206060", - "comment": "surface soylent-green, contrast 110", - "originalRatio": 7 - }, - "color-abyss-neutral-110": { - "value": "#999ead", - "comment": "abyss neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-error-120": { - "value": "#fa9fae", - "comment": "abyss error, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-soylent-green-100": { - "value": "#287878", - "comment": "surface soylent-green, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-90": { - "value": "#2fad76", - "comment": "abyss positive, contrast 90", - "originalRatio": 6.5 - }, - "color-surface-naughty-purple-130": { - "value": "#402250", - "comment": "surface naughty-purple, contrast 130", - "originalRatio": 13 - }, - "color-surface-primary-90": { - "value": "#156df2", - "comment": "surface primary, contrast 90", - "originalRatio": 4.5 - }, - "color-abyss-neutral-100": { - "value": "#757c91", - "comment": "abyss neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-error-110": { - "value": "#f77589", - "comment": "abyss error, contrast 110", - "originalRatio": 7 - }, - "color-abyss-positive-80": { - "value": "#268d60", - "comment": "abyss positive, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-naughty-purple-120": { - "value": "#572e6d", - "comment": "surface naughty-purple, contrast 120", - "originalRatio": 10 - }, - "color-surface-primary-80": { - "value": "#5998f6", - "comment": "surface primary, contrast 80", - "originalRatio": 2.8 - }, - "color-abyss-error-100": { - "value": "#f43b58", - "comment": "abyss error, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-70": { - "value": "#1a6142", - "comment": "abyss positive, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-naughty-purple-110": { - "value": "#753f94", - "comment": "surface naughty-purple, contrast 110", - "originalRatio": 7 - }, - "color-surface-primary-70": { - "value": "#9ac0f9", - "comment": "surface primary, contrast 70", - "originalRatio": 1.8 - }, - "color-abyss-nasty-orange-90": { - "value": "#ed6b02", - "comment": "abyss nasty-orange, contrast 90", - "originalRatio": 6 - }, - "color-surface-naughty-purple-100": { - "value": "#9151b5", - "comment": "surface naughty-purple, contrast 100", - "originalRatio": 5 - }, - "color-abyss-hot-pink-90": { - "value": "#c81d7d", - "comment": "abyss hot-pink, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-nasty-orange-80": { - "value": "#bc5602", - "comment": "abyss nasty-orange, contrast 80", - "originalRatio": 4 - }, - "color-abyss-hot-pink-80": { - "value": "#a01764", - "comment": "abyss hot-pink, contrast 80", - "originalRatio": 2.5 - }, - "color-abyss-nasty-orange-70": { - "value": "#743501", - "comment": "abyss nasty-orange, contrast 70", - "originalRatio": 2 - }, - "color-abyss-soylent-green-90": { - "value": "#339a9a", - "comment": "abyss soylent-green, contrast 90", - "originalRatio": 5.5 - }, - "color-abyss-hot-pink-70": { - "value": "#640f3f", - "comment": "abyss hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-soylent-green-80": { - "value": "#2d8989", - "comment": "abyss soylent-green, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-warning-90": { - "value": "#e2ac00", - "comment": "surface warning, contrast 90", - "originalRatio": 2 - }, - "color-surface-warning-130": { - "value": "#3f3000", - "comment": "surface warning, contrast 130", - "originalRatio": 12.4 - }, - "color-abyss-soylent-green-70": { - "value": "#1f5d5d", - "comment": "abyss soylent-green, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-warning-80": { - "value": "#ffd651", - "comment": "surface warning, contrast 80", - "originalRatio": 1.35 - }, - "color-abyss-soylent-green-130": { - "value": "#c9eded", - "comment": "abyss soylent-green, contrast 130", - "originalRatio": 15 - }, - "color-surface-warning-120": { - "value": "#544100", - "comment": "surface warning, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-warning-70": { - "value": "#ffedb2", - "comment": "surface warning, contrast 70", - "originalRatio": 1.12 - }, - "color-abyss-soylent-green-120": { - "value": "#94dcdc", - "comment": "abyss soylent-green, contrast 120", - "originalRatio": 12 - }, - "color-surface-warning-110": { - "value": "#735700", - "comment": "surface warning, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-hot-pink-130": { - "value": "#f6c0de", - "comment": "abyss hot-pink, contrast 130", - "originalRatio": 12 - }, - "color-abyss-soylent-green-110": { - "value": "#5dc9c9", - "comment": "abyss soylent-green, contrast 110", - "originalRatio": 9.5 - }, - "color-surface-warning-100": { - "value": "#8f6e00", - "comment": "surface warning, contrast 100", - "originalRatio": 4.6 - }, - "color-abyss-nasty-orange-130": { - "value": "#ffe6d1", - "comment": "abyss nasty-orange, contrast 130", - "originalRatio": 15.5 - }, - "color-abyss-hot-pink-120": { - "value": "#f098c9", - "comment": "abyss hot-pink, contrast 120", - "originalRatio": 9 - }, - "color-abyss-soylent-green-100": { - "value": "#3cb5b5", - "comment": "abyss soylent-green, contrast 100", - "originalRatio": 7.5 - }, - "color-abyss-nasty-orange-120": { - "value": "#fec89d", - "comment": "abyss nasty-orange, contrast 120", - "originalRatio": 12.5 - }, - "color-abyss-hot-pink-110": { - "value": "#ea6db3", - "comment": "abyss hot-pink, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-nasty-orange-110": { - "value": "#feab67", - "comment": "abyss nasty-orange, contrast 110", - "originalRatio": 10 - }, - "color-abyss-hot-pink-100": { - "value": "#e13093", - "comment": "abyss hot-pink, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-primary-130": { - "value": "#052554", - "comment": "surface primary, contrast 130", - "originalRatio": 14.5 - }, - "color-abyss-positive-130": { - "value": "#d6f4e7", - "comment": "abyss positive, contrast 130", - "originalRatio": 16 - }, - "color-abyss-nasty-orange-100": { - "value": "#fd8c30", - "comment": "abyss nasty-orange, contrast 100", - "originalRatio": 8 - }, - "color-surface-naughty-purple-90": { - "value": "#9e65be", - "comment": "surface naughty-purple, contrast 90", - "originalRatio": 4 - }, - "color-surface-primary-120": { - "value": "#073477", - "comment": "surface primary, contrast 120", - "originalRatio": 11.5 - }, - "color-abyss-positive-120": { - "value": "#a2e6c8", - "comment": "abyss positive, contrast 120", - "originalRatio": 13 - }, - "color-surface-naughty-purple-80": { - "value": "#af80c9", - "comment": "surface naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-primary-110": { - "value": "#0945a0", - "comment": "surface primary, contrast 110", - "originalRatio": 8.5 - }, - "color-abyss-positive-110": { - "value": "#69d6a7", - "comment": "abyss positive, contrast 110", - "originalRatio": 10.5 - }, - "color-abyss-error-90": { - "value": "#e60d30", - "comment": "abyss error, contrast 90", - "originalRatio": 4 - }, - "color-surface-naughty-purple-70": { - "value": "#dcc8e8", - "comment": "surface naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-soylent-green-90": { - "value": "#36a1a1", - "comment": "surface soylent-green, contrast 90", - "originalRatio": 3 - }, - "color-surface-primary-100": { - "value": "#0b55c5", - "comment": "surface primary, contrast 100", - "originalRatio": 6.5 - }, - "color-abyss-positive-100": { - "value": "#36c587", - "comment": "abyss positive, contrast 100", - "originalRatio": 8.5 - }, - "color-abyss-error-80": { - "value": "#c20b28", - "comment": "abyss error, contrast 80", - "originalRatio": 3 - }, - "color-abyss-neutral-90": { - "value": "#505564", - "comment": "abyss neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-neutral-150": { - "value": "#111316", - "comment": "surface neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-soylent-green-80": { - "value": "#51c5c5", - "comment": "surface soylent-green, contrast 80", - "originalRatio": 2 - }, - "color-abyss-error-70": { - "value": "#90081e", - "comment": "abyss error, contrast 70", - "originalRatio": 2 - }, - "color-abyss-neutral-80": { - "value": "#343842", - "comment": "abyss neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-neutral-140": { - "value": "#21242a", - "comment": "surface neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-soylent-green-70": { - "value": "#95dcdc", - "comment": "surface soylent-green, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-neutral-70": { - "value": "#272a31", - "comment": "abyss neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-neutral-130": { - "value": "#30333c", - "comment": "surface neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-abyss-warning-130": { - "value": "#fff0bf", - "comment": "abyss warning, contrast 130", - "originalRatio": 16.5 - }, - "color-abyss-neutral-60": { - "value": "#21242a", - "comment": "abyss neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-neutral-120": { - "value": "#404450", - "comment": "surface neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-warning-120": { - "value": "#ffe99d", - "comment": "abyss warning, contrast 120", - "originalRatio": 15.5 - }, - "color-surface-error-130": { - "value": "#590513", - "comment": "surface error, contrast 130", - "originalRatio": 14 - } - } -} diff --git a/libs/shared/design-tokens/generated/patterns/button.scss b/libs/shared/design-tokens/generated/patterns/button.scss deleted file mode 100644 index 72296eff82..0000000000 --- a/libs/shared/design-tokens/generated/patterns/button.scss +++ /dev/null @@ -1,9 +0,0 @@ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -$fluid-button--padding-small: 8px 48px !default; -$fluid-button--padding-medium: 12px 48px !default; -$fluid-button--padding-large: 16px 48px !default; diff --git a/libs/shared/design-tokens/generated/patterns/button.ts b/libs/shared/design-tokens/generated/patterns/button.ts deleted file mode 100644 index 4e9a51c7b4..0000000000 --- a/libs/shared/design-tokens/generated/patterns/button.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export const FLUID_BUTTON_PADDING_SMALL = '8px 48px'; -export const FLUID_BUTTON_PADDING_MEDIUM = '12px 48px'; -export const FLUID_BUTTON_PADDING_LARGE = '16px 48px'; diff --git a/libs/shared/design-tokens/generated/patterns/input.js b/libs/shared/design-tokens/generated/patterns/input.js deleted file mode 100644 index 7895b5e952..0000000000 --- a/libs/shared/design-tokens/generated/patterns/input.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export const FLUID_INPUT_PADDING = '8px'; -export const FLUID_INPUT_PADDING_INLINE = '8px'; -export const FLUID_INPUT_PADDING_BLOCK = '8px'; -export const FLUID_INPUT_BOX_SHADOW = '0 3px 10px'; diff --git a/libs/shared/design-tokens/generated/patterns/input.json b/libs/shared/design-tokens/generated/patterns/input.json deleted file mode 100644 index 3e65258b9e..0000000000 --- a/libs/shared/design-tokens/generated/patterns/input.json +++ /dev/null @@ -1,760 +0,0 @@ -{ - "outputs": [ - { - "type": "scss", - "formatter": "dt-scss" - }, - { - "type": "ts", - "formatter": "dt-typescript" - }, - { - "type": "js", - "formatter": "dt-javascript" - } - ], - "props": { - "fluid-input--padding": { - "type": "token", - "category": "global", - "name": "fluid-input--padding", - "value": "8px", - "meta": { - "friendlyName": "Fluid input padding" - }, - "originalValue": "{!spacing--x-small}" - }, - "fluid-input--padding-inline": { - "type": "token", - "category": "global", - "name": "fluid-input--padding-inline", - "value": "8px", - "meta": { - "friendlyName": "Fluid input padding inline axis" - }, - "originalValue": "{!spacing--x-small}" - }, - "fluid-input--padding-block": { - "type": "token", - "category": "global", - "name": "fluid-input--padding-block", - "value": "8px", - "meta": { - "friendlyName": "Fluid input padding block axis" - }, - "originalValue": "{!spacing--x-small}" - }, - "fluid-input--box-shadow": { - "type": "token", - "category": "global", - "name": "fluid-input--box-shadow", - "value": "0 3px 10px", - "meta": { - "friendlyName": "Fluid input box shadow" - }, - "originalValue": "0 3px 10px" - } - }, - "aliases": { - "spacing--3x-small": { - "value": "2px" - }, - "spacing--2x-small": { - "value": "4px" - }, - "spacing--x-large": { - "value": "48px" - }, - "spacing--small": { - "value": "12px" - }, - "spacing--0": { - "value": 0 - }, - "spacing--x-small": { - "value": "8px" - }, - "spacing--3x-large": { - "value": "128px" - }, - "spacing--2x-large": { - "value": "64px" - }, - "spacing--medium": { - "value": "16px" - }, - "spacing--large": { - "value": "32px" - }, - "color-abyss-neutral-50": { - "value": "#1a1c21", - "comment": "abyss neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-neutral-110": { - "value": "#515666", - "comment": "surface neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-warning-110": { - "value": "#ffd752", - "comment": "abyss warning, contrast 110", - "originalRatio": 13.5 - }, - "color-surface-error-120": { - "value": "#780719", - "comment": "surface error, contrast 120", - "originalRatio": 11 - }, - "color-abyss-primary-90": { - "value": "#136cf2", - "comment": "abyss primary, contrast 90", - "originalRatio": 4 - }, - "color-surface-hot-pink-130": { - "value": "#5b0d38", - "comment": "surface hot-pink, contrast 130", - "originalRatio": 13 - }, - "color-surface-positive-90": { - "value": "#2a9868", - "comment": "surface positive, contrast 90", - "originalRatio": 3.5 - }, - "color-surface-nasty-orange-130": { - "value": "#4e2301", - "comment": "surface nasty-orange, contrast 130", - "originalRatio": 13 - }, - "color-surface-neutral-100": { - "value": "#6d7488", - "comment": "surface neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-naughty-purple-130": { - "value": "#e5d6ed", - "comment": "abyss naughty-purple, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-warning-100": { - "value": "#fcc300", - "comment": "abyss warning, contrast 100", - "originalRatio": 11.5 - }, - "color-surface-error-110": { - "value": "#9e0921", - "comment": "surface error, contrast 110", - "originalRatio": 8 - }, - "color-surface-hot-pink-120": { - "value": "#7b114c", - "comment": "surface hot-pink, contrast 120", - "originalRatio": 10 - }, - "color-surface-positive-80": { - "value": "#4ecf96", - "comment": "surface positive, contrast 80", - "originalRatio": 1.9 - }, - "color-surface-nasty-orange-120": { - "value": "#6a3001", - "comment": "surface nasty-orange, contrast 120", - "originalRatio": 10 - }, - "color-abyss-naughty-purple-120": { - "value": "#d3b9e1", - "comment": "abyss naughty-purple, contrast 120", - "originalRatio": 10.5 - }, - "color-surface-error-100": { - "value": "#c20b29", - "comment": "surface error, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-80": { - "value": "#0b5ace", - "comment": "abyss primary, contrast 80", - "originalRatio": 3 - }, - "color-surface-hot-pink-110": { - "value": "#a41766", - "comment": "surface hot-pink, contrast 110", - "originalRatio": 7 - }, - "color-surface-positive-70": { - "value": "#b1ead1", - "comment": "surface positive, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-nasty-orange-110": { - "value": "#8e4001", - "comment": "surface nasty-orange, contrast 110", - "originalRatio": 7 - }, - "color-abyss-naughty-purple-110": { - "value": "#c09cd5", - "comment": "abyss naughty-purple, contrast 110", - "originalRatio": 8 - }, - "color-abyss-primary-70": { - "value": "#084298", - "comment": "abyss primary, contrast 70", - "originalRatio": 2 - }, - "color-abyss-naughty-purple-90": { - "value": "#9d65be", - "comment": "abyss naughty-purple, contrast 90", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-100": { - "value": "#be5602", - "comment": "surface nasty-orange, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-nasty-orange-90": { - "value": "#ee6c03", - "comment": "surface nasty-orange, contrast 90", - "originalRatio": 3 - }, - "color-surface-positive-130": { - "value": "#0e3223", - "comment": "surface positive, contrast 130", - "originalRatio": 13.5 - }, - "color-abyss-naughty-purple-100": { - "value": "#ae80c9", - "comment": "abyss naughty-purple, contrast 100", - "originalRatio": 6 - }, - "color-abyss-primary-130": { - "value": "#bbd5fb", - "comment": "abyss primary, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-hot-pink-90": { - "value": "#e861ad", - "comment": "surface hot-pink, contrast 90", - "originalRatio": 3 - }, - "color-surface-hot-pink-100": { - "value": "#cc1d7f", - "comment": "surface hot-pink, contrast 100", - "originalRatio": 5 - }, - "color-abyss-naughty-purple-80": { - "value": "#8246a5", - "comment": "abyss naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-nasty-orange-80": { - "value": "#fdac69", - "comment": "surface nasty-orange, contrast 80", - "originalRatio": 1.8 - }, - "color-surface-positive-120": { - "value": "#134630", - "comment": "surface positive, contrast 120", - "originalRatio": 10.5 - }, - "color-abyss-primary-120": { - "value": "#91bbf9", - "comment": "abyss primary, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-hot-pink-80": { - "value": "#ef8cc3", - "comment": "surface hot-pink, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-naughty-purple-70": { - "value": "#462658", - "comment": "abyss naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-nasty-orange-70": { - "value": "#fed2af", - "comment": "surface nasty-orange, contrast 70", - "originalRatio": 1.35 - }, - "color-surface-positive-110": { - "value": "#1a5d40", - "comment": "surface positive, contrast 110", - "originalRatio": 7.5 - }, - "color-abyss-primary-110": { - "value": "#659ff7", - "comment": "abyss primary, contrast 110", - "originalRatio": 7 - }, - "color-surface-hot-pink-70": { - "value": "#f6c0de", - "comment": "surface hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-error-90": { - "value": "#f4425f", - "comment": "surface error, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-warning-90": { - "value": "#e0ad00", - "comment": "abyss warning, contrast 90", - "originalRatio": 9 - }, - "color-abyss-neutral-150": { - "value": "#fafbfb", - "comment": "abyss neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-neutral-90": { - "value": "#9ba1b0", - "comment": "surface neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-positive-100": { - "value": "#207450", - "comment": "surface positive, contrast 100", - "originalRatio": 5.5 - }, - "color-abyss-primary-100": { - "value": "#3582f4", - "comment": "abyss primary, contrast 100", - "originalRatio": 5 - }, - "color-surface-error-80": { - "value": "#f88b9d", - "comment": "surface error, contrast 80", - "originalRatio": 2.2 - }, - "color-abyss-warning-80": { - "value": "#bd9200", - "comment": "abyss warning, contrast 80", - "originalRatio": 6.5 - }, - "color-abyss-neutral-140": { - "value": "#e5e6ea", - "comment": "abyss neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-neutral-80": { - "value": "#c6c9d1", - "comment": "surface neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-error-70": { - "value": "#fbc0ca", - "comment": "surface error, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-neutral-70": { - "value": "#dcdee3", - "comment": "surface neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-soylent-green-130": { - "value": "#113434", - "comment": "surface soylent-green, contrast 130", - "originalRatio": 13 - }, - "color-abyss-warning-70": { - "value": "#917000", - "comment": "abyss warning, contrast 70", - "originalRatio": 4 - }, - "color-abyss-neutral-130": { - "value": "#ced1d8", - "comment": "abyss neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-surface-neutral-60": { - "value": "#e5e7ea", - "comment": "surface neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-soylent-green-120": { - "value": "#184747", - "comment": "surface soylent-green, contrast 120", - "originalRatio": 10 - }, - "color-abyss-neutral-120": { - "value": "#b5b9c4", - "comment": "abyss neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-error-130": { - "value": "#fcc6ce", - "comment": "abyss error, contrast 130", - "originalRatio": 12.5 - }, - "color-surface-neutral-50": { - "value": "#eff0f3", - "comment": "surface neutral, contrast 50", - "originalRatio": 1.1 - }, - "color-surface-soylent-green-110": { - "value": "#206060", - "comment": "surface soylent-green, contrast 110", - "originalRatio": 7 - }, - "color-abyss-neutral-110": { - "value": "#999ead", - "comment": "abyss neutral, contrast 110", - "originalRatio": 7 - }, - "color-abyss-error-120": { - "value": "#fa9fae", - "comment": "abyss error, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-soylent-green-100": { - "value": "#287878", - "comment": "surface soylent-green, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-90": { - "value": "#2fad76", - "comment": "abyss positive, contrast 90", - "originalRatio": 6.5 - }, - "color-surface-naughty-purple-130": { - "value": "#402250", - "comment": "surface naughty-purple, contrast 130", - "originalRatio": 13 - }, - "color-surface-primary-90": { - "value": "#156df2", - "comment": "surface primary, contrast 90", - "originalRatio": 4.5 - }, - "color-abyss-neutral-100": { - "value": "#757c91", - "comment": "abyss neutral, contrast 100", - "originalRatio": 4.5 - }, - "color-abyss-error-110": { - "value": "#f77589", - "comment": "abyss error, contrast 110", - "originalRatio": 7 - }, - "color-abyss-positive-80": { - "value": "#268d60", - "comment": "abyss positive, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-naughty-purple-120": { - "value": "#572e6d", - "comment": "surface naughty-purple, contrast 120", - "originalRatio": 10 - }, - "color-surface-primary-80": { - "value": "#5998f6", - "comment": "surface primary, contrast 80", - "originalRatio": 2.8 - }, - "color-abyss-error-100": { - "value": "#f43b58", - "comment": "abyss error, contrast 100", - "originalRatio": 5 - }, - "color-abyss-positive-70": { - "value": "#1a6142", - "comment": "abyss positive, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-naughty-purple-110": { - "value": "#753f94", - "comment": "surface naughty-purple, contrast 110", - "originalRatio": 7 - }, - "color-surface-primary-70": { - "value": "#9ac0f9", - "comment": "surface primary, contrast 70", - "originalRatio": 1.8 - }, - "color-abyss-nasty-orange-90": { - "value": "#ed6b02", - "comment": "abyss nasty-orange, contrast 90", - "originalRatio": 6 - }, - "color-surface-naughty-purple-100": { - "value": "#9151b5", - "comment": "surface naughty-purple, contrast 100", - "originalRatio": 5 - }, - "color-abyss-hot-pink-90": { - "value": "#c81d7d", - "comment": "abyss hot-pink, contrast 90", - "originalRatio": 3.5 - }, - "color-abyss-nasty-orange-80": { - "value": "#bc5602", - "comment": "abyss nasty-orange, contrast 80", - "originalRatio": 4 - }, - "color-abyss-hot-pink-80": { - "value": "#a01764", - "comment": "abyss hot-pink, contrast 80", - "originalRatio": 2.5 - }, - "color-abyss-nasty-orange-70": { - "value": "#743501", - "comment": "abyss nasty-orange, contrast 70", - "originalRatio": 2 - }, - "color-abyss-soylent-green-90": { - "value": "#339a9a", - "comment": "abyss soylent-green, contrast 90", - "originalRatio": 5.5 - }, - "color-abyss-hot-pink-70": { - "value": "#640f3f", - "comment": "abyss hot-pink, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-soylent-green-80": { - "value": "#2d8989", - "comment": "abyss soylent-green, contrast 80", - "originalRatio": 4.5 - }, - "color-surface-warning-90": { - "value": "#e2ac00", - "comment": "surface warning, contrast 90", - "originalRatio": 2 - }, - "color-surface-warning-130": { - "value": "#3f3000", - "comment": "surface warning, contrast 130", - "originalRatio": 12.4 - }, - "color-abyss-soylent-green-70": { - "value": "#1f5d5d", - "comment": "abyss soylent-green, contrast 70", - "originalRatio": 2.5 - }, - "color-surface-warning-80": { - "value": "#ffd651", - "comment": "surface warning, contrast 80", - "originalRatio": 1.35 - }, - "color-abyss-soylent-green-130": { - "value": "#c9eded", - "comment": "abyss soylent-green, contrast 130", - "originalRatio": 15 - }, - "color-surface-warning-120": { - "value": "#544100", - "comment": "surface warning, contrast 120", - "originalRatio": 9.5 - }, - "color-surface-warning-70": { - "value": "#ffedb2", - "comment": "surface warning, contrast 70", - "originalRatio": 1.12 - }, - "color-abyss-soylent-green-120": { - "value": "#94dcdc", - "comment": "abyss soylent-green, contrast 120", - "originalRatio": 12 - }, - "color-surface-warning-110": { - "value": "#735700", - "comment": "surface warning, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-hot-pink-130": { - "value": "#f6c0de", - "comment": "abyss hot-pink, contrast 130", - "originalRatio": 12 - }, - "color-abyss-soylent-green-110": { - "value": "#5dc9c9", - "comment": "abyss soylent-green, contrast 110", - "originalRatio": 9.5 - }, - "color-surface-warning-100": { - "value": "#8f6e00", - "comment": "surface warning, contrast 100", - "originalRatio": 4.6 - }, - "color-abyss-nasty-orange-130": { - "value": "#ffe6d1", - "comment": "abyss nasty-orange, contrast 130", - "originalRatio": 15.5 - }, - "color-abyss-hot-pink-120": { - "value": "#f098c9", - "comment": "abyss hot-pink, contrast 120", - "originalRatio": 9 - }, - "color-abyss-soylent-green-100": { - "value": "#3cb5b5", - "comment": "abyss soylent-green, contrast 100", - "originalRatio": 7.5 - }, - "color-abyss-nasty-orange-120": { - "value": "#fec89d", - "comment": "abyss nasty-orange, contrast 120", - "originalRatio": 12.5 - }, - "color-abyss-hot-pink-110": { - "value": "#ea6db3", - "comment": "abyss hot-pink, contrast 110", - "originalRatio": 6.5 - }, - "color-abyss-nasty-orange-110": { - "value": "#feab67", - "comment": "abyss nasty-orange, contrast 110", - "originalRatio": 10 - }, - "color-abyss-hot-pink-100": { - "value": "#e13093", - "comment": "abyss hot-pink, contrast 100", - "originalRatio": 4.5 - }, - "color-surface-primary-130": { - "value": "#052554", - "comment": "surface primary, contrast 130", - "originalRatio": 14.5 - }, - "color-abyss-positive-130": { - "value": "#d6f4e7", - "comment": "abyss positive, contrast 130", - "originalRatio": 16 - }, - "color-abyss-nasty-orange-100": { - "value": "#fd8c30", - "comment": "abyss nasty-orange, contrast 100", - "originalRatio": 8 - }, - "color-surface-naughty-purple-90": { - "value": "#9e65be", - "comment": "surface naughty-purple, contrast 90", - "originalRatio": 4 - }, - "color-surface-primary-120": { - "value": "#073477", - "comment": "surface primary, contrast 120", - "originalRatio": 11.5 - }, - "color-abyss-positive-120": { - "value": "#a2e6c8", - "comment": "abyss positive, contrast 120", - "originalRatio": 13 - }, - "color-surface-naughty-purple-80": { - "value": "#af80c9", - "comment": "surface naughty-purple, contrast 80", - "originalRatio": 3 - }, - "color-surface-primary-110": { - "value": "#0945a0", - "comment": "surface primary, contrast 110", - "originalRatio": 8.5 - }, - "color-abyss-positive-110": { - "value": "#69d6a7", - "comment": "abyss positive, contrast 110", - "originalRatio": 10.5 - }, - "color-abyss-error-90": { - "value": "#e60d30", - "comment": "abyss error, contrast 90", - "originalRatio": 4 - }, - "color-surface-naughty-purple-70": { - "value": "#dcc8e8", - "comment": "surface naughty-purple, contrast 70", - "originalRatio": 1.5 - }, - "color-surface-soylent-green-90": { - "value": "#36a1a1", - "comment": "surface soylent-green, contrast 90", - "originalRatio": 3 - }, - "color-surface-primary-100": { - "value": "#0b55c5", - "comment": "surface primary, contrast 100", - "originalRatio": 6.5 - }, - "color-abyss-positive-100": { - "value": "#36c587", - "comment": "abyss positive, contrast 100", - "originalRatio": 8.5 - }, - "color-abyss-error-80": { - "value": "#c20b28", - "comment": "abyss error, contrast 80", - "originalRatio": 3 - }, - "color-abyss-neutral-90": { - "value": "#505564", - "comment": "abyss neutral, contrast 90", - "originalRatio": 2.5 - }, - "color-surface-neutral-150": { - "value": "#111316", - "comment": "surface neutral, contrast 150", - "originalRatio": 18 - }, - "color-surface-soylent-green-80": { - "value": "#51c5c5", - "comment": "surface soylent-green, contrast 80", - "originalRatio": 2 - }, - "color-abyss-error-70": { - "value": "#90081e", - "comment": "abyss error, contrast 70", - "originalRatio": 2 - }, - "color-abyss-neutral-80": { - "value": "#343842", - "comment": "abyss neutral, contrast 80", - "originalRatio": 1.6 - }, - "color-surface-neutral-140": { - "value": "#21242a", - "comment": "surface neutral, contrast 140", - "originalRatio": 15 - }, - "color-surface-soylent-green-70": { - "value": "#95dcdc", - "comment": "surface soylent-green, contrast 70", - "originalRatio": 1.5 - }, - "color-abyss-neutral-70": { - "value": "#272a31", - "comment": "abyss neutral, contrast 70", - "originalRatio": 1.3 - }, - "color-surface-neutral-130": { - "value": "#30333c", - "comment": "surface neutral, contrast 130", - "originalRatio": 12.2 - }, - "color-abyss-warning-130": { - "value": "#fff0bf", - "comment": "abyss warning, contrast 130", - "originalRatio": 16.5 - }, - "color-abyss-neutral-60": { - "value": "#21242a", - "comment": "abyss neutral, contrast 60", - "originalRatio": 1.2 - }, - "color-surface-neutral-120": { - "value": "#404450", - "comment": "surface neutral, contrast 120", - "originalRatio": 9.5 - }, - "color-abyss-warning-120": { - "value": "#ffe99d", - "comment": "abyss warning, contrast 120", - "originalRatio": 15.5 - }, - "color-surface-error-130": { - "value": "#590513", - "comment": "surface error, contrast 130", - "originalRatio": 14 - } - } -} diff --git a/libs/shared/design-tokens/generated/patterns/input.scss b/libs/shared/design-tokens/generated/patterns/input.scss deleted file mode 100644 index 2fb386ec72..0000000000 --- a/libs/shared/design-tokens/generated/patterns/input.scss +++ /dev/null @@ -1,10 +0,0 @@ -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -$fluid-input--padding: 8px !default; -$fluid-input--padding-inline: 8px !default; -$fluid-input--padding-block: 8px !default; -$fluid-input--box-shadow: 0 3px 10px !default; diff --git a/libs/shared/design-tokens/generated/patterns/input.ts b/libs/shared/design-tokens/generated/patterns/input.ts deleted file mode 100644 index 7895b5e952..0000000000 --- a/libs/shared/design-tokens/generated/patterns/input.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * THIS FILE IS GENERATED BASED ON THE DESIGN TOKENS DEFINED IN THE src/**.yml - * FILES, DO NOT CHANGE MANUALLY. - * TO GENERATE THESE FILES RUN 'ng build shared-design-tokens' - */ - -export const FLUID_INPUT_PADDING = '8px'; -export const FLUID_INPUT_PADDING_INLINE = '8px'; -export const FLUID_INPUT_PADDING_BLOCK = '8px'; -export const FLUID_INPUT_BOX_SHADOW = '0 3px 10px'; diff --git a/libs/testing/custom-element/README.md b/libs/testing/custom-element/README.md deleted file mode 100644 index c34aefd730..0000000000 --- a/libs/testing/custom-element/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# testing-custom-element - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `ng test testing-custom-element` to execute the unit tests via -[Jest](https://jestjs.io). diff --git a/libs/testing/custom-element/jest.config.js b/libs/testing/custom-element/jest.config.js deleted file mode 100644 index b43126e03d..0000000000 --- a/libs/testing/custom-element/jest.config.js +++ /dev/null @@ -1,14 +0,0 @@ -const rootConfig = require('../../../jest.config'); - -module.exports = { - ...rootConfig, - coverageDirectory: '../../../coverage/testing/custom-element', - transformIgnorePatterns: [ - // We need to allowlist lit-html and lit-element so that jest will - // transform their code, as it is not shipped. - 'node_modules/(?!(lit-html|lit-element)/)', - ], - moduleNameMapper: { - '\\.(css|scss)$': 'libs/testing/custom-element/src/__mocks__/styleMock.js', - }, -}; diff --git a/libs/testing/custom-element/src/__mocks__/styleMock.js b/libs/testing/custom-element/src/__mocks__/styleMock.js deleted file mode 100644 index f7c8b7683b..0000000000 --- a/libs/testing/custom-element/src/__mocks__/styleMock.js +++ /dev/null @@ -1,5 +0,0 @@ -// Mock css module that is injected by the libs/testing/custom-element/jest.config.js -// as a default dummy style, so the jest ts transformer can compile correctly. -// Styles are probably not needed in the unit-tests, which makes this solution -// applicable for now. -module.export = {}; diff --git a/libs/testing/custom-element/src/index.ts b/libs/testing/custom-element/src/index.ts deleted file mode 100644 index 6f5f3d8dbc..0000000000 --- a/libs/testing/custom-element/src/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ diff --git a/libs/testing/custom-element/tsconfig.json b/libs/testing/custom-element/tsconfig.json deleted file mode 100644 index 23f428cf0e..0000000000 --- a/libs/testing/custom-element/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "types": ["node", "jest"], - "lib": ["dom", "es2018"] - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/testing/custom-element/tsconfig.lib.json b/libs/testing/custom-element/tsconfig.lib.json deleted file mode 100644 index 0fe9966358..0000000000 --- a/libs/testing/custom-element/tsconfig.lib.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "types": [] - }, - "exclude": ["**/*.spec.ts"], - "include": ["**/*.ts"] -} diff --git a/libs/testing/custom-element/tsconfig.spec.json b/libs/testing/custom-element/tsconfig.spec.json deleted file mode 100644 index 4f0c3d0b8a..0000000000 --- a/libs/testing/custom-element/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "include": ["**/*.spec.ts", "**/*.spec.js", "**/*.d.ts"] -} diff --git a/libs/testing/custom-element/tslint.json b/libs/testing/custom-element/tslint.json deleted file mode 100644 index 2cdd2989d8..0000000000 --- a/libs/testing/custom-element/tslint.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../../tslint.json", - "linterOptions": { "exclude": ["!**/*"] }, - "rules": {} -} diff --git a/libs/tools/release/src/publish-release-next-cli.ts b/libs/tools/release/src/publish-release-next-cli.ts deleted file mode 100644 index 1a0d176f00..0000000000 --- a/libs/tools/release/src/publish-release-next-cli.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { red } from 'chalk'; -import { publishReleaseNext } from './publish-release-next'; - -/** The root of the barista git repo where the git commands should be executed */ -const WORKSPACE_ROOT = process.env.WORKSPACE_ROOT || process.cwd(); - -// /** Entry-point for the create release script. */ -publishReleaseNext(WORKSPACE_ROOT) - .then() - .catch((error) => { - console.log(red(error)); - process.exit(1); - }); diff --git a/libs/tools/release/src/publish-release-next/index.ts b/libs/tools/release/src/publish-release-next/index.ts deleted file mode 100644 index de095fe592..0000000000 --- a/libs/tools/release/src/publish-release-next/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export { publishReleaseNext } from './publish-release-next'; diff --git a/libs/tools/release/src/publish-release-next/publish-release-next.ts b/libs/tools/release/src/publish-release-next/publish-release-next.ts deleted file mode 100644 index dd713ff539..0000000000 --- a/libs/tools/release/src/publish-release-next/publish-release-next.ts +++ /dev/null @@ -1,71 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { options } from 'yargs'; -import { green, bold } from 'chalk'; -import { yarnPublish, NO_TOKEN_PROVIDED_ERROR } from '../utils'; -import { join, dirname } from 'path'; -import { SemVer } from 'semver'; -import { sync } from 'glob'; - -export async function publishReleaseNext(workspaceRoot: string): Promise { - const { packageVersion } = options({ - packageVersion: { type: 'string', demandOption: true }, - }).argv; - - const environmentConfigs = [ - 'ARTIFACTORY_URL', - 'NPM_INTERNAL_USER', - 'NPM_INTERNAL_PASSWORD', - ]; - - environmentConfigs.forEach((variableName: string) => { - if (!process.env[variableName]) { - throw new Error(NO_TOKEN_PROVIDED_ERROR(variableName)); - } - }); - - console.info(); - console.info(green('-----------------------------------------')); - console.info(green(bold(' Dynatrace Barista Next release script'))); - console.info(green('-----------------------------------------')); - console.info(); - - // Publish design tokens - console.info('Publishing design tokens'); - const version = new SemVer(packageVersion); - await yarnPublish( - join(workspaceRoot, './dist/libs/shared/design-tokens/'), - version, - workspaceRoot, - ); - console.info(green('Successfully published design tokens')); - - // Publish elements - const packages = sync('**/package.json', { - cwd: './dist/libs/fluid-elements', - }); - for (const elementPackage of packages) { - const packageName = dirname(elementPackage); - console.info('Publishing web component', packageName); - await yarnPublish( - join(workspaceRoot, './dist/libs/fluid-elements/', packageName), - version, - workspaceRoot, - ); - console.info(green('Successfully published web component', packageName)); - } -} diff --git a/libs/workspace/builders.json b/libs/workspace/builders.json index 07e90807e5..84c6ae3f3a 100644 --- a/libs/workspace/builders.json +++ b/libs/workspace/builders.json @@ -16,16 +16,6 @@ "schema": "./src/builders/typescript/schema.json", "description": "Compile typescript files." }, - "package-all-elements": { - "implementation": "./src/builders/elements/package-all-elements/index", - "schema": "./src/builders/elements/package-all-elements/schema.json", - "description": "Run individual element builds and package tasks, to create publishable libraries" - }, - "package-element": { - "implementation": "./src/builders/elements/package/index", - "schema": "./src/builders/elements/package/schema.json", - "description": "Run individual element bundler and package command" - }, "affected-e2e": { "implementation": "./src/builders/affected-e2e/index", "schema": "./src/builders/affected-e2e/schema.json", diff --git a/libs/workspace/src/builders/elements/package-all-elements/build.ts b/libs/workspace/src/builders/elements/package-all-elements/build.ts deleted file mode 100644 index f8afbfd81a..0000000000 --- a/libs/workspace/src/builders/elements/package-all-elements/build.ts +++ /dev/null @@ -1,122 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { BuilderContext, BuilderOutput } from '@angular-devkit/architect'; -import { join } from 'path'; -import { forkJoin, from, Observable, of } from 'rxjs'; -import { catchError, map, mapTo, switchMap, tap } from 'rxjs/operators'; -import { ElementsPackageAllOptions } from './schema'; -import { tryJsonParse } from '@dynatrace/shared/node'; -import { NxJson } from '@nrwl/workspace'; - -/** - * Custom builder for the web-components package builder. - * This builder will schedule and run all projects that are tagged - * with a given tag in the nx.json. It is primarily used to run and package - * the web-components part of the library. - */ -export function elementsBuildAndPackageBuilder( - options: ElementsPackageAllOptions, - context: BuilderContext, -): Observable { - const project = context.target?.project ?? ''; - context.logger.info(`Packaging ${project}...`); - - // Get all builds that are tagged with elements - context.logger.info('Reading nx.json file...'); - return from( - tryJsonParse(join(context.workspaceRoot, 'nx.json')), - ).pipe( - // Find the projects that need to be built as part of the elements build. - map((nxJson: NxJson) => - filterTaggedProjects( - nxJson, - options.buildTag || 'scope:elements', - project, - ), - ), - // Create and schedule all other builds. - switchMap((targetProjects: string[]) => { - const builds = createProjectStreams(context, targetProjects, 'build'); - return forkJoin(builds).pipe( - switchMap(() => - forkJoin( - ...createProjectStreams(context, targetProjects, 'package', { - packageVersion: options.packageVersion, - }), - ), - ), - ); - }), - tap(() => context.logger.info('Build successful.')), - mapTo({ - success: true, - }), - catchError((error) => { - console.log(error); - return of({ - success: false, - error: (error as Error).message, - }); - }), - ); -} - -/** Filter incoming projects based on the tag defined in the options. */ -function filterTaggedProjects( - nxJson: NxJson, - buildTag: string, - selfProject: string, -): string[] { - return ( - Object.entries(nxJson.projects) - // filter out the starter project (self) - .filter(([project]) => project !== selfProject) - // filter in all projects that include the selected tag - .filter(([_project, { tags }]) => tags?.includes(buildTag)) - .map(([project]) => project) - ); -} - -/** Create a builder stream array for all targets. */ -function createProjectStreams( - context: BuilderContext, - targetProjects: string[], - target: string, - customOptions: any = {}, -): Observable[] { - return targetProjects.map((targetProject: string) => { - return from( - context.scheduleTarget( - { - target: target, - project: targetProject, - }, - customOptions, - ), - ).pipe( - tap(() => context.logger.info(`Running ${target}: ${targetProject}...`)), - switchMap((build) => build.result), - tap((result) => { - // Throw and break the whole pipe if an error occurs. - if (result.error) { - throw new Error(result.error); - } - context.logger.info(`Successfully finshed ${target}: ${targetProject}`); - }), - ); - }); -} diff --git a/libs/workspace/src/builders/elements/package-all-elements/index.ts b/libs/workspace/src/builders/elements/package-all-elements/index.ts deleted file mode 100644 index 5845084149..0000000000 --- a/libs/workspace/src/builders/elements/package-all-elements/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { createBuilder } from '@angular-devkit/architect'; -import { JsonObject } from '@angular-devkit/core'; -import { elementsBuildAndPackageBuilder } from './build'; -import { ElementsPackageAllOptions } from './schema'; - -export default createBuilder( - elementsBuildAndPackageBuilder, -); diff --git a/libs/workspace/src/builders/elements/package-all-elements/schema.json b/libs/workspace/src/builders/elements/package-all-elements/schema.json deleted file mode 100644 index 6095ba18e9..0000000000 --- a/libs/workspace/src/builders/elements/package-all-elements/schema.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema", - "id": "package-all-elements", - "type": "object", - "properties": { - "buildTag": { - "type": "string", - "default": "scope:elements", - "description": "The tag within the nx projects that is included for this build." - }, - "packageVersion": { - "type": "string", - "description": "Package version that is used to release" - } - }, - "additionalProperties": false, - "required": [], - "definitions": {} -} diff --git a/libs/workspace/src/builders/elements/package-all-elements/schema.ts b/libs/workspace/src/builders/elements/package-all-elements/schema.ts deleted file mode 100644 index 09f4bf9e9b..0000000000 --- a/libs/workspace/src/builders/elements/package-all-elements/schema.ts +++ /dev/null @@ -1,23 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** The options that can be used with the elements builder */ -export interface ElementsPackageAllOptions { - /** The tag within the nx projects that is included for this build. */ - buildTag?: string; - /** Package version that is used in the release */ - packageVersion: string; -} diff --git a/libs/workspace/src/builders/elements/package/build.ts b/libs/workspace/src/builders/elements/package/build.ts deleted file mode 100644 index cc8817dee6..0000000000 --- a/libs/workspace/src/builders/elements/package/build.ts +++ /dev/null @@ -1,190 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { BuilderContext, BuilderOutput } from '@angular-devkit/architect'; -import { ElementsPackageOptions } from './schema'; -import { Observable, of, from } from 'rxjs'; -import { runRollup } from './run-rollup'; -import { mapTo, catchError, switchMap, tap } from 'rxjs/operators'; -import { RollupOptions } from 'rollup'; -import rollupResolve from '@rollup/plugin-node-resolve'; -import { resolve, dirname } from 'path'; -import { PackageJson, tryJsonParse } from '@dynatrace/shared/node'; -import { promises as fs } from 'fs'; -import { toClassName } from '@nrwl/workspace'; -import { sync } from 'glob'; - -const alias = require('@rollup/plugin-alias'); -const localResolve = require('rollup-plugin-local-resolve'); - -/** - * Custom builder for the web-components package builder. - * This builder will run rollup bundler for each library and - * finally copy over the package json. - */ -export function elementsPackageBuilder( - options: ElementsPackageOptions, - context: BuilderContext, -): Observable { - let projectJson: PackageJson; - return from( - tryJsonParse(resolve(context.workspaceRoot, options.project)), - ).pipe( - tap((packageJson) => (projectJson = packageJson)), - switchMap((packageJson) => { - const rollupConfig = createRollupConfig(options, context, packageJson); - return runRollup(rollupConfig); - }), - switchMap(() => - tryJsonParse(resolve(context.workspaceRoot, 'package.json')), - ), - switchMap((rootPackageJson) => { - // Create a releaseable package json and write it to the output path. - const outputPackageJson = createOutputPackageJson( - context, - options.packageVersion || '', - rootPackageJson, - projectJson, - ); - return fs.writeFile( - resolve(context.workspaceRoot, options.outputPath, 'package.json'), - JSON.stringify(outputPackageJson, null, 2), - ); - }), - // Copy the d.ts files over to the output directory. - switchMap(() => - copyDtsFiles( - dirname(options.entryFile), - resolve(context.workspaceRoot, options.outputPath), - ), - ), - // Return a success status if everything went through - mapTo({ - success: true, - }), - // Otherwise report the error to the builder. - catchError((error) => - of({ - success: false, - error: (error as Error).message, - }), - ), - ); -} - -/** - * Generate the rollup config. - */ -function createRollupConfig( - options: ElementsPackageOptions, - context: BuilderContext, - packageJson: PackageJson, -): RollupOptions { - const rollupConfig: RollupOptions = { - input: options.entryFile, - output: [ - { - format: 'esm', - file: `${options.outputPath}/${context.target!.project}.esm.js`, - name: toClassName(context.target!.project), - }, - { - format: 'umd', - file: `${options.outputPath}/${context.target!.project}.umd.js`, - name: toClassName(context.target!.project), - }, - ], - external: [ - 'lit-element', - // Lit-html does have sub-imports, that would not be picked up without - // a regex. - /lit-html.*/, - // Treat other fluid-elements as external dependencies as well. - /@dynatrace\/fluid\-elements\/*/, - // Everything that is listed as a dependency within the package.json - // is also considered an external dependency. - ...Object.keys(packageJson.dependencies || {}), - ], - plugins: [ - alias({ - entries: [ - { - find: '@dynatrace/fluid-design-tokens', - replacement: resolve( - context.workspaceRoot, - 'libs/shared/design-tokens/generated/index.js', - ), - }, - { - find: '@dynatrace/shared/keycodes', - replacement: resolve( - context.workspaceRoot, - 'libs/shared/keycodes/index.ts', - ), - }, - ], - }), - localResolve(), - rollupResolve({ - preferBuiltins: true, - extensions: ['.js', '.ts'], - }), - ], - }; - return rollupConfig; -} - -/** Creates a releaseable package json */ -function createOutputPackageJson( - context: BuilderContext, - version: string, - rootPackageJson: PackageJson, - projectPackageJson: PackageJson, -): PackageJson { - // Set the version in the main file. - projectPackageJson.version = version; - // Set the main file in the package json. - projectPackageJson.main = `${context.target!.project}.umd.js`; - // Set the main file in the package json. - projectPackageJson.module = `${context.target!.project}.esm.js`; - // Set the typings in the package json. - projectPackageJson.typings = 'index.d.ts'; - - // Sync the dependency versions over. - for (const dependency of Object.keys(projectPackageJson.dependencies || {})) { - projectPackageJson.dependencies![dependency] = - rootPackageJson.dependencies![dependency] || - rootPackageJson.devDependencies![dependency]; - } - return projectPackageJson; -} - -/** - * Copies the d.ts files from the tsc compiled output to the package output folder. - * Sadly we need to do this manually here, as the rollup copy plugin was not able to - * maintain the folder structure correctly. - */ -async function copyDtsFiles( - sourceDir: string, - outputPath: string, -): Promise { - const dtsPaths = sync('**/*.d.ts', { cwd: sourceDir }); - for (const file of dtsPaths) { - const target = resolve(outputPath, file); - await fs.mkdir(dirname(target), { recursive: true }); - await fs.copyFile(resolve(sourceDir, file), resolve(outputPath, file)); - } -} diff --git a/libs/workspace/src/builders/elements/package/index.ts b/libs/workspace/src/builders/elements/package/index.ts deleted file mode 100644 index fb0909a184..0000000000 --- a/libs/workspace/src/builders/elements/package/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { createBuilder } from '@angular-devkit/architect'; -import { JsonObject } from '@angular-devkit/core'; -import { elementsPackageBuilder } from './build'; -import { ElementsPackageOptions } from './schema'; - -export default createBuilder( - elementsPackageBuilder, -); diff --git a/libs/workspace/src/builders/elements/package/run-rollup.ts b/libs/workspace/src/builders/elements/package/run-rollup.ts deleted file mode 100644 index 7d018c2fc2..0000000000 --- a/libs/workspace/src/builders/elements/package/run-rollup.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import * as rollup from 'rollup'; -import { from, Observable } from 'rxjs'; -import { map, switchMap } from 'rxjs/operators'; - -export function runRollup( - options: rollup.RollupOptions, -): Observable<{ success: boolean }> { - return from(rollup.rollup(options)).pipe( - switchMap((bundle) => { - const outputOptions = Array.isArray(options.output) - ? options.output - : [options.output]; - return from( - Promise.all( - (>outputOptions).map((o) => - bundle.write(o), - ), - ), - ); - }), - map(() => ({ success: true })), - ); -} diff --git a/libs/workspace/src/builders/elements/package/schema.json b/libs/workspace/src/builders/elements/package/schema.json deleted file mode 100644 index f5827fe33d..0000000000 --- a/libs/workspace/src/builders/elements/package/schema.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema", - "id": "package-element", - "type": "object", - "properties": { - "entryFile": { - "type": "string", - "description": "The entrypoint used for the rollup build." - }, - "project": { - "type": "string", - "description": "The path to the package.json used for the release." - }, - "outputPath": { - "type": "string", - "description": "The path where the elements target should build to." - }, - "packageVersion": { - "type": "string", - "description": "Package version that is used to release" - } - }, - "additionalProperties": false, - "required": ["entryFile", "project", "outputPath"], - "definitions": {} -} diff --git a/libs/workspace/src/builders/elements/package/schema.ts b/libs/workspace/src/builders/elements/package/schema.ts deleted file mode 100644 index 200bdab38b..0000000000 --- a/libs/workspace/src/builders/elements/package/schema.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright 2021 Dynatrace LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** The options that can be used with the elements builder */ -export interface ElementsPackageOptions { - /** Entrypoint for the rollup bundler */ - entryFile: string; - /** The path to the package.json used for the release. */ - project: string; - /** The path where the elements target should built to. */ - outputPath: string; - /** Package version that is used in the release */ - packageVersion: string; -} diff --git a/libs/workspace/webpack.config.js b/libs/workspace/webpack.config.js index 42cb04b73d..726f99f856 100644 --- a/libs/workspace/webpack.config.js +++ b/libs/workspace/webpack.config.js @@ -9,8 +9,6 @@ const entries = [ 'src/builders/barista-build/renderer.ts', 'src/builders/typescript/index.ts', 'src/builders/packager/index.ts', - 'src/builders/elements/package-all-elements/index.ts', - 'src/builders/elements/package/index.ts', 'src/builders/affected-e2e/index.ts', 'src/index.ts', ]; diff --git a/nx.json b/nx.json index cda7c3df27..167d5805b0 100644 --- a/nx.json +++ b/nx.json @@ -120,17 +120,6 @@ "tree-table" ] }, - "package-elements": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": [ - "fluid-button", - "fluid-button-group", - "fluid-checkbox", - "fluid-switch", - "fluid-tab-group", - "fluid-core" - ] - }, "alert": { "tags": ["scope:components", "type:library"] }, @@ -335,64 +324,6 @@ "shared-node": { "tags": ["type:tooling", "type:shared"] }, - "shared-design-tokens": { - "tags": ["type:library", "type:shared"] - }, - "fluid-button": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": ["shared-design-tokens", "testing-custom-element"] - }, - "fluid-button-group": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": ["shared-design-tokens", "testing-custom-element"] - }, - "fluid-checkbox": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": ["shared-design-tokens", "testing-custom-element"] - }, - "fluid-input": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": ["shared-design-tokens", "testing-custom-element"] - }, - "fluid-icon": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": ["shared-design-tokens", "testing-custom-element"] - }, - "fluid-popover": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": ["shared-design-tokens", "testing-custom-element"] - }, - "fluid-switch": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": ["shared-design-tokens", "testing-custom-element"] - }, - "fluid-tab-group": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": ["shared-design-tokens", "testing-custom-element"] - }, - "fluid-virtual-scroll-container": { - "tags": ["scope:elements", "type:library"], - "implicitDependencies": ["shared-design-tokens", "testing-custom-element"] - }, - "fluid-core": { - "tags": ["scope:elements", "type:library"] - }, - "fluid-dev": { - "tags": ["type:app"] - }, - "testing-custom-element": { - "tags": ["scope:testing", "type:library"] - }, - "design-tokens-ui": { - "tags": ["type:app"], - "implicitDependencies": ["shared-design-tokens"] - }, - "design-tokens-ui-input": { - "tags": ["type:library"] - }, - "next": { - "tags": ["scope:design-system", "type:app"] - }, "shared-data-access-strapi": { "tags": ["scope:cms", "type:shared", "type:library"] }, @@ -402,9 +333,6 @@ "shared-design-system-interfaces": { "tags": ["type:library", "type:shared"] }, - "design-tokens-ui-shared": { - "tags": ["type:library", "type:shared"] - }, "shared-keycodes": { "tags": ["type:library", "type:shared"] } diff --git a/package-lock.json b/package-lock.json index 970385ac8c..5b5daa1694 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,19 +4,6 @@ "lockfileVersion": 1, "requires": true, "dependencies": { - "@adobe/leonardo-contrast-colors": { - "version": "1.0.0-alpha.8", - "resolved": "https://registry.npmjs.org/@adobe/leonardo-contrast-colors/-/leonardo-contrast-colors-1.0.0-alpha.8.tgz", - "integrity": "sha512-pYHEYdHxi080NMSX40Jvly7oDuLkCqfCHAA+indNxl+hm0hw8fCBo5Uc56QEuKggmp20b+S/ELwt2VapYIvUXw==", - "dev": true, - "requires": { - "d3": "^5.14.2", - "d3-3d": "0.0.9", - "d3-cam02": "^0.1.5", - "d3-hsluv": "^0.1.2", - "d3-hsv": "^0.1.0" - } - }, "@angular-builders/custom-webpack": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/@angular-builders/custom-webpack/-/custom-webpack-11.0.0.tgz", @@ -5622,12 +5609,6 @@ "resolved": "https://registry.npmjs.org/@dynatrace/barista-icons/-/barista-icons-7.7.0.tgz", "integrity": "sha512-GWyOycNuVxFVl0VyHPl9joLZ5TxHwn1Megwmtj/qImcFON7RYNHOoNu+RefiHPH1a3bObuYT3qIieNrKiNBSXA==" }, - "@figma/plugin-typings": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@figma/plugin-typings/-/plugin-typings-1.19.0.tgz", - "integrity": "sha512-CioK7sIBXrpgbYsbzTS6clGwuO+97DjM16PqDmXKtcTBJhg8AjTiZ7XIDeJ078Kpwh0QiLDuG+D2ukKbFpBw7g==", - "dev": true - }, "@fullhuman/postcss-purgecss": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz", @@ -9602,11 +9583,6 @@ } } }, - "@popperjs/core": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.3.tgz", - "integrity": "sha512-RFwCobxsvZ6j7twS7dHIZQZituMIDJJNHS/qY6iuthVebxS3zhRY+jaC2roEKiAYaVuTcGmX6Luc6YBcf6zJVg==" - }, "@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", @@ -17032,252 +17008,21 @@ "type": "^1.0.1" } }, - "d3": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz", - "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==", - "dev": true, - "requires": { - "d3-array": "1", - "d3-axis": "1", - "d3-brush": "1", - "d3-chord": "1", - "d3-collection": "1", - "d3-color": "1", - "d3-contour": "1", - "d3-dispatch": "1", - "d3-drag": "1", - "d3-dsv": "1", - "d3-ease": "1", - "d3-fetch": "1", - "d3-force": "1", - "d3-format": "1", - "d3-geo": "1", - "d3-hierarchy": "1", - "d3-interpolate": "1", - "d3-path": "1", - "d3-polygon": "1", - "d3-quadtree": "1", - "d3-random": "1", - "d3-scale": "2", - "d3-scale-chromatic": "1", - "d3-selection": "1", - "d3-shape": "1", - "d3-time": "1", - "d3-time-format": "2", - "d3-timer": "1", - "d3-transition": "1", - "d3-voronoi": "1", - "d3-zoom": "1" - }, - "dependencies": { - "d3-array": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz", - "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==", - "dev": true - }, - "d3-scale": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz", - "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==", - "dev": true, - "requires": { - "d3-array": "^1.2.0", - "d3-collection": "1", - "d3-format": "1", - "d3-interpolate": "1", - "d3-time": "1", - "d3-time-format": "2" - } - } - } - }, - "d3-3d": { - "version": "0.0.9", - "resolved": "https://registry.npmjs.org/d3-3d/-/d3-3d-0.0.9.tgz", - "integrity": "sha512-Rvcgy5QZriGQAgoCzxyBkC8yZXKghCFw1RHARp/ybvrapFseMDyIbVPaBUgtNt8k3JDeEOdgN7OhFWhWB9m4Gg==", - "dev": true - }, "d3-array": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.5.0.tgz", "integrity": "sha512-U+CrYn19GmiKeI9qU1RLV1p5ZodBKXw64k9Z3Id6d11LLuZ4JdyCnMT6W/2b84bvqEMFU15zg/JC3/oRYTanVg==" }, - "d3-axis": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz", - "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==", - "dev": true - }, - "d3-brush": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz", - "integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==", - "dev": true, - "requires": { - "d3-dispatch": "1", - "d3-drag": "1", - "d3-interpolate": "1", - "d3-selection": "1", - "d3-transition": "1" - } - }, - "d3-cam02": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/d3-cam02/-/d3-cam02-0.1.5.tgz", - "integrity": "sha1-5+s00G3gOtDJJBNKCoRmbZCWges=", - "dev": true, - "requires": { - "d3-color": "1" - } - }, - "d3-chord": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz", - "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==", - "dev": true, - "requires": { - "d3-array": "1", - "d3-path": "1" - }, - "dependencies": { - "d3-array": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz", - "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==", - "dev": true - } - } - }, - "d3-collection": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz", - "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==", - "dev": true - }, "d3-color": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz", "integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg==" }, - "d3-contour": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz", - "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==", - "dev": true, - "requires": { - "d3-array": "^1.1.1" - }, - "dependencies": { - "d3-array": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz", - "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==", - "dev": true - } - } - }, - "d3-dispatch": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz", - "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==", - "dev": true - }, - "d3-drag": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz", - "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==", - "dev": true, - "requires": { - "d3-dispatch": "1", - "d3-selection": "1" - } - }, - "d3-dsv": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz", - "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==", - "dev": true, - "requires": { - "commander": "2", - "iconv-lite": "0.4", - "rw": "1" - } - }, - "d3-ease": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz", - "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==", - "dev": true - }, - "d3-fetch": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz", - "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==", - "dev": true, - "requires": { - "d3-dsv": "1" - } - }, - "d3-force": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz", - "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==", - "dev": true, - "requires": { - "d3-collection": "1", - "d3-dispatch": "1", - "d3-quadtree": "1", - "d3-timer": "1" - } - }, "d3-format": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.3.tgz", "integrity": "sha512-mm/nE2Y9HgGyjP+rKIekeITVgBtX97o1nrvHCWX8F/yBYyevUTvu9vb5pUnKwrcSw7o7GuwMOWjS9gFDs4O+uQ==" }, - "d3-geo": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz", - "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==", - "dev": true, - "requires": { - "d3-array": "1" - }, - "dependencies": { - "d3-array": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz", - "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==", - "dev": true - } - } - }, - "d3-hierarchy": { - "version": "1.1.9", - "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz", - "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==", - "dev": true - }, - "d3-hsluv": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/d3-hsluv/-/d3-hsluv-0.1.2.tgz", - "integrity": "sha512-nDmxHpYqjrDSEaS9F0S8lufW75Xs+JuzbVBTJsgUMTDhZVNTwVZsNVG9uiGv62KwL0HR5Fe2bxO0/Z0ZAMOu2g==", - "dev": true, - "requires": { - "d3-color": "^1.0.3" - } - }, - "d3-hsv": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/d3-hsv/-/d3-hsv-0.1.0.tgz", - "integrity": "sha1-yVvomzQXeinnCghI25XX8CYeqZs=", - "dev": true, - "requires": { - "d3-color": "1" - } - }, "d3-interpolate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz", @@ -17291,24 +17036,6 @@ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" }, - "d3-polygon": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz", - "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==", - "dev": true - }, - "d3-quadtree": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz", - "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==", - "dev": true - }, - "d3-random": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz", - "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==", - "dev": true - }, "d3-scale": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.1.tgz", @@ -17321,22 +17048,6 @@ "d3-time-format": "2" } }, - "d3-scale-chromatic": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz", - "integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==", - "dev": true, - "requires": { - "d3-color": "1", - "d3-interpolate": "1" - } - }, - "d3-selection": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz", - "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==", - "dev": true - }, "d3-shape": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", @@ -17358,45 +17069,6 @@ "d3-time": "1" } }, - "d3-timer": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz", - "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==", - "dev": true - }, - "d3-transition": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz", - "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==", - "dev": true, - "requires": { - "d3-color": "1", - "d3-dispatch": "1", - "d3-ease": "1", - "d3-interpolate": "1", - "d3-selection": "^1.1.0", - "d3-timer": "1" - } - }, - "d3-voronoi": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz", - "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==", - "dev": true - }, - "d3-zoom": { - "version": "1.8.3", - "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz", - "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==", - "dev": true, - "requires": { - "d3-dispatch": "1", - "d3-drag": "1", - "d3-interpolate": "1", - "d3-selection": "1", - "d3-transition": "1" - } - }, "damerau-levenshtein": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz", @@ -24969,19 +24641,6 @@ "os-family": "^1.0.0" } }, - "lit-element": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.3.1.tgz", - "integrity": "sha512-tOcUAmeO3BzwiQ7FGWdsshNvC0HVHcTFYw/TLIImmKwXYoV0E7zCBASa8IJ7DiP4cen/Yoj454gS0qqTnIGsFA==", - "requires": { - "lit-html": "^1.1.1" - } - }, - "lit-html": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.2.1.tgz", - "integrity": "sha512-GSJHHXMGLZDzTRq59IUfL9FCdAlGfqNp/dEa7k7aBaaWD+JKaCjsAk9KYm2V12ItonVaYx2dprN66Zdm1AuBTQ==" - }, "load-bmfont": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.1.tgz", @@ -29903,12 +29562,6 @@ "aproba": "^1.1.1" } }, - "rw": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", - "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=", - "dev": true - }, "rx": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz", diff --git a/package.json b/package.json index 8e15e7eb80..c8da086574 100644 --- a/package.json +++ b/package.json @@ -33,14 +33,11 @@ "barista-tools": "ng build barista-tools && node dist/libs/tools/barista/main.js", "shareable-examples": "ng build tools-shareable-examples && node dist/libs/tools/shareable-examples/main.js", "barista": "npm run barista-tools && ng run barista-design-system:serve-ssr", - "design-system": "npm run barista-tools -- --next=true && ng run next:serve", "demos": "ng serve demos", "stage-release": "ng run tools-release:build-stage-release && node dist/libs/tools/stage-release/main.js", "publish-release": "ng run tools-release:build-publish-release && node dist/libs/tools/publish-release/main.js", "publish-release-next": "ng run tools-release:build-publish-release-next && node dist/libs/tools/publish-release-next/main.js", "barista:prerender": "ng run barista-design-system:prerender --routesFile dist/barista-data/routes.txt", - "design-tokens:build": "bazelisk build //libs/shared/design-tokens:build && npm run copy-generated-tokens && npm run format:write", - "copy-generated-tokens": "node tools/shell-helpers/copy-folder.js $(bazelisk info bazel-genfiles)/libs/shared/design-tokens/build libs/shared/design-tokens/generated", "bazel": "bazelisk", "bazel:test": "bazelisk query \"attr(generator_function, jest, //...)\" | xargs bazelisk test", "bazel:stylelint": "node tools/scripts/stylelint.js", @@ -76,20 +73,16 @@ "@dynatrace/barista-fonts": "^1.0.0", "@dynatrace/barista-icons": "^7.7.0", "@nguniversal/common": "^11.0.1", - "@popperjs/core": "^2.5.3", "ansi-colors": "^4.1.1", "core-js": "^3.8.3", "d3-scale": "^3.0.0", "d3-shape": "^1.3.5", "highlight-ts": "^9.12.1-2", - "lit-element": "^2.3.1", - "lit-html": "^1.2.1", "lodash-es": "^4.17.15", "rxjs": "^6.6.3", "zone.js": "~0.10.2" }, "devDependencies": { - "@adobe/leonardo-contrast-colors": "^1.0.0-alpha.8", "@angular-builders/custom-webpack": "^11.0.0", "@angular-devkit/architect-cli": "^0.1100.5", "@angular-devkit/build-angular": "0.1100.5", @@ -108,7 +101,6 @@ "@bazel/terser": "^2.2.1", "@bazel/typescript": "^2.2.1", "@commitlint/cli": "^11.0.0", - "@figma/plugin-typings": "^1.19.0", "@nguniversal/builders": "^11.0.1", "@nguniversal/express-engine": "^11.0.1", "@nrwl/angular": "^11.0.20", diff --git a/tools/bazel_rules/figma_bundle/BUILD.bazel b/tools/bazel_rules/figma_bundle/BUILD.bazel deleted file mode 100644 index 52bd3450d6..0000000000 --- a/tools/bazel_rules/figma_bundle/BUILD.bazel +++ /dev/null @@ -1,11 +0,0 @@ -load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary") - -package(default_visibility = ["//:__subpackages__"]) - -exports_files(["create-figma-bundle.js"]) - -nodejs_binary( - name = "figma_bundle_binary", - entry_point = "//tools/bazel_rules/figma_bundle:create-figma-bundle.js", - data = ["@npm//yargs"], -) diff --git a/tools/bazel_rules/figma_bundle/create-figma-bundle.js b/tools/bazel_rules/figma_bundle/create-figma-bundle.js deleted file mode 100644 index ce6c28b2b1..0000000000 --- a/tools/bazel_rules/figma_bundle/create-figma-bundle.js +++ /dev/null @@ -1,58 +0,0 @@ -const { options } = require('yargs'); -const { readFileSync, writeFileSync, lstatSync, readdirSync } = require('fs'); -const { join } = require('path'); - -const { srcs, out } = options({ - srcs: { type: 'array', default: [] }, - out: { type: 'string' }, -}).argv; - -async function main() { - const resolvedFiles = srcs - .map((source) => source.split(' ')) // Sources may include multiple files seperated by spaces - .reduce((a, b) => a.concat(b), []) // Flatten array - .map((fileOrDirectory) => { - // Sources might include directories, add all files in this case - if ( - typeof fileOrDirectory === 'string' && - lstatSync(fileOrDirectory).isDirectory() - ) { - return readdirSync(fileOrDirectory).map((fileName) => - join(fileOrDirectory, fileName), - ); - } else { - return fileOrDirectory; - } - }) - .reduce((a, b) => a.concat(b), []); // Flatten array - - const inlineStyles = resolvedFiles - .filter((file) => file.endsWith('.css')) - .map((file) => readFileSync(file)) - .map((contents) => `\n`); - const inlineScripts = resolvedFiles - .filter((file) => file.endsWith('.js')) - .map((file) => readFileSync(file)) - .map((contents) => `\n`); - - const html = ` - - - - ${inlineStyles} - ${inlineScripts} - - - -`; - writeFileSync(out, html); -} - -main() - .then(() => { - process.exit(0); - }) - .catch((error) => { - console.error(error); - process.exit(1); - }); diff --git a/tools/bazel_rules/figma_bundle/figma_bundle_macro.bzl b/tools/bazel_rules/figma_bundle/figma_bundle_macro.bzl deleted file mode 100644 index 3f28dce055..0000000000 --- a/tools/bazel_rules/figma_bundle/figma_bundle_macro.bzl +++ /dev/null @@ -1,24 +0,0 @@ -"Macro for generating an HTML file with all JavaScript and CSS for Figma plugins" -def figma_bundle_macro( - name, - srcs = [], - output = "worker.html"): - """Creates an HTML bundle for Figma plugins where the specified files are inlined. - - Args: - name: The name of the rule - srcs: List of files that should be included in the generated HTML - output: Name of the output file - """ - - binary = "//tools/bazel_rules/figma_bundle:figma_bundle_binary" - - file_arg = "--srcs=" + "".join(["\"$(location %s)\" " % s for s in srcs]) - - native.genrule( - name = name, - srcs = srcs, - outs = [output], - cmd = "$(location %s) --out=$(OUTS) %s" % (binary, file_arg), - tools = [binary] - ) diff --git a/tools/bazel_rules/figma_plugin/BUILD.bazel b/tools/bazel_rules/figma_plugin/BUILD.bazel deleted file mode 100644 index 85c8c86ae8..0000000000 --- a/tools/bazel_rules/figma_plugin/BUILD.bazel +++ /dev/null @@ -1,11 +0,0 @@ -load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary") - -package(default_visibility = ["//:__subpackages__"]) - -exports_files(["copy-plugin-files.js"]) - -nodejs_binary( - name = "figma_plugin_binary", - entry_point = "//tools/bazel_rules/figma_plugin:copy-plugin-files.js", - data = ["@npm//yargs"], -) diff --git a/tools/bazel_rules/figma_plugin/copy-plugin-files.js b/tools/bazel_rules/figma_plugin/copy-plugin-files.js deleted file mode 100644 index 80f6c9ba2d..0000000000 --- a/tools/bazel_rules/figma_plugin/copy-plugin-files.js +++ /dev/null @@ -1,29 +0,0 @@ -const { options } = require('yargs'); -const { copyFileSync, mkdirSync, existsSync } = require('fs'); -const { join } = require('path'); - -const { manifestJson, codeJs, workerHtml, outPath } = options({ - 'manifest-json': { type: 'string' }, - 'code-js': { type: 'string' }, - 'worker-html': { type: 'string' }, - 'out-path': { type: 'string' }, -}).argv; - -async function main() { - const outputDir = join(outPath, 'plugin'); - if (!existsSync(outputDir)) { - mkdirSync(outputDir); - } - copyFileSync(manifestJson, join(outputDir, 'manifest.json')); - copyFileSync(codeJs, join(outputDir, 'code.js')); - copyFileSync(workerHtml, join(outputDir, 'worker.html')); -} - -main() - .then(() => { - process.exit(0); - }) - .catch((error) => { - console.error(error); - process.exit(1); - }); diff --git a/tools/bazel_rules/figma_plugin/figma_plugin_macro.bzl b/tools/bazel_rules/figma_plugin/figma_plugin_macro.bzl deleted file mode 100644 index 30930765d9..0000000000 --- a/tools/bazel_rules/figma_plugin/figma_plugin_macro.bzl +++ /dev/null @@ -1,32 +0,0 @@ -"Macro for generating an HTML file with all JavaScript and CSS for Figma plugins" -def figma_plugin_macro( - name, - manifest_json, - code_js, - worker_html, - ): - """Creates a Figma plugin from the required files - - Args: - name: The name of the rule - manifest_json: Path of the manifest.json - code_js: Path of the code.js - worker_html: Path of the worker.html - """ - - binary = "//tools/bazel_rules/figma_plugin:figma_plugin_binary" - - args = " ".join([ - "--manifest-json=$(location %s)" % manifest_json, - "--code-js=$(location %s)" % code_js, - "--worker-html=$(location %s)" % worker_html, - "--out-path=$(@D)" - ]) - - native.genrule( - name = name, - srcs = [manifest_json, code_js, worker_html], - outs = ["plugin/manifest.json", "plugin/code.js", "plugin/worker.html"], - cmd = "$(location %s) %s" % (binary, args), - tools = [binary] - ) diff --git a/tools/bazel_rules/index.bzl b/tools/bazel_rules/index.bzl index 3489dac677..77f3524e54 100644 --- a/tools/bazel_rules/index.bzl +++ b/tools/bazel_rules/index.bzl @@ -13,8 +13,6 @@ load("//tools/bazel_rules:architect_macro.bzl", _architect = "architect_macro") load("//tools/bazel_rules/stylelint:stylelint_macro.bzl", _stylelint = "stylelint_macro") load("//tools/bazel_rules/jest:jest_macro.bzl", _jest = "jest_macro") load("//tools/bazel_rules:ng_module_macro.bzl", _ng_module = "ng_module", _ng_module_view_engine = "ng_module_view_engine") -load("//tools/bazel_rules/figma_plugin:figma_plugin_macro.bzl", _figma_plugin = "figma_plugin_macro") -load("//tools/bazel_rules/figma_bundle:figma_bundle_macro.bzl", _figma_bundle = "figma_bundle_macro") rollup = _rollup architect = _architect @@ -22,5 +20,3 @@ stylelint = _stylelint jest = _jest ng_module = _ng_module ng_module_view_engine = _ng_module_view_engine -figma_plugin = _figma_plugin -figma_bundle = _figma_bundle diff --git a/tools/bazel_rules/jest/BUILD.bazel b/tools/bazel_rules/jest/BUILD.bazel index 2114b1167a..4415c5621b 100644 --- a/tools/bazel_rules/jest/BUILD.bazel +++ b/tools/bazel_rules/jest/BUILD.bazel @@ -1,59 +1,6 @@ -load("@npm//@babel/cli:index.bzl", "babel") - package(default_visibility = ["//:__subpackages__"]) exports_files([ "jest-runner.js", "jest-resolver.js", ]) - -babel( - name = "lit-html", - testonly = True, - args = [ - "external/npm/node_modules/lit-html", - "--config-file ./$(location :babel.config.js)", - "-d", - "$(@D)/", - ], - data = [ - "babel.config.js", - "@npm//@babel/preset-env", - "@npm//lit-html", - ], - output_dir = True, -) - -babel( - name = "lit-element", - testonly = True, - args = [ - "external/npm/node_modules/lit-element", - "--config-file ./$(location :babel.config.js)", - "-d", - "$(@D)/", - ], - data = [ - "babel.config.js", - "@npm//@babel/preset-env", - "@npm//lit-element", - ], - output_dir = True, -) - -babel( - name = "popperjs", - testonly = True, - args = [ - "external/npm/node_modules/@popperjs/core/lib", - "--config-file ./$(location :babel.config.js)", - "-d", - "$(@D)/", - ], - data = [ - "babel.config.js", - "@npm//@babel/preset-env", - "@npm//@popperjs", - ], - output_dir = True, -) diff --git a/tools/bazel_rules/jest/jest_macro.bzl b/tools/bazel_rules/jest/jest_macro.bzl index 7b98e43338..9502328cd7 100644 --- a/tools/bazel_rules/jest/jest_macro.bzl +++ b/tools/bazel_rules/jest/jest_macro.bzl @@ -51,11 +51,6 @@ def jest_macro( "@npm//jest-preset-angular", "@npm//jest-junit", "@npm//lodash-es:lodash-es__umd", - "@npm//lit-html", - # umd modules for fluid elements - "//tools/bazel_rules/jest:lit-html", - "//tools/bazel_rules/jest:lit-element", - "//tools/bazel_rules/jest:popperjs", # needed by the runner and resolver "//tools/bazel_rules/jest:jest-runner.js",