├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ └── test.yml ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── .stylelintignore ├── .stylelintrc ├── LICENSE ├── README.md ├── package.json ├── packages ├── dls-color-palette │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── jest.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── contextual.js │ │ ├── index.js │ │ ├── shade.js │ │ └── utils.js │ └── test │ │ ├── contextual.spec.js │ │ └── shade.spec.js └── less-plugin-dls │ ├── CHANGELOG.md │ ├── README.md │ ├── anatomy │ ├── date-picker.png │ └── pagination.png │ ├── bin │ └── dls │ ├── lib │ ├── cli │ │ ├── commands │ │ │ └── check.js │ │ └── index.js │ └── utils │ │ ├── evaluate.js │ │ └── visitors.js │ ├── package.json │ ├── rollup.config.js │ ├── scripts │ └── vars.js │ ├── src │ ├── enhancers │ │ ├── index.js │ │ └── reduce-calc.js │ ├── entries │ │ ├── lib.js │ │ └── main.js │ ├── functions │ │ ├── contextual.js │ │ ├── even.js │ │ ├── index.js │ │ ├── line-height.js │ │ ├── shade.js │ │ └── sum.js │ ├── index.js │ ├── inject.js │ └── utils.js │ ├── test │ ├── run.js │ └── specs │ │ ├── accordion │ │ ├── accordion.css │ │ └── accordion.less │ │ ├── ai │ │ ├── ai.css │ │ └── ai.less │ │ ├── alert │ │ ├── alert.css │ │ └── alert.less │ │ ├── anchor │ │ ├── anchor.css │ │ └── anchor.less │ │ ├── badge │ │ ├── badge.css │ │ └── badge.less │ │ ├── breadcrumb │ │ ├── breadcrumb.css │ │ └── breadcrumb.less │ │ ├── button │ │ ├── button.css │ │ └── button.less │ │ ├── carousel │ │ ├── carousel.css │ │ └── carousel.less │ │ ├── cascader │ │ ├── cascader.css │ │ └── cascader.less │ │ ├── checkbox │ │ ├── checkbox.css │ │ └── checkbox.less │ │ ├── collapse │ │ ├── collapse.css │ │ └── collapse.less │ │ ├── date-picker │ │ ├── date-picker.css │ │ └── date-picker.less │ │ ├── dialog │ │ ├── dialog.css │ │ └── dialog.less │ │ ├── drawer │ │ ├── drawer.css │ │ └── drawer.less │ │ ├── dropdown │ │ ├── dropdown.css │ │ └── dropdown.less │ │ ├── embedded │ │ ├── embedded.css │ │ └── embedded.less │ │ ├── empty │ │ ├── empty.css │ │ └── empty.less │ │ ├── form │ │ ├── form.css │ │ └── form.less │ │ ├── functions │ │ ├── even.css │ │ ├── even.less │ │ ├── line-height.css │ │ ├── line-height.less │ │ ├── sum.css │ │ └── sum.less │ │ ├── global │ │ ├── global.css │ │ └── global.less │ │ ├── input │ │ ├── input.css │ │ └── input.less │ │ ├── layout │ │ ├── layout.css │ │ └── layout.less │ │ ├── lightbox │ │ ├── lightbox.css │ │ └── lightbox.less │ │ ├── link │ │ ├── link.css │ │ └── link.less │ │ ├── loading │ │ ├── loading.css │ │ └── loading.less │ │ ├── menu │ │ ├── menu.css │ │ └── menu.less │ │ ├── message │ │ ├── message.css │ │ └── message.less │ │ ├── nav │ │ ├── nav.css │ │ └── nav.less │ │ ├── number-input │ │ ├── number-input.css │ │ └── number-input.less │ │ ├── option │ │ ├── option.css │ │ └── option.less │ │ ├── pagination │ │ ├── pagination.css │ │ └── pagination.less │ │ ├── popover │ │ ├── popover.css │ │ └── popover.less │ │ ├── progress │ │ ├── progress.css │ │ └── progress.less │ │ ├── radio │ │ ├── radio.css │ │ └── radio.less │ │ ├── rating │ │ ├── rating.css │ │ └── rating.less │ │ ├── scrollbar │ │ ├── scrollbar.css │ │ └── scrollbar.less │ │ ├── search-box │ │ ├── search-box.css │ │ └── search-box.less │ │ ├── select │ │ ├── select.css │ │ └── select.less │ │ ├── sidenav │ │ ├── sidenav.css │ │ └── sidenav.less │ │ ├── slider │ │ ├── slider.css │ │ └── slider.less │ │ ├── steps │ │ ├── steps.css │ │ └── steps.less │ │ ├── switch │ │ ├── switch.css │ │ └── switch.less │ │ ├── table │ │ ├── table.css │ │ └── table.less │ │ ├── tabs │ │ ├── tabs.css │ │ └── tabs.less │ │ ├── tag-input │ │ ├── tag-input.css │ │ └── tag-input.less │ │ ├── tag │ │ ├── tag.css │ │ └── tag.less │ │ ├── textarea │ │ ├── textarea.css │ │ └── textarea.less │ │ ├── time-picker │ │ ├── time-picker.css │ │ └── time-picker.less │ │ ├── toast │ │ ├── toast.css │ │ └── toast.less │ │ ├── tooltip │ │ ├── tooltip.css │ │ └── tooltip.less │ │ ├── transfer │ │ ├── transfer.css │ │ └── transfer.less │ │ ├── tree │ │ ├── tree.css │ │ └── tree.less │ │ └── uploader │ │ ├── uploader.css │ │ └── uploader.less │ └── tokens │ ├── components │ ├── accordion.less │ ├── alert.less │ ├── anchor.less │ ├── badge.less │ ├── breadcrumb.less │ ├── button.less │ ├── carousel.less │ ├── cascader.less │ ├── checkbox.less │ ├── collapse.less │ ├── date-picker.less │ ├── dialog.less │ ├── drawer.less │ ├── dropdown.less │ ├── embedded.less │ ├── empty.less │ ├── form.less │ ├── input.less │ ├── layout.less │ ├── lightbox.less │ ├── link.less │ ├── loading.less │ ├── menu.less │ ├── message.less │ ├── nav.less │ ├── number-input.less │ ├── option.less │ ├── pagination.less │ ├── popover.less │ ├── progress.less │ ├── radio.less │ ├── rating.less │ ├── scrollbar.less │ ├── search-box.less │ ├── select.less │ ├── sidenav.less │ ├── slider.less │ ├── steps.less │ ├── switch.less │ ├── table.less │ ├── tabs.less │ ├── tag-input.less │ ├── tag.less │ ├── textarea.less │ ├── time-picker.less │ ├── toast.less │ ├── tooltip.less │ ├── transfer.less │ ├── tree.less │ └── uploader.less │ ├── global.less │ ├── index.less │ ├── themes │ └── ai.less │ └── tokens.less ├── pnpm-lock.yaml └── pnpm-workspace.yaml /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/dist/* 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: '@babel/eslint-parser', 5 | sourceType: 'module' 6 | }, 7 | extends: ['standard', 'prettier'], 8 | rules: { 9 | // allow paren-less arrow functions 10 | 'arrow-parens': 0, 11 | // allow async-await 12 | 'generator-star-spacing': 0, 13 | // allow debugger during development 14 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 15 | 'comma-dangle': ['error', 'never'], 16 | 'no-multi-spaces': ['error', { ignoreEOLComments: true }], 17 | 'standard/no-callback-literal': 0 18 | }, 19 | overrides: [ 20 | { 21 | files: ['packages/dls-color-palette/**/*.spec.js'], 22 | env: { 23 | es6: true, 24 | jest: true 25 | } 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: 4 | push: 5 | branches: [ master ] 6 | pull_request: 7 | branches: [ master ] 8 | 9 | jobs: 10 | test: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout 14 | uses: actions/checkout@v3 15 | 16 | - name: Install pnpm 17 | uses: pnpm/action-setup@v2 18 | with: 19 | version: 6 20 | 21 | - name: Setup 22 | uses: actions/setup-node@v3 23 | with: 24 | node-version: '16' 25 | cache: 'pnpm' 26 | 27 | - name: Install 28 | run: pnpm install 29 | 30 | - name: Run test 31 | run: pnpm test 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | .vscode 5 | **/dist 6 | **/variables.* 7 | **/test/snapshots 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .* 2 | *.config.js 3 | src 4 | test 5 | build 6 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | test 2 | dist 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": false, 4 | "overrides": [ 5 | { 6 | "files": ".*rc", 7 | "options": { "parser": "json" } 8 | }, 9 | { 10 | "files": "*.less", 11 | "options": { "parser": "less", "singleQuote": false } 12 | }, 13 | { 14 | "files": "*.svg", 15 | "options": { "parser": "html" } 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | test 2 | dist 3 | *.js 4 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard", "stylelint-config-prettier"], 3 | "rules": { 4 | "declaration-empty-line-before": null, 5 | "no-descending-specificity": null, 6 | "no-empty-source": null, 7 | "number-leading-zero": "always", 8 | "declaration-colon-newline-after": null, 9 | "at-rule-no-unknown": null, 10 | "import-notation": "string" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Baidu EFE team 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # light-dls 2 | 3 | [![](https://img.shields.io/github/actions/workflow/status/ecomfe/light-dls/test.yml)](https://github.com/ecomfe/light-dls/actions/workflows/test.yml) 4 | 5 | Shared resources and tooling for Baidu Light DLS (Design Language System). 6 | 7 | Packages included: 8 | 9 | * [`less-plugin-dls`](./packages/less-plugin-dls) 10 | * [`dls-color-palette`](./packages/dls-color-palette) 11 | 12 | ## License 13 | 14 | [MIT](https://github.com/ecomfe/dls-tooling/blob/master/LICENSE) 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-dls", 3 | "version": "0.0.0", 4 | "description": "Tooling for Baidu Light DLS.", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "test": "pnpm -r test", 8 | "build": "pnpm -r build", 9 | "prepublishOnly": "pnpm -r test" 10 | }, 11 | "keywords": [ 12 | "less", 13 | "plugin", 14 | "baidu", 15 | "dls", 16 | "ecosystem:less" 17 | ], 18 | "author": "Justineo (justice360@gmail.com)", 19 | "license": "MIT", 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/ecomfe/less-plugin-dls.git" 23 | }, 24 | "devDependencies": { 25 | "eslint": "^8.18.0", 26 | "eslint-config-prettier": "^8.5.0", 27 | "eslint-config-standard": "^17.0.0", 28 | "eslint-plugin-import": "^2.26.0", 29 | "eslint-plugin-n": "^15.2.3", 30 | "eslint-plugin-node": "^11.1.0", 31 | "eslint-plugin-promise": "^6.0.0", 32 | "eslint-plugin-standard": "^5.0.0", 33 | "prettier": "^2.7.1", 34 | "stylelint": "^14.9.1", 35 | "stylelint-config-prettier": "^9.0.3", 36 | "stylelint-config-standard": "^26.0.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/dls-color-palette/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | > ⚠️ - Breaking Changes 2 | 3 | ## 0.1.1 4 | 5 | - fix: fix path for cjs entry. 6 | 7 | ## 0.1.0 8 | 9 | - feat: update minimal satuation when generating shades. 10 | 11 | ## 0.0.1-alpha.3 12 | 13 | - ⚠️ fix: shade hue accuray loss. Delete Math.round(hue) when normalizeHsv 14 | 15 | ## 0.0.1-alpha.2 16 | 17 | - fix: shade level7 not equals to brandColor bug. 18 | 19 | ## 0.0.1-alpha.1 20 | 21 | - build: change babelHelpers from `runtime` to `bundled`. 22 | - chore: delete useless dependencies. 23 | 24 | ## 0.0.1-alpha.0 25 | 26 | - First release. 27 | -------------------------------------------------------------------------------- /packages/dls-color-palette/README.md: -------------------------------------------------------------------------------- 1 | # dls-color-palette 2 | 3 | To generate a color palette out of the given base color. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i --save-dev dls-color-palette 9 | ``` 10 | 11 | ## Usage 12 | 13 | ### Get color shade 14 | 15 | `function getShade(color: string, level: number): string` 16 | 17 | **Params**: 18 | 19 | - `color: string` - the brand color in hex format. 20 | - `level: number` - level of the color shade. Valid range: [1, 10] 21 | 22 | **Return Value**: 23 | 24 | - Color of the given level in hex format. 25 | 26 | ```js 27 | import { getShade } from 'dls-color-palette' 28 | const shade = getShade('#0052cc', 2) // → #e0edff 29 | ``` 30 | 31 | ### Get contextual color according to the given brand color 32 | 33 | `function getContextual(color: string, type: string): string` 34 | 35 | **Params**: 36 | 37 | - `color: string` - the brand color in hex format. 38 | - `type: 'info' | 'success' | 'warning' | 'error'` - type of the contextual color. 39 | 40 | **Return Value**: 41 | 42 | - Contextual color in hex format. 43 | 44 | ```js 45 | import { getContextual } from 'dls-color-palette' 46 | const contextual = getContextual('#0052cc', 'success') // → #00bf5c 47 | ``` 48 | -------------------------------------------------------------------------------- /packages/dls-color-palette/babel.config.js: -------------------------------------------------------------------------------- 1 | const isTestEnv = process.env.BABEL_ENV === 'test' 2 | 3 | module.exports = { 4 | presets: [ 5 | [ 6 | '@babel/preset-env', 7 | !isTestEnv && { 8 | modules: false 9 | } 10 | ].filter(Boolean) 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /packages/dls-color-palette/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ['js'], 3 | roots: [''], 4 | testMatch: ['**/test/**/(*.)+spec.js'], 5 | testPathIgnorePatterns: ['/node_modules/'], 6 | transform: { 7 | '^.+\\.jsx?$': 'babel-jest' 8 | }, 9 | collectCoverageFrom: ['src/**/*.{js}'] 10 | } 11 | -------------------------------------------------------------------------------- /packages/dls-color-palette/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dls-color-palette", 3 | "version": "0.1.1", 4 | "description": "Color palette generator for Baidu Light DLS.", 5 | "main": "dist/index.cjs.min.js", 6 | "module": "dist/index.esm.min.js", 7 | "scripts": { 8 | "prepare": "pnpm build", 9 | "build": "rollup -c", 10 | "test": "BABEL_ENV=test jest", 11 | "prepublishOnly": "pnpm test", 12 | "postpublish": "npmmirror-sync dls-color-palette" 13 | }, 14 | "keywords": [ 15 | "color", 16 | "palette", 17 | "dls", 18 | "baidu" 19 | ], 20 | "license": "MIT", 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/ecomfe/light-dls.git" 24 | }, 25 | "dependencies": { 26 | "color-converters": "^0.1.1" 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "^7.11.6", 30 | "@babel/preset-env": "^7.11.5", 31 | "@justineo/npmmirror-sync": "^0.1.0", 32 | "@rollup/plugin-babel": "^5.2.0", 33 | "@rollup/plugin-commonjs": "^15.0.0", 34 | "@rollup/plugin-node-resolve": "^9.0.0", 35 | "babel-jest": "^26.3.0", 36 | "jest": "^27.1.0", 37 | "rollup": "^2.26.10", 38 | "rollup-plugin-babel": "^4.4.0", 39 | "rollup-plugin-terser": "^7.0.1" 40 | }, 41 | "files": [ 42 | "dist", 43 | "src" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /packages/dls-color-palette/rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from '@rollup/plugin-babel' 2 | import { terser } from 'rollup-plugin-terser' 3 | import { nodeResolve } from '@rollup/plugin-node-resolve' 4 | import commonjs from '@rollup/plugin-commonjs' 5 | 6 | export default { 7 | input: 'src/index.js', 8 | output: [ 9 | { 10 | file: 'dist/index.esm.js', 11 | format: 'esm', 12 | sourcemap: true 13 | }, 14 | { 15 | file: 'dist/index.esm.min.js', 16 | format: 'esm', 17 | sourcemap: true, 18 | plugins: [terser()] 19 | }, 20 | { 21 | file: 'dist/index.cjs.js', 22 | format: 'cjs', 23 | sourcemap: true 24 | }, 25 | { 26 | file: 'dist/index.cjs.min.js', 27 | format: 'cjs', 28 | sourcemap: true, 29 | plugins: [terser()] 30 | } 31 | ], 32 | plugins: [ 33 | nodeResolve(), 34 | commonjs(), 35 | babel({ 36 | // see https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers 37 | babelHelpers: 'bundled' 38 | // exclude: 'node_modules/**' is not set because color-converters need to be transform 39 | }) 40 | ] 41 | // external: [/@babel\/runtime/] is not set to prevent @babel/runtime version conflicts 42 | } 43 | -------------------------------------------------------------------------------- /packages/dls-color-palette/src/contextual.js: -------------------------------------------------------------------------------- 1 | import { isInRanges, hexToHsv, hsvToHex } from './utils' 2 | 3 | const CONTEXTUAL_RANGES = { 4 | info: [[210, 225]], 5 | success: [[95, 155]], 6 | warning: [[30, 45]], 7 | error: [ 8 | [0, 10], 9 | [350, 360] 10 | ] 11 | } 12 | 13 | const CONTEXTUAL_COLORS = { 14 | info: [216, 100, 80], 15 | success: [149, 100, 75], 16 | warning: [34, 100, 100], 17 | error: [7, 100, 80] 18 | } 19 | 20 | function isInContextualRanges(h, type) { 21 | return isInRanges(h, CONTEXTUAL_RANGES[type]) 22 | } 23 | 24 | export default function getContextual(color, type) { 25 | if ( 26 | !type || 27 | ['info', 'success', 'warning', 'error'].indexOf( 28 | type.trim().toLowerCase() 29 | ) === -1 30 | ) { 31 | throw new Error( 32 | '`type` must be one of `info`, `success`, `warning` or `error`.' 33 | ) 34 | } 35 | const [h] = hexToHsv(color) 36 | if (isInContextualRanges(h, type)) { 37 | return color 38 | } 39 | 40 | return hsvToHex(CONTEXTUAL_COLORS[type]) 41 | } 42 | -------------------------------------------------------------------------------- /packages/dls-color-palette/src/index.js: -------------------------------------------------------------------------------- 1 | export { default as getShade } from './shade' 2 | export { default as getContextual } from './contextual' 3 | -------------------------------------------------------------------------------- /packages/dls-color-palette/src/shade.js: -------------------------------------------------------------------------------- 1 | import { isNumber, hexToHsv, hsvToHex } from './utils' 2 | 3 | const BASE_LEVEL = 7 4 | const DARK_B_MAXES = [85, 65, 40] 5 | const LIGHT_B_STEP = 20 6 | const B_MAX = 100 7 | const B_MIN = 0 8 | const S_MAX = 100 9 | const S_MIN = 8 10 | const B_CLAMP_S_DEVIATION_RATIO = 0.2 11 | const LOW_S_DEVIATION_RATIO = 0.4 12 | const S_COEF = 3.2 13 | 14 | function clamp(value, min, max) { 15 | if (min > max) { 16 | ;[min, max] = [max, min] 17 | } 18 | return Math.min(max, Math.max(min, value)) 19 | } 20 | 21 | function getBrightness(base, level) { 22 | if (level === BASE_LEVEL) { 23 | return base 24 | } 25 | 26 | // dark shades 27 | if (level > BASE_LEVEL) { 28 | if (base <= B_MIN) { 29 | return base 30 | } 31 | 32 | return ( 33 | B_MIN + 34 | ((DARK_B_MAXES[level - BASE_LEVEL - 1] - B_MIN) * (base - B_MIN)) / 35 | (B_MAX - B_MIN) 36 | ) 37 | } 38 | 39 | // light shades 40 | return base + (BASE_LEVEL - level) * LIGHT_B_STEP 41 | } 42 | 43 | function getSatuation(base, level) { 44 | if (level === BASE_LEVEL) { 45 | return base 46 | } 47 | 48 | // light shades 49 | if (level > BASE_LEVEL) { 50 | level-- 51 | } 52 | 53 | const pl = BASE_LEVEL - 1 54 | const portion = 55 | (S_COEF * level * level + 56 | ((100 - (pl * pl - 1) * S_COEF) * level) / (pl - 1) + 57 | ((pl * pl - 1) * S_COEF - 100) / (pl - 1) - 58 | S_COEF) / 59 | 100 60 | 61 | if (base > S_MIN) { 62 | return (base - S_MIN) * portion + S_MIN 63 | } 64 | 65 | return portion * base 66 | } 67 | 68 | export default function getShade(color, level) { 69 | if (!isNumber(level) || level < 1 || level > 10) { 70 | throw new Error('`level` should be a number that ≥ 1 and ≤ 10.') 71 | } 72 | 73 | if (level === BASE_LEVEL) { 74 | return color 75 | } 76 | 77 | const [h, rawS, rawB] = hexToHsv(color) 78 | const s = rawS * 100 79 | const b = rawB * 100 80 | 81 | const brightness = getBrightness(b, level) 82 | let deviation = 83 | s > 0 ? ((Math.log2(100 / s) * s) / 100) * s * LOW_S_DEVIATION_RATIO : 0 84 | 85 | if (level < BASE_LEVEL) { 86 | const bPrev = getBrightness(b, BASE_LEVEL - 1) 87 | // brightness may be clamped 88 | deviation += 89 | bPrev > B_MAX 90 | ? ((bPrev - B_MAX) / LIGHT_B_STEP) * B_CLAMP_S_DEVIATION_RATIO * s 91 | : 0 92 | } 93 | 94 | const saturation = getSatuation(s - deviation, level) 95 | 96 | return hsvToHex([ 97 | h, 98 | clamp(saturation, 0, S_MAX), 99 | clamp(brightness, B_MIN, B_MAX) 100 | ]) 101 | } 102 | -------------------------------------------------------------------------------- /packages/dls-color-palette/src/utils.js: -------------------------------------------------------------------------------- 1 | import { hexToRgb, rgbToHsv, hsvToRgb, rgbToHex } from 'color-converters' 2 | 3 | export function isNumber(val) { 4 | return typeof val === 'number' || !Number.isNaN(val) 5 | } 6 | 7 | export function isInRanges(h, ranges) { 8 | return ranges.some((range) => { 9 | if (range.length !== 2 || range.some((edge) => !isNumber(edge))) { 10 | return false 11 | } 12 | 13 | const [min, max] = range.sort((a, b) => a - b) 14 | return min <= h && h <= max 15 | }) 16 | } 17 | 18 | export function normalizeHsv([h, s, b]) { 19 | return [h, s / 100, b / 100] 20 | } 21 | 22 | export function hexToHsv(v) { 23 | return rgbToHsv(hexToRgb(v)) 24 | } 25 | 26 | export function hsvToHex(v) { 27 | return rgbToHex(hsvToRgb(normalizeHsv(v))) 28 | } 29 | -------------------------------------------------------------------------------- /packages/dls-color-palette/test/contextual.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file getContextual test 3 | * @date 2020-09-07 14:05:13 4 | */ 5 | import { getContextual } from '../src/index' 6 | 7 | const brandColor = '#0052cc' 8 | 9 | test('get contextual color: info', () => { 10 | expect(getContextual(brandColor, 'info')).toBe('#0052cc') 11 | }) 12 | 13 | test('get contextual color: success', () => { 14 | expect(getContextual(brandColor, 'success')).toBe('#00bf5c') 15 | }) 16 | 17 | test('get contextual color: warning', () => { 18 | expect(getContextual(brandColor, 'warning')).toBe('#ff9100') 19 | }) 20 | 21 | test('get contextual color: error', () => { 22 | expect(getContextual(brandColor, 'error')).toBe('#cc1800') 23 | }) 24 | -------------------------------------------------------------------------------- /packages/dls-color-palette/test/shade.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file test for getShade 3 | * @date 2020-09-04 18:00:24 4 | */ 5 | import { getShade } from '../src/index' 6 | 7 | test('getShades', () => { 8 | const brandColor = '#0052cc' 9 | expect(getShade(brandColor, 1)).toBe('#ebf3ff') 10 | expect(getShade(brandColor, 2)).toBe('#dae9ff') 11 | expect(getShade(brandColor, 3)).toBe('#bad6ff') 12 | expect(getShade(brandColor, 4)).toBe('#8bbaff') 13 | expect(getShade(brandColor, 5)).toBe('#4d95ff') 14 | expect(getShade(brandColor, 6)).toBe('#0066ff') 15 | expect(getShade(brandColor, 7)).toBe('#0052cc') 16 | expect(getShade(brandColor, 8)).toBe('#0046ad') 17 | expect(getShade(brandColor, 9)).toBe('#003585') 18 | expect(getShade(brandColor, 10)).toBe('#002152') 19 | }) 20 | 21 | test('getShade: level=7 equals to brandColor', () => { 22 | const brandColor = '#bd8552' 23 | expect(getShade(brandColor, 7)).toBe(brandColor) 24 | }) 25 | 26 | test('getShade: works when Math.round(levelColorHue) ≈ 360', () => { 27 | const brandColor = '#f13f40' 28 | expect(getShade(brandColor, 1)).toBe('#ffebeb') 29 | }) 30 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/anatomy/date-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/light-dls/499f628500eabed1316f608593e2df1cf2d9266d/packages/less-plugin-dls/anatomy/date-picker.png -------------------------------------------------------------------------------- /packages/less-plugin-dls/anatomy/pagination.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecomfe/light-dls/499f628500eabed1316f608593e2df1cf2d9266d/packages/less-plugin-dls/anatomy/pagination.png -------------------------------------------------------------------------------- /packages/less-plugin-dls/bin/dls: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | require = require('esm')(module /*, options */) 3 | const { cli } = require('../lib/cli') 4 | 5 | cli(process.argv) 6 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/lib/cli/index.js: -------------------------------------------------------------------------------- 1 | import arg from 'arg' 2 | import { resolve } from 'path' 3 | import check from './commands/check' 4 | 5 | const DEFAULT_DIR = '.' 6 | const DEFAULT_EXCLUDE = 'node_modules,test' 7 | 8 | export function cli(args) { 9 | try { 10 | const options = parseArgs(args) 11 | 12 | switch (options.command) { 13 | case 'check': 14 | check(options) 15 | break 16 | default: 17 | break 18 | } 19 | } catch (error) { 20 | console.error(error.message) 21 | } 22 | } 23 | 24 | function parseArgs(rawArgs) { 25 | const args = arg( 26 | { 27 | '--dir': String, 28 | '--components': String, 29 | '--exclude': String, 30 | '--output': String, 31 | '-d': '--dir', 32 | '-c': '--components', 33 | '-x': '--exclude', 34 | '-o': '--output' 35 | }, 36 | { 37 | argv: rawArgs.slice(2) 38 | } 39 | ) 40 | 41 | const components = args['--components'] 42 | 43 | return { 44 | command: args._[0], 45 | dir: resolve(args['--dir'] || DEFAULT_DIR), 46 | exclude: (args['--exclude'] || DEFAULT_EXCLUDE).split(','), 47 | components: components 48 | ? components === 'all' 49 | ? [] 50 | : components.split(',') 51 | : null, 52 | output: args['--output'] || false 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/lib/utils/evaluate.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import less from 'less' 3 | import dls from '../../dist' 4 | import { VariablesOutputVisitor } from './visitors' 5 | 6 | const SELECTOR = 'DLS_VARS' 7 | 8 | export async function getVariables(path) { 9 | if (!fs.existsSync(path)) { 10 | return [] 11 | } 12 | 13 | const visitor = new VariablesOutputVisitor() 14 | 15 | await less.render(fs.readFileSync(path, 'utf-8'), { 16 | filename: path, 17 | plugins: [ 18 | dls({ 19 | inject: false 20 | }), 21 | { 22 | install(_, pluginManager) { 23 | pluginManager.addVisitor(visitor) 24 | } 25 | } 26 | ], 27 | paths: ['tokens'] 28 | }) 29 | 30 | return visitor.variables.map((v) => v.slice(1)) 31 | } 32 | 33 | export async function getTuples(variables, { theme }) { 34 | const src = [ 35 | `${SELECTOR}{`, 36 | dedupe(variables).map((v) => `${v}: @${v}`).join(';'), 37 | '}' 38 | ].join('') 39 | 40 | const { css } = await less.render(src, { 41 | plugins: [dls({ theme })] 42 | }) 43 | 44 | return css 45 | .replace(new RegExp(`^[\\s\\S]*${SELECTOR}[\\s\\n]*{[\\s\\n]*`), '') 46 | .replace(/}[\n\s]*$/, '') 47 | .split(/;[\n\s]*/) 48 | .filter((v) => v) 49 | .map((decl) => decl.split(/:\s*/)) 50 | } 51 | 52 | function dedupe (arr) { 53 | return Array.from(new Set(arr)) 54 | } 55 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/lib/utils/visitors.js: -------------------------------------------------------------------------------- 1 | import less from 'less' 2 | 3 | export class VariablesOutputVisitor { 4 | constructor() { 5 | this.native = new less.visitors.Visitor(this) 6 | } 7 | 8 | run(root) { 9 | // `-dls` prefixed variables are private 10 | this.variables = Object.keys(root.variables()).filter( 11 | (v) => v.charAt(1) !== '-' 12 | ) 13 | return this.native.visit(root) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "less-plugin-dls", 3 | "version": "11.13.0", 4 | "description": "Less plugin for Baidu Light DLS.", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "prepare": "pnpm build", 8 | "test": "node -r esm test/run.js", 9 | "build": "rollup -c && cp src/index.js dist/index.js && node -r esm scripts/vars.js", 10 | "prepublishOnly": "pnpm test", 11 | "postpublish": "npmmirror-sync less-plugin-dls" 12 | }, 13 | "bin": { 14 | "dls": "bin/dls" 15 | }, 16 | "keywords": [ 17 | "less", 18 | "plugin", 19 | "baidu", 20 | "dls", 21 | "ecosystem:less" 22 | ], 23 | "author": "Justineo (justice360@gmail.com)", 24 | "license": "MIT", 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/ecomfe/light-dls.git" 28 | }, 29 | "dependencies": { 30 | "arg": "^4.1.3", 31 | "dls-color-palette": "^0.1.0", 32 | "esm": "^3.2.25", 33 | "fast-glob": "^3.0.4", 34 | "pkg-dir": "^4.2.0" 35 | }, 36 | "devDependencies": { 37 | "@justineo/npmmirror-sync": "^0.1.0", 38 | "@rollup/plugin-commonjs": "^15.0.0", 39 | "@rollup/plugin-node-resolve": "^9.0.0", 40 | "chalk": "^4.1.2", 41 | "color-converters": "^0.1.1", 42 | "diff": "^4.0.1", 43 | "less": "^4.1.3", 44 | "less3": "npm:less@^3.13.1", 45 | "lodash.camelcase": "^4.3.0", 46 | "lodash.memoize": "^4.1.2", 47 | "postcss": "^8.3.6", 48 | "postcss-values-parser": "^6.0.2", 49 | "reduce-css-calc": "^2.1.6", 50 | "rollup": "^2.26.10", 51 | "strip-css-comments": "^4.0.0" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/rollup.config.js: -------------------------------------------------------------------------------- 1 | import commonjs from '@rollup/plugin-commonjs' 2 | import nodeResolve from '@rollup/plugin-node-resolve' 3 | 4 | const ENTRIES = ['main', 'lib'] 5 | 6 | export default ENTRIES.map((entry) => ({ 7 | input: `src/entries/${entry}.js`, 8 | output: { 9 | file: `dist/${entry}.js`, 10 | format: 'cjs', 11 | exports: 'auto' 12 | }, 13 | external: ['path', 'fs'], 14 | plugins: [nodeResolve(), commonjs()] 15 | })) 16 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/enhancers/index.js: -------------------------------------------------------------------------------- 1 | import reduceCalc from './reduce-calc' 2 | 3 | export default function install(...args) { 4 | ;[reduceCalc].forEach((install) => install.apply(this, args)) 5 | } 6 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/enhancers/reduce-calc.js: -------------------------------------------------------------------------------- 1 | import reduce from 'reduce-css-calc' 2 | import memoize from 'lodash.memoize' 3 | 4 | const reduceMemo = memoize(reduce) 5 | 6 | export default function install(less) { 7 | const { reduceCalc = true } = this.options || {} 8 | 9 | if (reduceCalc) { 10 | // Overriding `Call.prototype.genCSS` 11 | const { genCSS } = less.tree.Call.prototype 12 | less.tree.Call.prototype.genCSS = function (context, output) { 13 | if (this.calc) { 14 | const buffer = [] 15 | const proxy = { 16 | add: (chunk) => buffer.push(chunk), 17 | isEmpty: () => buffer.length === 0 18 | } 19 | genCSS.call(this, context, proxy) 20 | output.add(reduceMemo(buffer.join(''))) 21 | return 22 | } 23 | 24 | genCSS.call(this, context, output) 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/entries/lib.js: -------------------------------------------------------------------------------- 1 | import enhancers from '../enhancers' 2 | import functions from '../functions' 3 | 4 | export default { 5 | install(...args) { 6 | enhancers.apply(this, args) 7 | functions.apply(this, args) 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/entries/main.js: -------------------------------------------------------------------------------- 1 | import inject from '../inject' 2 | import enhancers from '../enhancers' 3 | import functions from '../functions' 4 | 5 | class Plugin { 6 | constructor(options) { 7 | this.options = options 8 | } 9 | 10 | install(...args) { 11 | inject.apply(this, args) 12 | enhancers.apply(this, args) 13 | functions.apply(this, args) 14 | } 15 | } 16 | 17 | export default function dls(options) { 18 | return new Plugin(options) 19 | } 20 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/functions/contextual.js: -------------------------------------------------------------------------------- 1 | import memoize from 'lodash.memoize' 2 | import { rgbToHex } from 'color-converters' 3 | import { getContextual } from 'dls-color-palette' 4 | 5 | const getColorValue = memoize( 6 | (hex, type) => { 7 | return getContextual(hex, type) 8 | }, 9 | (hex, type) => `${hex}#${type}` 10 | ) 11 | 12 | export default function install(less, _, functions) { 13 | functions.add('dls-contextual', (base = {}, type = {}) => { 14 | if ( 15 | !type.value || 16 | ['info', 'success', 'warning', 'error'].indexOf( 17 | type.value.trim().toLowerCase() 18 | ) === -1 19 | ) { 20 | throw new Error( 21 | '`type` must be one of `info`, `success`, `warning` and `error`.' 22 | ) 23 | } 24 | const color = getColorValue(rgbToHex(base.rgb), type.value) 25 | return less.color(color.slice(1)) 26 | }) 27 | } 28 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/functions/even.js: -------------------------------------------------------------------------------- 1 | export default function install(less, _, functions) { 2 | functions.add('dls-even', (dim) => { 3 | return less.dimension(even(dim.value), dim.unit.numerator[0]) 4 | }) 5 | } 6 | 7 | function even(val) { 8 | return Math.round(val / 2) * 2 9 | } 10 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/functions/index.js: -------------------------------------------------------------------------------- 1 | import shade from './shade' 2 | import contextual from './contextual' 3 | import sum from './sum' 4 | import even from './even' 5 | import lineHeight from './line-height' 6 | 7 | export default function install(...args) { 8 | ;[shade, contextual, sum, even, lineHeight].forEach((install) => 9 | install.apply(this, args) 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/functions/line-height.js: -------------------------------------------------------------------------------- 1 | export default function install(less, _, functions) { 2 | functions.add('dls-line-height', (lineHeight, fontSize) => { 3 | if (lineHeight.unit) { 4 | const unit = lineHeight.unit.numerator[0] || '' 5 | if (unit === '') { 6 | // pure number 7 | return less.dimension( 8 | lineHeight.value * fontSize.value, 9 | fontSize.unit.numerator[0] 10 | ) 11 | } 12 | if (unit === '%') { 13 | return less.dimension( 14 | (lineHeight.value / 100) * fontSize.value, 15 | fontSize.unit.numerator[0] 16 | ) 17 | } 18 | return lineHeight 19 | } 20 | return lineHeight 21 | }) 22 | } 23 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/functions/shade.js: -------------------------------------------------------------------------------- 1 | import memoize from 'lodash.memoize' 2 | import { rgbToHex } from 'color-converters' 3 | import { getShade } from 'dls-color-palette' 4 | import { isNumber } from '../utils' 5 | 6 | const getColorValue = memoize( 7 | (hex, level) => { 8 | return getShade(hex, level) 9 | }, 10 | (hex, level) => `${hex}#${level}` 11 | ) 12 | 13 | export default function install(less, _, functions) { 14 | functions.add('dls-shade', (base = {}, level = {}) => { 15 | if (!isNumber(level.value) || level.value < 1 || level.value > 10) { 16 | throw new Error('`level` should be a number that ≥ 1 and ≤ 10.') 17 | } 18 | const color = getColorValue(rgbToHex(base.rgb), level.value) 19 | return less.color(color.slice(1)) 20 | }) 21 | } 22 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/functions/sum.js: -------------------------------------------------------------------------------- 1 | export default function install(less, _, functions) { 2 | functions.add('dls-sum', (...values) => { 3 | const valueDic = values.reduce((acc, value) => { 4 | if (value.calc) { 5 | if (!acc.calc) { 6 | acc.calc = [] 7 | } 8 | acc.calc.push(...value.args) 9 | return acc 10 | } 11 | if (value.unit) { 12 | const unit = value.unit.numerator[0] || '' 13 | if (!acc[unit]) { 14 | acc[unit] = 0 15 | } 16 | acc[unit] += value.value 17 | return acc 18 | } 19 | return acc 20 | }, {}) 21 | 22 | const units = Object.keys(valueDic) 23 | let merged 24 | const nonZero = units.filter( 25 | (unit) => valueDic[unit] !== 0 && unit !== 'calc' 26 | ) 27 | if (nonZero.length === 1) { 28 | // unified units 29 | const unit = nonZero[0] 30 | merged = less.dimension(valueDic[unit], unit) 31 | } else if (nonZero.length === 0) { 32 | // all zero 33 | merged = less.dimension(0) 34 | } else { 35 | // different units 36 | merged = less.call( 37 | 'calc', 38 | [sumExp(nonZero.map((unit) => less.dimension(valueDic[unit], unit)))], 39 | 0, 40 | // eslint-disable-next-line no-undef 41 | typeof fileInfo === 'undefined' ? null : fileInfo 42 | ) 43 | } 44 | 45 | if (!units.includes('calc')) { 46 | return merged 47 | } 48 | 49 | return less.call( 50 | 'calc', 51 | [ 52 | sumExp([ 53 | ...valueDic.calc, 54 | ...(merged.calc ? merged.args : merged.value === 0 ? [] : [merged]) 55 | ]) 56 | ], 57 | 0, 58 | // eslint-disable-next-line no-undef 59 | typeof fileInfo === 'undefined' ? null : fileInfo 60 | ) 61 | }) 62 | 63 | function sumExp(operands) { 64 | if (operands.length < 2) { 65 | return operands 66 | } 67 | if (operands.length === 2) { 68 | return less.operation('+', operands, true) 69 | } 70 | return less.operation( 71 | '+', 72 | [sumExp(operands.slice(0, -1)), operands[operands.length - 1]], 73 | true 74 | ) 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This is required because the entry file is run 3 | * in a sandbox in Less. 4 | */ 5 | module.exports = require('./main') 6 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/inject.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import fs from 'fs' 3 | 4 | const SELF_MODULE_PATH = path.resolve(__dirname, '..') 5 | const ENTRY_LESS = path.resolve(__dirname, '../tokens/index.less') 6 | const THEME_DIR = path.resolve(__dirname, '../tokens/themes') 7 | 8 | class Injector { 9 | constructor ({ theme }) { 10 | this.theme = theme 11 | } 12 | 13 | process(src, extra) { 14 | // Don't inject self 15 | if ( 16 | extra.fileInfo.filename !== 'input' && 17 | path 18 | .resolve(process.cwd(), extra.fileInfo.filename) 19 | .indexOf(SELF_MODULE_PATH) >= 0 20 | ) { 21 | return src 22 | } 23 | 24 | let relative = path.relative( 25 | path.dirname(extra.fileInfo.filename), 26 | ENTRY_LESS 27 | ) 28 | 29 | const themeLess = path.resolve(THEME_DIR, `${this.theme}.less`) 30 | let themeRelative = fs.existsSync(themeLess) ? path.relative( 31 | path.dirname(extra.fileInfo.filename), 32 | themeLess 33 | ) : null 34 | 35 | // less requires relative path to starts with ./ 36 | if (relative.charAt(0) !== '.') { 37 | relative = `./${relative}` 38 | } 39 | if (themeRelative && themeRelative.charAt(0) !== '.') { 40 | themeRelative = `./${themeRelative}` 41 | } 42 | 43 | let injected = `@import "${relative}";\n` 44 | injected += themeRelative ? `@import "${themeRelative}";\n` : '' 45 | 46 | const ignored = extra.imports.contentsIgnoredChars 47 | const fileInfo = extra.fileInfo 48 | ignored[fileInfo.filename] = ignored[fileInfo.filename] || 0 49 | ignored[fileInfo.filename] += injected.length 50 | return injected + src 51 | } 52 | } 53 | 54 | export default function inject(_, pluginManager) { 55 | const { inject = true, theme } = this.options || {} 56 | 57 | if (inject) { 58 | pluginManager.addPreProcessor(new Injector({ theme })) 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/src/utils.js: -------------------------------------------------------------------------------- 1 | export function isNumber(val) { 2 | return typeof val === 'number' || !Number.isNaN(val) 3 | } 4 | 5 | export function isInRanges(h, ranges) { 6 | return ranges.some((range) => { 7 | if (range.length !== 2 || range.some((edge) => !isNumber(edge))) { 8 | return false 9 | } 10 | 11 | const [min, max] = range.sort((a, b) => a - b) 12 | return min <= h && h <= max 13 | }) 14 | } 15 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/accordion/accordion.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-accordion-default-gutter: 16px; 3 | } 4 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/accordion/accordion.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-accordion-default-gutter: @dls-accordion-default-gutter; 3 | } 4 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/ai/ai.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-color-brand: #4d79ff; 3 | -dls-color-brand-0: #fff; 4 | -dls-color-brand-1: #f2f7ff; 5 | -dls-color-brand-2: #e3edff; 6 | -dls-color-brand-3: #c4daff; 7 | -dls-color-brand-4: #99beff; 8 | -dls-color-brand-5: #729cfe; 9 | -dls-color-brand-6: #4d79ff; 10 | -dls-color-brand-7: #3a5bfd; 11 | -dls-color-brand-8: #333fe6; 12 | -dls-color-brand-9: #0f2dbd; 13 | -dls-color-brand-10: #1c244a; 14 | -dls-color-brand-11: #000; 15 | -dls-color-info: #4d79ff; 16 | -dls-color-info-0: #fff; 17 | -dls-color-info-1: #f2f7ff; 18 | -dls-color-info-2: #e3edff; 19 | -dls-color-info-3: #c4daff; 20 | -dls-color-info-4: #99beff; 21 | -dls-color-info-5: #729cfe; 22 | -dls-color-info-6: #4d79ff; 23 | -dls-color-info-7: #3a5bfd; 24 | -dls-color-info-8: #333fe6; 25 | -dls-color-info-9: #0f2dbd; 26 | -dls-color-info-10: #1c244a; 27 | -dls-color-info-11: #000; 28 | -dls-color-success: #3ac222; 29 | -dls-color-warning: #fea800; 30 | -dls-color-error: #f53f3f; 31 | -dls-height-xs: 28px; 32 | -dls-height-s: 32px; 33 | -dls-height-m: 36px; 34 | -dls-height-l: 40px; 35 | -dls-height-xl: 48px; 36 | -dls-border-radius-0: 4px; 37 | -dls-border-radius-1: 6px; 38 | -dls-border-radius-2: 10px; 39 | -dls-border-radius-3: 16px; 40 | -dls-border-radius-4: 26px; 41 | -dls-shadow-color: #0047c2; 42 | -dls-checkbox-border-radius: 4px; 43 | -dls-tag-color-turquoise: #00bbd1; 44 | -dls-tag-color-violet: #824fe7; 45 | -dls-tag-color-green: #3ac222; 46 | } 47 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/ai/ai.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-color-brand: @dls-color-brand; 3 | -dls-color-brand-0: @dls-color-brand-0; 4 | -dls-color-brand-1: @dls-color-brand-1; 5 | -dls-color-brand-2: @dls-color-brand-2; 6 | -dls-color-brand-3: @dls-color-brand-3; 7 | -dls-color-brand-4: @dls-color-brand-4; 8 | -dls-color-brand-5: @dls-color-brand-5; 9 | -dls-color-brand-6: @dls-color-brand-6; 10 | -dls-color-brand-7: @dls-color-brand-7; 11 | -dls-color-brand-8: @dls-color-brand-8; 12 | -dls-color-brand-9: @dls-color-brand-9; 13 | -dls-color-brand-10: @dls-color-brand-10; 14 | -dls-color-brand-11: @dls-color-brand-11; 15 | -dls-color-info: @dls-color-info; 16 | -dls-color-info-0: @dls-color-info-0; 17 | -dls-color-info-1: @dls-color-info-1; 18 | -dls-color-info-2: @dls-color-info-2; 19 | -dls-color-info-3: @dls-color-info-3; 20 | -dls-color-info-4: @dls-color-info-4; 21 | -dls-color-info-5: @dls-color-info-5; 22 | -dls-color-info-6: @dls-color-info-6; 23 | -dls-color-info-7: @dls-color-info-7; 24 | -dls-color-info-8: @dls-color-info-8; 25 | -dls-color-info-9: @dls-color-info-9; 26 | -dls-color-info-10: @dls-color-info-10; 27 | -dls-color-info-11: @dls-color-info-11; 28 | -dls-color-success: @dls-color-success; 29 | -dls-color-warning: @dls-color-warning; 30 | -dls-color-error: @dls-color-error; 31 | -dls-height-xs: @dls-height-xs; 32 | -dls-height-s: @dls-height-s; 33 | -dls-height-m: @dls-height-m; 34 | -dls-height-l: @dls-height-l; 35 | -dls-height-xl: @dls-height-xl; 36 | -dls-border-radius-0: @dls-border-radius-0; 37 | -dls-border-radius-1: @dls-border-radius-1; 38 | -dls-border-radius-2: @dls-border-radius-2; 39 | -dls-border-radius-3: @dls-border-radius-3; 40 | -dls-border-radius-4: @dls-border-radius-4; 41 | -dls-shadow-color: @dls-shadow-color; 42 | -dls-checkbox-border-radius: @dls-checkbox-border-radius; 43 | -dls-tag-color-turquoise: @dls-tag-color-turquoise; 44 | -dls-tag-color-violet: @dls-tag-color-violet; 45 | -dls-tag-color-green: @dls-tag-color-green; 46 | } 47 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/alert/alert.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-alert-font-size-s: 12px; 3 | -dls-alert-font-size-m: 14px; 4 | -dls-alert-border-radius-s: 4px; 5 | -dls-alert-border-radius-m: 4px; 6 | -dls-alert-line-height: 1.6; 7 | -dls-alert-icon-size: calc(1em + 2px); 8 | -dls-alert-icon-size-titled: calc(1em + 2px); 9 | -dls-alert-icon-size-aux: calc(1em + 2px); 10 | -dls-alert-padding-x: 16px; 11 | -dls-alert-padding-y: 4px; 12 | -dls-alert-padding-y-multiline: 8px; 13 | -dls-alert-padding-y-titled: 16px; 14 | -dls-alert-content-spacing-before: 8px; 15 | -dls-alert-content-spacing-after: 16px; 16 | -dls-alert-title-font-size-s: 12px; 17 | -dls-alert-title-font-size-m: 14px; 18 | -dls-alert-title-font-weight: 500; 19 | -dls-alert-title-line-height: 1.4; 20 | -dls-alert-title-spacing-after: 4px; 21 | -dls-alert-font-color: rgba(13, 15, 18, 0.95); 22 | -dls-alert-title-font-color: rgba(13, 15, 18, 0.95); 23 | -dls-alert-background-color-info: #ebf2ff; 24 | -dls-alert-background-color-success: #ebfff3; 25 | -dls-alert-background-color-warning: #fff3eb; 26 | -dls-alert-background-color-error: #ffeceb; 27 | -dls-alert-border-color-info: transparent; 28 | -dls-alert-border-color-success: transparent; 29 | -dls-alert-border-color-warning: transparent; 30 | -dls-alert-border-color-error: transparent; 31 | -dls-alert-icon-color-info: #0054e6; 32 | -dls-alert-icon-color-success: #009940; 33 | -dls-alert-icon-color-warning: #ff9448; 34 | -dls-alert-icon-color-error: #d9150b; 35 | -dls-alert-pages-spacing: 4px; 36 | -dls-alert-pages-font-color: rgba(73, 86, 107, 0.8); 37 | } 38 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/alert/alert.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-alert-font-size-s: @dls-alert-font-size-s; 3 | -dls-alert-font-size-m: @dls-alert-font-size-m; 4 | -dls-alert-border-radius-s: @dls-alert-border-radius-s; 5 | -dls-alert-border-radius-m: @dls-alert-border-radius-m; 6 | -dls-alert-line-height: @dls-alert-line-height; 7 | -dls-alert-icon-size: @dls-alert-icon-size; 8 | -dls-alert-icon-size-titled: @dls-alert-icon-size-titled; 9 | -dls-alert-icon-size-aux: @dls-alert-icon-size-aux; 10 | -dls-alert-padding-x: @dls-alert-padding-x; 11 | -dls-alert-padding-y: @dls-alert-padding-y; 12 | -dls-alert-padding-y-multiline: @dls-alert-padding-y-multiline; 13 | -dls-alert-padding-y-titled: @dls-alert-padding-y-titled; 14 | -dls-alert-content-spacing-before: @dls-alert-content-spacing-before; 15 | -dls-alert-content-spacing-after: @dls-alert-content-spacing-after; 16 | -dls-alert-title-font-size-s: @dls-alert-title-font-size-s; 17 | -dls-alert-title-font-size-m: @dls-alert-title-font-size-m; 18 | -dls-alert-title-font-weight: @dls-alert-title-font-weight; 19 | -dls-alert-title-line-height: @dls-alert-title-line-height; 20 | -dls-alert-title-spacing-after: @dls-alert-title-spacing-after; 21 | -dls-alert-font-color: @dls-alert-font-color; 22 | -dls-alert-title-font-color: @dls-alert-title-font-color; 23 | -dls-alert-background-color-info: @dls-alert-background-color-info; 24 | -dls-alert-background-color-success: @dls-alert-background-color-success; 25 | -dls-alert-background-color-warning: @dls-alert-background-color-warning; 26 | -dls-alert-background-color-error: @dls-alert-background-color-error; 27 | -dls-alert-border-color-info: @dls-alert-border-color-info; 28 | -dls-alert-border-color-success: @dls-alert-border-color-success; 29 | -dls-alert-border-color-warning: @dls-alert-border-color-warning; 30 | -dls-alert-border-color-error: @dls-alert-border-color-error; 31 | -dls-alert-icon-color-info: @dls-alert-icon-color-info; 32 | -dls-alert-icon-color-success: @dls-alert-icon-color-success; 33 | -dls-alert-icon-color-warning: @dls-alert-icon-color-warning; 34 | -dls-alert-icon-color-error: @dls-alert-icon-color-error; 35 | -dls-alert-pages-spacing: @dls-alert-pages-spacing; 36 | -dls-alert-pages-font-color: @dls-alert-pages-font-color; 37 | } 38 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/anchor/anchor.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-anchor-padding-x: 16px; 3 | -dls-anchor-item-spacing: 12px; 4 | -dls-anchor-level-indent: 16px; 5 | -dls-anchor-track-color: #e2e6f0; 6 | -dls-anchor-track-width: 1px; 7 | -dls-anchor-indicator-width: 2px; 8 | -dls-anchor-indicator-color: #0054e6; 9 | -dls-anchor-indicator-color-hover: #1a6eff; 10 | -dls-anchor-indicator-color-focus: #1a6eff; 11 | -dls-anchor-indicator-color-active: #0047c4; 12 | } 13 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/anchor/anchor.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-anchor-padding-x: @dls-anchor-padding-x; 3 | -dls-anchor-item-spacing: @dls-anchor-item-spacing; 4 | -dls-anchor-level-indent: @dls-anchor-level-indent; 5 | -dls-anchor-track-color: @dls-anchor-track-color; 6 | -dls-anchor-track-width: @dls-anchor-track-width; 7 | -dls-anchor-indicator-width: @dls-anchor-indicator-width; 8 | -dls-anchor-indicator-color: @dls-anchor-indicator-color; 9 | -dls-anchor-indicator-color-hover: @dls-anchor-indicator-color-hover; 10 | -dls-anchor-indicator-color-focus: @dls-anchor-indicator-color-focus; 11 | -dls-anchor-indicator-color-active: @dls-anchor-indicator-color-active; 12 | } 13 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/badge/badge.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-badge-font-size: 12px; 3 | -dls-badge-dot-size: 8px; 4 | -dls-badge-label-height: 16px; 5 | -dls-badge-label-min-width: 16px; 6 | -dls-badge-label-padding-x: 4px; 7 | -dls-badge-label-spacing-status: 8px; 8 | -dls-badge-background-color-info: #0054e6; 9 | -dls-badge-background-color-success: #009940; 10 | -dls-badge-background-color-warning: #ff9448; 11 | -dls-badge-background-color-error: #d9150b; 12 | -dls-badge-background-color-aux: #a8b0bf; 13 | -dls-badge-font-color: #fff; 14 | } 15 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/badge/badge.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-badge-font-size: @dls-badge-font-size; 3 | -dls-badge-dot-size: @dls-badge-dot-size; 4 | -dls-badge-label-height: @dls-badge-label-height; 5 | -dls-badge-label-min-width: @dls-badge-label-min-width; 6 | -dls-badge-label-padding-x: @dls-badge-label-padding-x; 7 | -dls-badge-label-spacing-status: @dls-badge-label-spacing-status; 8 | -dls-badge-background-color-info: @dls-badge-background-color-info; 9 | -dls-badge-background-color-success: @dls-badge-background-color-success; 10 | -dls-badge-background-color-warning: @dls-badge-background-color-warning; 11 | -dls-badge-background-color-error: @dls-badge-background-color-error; 12 | -dls-badge-background-color-aux: @dls-badge-background-color-aux; 13 | -dls-badge-font-color: @dls-badge-font-color; 14 | } 15 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/breadcrumb/breadcrumb.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-breadcrumb-font-size-s: 12px; 3 | -dls-breadcrumb-font-size-m: 14px; 4 | -dls-breadcrumb-separator-icon-size: calc(1em + 2px); 5 | -dls-breadcrumb-separator-color: rgba(73, 86, 107, 0.8); 6 | -dls-breadcrumb-separator-spacing: 8px; 7 | -dls-breadcrumb-item-current-font-color: rgba(13, 15, 18, 0.95); 8 | -dls-breadcrumb-item-current-font-weight: 500; 9 | } 10 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/breadcrumb/breadcrumb.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-breadcrumb-font-size-s: @dls-breadcrumb-font-size-s; 3 | -dls-breadcrumb-font-size-m: @dls-breadcrumb-font-size-m; 4 | -dls-breadcrumb-separator-icon-size: @dls-breadcrumb-separator-icon-size; 5 | -dls-breadcrumb-separator-color: @dls-breadcrumb-separator-color; 6 | -dls-breadcrumb-separator-spacing: @dls-breadcrumb-separator-spacing; 7 | -dls-breadcrumb-item-current-font-color: @dls-breadcrumb-item-current-font-color; 8 | -dls-breadcrumb-item-current-font-weight: @dls-breadcrumb-item-current-font-weight; 9 | } 10 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/carousel/carousel.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-carousel-indicator-width: 12px; 3 | -dls-carousel-indicator-width-current: 36px; 4 | -dls-carousel-indicator-height: 3px; 5 | -dls-carousel-indicator-dot-size: 6px; 6 | -dls-carousel-indicator-border-radius: 1.5px; 7 | -dls-carousel-indicator-spacing-outer: 12px; 8 | -dls-carousel-indicator-spacing-inner: 4px; 9 | -dls-carousel-indicator-background-color: rgba(255, 255, 255, 0.3); 10 | -dls-carousel-indicator-background-color-hover: rgba(255, 255, 255, 0.4); 11 | -dls-carousel-indicator-background-color-active: #fff; 12 | -dls-carousel-indicator-background-color-current: #fff; 13 | -dls-carousel-indicator-background-color-outside: #ebedf5; 14 | -dls-carousel-indicator-background-color-outside-hover: #e2e6f0; 15 | -dls-carousel-indicator-background-color-outside-active: #d3d9e6; 16 | -dls-carousel-indicator-background-color-outside-current: #0054e6; 17 | -dls-carousel-control-size: 32px; 18 | -dls-carousel-control-border-radius: 50%; 19 | -dls-carousel-control-shadow: 0 6px 28px 2px rgba(0, 0, 0, 0.04), 0 4px 26px 2px rgba(0, 0, 0, 0.03), 0 2px 24px 1px rgba(0, 0, 0, 0.02); 20 | -dls-carousel-control-icon-size: 16px; 21 | -dls-carousel-control-spacing-inside: 24px; 22 | -dls-carousel-control-spacing-outside: 16px; 23 | -dls-carousel-pages-height: 20px; 24 | -dls-carousel-pages-font-size: 12px; 25 | -dls-carousel-pages-font-color: #fff; 26 | -dls-carousel-pages-background-color: rgba(0, 0, 0, 0.6); 27 | -dls-carousel-pages-padding-x: 4px; 28 | -dls-carousel-pages-border-radius: 4px; 29 | -dls-carousel-slide-gutter: 12px; 30 | } 31 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/carousel/carousel.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-carousel-indicator-width: @dls-carousel-indicator-width; 3 | -dls-carousel-indicator-width-current: @dls-carousel-indicator-width-current; 4 | -dls-carousel-indicator-height: @dls-carousel-indicator-height; 5 | -dls-carousel-indicator-dot-size: @dls-carousel-indicator-dot-size; 6 | -dls-carousel-indicator-border-radius: @dls-carousel-indicator-border-radius; 7 | -dls-carousel-indicator-spacing-outer: @dls-carousel-indicator-spacing-outer; 8 | -dls-carousel-indicator-spacing-inner: @dls-carousel-indicator-spacing-inner; 9 | -dls-carousel-indicator-background-color: @dls-carousel-indicator-background-color; 10 | -dls-carousel-indicator-background-color-hover: @dls-carousel-indicator-background-color-hover; 11 | -dls-carousel-indicator-background-color-active: @dls-carousel-indicator-background-color-active; 12 | -dls-carousel-indicator-background-color-current: @dls-carousel-indicator-background-color-current; 13 | -dls-carousel-indicator-background-color-outside: @dls-carousel-indicator-background-color-outside; 14 | -dls-carousel-indicator-background-color-outside-hover: @dls-carousel-indicator-background-color-outside-hover; 15 | -dls-carousel-indicator-background-color-outside-active: @dls-carousel-indicator-background-color-outside-active; 16 | -dls-carousel-indicator-background-color-outside-current: @dls-carousel-indicator-background-color-outside-current; 17 | -dls-carousel-control-size: @dls-carousel-control-size; 18 | -dls-carousel-control-border-radius: @dls-carousel-control-border-radius; 19 | -dls-carousel-control-shadow: @dls-carousel-control-shadow; 20 | -dls-carousel-control-icon-size: @dls-carousel-control-icon-size; 21 | -dls-carousel-control-spacing-inside: @dls-carousel-control-spacing-inside; 22 | -dls-carousel-control-spacing-outside: @dls-carousel-control-spacing-outside; 23 | -dls-carousel-pages-height: @dls-carousel-pages-height; 24 | -dls-carousel-pages-font-size: @dls-carousel-pages-font-size; 25 | -dls-carousel-pages-font-color: @dls-carousel-pages-font-color; 26 | -dls-carousel-pages-background-color: @dls-carousel-pages-background-color; 27 | -dls-carousel-pages-padding-x: @dls-carousel-pages-padding-x; 28 | -dls-carousel-pages-border-radius: @dls-carousel-pages-border-radius; 29 | -dls-carousel-slide-gutter: @dls-carousel-slide-gutter; 30 | } 31 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/cascader/cascader.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-cascader-column-min-width: 120px; 3 | -dls-cascader-option-padding-xs: 12px; 4 | -dls-cascader-option-padding-s: 12px; 5 | -dls-cascader-option-padding-m: 12px; 6 | -dls-cascader-option-padding-l: 12px; 7 | -dls-cascader-header-padding-y: 8px; 8 | -dls-cascader-footer-padding-y: 8px; 9 | } 10 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/cascader/cascader.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-cascader-column-min-width: @dls-cascader-column-min-width; 3 | -dls-cascader-option-padding-xs: @dls-cascader-option-padding-xs; 4 | -dls-cascader-option-padding-s: @dls-cascader-option-padding-s; 5 | -dls-cascader-option-padding-m: @dls-cascader-option-padding-m; 6 | -dls-cascader-option-padding-l: @dls-cascader-option-padding-l; 7 | -dls-cascader-header-padding-y: @dls-cascader-header-padding-y; 8 | -dls-cascader-footer-padding-y: @dls-cascader-footer-padding-y; 9 | } 10 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/checkbox/checkbox.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-checkbox-font-size-s: 12px; 3 | -dls-checkbox-font-size-m: 14px; 4 | -dls-checkbox-font-color: rgba(13, 15, 18, 0.95); 5 | -dls-checkbox-font-color-disabled: rgba(83, 101, 138, 0.5); 6 | -dls-checkbox-size-s: 14px; 7 | -dls-checkbox-size-m: 16px; 8 | -dls-checkbox-icon-min-size: 8px; 9 | -dls-checkbox-icon-size: 1em; 10 | -dls-checkbox-border-radius: 4px; 11 | -dls-checkbox-spacing: 8px; 12 | -dls-checkbox-border-color: #d3d9e6; 13 | -dls-checkbox-border-color-hover: #a8b0bf; 14 | -dls-checkbox-border-color-focus: #0054e6; 15 | -dls-checkbox-border-color-active: #a8b0bf; 16 | -dls-checkbox-border-color-disabled: #e2e6f0; 17 | -dls-checkbox-border-color-checked: transparent; 18 | -dls-checkbox-border-color-checked-hover: transparent; 19 | -dls-checkbox-border-color-checked-focus: #0054e6; 20 | -dls-checkbox-border-color-checked-active: transparent; 21 | -dls-checkbox-border-color-checked-disabled: transparent; 22 | -dls-checkbox-background-color: #fff; 23 | -dls-checkbox-background-color-hover: #ebedf5; 24 | -dls-checkbox-background-color-focus: #ebedf5; 25 | -dls-checkbox-background-color-active: #d3d9e6; 26 | -dls-checkbox-background-color-disabled: #f6f7fa; 27 | -dls-checkbox-background-color-checked: #0054e6; 28 | -dls-checkbox-background-color-checked-hover: #1a6eff; 29 | -dls-checkbox-background-color-checked-focus: #1a6eff; 30 | -dls-checkbox-background-color-checked-active: #0047c4; 31 | -dls-checkbox-background-color-checked-disabled: #dce9ff; 32 | -dls-checkbox-foreground-color: #fff; 33 | -dls-checkbox-foreground-color-hover: #fff; 34 | -dls-checkbox-foreground-color-focus: #fff; 35 | -dls-checkbox-foreground-color-active: #fff; 36 | -dls-checkbox-foreground-color-disabled: #fff; 37 | -dls-checkbox-shadow-focus: 0 0 0 2px rgba(26, 110, 255, 0.2); 38 | -dls-checkbox-group-spacing: 24px; 39 | -dls-checkbox-group-spacing-simple: 8px; 40 | -dls-checkbox-group-line-spacing: 8px; 41 | -dls-checkbox-icon-size-strong: 6px; 42 | -dls-checkbox-icon-spacing-strong: 3px; 43 | -dls-checkbox-icon-color-strong: #d3d9e6; 44 | -dls-checkbox-icon-color-strong-disabled: #e2e6f0; 45 | -dls-checkbox-icon-color-strong-checked: #0054e6; 46 | -dls-checkbox-icon-color-strong-checked-disabled: #bfd7ff; 47 | } 48 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/collapse/collapse.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-collapse-header-padding-x: 16px; 3 | -dls-collapse-header-padding-y: 16px; 4 | -dls-collapse-header-content-spacing: 8px; 5 | -dls-collapse-header-font-size-s: 12px; 6 | -dls-collapse-header-font-size-m: 14px; 7 | -dls-collapse-header-line-height: 1.4; 8 | -dls-collapse-body-padding-x: 16px; 9 | -dls-collapse-body-padding-y: 16px; 10 | -dls-collapse-body-font-size-s: 12px; 11 | -dls-collapse-body-font-size-m: 14px; 12 | -dls-collapse-body-line-height: 1.6; 13 | -dls-collapse-border-radius-s: 4px; 14 | -dls-collapse-border-radius-m: 4px; 15 | -dls-collapse-icon-size-aux: calc(1em + 2px); 16 | -dls-collapse-border-color: #e2e6f0; 17 | -dls-collapse-header-font-color: rgba(13, 15, 18, 0.95); 18 | -dls-collapse-header-font-color-disabled: rgba(83, 101, 138, 0.5); 19 | -dls-collapse-header-background-color: #f6f7fa; 20 | -dls-collapse-header-background-color-hover: #ebedf5; 21 | -dls-collapse-header-background-color-active: #e2e6f0; 22 | -dls-collapse-header-background-color-disabled: #f6f7fa; 23 | -dls-collapse-body-font-color: rgba(46, 52, 64, 0.9); 24 | -dls-collapse-body-background-color: #fff; 25 | -dls-collapse-icon-color-aux: rgba(73, 86, 107, 0.8); 26 | -dls-collapse-icon-color-aux-disabled: rgba(83, 101, 138, 0.5); 27 | -dls-collapse-header-background-color-simple: transparent; 28 | -dls-collapse-header-background-color-simple-hover: transparent; 29 | -dls-collapse-header-background-color-simple-active: transparent; 30 | -dls-collapse-header-background-color-simple-disabled: transparent; 31 | -dls-collapse-body-background-color-simple: transparent; 32 | -dls-collapse-header-background-color-basic: #fff; 33 | -dls-collapse-header-background-color-basic-hover: #f6f7fa; 34 | -dls-collapse-header-background-color-basic-active: #e2e6f0; 35 | -dls-collapse-header-background-color-basic-disabled: #fff; 36 | -dls-collapse-body-background-color-basic: #fff; 37 | -dls-collapse-header-background-color-strong: #f6f7fa; 38 | -dls-collapse-header-background-color-strong-hover: #ebedf5; 39 | -dls-collapse-header-background-color-strong-active: #e2e6f0; 40 | -dls-collapse-header-background-color-strong-disabled: #f6f7fa; 41 | -dls-collapse-body-background-color-strong: #f6f7fa; 42 | -dls-collapse-header-border-color-focus: #0054e6; 43 | -dls-collapse-header-shadow-focus: 0 0 0 2px rgba(26, 110, 255, 0.2); 44 | } 45 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/dialog/dialog.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-dialog-width-wide: 800px; 3 | -dls-dialog-width-medium: 600px; 4 | -dls-dialog-width-narrow: 400px; 5 | -dls-dialog-width-contextual: 400px; 6 | -dls-dialog-border-radius: 4px; 7 | -dls-dialog-spacing-y: 20px; 8 | -dls-dialog-max-height: calc(100vh - 40px); 9 | -dls-dialog-padding-x: 24px; 10 | -dls-dialog-padding-y: 24px; 11 | -dls-dialog-title-content-spacing: 16px; 12 | -dls-dialog-title-spacing-after: 12px; 13 | -dls-dialog-action-spacing-before: 20px; 14 | -dls-dialog-action-content-spacing: 12px; 15 | -dls-dialog-title-spacing-after-contextual: 4px; 16 | -dls-dialog-icon-spacing-contextual: 12px; 17 | -dls-dialog-icon-size-contextual: calc(1em + 2px); 18 | -dls-dialog-title-line-height: 1.4; 19 | -dls-dialog-body-line-height: 1.8; 20 | -dls-dialog-title-font-size-s: 16px; 21 | -dls-dialog-title-font-size-m: 18px; 22 | -dls-dialog-body-font-size-s: 12px; 23 | -dls-dialog-body-font-size-m: 14px; 24 | -dls-dialog-title-font-weight: 500; 25 | -dls-dialog-title-font-color: rgba(13, 15, 18, 0.95); 26 | -dls-dialog-body-font-color: rgba(13, 15, 18, 0.95); 27 | -dls-dialog-close-icon-size: calc(1em + 2px); 28 | -dls-dialog-close-icon-size-fullscreen: calc(1em + 2px); 29 | -dls-dialog-close-icon-min-size: 10px; 30 | -dls-dialog-icon-color-info: #0054e6; 31 | -dls-dialog-icon-color-success: #009940; 32 | -dls-dialog-icon-color-warning: #ff9448; 33 | -dls-dialog-icon-color-error: #d9150b; 34 | -dls-dialog-background-color: #fff; 35 | -dls-dialog-backdrop-color: rgba(0, 0, 0, 0.6); 36 | -dls-dialog-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 37 | } 38 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/dialog/dialog.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-dialog-width-wide: @dls-dialog-width-wide; 3 | -dls-dialog-width-medium: @dls-dialog-width-medium; 4 | -dls-dialog-width-narrow: @dls-dialog-width-narrow; 5 | -dls-dialog-width-contextual: @dls-dialog-width-contextual; 6 | -dls-dialog-border-radius: @dls-dialog-border-radius; 7 | -dls-dialog-spacing-y: @dls-dialog-spacing-y; 8 | -dls-dialog-max-height: @dls-dialog-max-height; 9 | -dls-dialog-padding-x: @dls-dialog-padding-x; 10 | -dls-dialog-padding-y: @dls-dialog-padding-y; 11 | -dls-dialog-title-content-spacing: @dls-dialog-title-content-spacing; 12 | -dls-dialog-title-spacing-after: @dls-dialog-title-spacing-after; 13 | -dls-dialog-action-spacing-before: @dls-dialog-action-spacing-before; 14 | -dls-dialog-action-content-spacing: @dls-dialog-action-content-spacing; 15 | -dls-dialog-title-spacing-after-contextual: @dls-dialog-title-spacing-after-contextual; 16 | -dls-dialog-icon-spacing-contextual: @dls-dialog-icon-spacing-contextual; 17 | -dls-dialog-icon-size-contextual: @dls-dialog-icon-size-contextual; 18 | -dls-dialog-title-line-height: @dls-dialog-title-line-height; 19 | -dls-dialog-body-line-height: @dls-dialog-body-line-height; 20 | -dls-dialog-title-font-size-s: @dls-dialog-title-font-size-s; 21 | -dls-dialog-title-font-size-m: @dls-dialog-title-font-size-m; 22 | -dls-dialog-body-font-size-s: @dls-dialog-body-font-size-s; 23 | -dls-dialog-body-font-size-m: @dls-dialog-body-font-size-m; 24 | -dls-dialog-title-font-weight: @dls-dialog-title-font-weight; 25 | -dls-dialog-title-font-color: @dls-dialog-title-font-color; 26 | -dls-dialog-body-font-color: @dls-dialog-body-font-color; 27 | -dls-dialog-close-icon-size: @dls-dialog-close-icon-size; 28 | -dls-dialog-close-icon-size-fullscreen: @dls-dialog-close-icon-size-fullscreen; 29 | -dls-dialog-close-icon-min-size: @dls-dialog-close-icon-min-size; 30 | -dls-dialog-icon-color-info: @dls-dialog-icon-color-info; 31 | -dls-dialog-icon-color-success: @dls-dialog-icon-color-success; 32 | -dls-dialog-icon-color-warning: @dls-dialog-icon-color-warning; 33 | -dls-dialog-icon-color-error: @dls-dialog-icon-color-error; 34 | -dls-dialog-background-color: @dls-dialog-background-color; 35 | -dls-dialog-backdrop-color: @dls-dialog-backdrop-color; 36 | -dls-dialog-shadow: @dls-dialog-shadow; 37 | } 38 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/drawer/drawer.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-drawer-width: 800px; 3 | -dls-drawer-level-indent: 60px; 4 | -dls-drawer-shadow-top: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 5 | -dls-drawer-shadow-right: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 6 | -dls-drawer-shadow-bottom: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 7 | -dls-drawer-shadow-left: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 8 | -dls-drawer-title-font-size-s: 16px; 9 | -dls-drawer-title-font-size-m: 18px; 10 | -dls-drawer-close-icon-size: calc(1em + 2px); 11 | } 12 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/drawer/drawer.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-drawer-width: @dls-drawer-width; 3 | -dls-drawer-level-indent: @dls-drawer-level-indent; 4 | -dls-drawer-shadow-top: @dls-drawer-shadow-top; 5 | -dls-drawer-shadow-right: @dls-drawer-shadow-right; 6 | -dls-drawer-shadow-bottom: @dls-drawer-shadow-bottom; 7 | -dls-drawer-shadow-left: @dls-drawer-shadow-left; 8 | -dls-drawer-title-font-size-s: @dls-drawer-title-font-size-s; 9 | -dls-drawer-title-font-size-m: @dls-drawer-title-font-size-m; 10 | -dls-drawer-close-icon-size: @dls-drawer-close-icon-size; 11 | } 12 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/dropdown/dropdown.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-dropdown-icon-size-aux: calc(1em + 2px); 3 | -dls-dropdown-icon-spacing-aux: 8px; 4 | -dls-dropdown-split-button-padding-x: 12px; 5 | -dls-dropdown-icon-color-aux-normal: rgba(73, 86, 107, 0.8); 6 | -dls-dropdown-icon-color-aux-normal-disabled: rgba(83, 101, 138, 0.5); 7 | -dls-dropdown-icon-color-aux-primary: currentColor; 8 | -dls-dropdown-icon-color-aux-primary-disabled: currentColor; 9 | -dls-dropdown-max-display-items: 8; 10 | -dls-dropdown-menu-max-height-xs: calc(24px * var(--dls-dropdown-max-display-items, 8) + 8px); 11 | -dls-dropdown-menu-max-height-s: calc(28px * var(--dls-dropdown-max-display-items, 8) + 8px); 12 | -dls-dropdown-menu-max-height-m: calc(32px * var(--dls-dropdown-max-display-items, 8) + 8px); 13 | -dls-dropdown-menu-max-height-l: calc(36px * var(--dls-dropdown-max-display-items, 8) + 8px); 14 | -dls-dropdown-menu-border-radius-xs: 4px; 15 | -dls-dropdown-menu-border-radius-s: 4px; 16 | -dls-dropdown-menu-border-radius-m: 4px; 17 | -dls-dropdown-menu-border-radius-l: 4px; 18 | -dls-dropdown-menu-target-spacing: 4px; 19 | -dls-dropdown-menu-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 20 | -dls-dropdown-menu-placeholder-padding-y: 8px; 21 | -dls-dropdown-menu-placeholder-font-color: rgba(73, 86, 107, 0.8); 22 | } 23 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/dropdown/dropdown.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-dropdown-icon-size-aux: @dls-dropdown-icon-size-aux; 3 | -dls-dropdown-icon-spacing-aux: @dls-dropdown-icon-spacing-aux; 4 | -dls-dropdown-split-button-padding-x: @dls-dropdown-split-button-padding-x; 5 | -dls-dropdown-icon-color-aux-normal: @dls-dropdown-icon-color-aux-normal; 6 | -dls-dropdown-icon-color-aux-normal-disabled: @dls-dropdown-icon-color-aux-normal-disabled; 7 | -dls-dropdown-icon-color-aux-primary: @dls-dropdown-icon-color-aux-primary; 8 | -dls-dropdown-icon-color-aux-primary-disabled: @dls-dropdown-icon-color-aux-primary-disabled; 9 | -dls-dropdown-max-display-items: @dls-dropdown-max-display-items; 10 | -dls-dropdown-menu-max-height-xs: @dls-dropdown-menu-max-height-xs; 11 | -dls-dropdown-menu-max-height-s: @dls-dropdown-menu-max-height-s; 12 | -dls-dropdown-menu-max-height-m: @dls-dropdown-menu-max-height-m; 13 | -dls-dropdown-menu-max-height-l: @dls-dropdown-menu-max-height-l; 14 | -dls-dropdown-menu-border-radius-xs: @dls-dropdown-menu-border-radius-xs; 15 | -dls-dropdown-menu-border-radius-s: @dls-dropdown-menu-border-radius-s; 16 | -dls-dropdown-menu-border-radius-m: @dls-dropdown-menu-border-radius-m; 17 | -dls-dropdown-menu-border-radius-l: @dls-dropdown-menu-border-radius-l; 18 | -dls-dropdown-menu-target-spacing: @dls-dropdown-menu-target-spacing; 19 | -dls-dropdown-menu-shadow: @dls-dropdown-menu-shadow; 20 | -dls-dropdown-menu-placeholder-padding-y: @dls-dropdown-menu-placeholder-padding-y; 21 | -dls-dropdown-menu-placeholder-font-color: @dls-dropdown-menu-placeholder-font-color; 22 | } 23 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/embedded/embedded.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-embedded-title-font-size-s: 16px; 3 | -dls-embedded-title-font-size-m: 18px; 4 | -dls-embedded-close-icon-size: calc(1em + 2px); 5 | -dls-embedded-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 6 | -dls-embedded-border-color: #e2e6f0; 7 | } 8 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/embedded/embedded.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-embedded-title-font-size-s: @dls-embedded-title-font-size-s; 3 | -dls-embedded-title-font-size-m: @dls-embedded-title-font-size-m; 4 | -dls-embedded-close-icon-size: @dls-embedded-close-icon-size; 5 | -dls-embedded-shadow: @dls-embedded-shadow; 6 | -dls-embedded-border-color: @dls-embedded-border-color; 7 | } 8 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/empty/empty.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-empty-max-width-s: 240px; 3 | -dls-empty-max-width-m: 320px; 4 | -dls-empty-image-max-height-s: 48px; 5 | -dls-empty-image-max-height-m: none; 6 | -dls-empty-title-font-size-s: 12px; 7 | -dls-empty-title-font-size-m: 14px; 8 | -dls-empty-title-line-height: 1.4; 9 | -dls-empty-title-font-color: rgba(13, 15, 18, 0.95); 10 | -dls-empty-title-font-weight: 500; 11 | -dls-empty-desc-font-size-s: 12px; 12 | -dls-empty-desc-font-size-m: 14px; 13 | -dls-empty-desc-line-height: 1.4; 14 | -dls-empty-desc-font-color: rgba(46, 52, 64, 0.9); 15 | -dls-empty-desc-font-weight: 400; 16 | -dls-empty-content-spacing: 8px; 17 | -dls-empty-actions-spacing-before: 16px; 18 | -dls-empty-actions-content-spacing: 8px; 19 | } 20 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/empty/empty.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-empty-max-width-s: @dls-empty-max-width-s; 3 | -dls-empty-max-width-m: @dls-empty-max-width-m; 4 | -dls-empty-image-max-height-s: @dls-empty-image-max-height-s; 5 | -dls-empty-image-max-height-m: @dls-empty-image-max-height-m; 6 | -dls-empty-title-font-size-s: @dls-empty-title-font-size-s; 7 | -dls-empty-title-font-size-m: @dls-empty-title-font-size-m; 8 | -dls-empty-title-line-height: @dls-empty-title-line-height; 9 | -dls-empty-title-font-color: @dls-empty-title-font-color; 10 | -dls-empty-title-font-weight: @dls-empty-title-font-weight; 11 | -dls-empty-desc-font-size-s: @dls-empty-desc-font-size-s; 12 | -dls-empty-desc-font-size-m: @dls-empty-desc-font-size-m; 13 | -dls-empty-desc-line-height: @dls-empty-desc-line-height; 14 | -dls-empty-desc-font-color: @dls-empty-desc-font-color; 15 | -dls-empty-desc-font-weight: @dls-empty-desc-font-weight; 16 | -dls-empty-content-spacing: @dls-empty-content-spacing; 17 | -dls-empty-actions-spacing-before: @dls-empty-actions-spacing-before; 18 | -dls-empty-actions-content-spacing: @dls-empty-actions-content-spacing; 19 | } 20 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/form/form.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-form-label-spacing-after-horizontal: 24px; 3 | -dls-form-label-spacing-after-vertical: 8px; 4 | -dls-form-label-content-spacing: 4px; 5 | -dls-form-label-width: 7em; 6 | -dls-form-label-font-color: rgba(13, 15, 18, 0.95); 7 | -dls-form-label-icon-color: rgba(73, 86, 107, 0.8); 8 | -dls-form-label-required-color: #d9150b; 9 | -dls-form-field-spacing-vertical: 24px; 10 | -dls-form-field-error-font-color: #d9150b; 11 | -dls-form-field-error-spacing-before-vertical: 4px; 12 | -dls-form-actions-spacing-before: 40px; 13 | -dls-form-actions-content-spacing: 20px; 14 | -dls-form-field-help-spacing: 8px; 15 | } 16 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/form/form.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-form-label-spacing-after-horizontal: @dls-form-label-spacing-after-horizontal; 3 | -dls-form-label-spacing-after-vertical: @dls-form-label-spacing-after-vertical; 4 | -dls-form-label-content-spacing: @dls-form-label-content-spacing; 5 | -dls-form-label-width: @dls-form-label-width; 6 | -dls-form-label-font-color: @dls-form-label-font-color; 7 | -dls-form-label-icon-color: @dls-form-label-icon-color; 8 | -dls-form-label-required-color: @dls-form-label-required-color; 9 | -dls-form-field-spacing-vertical: @dls-form-field-spacing-vertical; 10 | -dls-form-field-error-font-color: @dls-form-field-error-font-color; 11 | -dls-form-field-error-spacing-before-vertical: @dls-form-field-error-spacing-before-vertical; 12 | -dls-form-actions-spacing-before: @dls-form-actions-spacing-before; 13 | -dls-form-actions-content-spacing: @dls-form-actions-content-spacing; 14 | -dls-form-field-help-spacing: @dls-form-field-help-spacing; 15 | } 16 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/functions/even.css: -------------------------------------------------------------------------------- 1 | div { 2 | -v1: 2px; 3 | -v2: 120%; 4 | -v3: 2em; 5 | -v4: 2; 6 | -v5: 2; 7 | -v7: 2; 8 | } 9 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/functions/even.less: -------------------------------------------------------------------------------- 1 | div { 2 | -v1: dls-even(1.5px); 3 | -v2: dls-even(120%); 4 | -v3: dls-even(2em); 5 | -v4: dls-even(1.4); 6 | -v5: dls-even(1); 7 | -v7: dls-even(2); 8 | } 9 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/functions/line-height.css: -------------------------------------------------------------------------------- 1 | div { 2 | -v1: 24px; 3 | -v2: 18px; 4 | -v3: 2em; 5 | -v4: 19.6px; 6 | } 7 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/functions/line-height.less: -------------------------------------------------------------------------------- 1 | div { 2 | -v1: dls-line-height(1.5, 16px); 3 | -v2: dls-line-height(120%, 15px); 4 | -v3: dls-line-height(2em, 1.2em); 5 | -v4: dls-line-height(1.4, 14px); 6 | } 7 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/functions/sum.css: -------------------------------------------------------------------------------- 1 | div { 2 | -v1: 1px; 3 | -v2: 3px; 4 | -v3: 0; 5 | -v4: calc(1px + 2em); 6 | -v5: 2em; 7 | -v6: calc(2px + 1em); 8 | -v7: calc(1px + 1em); 9 | -v8: calc(3px + 1em); 10 | -v9: calc(3px + 2em); 11 | } 12 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/functions/sum.less: -------------------------------------------------------------------------------- 1 | div { 2 | -v1: dls-sum(1px); 3 | -v2: dls-sum(1px, 2px); 4 | -v3: dls-sum(1px, 2px, -3px); 5 | -v4: dls-sum(1px, 2em); 6 | -v5: dls-sum(1px, 2em, -1px); 7 | -v6: dls-sum(1px, calc(1px + 1em)); 8 | -v7: dls-sum(1px, calc(1px + 1em), -1px); 9 | -v8: dls-sum(1px, calc(1px + 1em), 1px); 10 | -v9: dls-sum(1px, calc(1px + 1em), calc(1px + 1em)); 11 | } 12 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/input/input.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-input-font-size-xs: 12px; 3 | -dls-input-font-size-s: 12px; 4 | -dls-input-font-size-m: 14px; 5 | -dls-input-font-size-l: 16px; 6 | -dls-input-height-xs: 24px; 7 | -dls-input-height-s: 28px; 8 | -dls-input-height-m: 32px; 9 | -dls-input-height-l: 36px; 10 | -dls-input-width: 300px; 11 | -dls-input-border-radius-xs: 4px; 12 | -dls-input-border-radius-s: 4px; 13 | -dls-input-border-radius-m: 4px; 14 | -dls-input-border-radius-l: 4px; 15 | -dls-input-padding: 12px; 16 | -dls-input-content-spacing: 8px; 17 | -dls-input-border-color: #d3d9e6; 18 | -dls-input-border-color-hover: #a8b0bf; 19 | -dls-input-border-color-focus: #0054e6; 20 | -dls-input-border-color-error: #d9150b; 21 | -dls-input-border-color-error-hover: #d9150b; 22 | -dls-input-border-color-error-focus: #d9150b; 23 | -dls-input-border-color-read-only: #d3d9e6; 24 | -dls-input-border-color-read-only-hover: #a8b0bf; 25 | -dls-input-border-color-read-only-focus: #0054e6; 26 | -dls-input-border-color-disabled: #e2e6f0; 27 | -dls-input-background-color: #fff; 28 | -dls-input-background-color-read-only: #f6f7fa; 29 | -dls-input-background-color-disabled: #f6f7fa; 30 | -dls-input-font-color: rgba(13, 15, 18, 0.95); 31 | -dls-input-font-color-error: rgba(13, 15, 18, 0.95); 32 | -dls-input-font-color-read-only: rgba(73, 86, 107, 0.8); 33 | -dls-input-font-color-disabled: rgba(83, 101, 138, 0.5); 34 | -dls-input-placeholder-color: rgba(73, 86, 107, 0.8); 35 | -dls-input-count-color: rgba(73, 86, 107, 0.8); 36 | -dls-input-count-color-error: #d9150b; 37 | -dls-input-shadow-focus: 0 0 0 2px rgba(26, 110, 255, 0.2); 38 | -dls-input-shadow-inline-focus: 0 1px 0 0 #1a6eff; 39 | -dls-input-shadow-error-focus: 0 0 0 2px rgba(255, 43, 32, 0.2); 40 | -dls-input-shadow-inline-error-focus: 0 1px 0 0 #ff2b20; 41 | -dls-input-icon-size: calc(1em + 2px); 42 | -dls-input-icon-color: rgba(73, 86, 107, 0.8); 43 | -dls-input-icon-color-disabled: rgba(83, 101, 138, 0.5); 44 | } 45 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/input/input.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-input-font-size-xs: @dls-input-font-size-xs; 3 | -dls-input-font-size-s: @dls-input-font-size-s; 4 | -dls-input-font-size-m: @dls-input-font-size-m; 5 | -dls-input-font-size-l: @dls-input-font-size-l; 6 | -dls-input-height-xs: @dls-input-height-xs; 7 | -dls-input-height-s: @dls-input-height-s; 8 | -dls-input-height-m: @dls-input-height-m; 9 | -dls-input-height-l: @dls-input-height-l; 10 | -dls-input-width: @dls-input-width; 11 | -dls-input-border-radius-xs: @dls-input-border-radius-xs; 12 | -dls-input-border-radius-s: @dls-input-border-radius-s; 13 | -dls-input-border-radius-m: @dls-input-border-radius-m; 14 | -dls-input-border-radius-l: @dls-input-border-radius-l; 15 | -dls-input-padding: @dls-input-padding; 16 | -dls-input-content-spacing: @dls-input-content-spacing; 17 | -dls-input-border-color: @dls-input-border-color; 18 | -dls-input-border-color-hover: @dls-input-border-color-hover; 19 | -dls-input-border-color-focus: @dls-input-border-color-focus; 20 | -dls-input-border-color-error: @dls-input-border-color-error; 21 | -dls-input-border-color-error-hover: @dls-input-border-color-error-hover; 22 | -dls-input-border-color-error-focus: @dls-input-border-color-error-focus; 23 | -dls-input-border-color-read-only: @dls-input-border-color-read-only; 24 | -dls-input-border-color-read-only-hover: @dls-input-border-color-read-only-hover; 25 | -dls-input-border-color-read-only-focus: @dls-input-border-color-read-only-focus; 26 | -dls-input-border-color-disabled: @dls-input-border-color-disabled; 27 | -dls-input-background-color: @dls-input-background-color; 28 | -dls-input-background-color-read-only: @dls-input-background-color-read-only; 29 | -dls-input-background-color-disabled: @dls-input-background-color-disabled; 30 | -dls-input-font-color: @dls-input-font-color; 31 | -dls-input-font-color-error: @dls-input-font-color-error; 32 | -dls-input-font-color-read-only: @dls-input-font-color-read-only; 33 | -dls-input-font-color-disabled: @dls-input-font-color-disabled; 34 | -dls-input-placeholder-color: @dls-input-placeholder-color; 35 | -dls-input-count-color: @dls-input-count-color; 36 | -dls-input-count-color-error: @dls-input-count-color-error; 37 | -dls-input-shadow-focus: @dls-input-shadow-focus; 38 | -dls-input-shadow-inline-focus: @dls-input-shadow-inline-focus; 39 | -dls-input-shadow-error-focus: @dls-input-shadow-error-focus; 40 | -dls-input-shadow-inline-error-focus: @dls-input-shadow-inline-error-focus; 41 | -dls-input-icon-size: @dls-input-icon-size; 42 | -dls-input-icon-color: @dls-input-icon-color; 43 | -dls-input-icon-color-disabled: @dls-input-icon-color-disabled; 44 | } 45 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/layout/layout.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-layout-min-width: 1248px; 3 | -dls-layout-background-color: #f6f7fa; 4 | -dls-layout-header-height: 64px; 5 | -dls-layout-header-background-color: #fff; 6 | -dls-layout-header-shadow: 0 4px 10px rgba(0, 0, 0, 0.03), 0 3px 9px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(0, 0, 0, 0.01); 7 | -dls-layout-sidebar-background-color: #fff; 8 | -dls-layout-sidebar-width: 200px; 9 | -dls-layout-sidebar-width-slim: 60px; 10 | -dls-layout-sidebar-shadow: 0 4px 10px rgba(0, 0, 0, 0.03), 0 3px 9px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(0, 0, 0, 0.01); 11 | -dls-layout-sidebar-separator-color: #e2e6f0; 12 | -dls-layout-sidebar-toggle-height: 40px; 13 | -dls-layout-sidebar-toggle-padding-x: 8px; 14 | -dls-layout-sidebar-float-toggle-width: 18px; 15 | -dls-layout-sidebar-float-toggle-radius: 4px; 16 | -dls-layout-sidebar-float-button-font-color: #fff; 17 | -dls-layout-sidebar-float-toggle-backgroud-color: #a8b0bf; 18 | -dls-layout-sidebar-float-toggle-backgroud-color-hover: #848b99; 19 | -dls-layout-sidebar-float-toggle-backgroud-color-active: #545b66; 20 | -dls-layout-footer-height: 64px; 21 | } 22 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/layout/layout.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-layout-min-width: @dls-layout-min-width; 3 | -dls-layout-background-color: @dls-layout-background-color; 4 | -dls-layout-header-height: @dls-layout-header-height; 5 | -dls-layout-header-background-color: @dls-layout-header-background-color; 6 | -dls-layout-header-shadow: @dls-layout-header-shadow; 7 | -dls-layout-sidebar-background-color: @dls-layout-sidebar-background-color; 8 | -dls-layout-sidebar-width: @dls-layout-sidebar-width; 9 | -dls-layout-sidebar-width-slim: @dls-layout-sidebar-width-slim; 10 | -dls-layout-sidebar-shadow: @dls-layout-sidebar-shadow; 11 | -dls-layout-sidebar-separator-color: @dls-layout-sidebar-separator-color; 12 | -dls-layout-sidebar-toggle-height: @dls-layout-sidebar-toggle-height; 13 | -dls-layout-sidebar-toggle-padding-x: @dls-layout-sidebar-toggle-padding-x; 14 | -dls-layout-sidebar-float-toggle-width: @dls-layout-sidebar-float-toggle-width; 15 | -dls-layout-sidebar-float-toggle-radius: @dls-layout-sidebar-float-toggle-radius; 16 | -dls-layout-sidebar-float-button-font-color: @dls-layout-sidebar-float-button-font-color; 17 | -dls-layout-sidebar-float-toggle-backgroud-color: @dls-layout-sidebar-float-toggle-backgroud-color; 18 | -dls-layout-sidebar-float-toggle-backgroud-color-hover: @dls-layout-sidebar-float-toggle-backgroud-color-hover; 19 | -dls-layout-sidebar-float-toggle-backgroud-color-active: @dls-layout-sidebar-float-toggle-backgroud-color-active; 20 | -dls-layout-footer-height: @dls-layout-footer-height; 21 | } 22 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/lightbox/lightbox.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-lightbox-padding-x: 24px; 3 | -dls-lightbox-padding-y: 40px; 4 | -dls-lightbox-content-spacing-y: 24px; 5 | -dls-lightbox-content-spacing-x: 24px; 6 | -dls-lightbox-backdrop-color: rgba(0, 0, 0, 0.6); 7 | -dls-lightbox-font-color: #fff; 8 | -dls-lightbox-font-size: 14px; 9 | -dls-lightbox-close-icon-size: 24px; 10 | -dls-lightbox-control-size: 48px; 11 | -dls-lightbox-control-border-radius: 50%; 12 | -dls-lightbox-control-icon-size: 24px; 13 | } 14 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/lightbox/lightbox.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-lightbox-padding-x: @dls-lightbox-padding-x; 3 | -dls-lightbox-padding-y: @dls-lightbox-padding-y; 4 | -dls-lightbox-content-spacing-y: @dls-lightbox-content-spacing-y; 5 | -dls-lightbox-content-spacing-x: @dls-lightbox-content-spacing-x; 6 | -dls-lightbox-backdrop-color: @dls-lightbox-backdrop-color; 7 | -dls-lightbox-font-color: @dls-lightbox-font-color; 8 | -dls-lightbox-font-size: @dls-lightbox-font-size; 9 | -dls-lightbox-close-icon-size: @dls-lightbox-close-icon-size; 10 | -dls-lightbox-control-size: @dls-lightbox-control-size; 11 | -dls-lightbox-control-border-radius: @dls-lightbox-control-border-radius; 12 | -dls-lightbox-control-icon-size: @dls-lightbox-control-icon-size; 13 | } 14 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/link/link.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-link-font-size-s: 12px; 3 | -dls-link-font-size-m: 14px; 4 | -dls-link-text-decoration: none; 5 | -dls-link-text-decoration-hover: none; 6 | -dls-link-text-decoration-focus: underline; 7 | -dls-link-text-decoration-active: none; 8 | -dls-link-font-color-normal: rgba(13, 15, 18, 0.95); 9 | -dls-link-font-color-normal-hover: rgba(46, 52, 64, 0.9); 10 | -dls-link-font-color-normal-focus: rgba(46, 52, 64, 0.9); 11 | -dls-link-font-color-normal-active: #000; 12 | -dls-link-font-color-normal-disabled: rgba(83, 101, 138, 0.5); 13 | -dls-link-font-color-strong: #0054e6; 14 | -dls-link-font-color-strong-hover: #1a6eff; 15 | -dls-link-font-color-strong-focus: #1a6eff; 16 | -dls-link-font-color-strong-active: #0047c4; 17 | -dls-link-font-color-strong-disabled: #95bcff; 18 | } 19 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/link/link.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-link-font-size-s: @dls-link-font-size-s; 3 | -dls-link-font-size-m: @dls-link-font-size-m; 4 | -dls-link-text-decoration: @dls-link-text-decoration; 5 | -dls-link-text-decoration-hover: @dls-link-text-decoration-hover; 6 | -dls-link-text-decoration-focus: @dls-link-text-decoration-focus; 7 | -dls-link-text-decoration-active: @dls-link-text-decoration-active; 8 | -dls-link-font-color-normal: @dls-link-font-color-normal; 9 | -dls-link-font-color-normal-hover: @dls-link-font-color-normal-hover; 10 | -dls-link-font-color-normal-focus: @dls-link-font-color-normal-focus; 11 | -dls-link-font-color-normal-active: @dls-link-font-color-normal-active; 12 | -dls-link-font-color-normal-disabled: @dls-link-font-color-normal-disabled; 13 | -dls-link-font-color-strong: @dls-link-font-color-strong; 14 | -dls-link-font-color-strong-hover: @dls-link-font-color-strong-hover; 15 | -dls-link-font-color-strong-focus: @dls-link-font-color-strong-focus; 16 | -dls-link-font-color-strong-active: @dls-link-font-color-strong-active; 17 | -dls-link-font-color-strong-disabled: @dls-link-font-color-strong-disabled; 18 | } 19 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/loading/loading.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-loading-font-size-s: 12px; 3 | -dls-loading-font-size-m: 14px; 4 | -dls-loading-font-size-l: 16px; 5 | -dls-loading-line-height: 1.4; 6 | -dls-loading-size-s: calc(1em + 2px); 7 | -dls-loading-size-m: calc(1em + 2px); 8 | -dls-loading-size-l: 24px; 9 | -dls-loading-content-spacing-s: 4px; 10 | -dls-loading-content-spacing-m: 4px; 11 | -dls-loading-content-spacing-l: 8px; 12 | -dls-loading-font-color-normal: rgba(13, 15, 18, 0.95); 13 | -dls-loading-font-color-strong: rgba(13, 15, 18, 0.95); 14 | -dls-loading-font-color-reverse: #fff; 15 | -dls-loading-color-normal: rgba(73, 86, 107, 0.8); 16 | -dls-loading-color-strong: #0054e6; 17 | -dls-loading-color-reverse: #fff; 18 | -dls-loading-background-color: rgba(255, 255, 255, 0.8); 19 | -dls-loading-background-color-reverse: rgba(0, 0, 0, 0.6); 20 | } 21 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/loading/loading.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-loading-font-size-s: @dls-loading-font-size-s; 3 | -dls-loading-font-size-m: @dls-loading-font-size-m; 4 | -dls-loading-font-size-l: @dls-loading-font-size-l; 5 | -dls-loading-line-height: @dls-loading-line-height; 6 | -dls-loading-size-s: @dls-loading-size-s; 7 | -dls-loading-size-m: @dls-loading-size-m; 8 | -dls-loading-size-l: @dls-loading-size-l; 9 | -dls-loading-content-spacing-s: @dls-loading-content-spacing-s; 10 | -dls-loading-content-spacing-m: @dls-loading-content-spacing-m; 11 | -dls-loading-content-spacing-l: @dls-loading-content-spacing-l; 12 | -dls-loading-font-color-normal: @dls-loading-font-color-normal; 13 | -dls-loading-font-color-strong: @dls-loading-font-color-strong; 14 | -dls-loading-font-color-reverse: @dls-loading-font-color-reverse; 15 | -dls-loading-color-normal: @dls-loading-color-normal; 16 | -dls-loading-color-strong: @dls-loading-color-strong; 17 | -dls-loading-color-reverse: @dls-loading-color-reverse; 18 | -dls-loading-background-color: @dls-loading-background-color; 19 | -dls-loading-background-color-reverse: @dls-loading-background-color-reverse; 20 | } 21 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/message/message.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-message-font-size-s: 12px; 3 | -dls-message-font-size-m: 14px; 4 | -dls-message-icon-size: calc(1em + 2px); 5 | -dls-message-line-height: 1.4; 6 | -dls-message-content-spacing: 4px; 7 | -dls-message-font-color-standalone: rgba(13, 15, 18, 0.95); 8 | -dls-message-font-color-info: rgba(13, 15, 18, 0.95); 9 | -dls-message-font-color-success: #009940; 10 | -dls-message-font-color-warning: #ff9448; 11 | -dls-message-font-color-error: #d9150b; 12 | -dls-message-font-color-aux: rgba(73, 86, 107, 0.8); 13 | -dls-message-icon-color-info: #0054e6; 14 | -dls-message-icon-color-success: #009940; 15 | -dls-message-icon-color-warning: #ff9448; 16 | -dls-message-icon-color-error: #d9150b; 17 | -dls-message-icon-color-aux: rgba(73, 86, 107, 0.8); 18 | } 19 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/message/message.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-message-font-size-s: @dls-message-font-size-s; 3 | -dls-message-font-size-m: @dls-message-font-size-m; 4 | -dls-message-icon-size: @dls-message-icon-size; 5 | -dls-message-line-height: @dls-message-line-height; 6 | -dls-message-content-spacing: @dls-message-content-spacing; 7 | -dls-message-font-color-standalone: @dls-message-font-color-standalone; 8 | -dls-message-font-color-info: @dls-message-font-color-info; 9 | -dls-message-font-color-success: @dls-message-font-color-success; 10 | -dls-message-font-color-warning: @dls-message-font-color-warning; 11 | -dls-message-font-color-error: @dls-message-font-color-error; 12 | -dls-message-font-color-aux: @dls-message-font-color-aux; 13 | -dls-message-icon-color-info: @dls-message-icon-color-info; 14 | -dls-message-icon-color-success: @dls-message-icon-color-success; 15 | -dls-message-icon-color-warning: @dls-message-icon-color-warning; 16 | -dls-message-icon-color-error: @dls-message-icon-color-error; 17 | -dls-message-icon-color-aux: @dls-message-icon-color-aux; 18 | } 19 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/nav/nav.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-nav-item-font-size: 14px; 3 | -dls-nav-item-height: 64px; 4 | -dls-nav-item-padding: 0; 5 | -dls-nav-item-padding-more: 8px; 6 | -dls-nav-item-spacing: 32px; 7 | -dls-nav-item-content-spacing: 4px; 8 | -dls-nav-item-icon-size-aux: calc(1em + 2px); 9 | -dls-nav-item-font-color: rgba(13, 15, 18, 0.95); 10 | -dls-nav-item-font-color-hover: #1a6eff; 11 | -dls-nav-item-font-color-focus: #1a6eff; 12 | -dls-nav-item-font-color-active: #0047c4; 13 | -dls-nav-item-font-color-disabled: rgba(83, 101, 138, 0.5); 14 | -dls-nav-item-font-color-current: #0054e6; 15 | -dls-nav-item-font-color-current-hover: #1a6eff; 16 | -dls-nav-item-font-color-current-focus: #1a6eff; 17 | -dls-nav-item-font-color-current-active: #0047c4; 18 | -dls-nav-item-background-color-focus: #dce9ff; 19 | -dls-nav-item-icon-color-aux: currentColor; 20 | -dls-nav-item-icon-color-aux-disabled: currentColor; 21 | -dls-nav-item-icon-color-aux-current: currentColor; 22 | -dls-nav-indicator-stroke-width: 3px; 23 | -dls-nav-indicator-border-radius: 14px; 24 | -dls-nav-indicator-width: 28px; 25 | -dls-nav-indicator-width-hover: 12px; 26 | -dls-nav-indicator-width-focus: 12px; 27 | -dls-nav-indicator-width-active: 36px; 28 | -dls-nav-indicator-color: #0054e6; 29 | -dls-nav-indicator-color-hover: #0054e6; 30 | -dls-nav-indicator-color-focus: #0054e6; 31 | -dls-nav-indicator-color-active: #0054e6; 32 | -dls-nav-card-border-radius: 4px; 33 | -dls-nav-card-background-color: #fff; 34 | -dls-nav-card-padding: 24px; 35 | -dls-nav-card-column-spacing: 48px; 36 | -dls-nav-card-target-spacing: 4px; 37 | -dls-nav-card-title-font-color: rgba(13, 15, 18, 0.95); 38 | -dls-nav-card-title-font-size: 14px; 39 | -dls-nav-card-title-font-weight: 500; 40 | -dls-nav-card-item-spacing: 16px; 41 | -dls-nav-card-item-font-size: 14px; 42 | -dls-nav-card-item-icon-size: calc(1em + 2px); 43 | } 44 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/nav/nav.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-nav-item-font-size: @dls-nav-item-font-size; 3 | -dls-nav-item-height: @dls-nav-item-height; 4 | -dls-nav-item-padding: @dls-nav-item-padding; 5 | -dls-nav-item-padding-more: @dls-nav-item-padding-more; 6 | -dls-nav-item-spacing: @dls-nav-item-spacing; 7 | -dls-nav-item-content-spacing: @dls-nav-item-content-spacing; 8 | -dls-nav-item-icon-size-aux: @dls-nav-item-icon-size-aux; 9 | -dls-nav-item-font-color: @dls-nav-item-font-color; 10 | -dls-nav-item-font-color-hover: @dls-nav-item-font-color-hover; 11 | -dls-nav-item-font-color-focus: @dls-nav-item-font-color-focus; 12 | -dls-nav-item-font-color-active: @dls-nav-item-font-color-active; 13 | -dls-nav-item-font-color-disabled: @dls-nav-item-font-color-disabled; 14 | -dls-nav-item-font-color-current: @dls-nav-item-font-color-current; 15 | -dls-nav-item-font-color-current-hover: @dls-nav-item-font-color-current-hover; 16 | -dls-nav-item-font-color-current-focus: @dls-nav-item-font-color-current-focus; 17 | -dls-nav-item-font-color-current-active: @dls-nav-item-font-color-current-active; 18 | -dls-nav-item-background-color-focus: @dls-nav-item-background-color-focus; 19 | -dls-nav-item-icon-color-aux: @dls-nav-item-icon-color-aux; 20 | -dls-nav-item-icon-color-aux-disabled: @dls-nav-item-icon-color-aux-disabled; 21 | -dls-nav-item-icon-color-aux-current: @dls-nav-item-icon-color-aux-current; 22 | -dls-nav-indicator-stroke-width: @dls-nav-indicator-stroke-width; 23 | -dls-nav-indicator-border-radius: @dls-nav-indicator-border-radius; 24 | -dls-nav-indicator-width: @dls-nav-indicator-width; 25 | -dls-nav-indicator-width-hover: @dls-nav-indicator-width-hover; 26 | -dls-nav-indicator-width-focus: @dls-nav-indicator-width-focus; 27 | -dls-nav-indicator-width-active: @dls-nav-indicator-width-active; 28 | -dls-nav-indicator-color: @dls-nav-indicator-color; 29 | -dls-nav-indicator-color-hover: @dls-nav-indicator-color-hover; 30 | -dls-nav-indicator-color-focus: @dls-nav-indicator-color-focus; 31 | -dls-nav-indicator-color-active: @dls-nav-indicator-color-active; 32 | -dls-nav-card-background-color: @dls-nav-card-background-color; 33 | -dls-nav-card-border-radius: @dls-nav-card-border-radius; 34 | -dls-nav-card-background-color: @dls-nav-card-background-color; 35 | -dls-nav-card-padding: @dls-nav-card-padding; 36 | -dls-nav-card-column-spacing: @dls-nav-card-column-spacing; 37 | -dls-nav-card-target-spacing: @dls-nav-card-target-spacing; 38 | -dls-nav-card-title-font-color: @dls-nav-card-title-font-color; 39 | -dls-nav-card-title-font-size: @dls-nav-card-title-font-size; 40 | -dls-nav-card-title-font-weight: @dls-nav-card-title-font-weight; 41 | -dls-nav-card-item-spacing: @dls-nav-card-item-spacing; 42 | -dls-nav-card-item-font-size: @dls-nav-card-item-font-size; 43 | -dls-nav-card-item-icon-size: @dls-nav-card-item-icon-size; 44 | } 45 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/number-input/number-input.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-number-input-height-xs: 24px; 3 | -dls-number-input-height-s: 28px; 4 | -dls-number-input-height-m: 32px; 5 | -dls-number-input-spin-icon-size-normal: 0.85em; 6 | -dls-number-input-spin-button-min-width-normal: 18px; 7 | -dls-number-input-spin-button-width-normal-xs: 18px; 8 | -dls-number-input-spin-button-width-normal-s: 18px; 9 | -dls-number-input-spin-button-width-normal-m: 18px; 10 | -dls-number-input-digits-normal: 6; 11 | -dls-number-input-width-normal-xs: calc(6ch + 43px); 12 | -dls-number-input-width-normal-s: calc(6ch + 43px); 13 | -dls-number-input-width-normal-m: calc(6ch + 43px); 14 | -dls-number-input-spin-icon-size-strong: 1em; 15 | -dls-number-input-digits-strong: 6; 16 | -dls-number-input-width-strong-xs: calc(6ch + 72px); 17 | -dls-number-input-width-strong-s: calc(6ch + 80px); 18 | -dls-number-input-width-strong-m: calc(6ch + 88px); 19 | -dls-number-input-spin-icon-color: rgba(73, 86, 107, 0.8); 20 | -dls-number-input-spin-icon-color-disabled: rgba(90, 119, 168, 0.3); 21 | } 22 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/number-input/number-input.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-number-input-height-xs: @dls-number-input-height-xs; 3 | -dls-number-input-height-s: @dls-number-input-height-s; 4 | -dls-number-input-height-m: @dls-number-input-height-m; 5 | -dls-number-input-spin-icon-size-normal: @dls-number-input-spin-icon-size-normal; 6 | -dls-number-input-spin-button-min-width-normal: @dls-number-input-spin-button-min-width-normal; 7 | -dls-number-input-spin-button-width-normal-xs: @dls-number-input-spin-button-width-normal-xs; 8 | -dls-number-input-spin-button-width-normal-s: @dls-number-input-spin-button-width-normal-s; 9 | -dls-number-input-spin-button-width-normal-m: @dls-number-input-spin-button-width-normal-m; 10 | -dls-number-input-digits-normal: @dls-number-input-digits-normal; 11 | -dls-number-input-width-normal-xs: @dls-number-input-width-normal-xs; 12 | -dls-number-input-width-normal-s: @dls-number-input-width-normal-s; 13 | -dls-number-input-width-normal-m: @dls-number-input-width-normal-m; 14 | -dls-number-input-spin-icon-size-strong: @dls-number-input-spin-icon-size-strong; 15 | -dls-number-input-digits-strong: @dls-number-input-digits-strong; 16 | -dls-number-input-width-strong-xs: @dls-number-input-width-strong-xs; 17 | -dls-number-input-width-strong-s: @dls-number-input-width-strong-s; 18 | -dls-number-input-width-strong-m: @dls-number-input-width-strong-m; 19 | -dls-number-input-spin-icon-color: @dls-number-input-spin-icon-color; 20 | -dls-number-input-spin-icon-color-disabled: @dls-number-input-spin-icon-color-disabled; 21 | } 22 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/option/option.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-option-font-size-xs: 12px; 3 | -dls-option-font-size-s: 12px; 4 | -dls-option-font-size-m: 14px; 5 | -dls-option-font-size-l: 16px; 6 | -dls-option-height-xs: 24px; 7 | -dls-option-height-s: 28px; 8 | -dls-option-height-m: 32px; 9 | -dls-option-height-l: 36px; 10 | -dls-option-padding-xs: 16px; 11 | -dls-option-padding-s: 16px; 12 | -dls-option-padding-m: 16px; 13 | -dls-option-padding-l: 16px; 14 | -dls-option-max-width-xs: calc(40em + 32px); 15 | -dls-option-max-width-s: calc(40em + 32px); 16 | -dls-option-max-width-m: calc(40em + 32px); 17 | -dls-option-max-width-l: calc(40em + 32px); 18 | -dls-option-icon-size-aux: calc(1em + 2px); 19 | -dls-option-label-spacing-before: 8px; 20 | -dls-option-label-spacing-after: 12px; 21 | -dls-option-font-color: rgba(13, 15, 18, 0.95); 22 | -dls-option-font-color-hover: rgba(13, 15, 18, 0.95); 23 | -dls-option-font-color-focus: rgba(13, 15, 18, 0.95); 24 | -dls-option-font-color-active: rgba(13, 15, 18, 0.95); 25 | -dls-option-font-color-disabled: rgba(83, 101, 138, 0.5); 26 | -dls-option-font-color-highlighted: #f27318; 27 | -dls-option-icon-color-aux: rgba(73, 86, 107, 0.8); 28 | -dls-option-icon-color-aux-disabled: rgba(83, 101, 138, 0.5); 29 | -dls-option-font-color-selected: #0054e6; 30 | -dls-option-font-color-selected-hover: #1a6eff; 31 | -dls-option-font-color-selected-focus: #1a6eff; 32 | -dls-option-font-color-selected-active: #0047c4; 33 | -dls-option-background-color: #fff; 34 | -dls-option-background-color-hover: #f6f7fa; 35 | -dls-option-background-color-focus: #dce9ff; 36 | -dls-option-background-color-active: #e2e6f0; 37 | -dls-option-background-color-selected-parent: #f6f7fa; 38 | -dls-option-font-weight-selected-parent: 400; 39 | -dls-option-font-weight-selected: 400; 40 | -dls-option-group-label-line-height: 1.4; 41 | -dls-option-group-label-font-color: rgba(73, 86, 107, 0.8); 42 | -dls-option-group-label-padding-y: 4px; 43 | -dls-option-group-padding-y: 4px; 44 | -dls-option-group-separator-color: #e2e6f0; 45 | } 46 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/option/option.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-option-font-size-xs: @dls-option-font-size-xs; 3 | -dls-option-font-size-s: @dls-option-font-size-s; 4 | -dls-option-font-size-m: @dls-option-font-size-m; 5 | -dls-option-font-size-l: @dls-option-font-size-l; 6 | -dls-option-height-xs: @dls-option-height-xs; 7 | -dls-option-height-s: @dls-option-height-s; 8 | -dls-option-height-m: @dls-option-height-m; 9 | -dls-option-height-l: @dls-option-height-l; 10 | -dls-option-padding-xs: @dls-option-padding-xs; 11 | -dls-option-padding-s: @dls-option-padding-s; 12 | -dls-option-padding-m: @dls-option-padding-m; 13 | -dls-option-padding-l: @dls-option-padding-l; 14 | -dls-option-max-width-xs: @dls-option-max-width-xs; 15 | -dls-option-max-width-s: @dls-option-max-width-s; 16 | -dls-option-max-width-m: @dls-option-max-width-m; 17 | -dls-option-max-width-l: @dls-option-max-width-l; 18 | -dls-option-icon-size-aux: @dls-option-icon-size-aux; 19 | -dls-option-label-spacing-before: @dls-option-label-spacing-before; 20 | -dls-option-label-spacing-after: @dls-option-label-spacing-after; 21 | -dls-option-font-color: @dls-option-font-color; 22 | -dls-option-font-color-hover: @dls-option-font-color-hover; 23 | -dls-option-font-color-focus: @dls-option-font-color-focus; 24 | -dls-option-font-color-active: @dls-option-font-color-active; 25 | -dls-option-font-color-disabled: @dls-option-font-color-disabled; 26 | -dls-option-font-color-highlighted: @dls-option-font-color-highlighted; 27 | -dls-option-icon-color-aux: @dls-option-icon-color-aux; 28 | -dls-option-icon-color-aux-disabled: @dls-option-icon-color-aux-disabled; 29 | -dls-option-font-color-selected: @dls-option-font-color-selected; 30 | -dls-option-font-color-selected-hover: @dls-option-font-color-selected-hover; 31 | -dls-option-font-color-selected-focus: @dls-option-font-color-selected-focus; 32 | -dls-option-font-color-selected-active: @dls-option-font-color-selected-active; 33 | -dls-option-background-color: @dls-option-background-color; 34 | -dls-option-background-color-hover: @dls-option-background-color-hover; 35 | -dls-option-background-color-focus: @dls-option-background-color-focus; 36 | -dls-option-background-color-active: @dls-option-background-color-active; 37 | -dls-option-background-color-selected-parent: @dls-option-background-color-selected-parent; 38 | -dls-option-font-weight-selected-parent: @dls-option-font-weight-selected-parent; 39 | -dls-option-font-weight-selected: @dls-option-font-weight-selected; 40 | -dls-option-group-label-line-height: @dls-option-group-label-line-height; 41 | -dls-option-group-label-font-color: @dls-option-group-label-font-color; 42 | -dls-option-group-label-padding-y: @dls-option-group-label-padding-y; 43 | -dls-option-group-padding-y: @dls-option-group-padding-y; 44 | -dls-option-group-separator-color: @dls-option-group-separator-color; 45 | } 46 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/pagination/pagination.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-pagination-font-size-xs: 12px; 3 | -dls-pagination-font-size-s: 12px; 4 | -dls-pagination-font-size-m: 14px; 5 | -dls-pagination-page-item-min-width-xs: 24px; 6 | -dls-pagination-page-item-min-width-s: 28px; 7 | -dls-pagination-page-item-min-width-m: 32px; 8 | -dls-pagination-page-item-padding-x: 4px; 9 | -dls-pagination-page-item-spacing: 4px; 10 | -dls-pagination-part-spacing: 24px; 11 | -dls-pagination-content-spacing: 8px; 12 | -dls-pagination-goto-input-padding-x: 8px; 13 | -dls-pagination-goto-input-digits: 3; 14 | -dls-pagination-goto-input-width: calc(3ch + 18px); 15 | -dls-pagination-page-item-font-color: rgba(13, 15, 18, 0.95); 16 | -dls-pagination-page-item-font-color-disabled: rgba(83, 101, 138, 0.5); 17 | -dls-pagination-page-item-background-color: #fff; 18 | -dls-pagination-page-item-background-color-hover: #f6f7fa; 19 | -dls-pagination-page-item-background-color-focus: #f6f7fa; 20 | -dls-pagination-page-item-background-color-active: #e2e6f0; 21 | -dls-pagination-page-item-background-color-disabled: #fff; 22 | -dls-pagination-page-item-font-color-current: #0054e6; 23 | -dls-pagination-page-item-background-color-current: #ebf2ff; 24 | -dls-pagination-page-item-background-color-current-hover: #dce9ff; 25 | -dls-pagination-page-item-background-color-current-focus: #dce9ff; 26 | -dls-pagination-page-item-background-color-current-active: #bfd7ff; 27 | } 28 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/pagination/pagination.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-pagination-font-size-xs: @dls-pagination-font-size-xs; 3 | -dls-pagination-font-size-s: @dls-pagination-font-size-s; 4 | -dls-pagination-font-size-m: @dls-pagination-font-size-m; 5 | -dls-pagination-page-item-min-width-xs: @dls-pagination-page-item-min-width-xs; 6 | -dls-pagination-page-item-min-width-s: @dls-pagination-page-item-min-width-s; 7 | -dls-pagination-page-item-min-width-m: @dls-pagination-page-item-min-width-m; 8 | -dls-pagination-page-item-padding-x: @dls-pagination-page-item-padding-x; 9 | -dls-pagination-page-item-spacing: @dls-pagination-page-item-spacing; 10 | -dls-pagination-part-spacing: @dls-pagination-part-spacing; 11 | -dls-pagination-content-spacing: @dls-pagination-content-spacing; 12 | -dls-pagination-goto-input-padding-x: @dls-pagination-goto-input-padding-x; 13 | -dls-pagination-goto-input-digits: @dls-pagination-goto-input-digits; 14 | -dls-pagination-goto-input-width: @dls-pagination-goto-input-width; 15 | -dls-pagination-page-item-font-color: @dls-pagination-page-item-font-color; 16 | -dls-pagination-page-item-font-color-disabled: @dls-pagination-page-item-font-color-disabled; 17 | -dls-pagination-page-item-background-color: @dls-pagination-page-item-background-color; 18 | -dls-pagination-page-item-background-color-hover: @dls-pagination-page-item-background-color-hover; 19 | -dls-pagination-page-item-background-color-focus: @dls-pagination-page-item-background-color-focus; 20 | -dls-pagination-page-item-background-color-active: @dls-pagination-page-item-background-color-active; 21 | -dls-pagination-page-item-background-color-disabled: @dls-pagination-page-item-background-color-disabled; 22 | -dls-pagination-page-item-font-color-current: @dls-pagination-page-item-font-color-current; 23 | -dls-pagination-page-item-background-color-current: @dls-pagination-page-item-background-color-current; 24 | -dls-pagination-page-item-background-color-current-hover: @dls-pagination-page-item-background-color-current-hover; 25 | -dls-pagination-page-item-background-color-current-focus: @dls-pagination-page-item-background-color-current-focus; 26 | -dls-pagination-page-item-background-color-current-active: @dls-pagination-page-item-background-color-current-active; 27 | } 28 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/popover/popover.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-popover-max-width: 400px; 3 | -dls-popover-line-height: 1.6; 4 | -dls-popover-padding-x: 16px; 5 | -dls-popover-padding-y: 16px; 6 | -dls-popover-arrow-spacing: 12px; 7 | -dls-popover-border-radius-s: 4px; 8 | -dls-popover-border-radius-m: 4px; 9 | -dls-popover-font-size-s: 12px; 10 | -dls-popover-font-size-m: 14px; 11 | -dls-popover-title-font-weight: 500; 12 | -dls-popover-title-spacing-s: 4px; 13 | -dls-popover-action-spacing-s: 8px; 14 | -dls-popover-title-spacing-m: 8px; 15 | -dls-popover-action-spacing-m: 12px; 16 | -dls-popover-title-font-size-s: 14px; 17 | -dls-popover-title-font-size-m: 16px; 18 | } 19 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/popover/popover.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-popover-max-width: @dls-popover-max-width; 3 | -dls-popover-line-height: @dls-popover-line-height; 4 | -dls-popover-padding-x: @dls-popover-padding-x; 5 | -dls-popover-padding-y: @dls-popover-padding-y; 6 | -dls-popover-arrow-spacing: @dls-popover-arrow-spacing; 7 | -dls-popover-border-radius-s: @dls-popover-border-radius-s; 8 | -dls-popover-border-radius-m: @dls-popover-border-radius-m; 9 | -dls-popover-font-size-s: @dls-popover-font-size-s; 10 | -dls-popover-font-size-m: @dls-popover-font-size-m; 11 | -dls-popover-title-font-weight: @dls-popover-title-font-weight; 12 | -dls-popover-title-spacing-s: @dls-popover-title-spacing-s; 13 | -dls-popover-action-spacing-s: @dls-popover-action-spacing-s; 14 | -dls-popover-title-spacing-m: @dls-popover-title-spacing-m; 15 | -dls-popover-action-spacing-m: @dls-popover-action-spacing-m; 16 | -dls-popover-title-font-size-s: @dls-popover-title-font-size-s; 17 | -dls-popover-title-font-size-m: @dls-popover-title-font-size-m; 18 | } 19 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/progress/progress.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-progress-width-bar-xs: 160px; 3 | -dls-progress-width-bar-s: 200px; 4 | -dls-progress-width-bar-m: 300px; 5 | -dls-progress-size-circular-xs: 60px; 6 | -dls-progress-size-circular-s: 80px; 7 | -dls-progress-size-circular-m: 100px; 8 | -dls-progress-font-size-xs: 12px; 9 | -dls-progress-font-size-s: 12px; 10 | -dls-progress-font-size-m: 14px; 11 | -dls-progress-font-size-circular-xs: 12px; 12 | -dls-progress-font-size-circular-s: 14px; 13 | -dls-progress-font-size-circular-m: 16px; 14 | -dls-progress-font-color: rgba(46, 52, 64, 0.9); 15 | -dls-progress-icon-size-bar: calc(1em + 2px); 16 | -dls-progress-icon-size-circular-xs: 16px; 17 | -dls-progress-icon-size-circular-s: 24px; 18 | -dls-progress-icon-size-circular-m: 32px; 19 | -dls-progress-track-width-xs: 2px; 20 | -dls-progress-track-width-s: 4px; 21 | -dls-progress-track-width-m: 6px; 22 | -dls-progress-border-radius-xs: 1px; 23 | -dls-progress-border-radius-s: 2px; 24 | -dls-progress-border-radius-m: 3px; 25 | -dls-progress-track-spacing-bar: 8px; 26 | -dls-progress-icon-spacing-bar: 8px; 27 | -dls-progress-track-color: #d3d9e6; 28 | -dls-progress-indicator-color: #0054e6; 29 | -dls-progress-indicator-color-success: #009940; 30 | -dls-progress-indicator-color-error: #d9150b; 31 | -dls-progress-icon-color-success: #009940; 32 | -dls-progress-icon-color-error: #d9150b; 33 | } 34 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/progress/progress.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-progress-width-bar-xs: @dls-progress-width-bar-xs; 3 | -dls-progress-width-bar-s: @dls-progress-width-bar-s; 4 | -dls-progress-width-bar-m: @dls-progress-width-bar-m; 5 | -dls-progress-size-circular-xs: @dls-progress-size-circular-xs; 6 | -dls-progress-size-circular-s: @dls-progress-size-circular-s; 7 | -dls-progress-size-circular-m: @dls-progress-size-circular-m; 8 | -dls-progress-font-size-xs: @dls-progress-font-size-xs; 9 | -dls-progress-font-size-s: @dls-progress-font-size-s; 10 | -dls-progress-font-size-m: @dls-progress-font-size-m; 11 | -dls-progress-font-size-circular-xs: @dls-progress-font-size-circular-xs; 12 | -dls-progress-font-size-circular-s: @dls-progress-font-size-circular-s; 13 | -dls-progress-font-size-circular-m: @dls-progress-font-size-circular-m; 14 | -dls-progress-font-color: @dls-progress-font-color; 15 | -dls-progress-icon-size-bar: @dls-progress-icon-size-bar; 16 | -dls-progress-icon-size-circular-xs: @dls-progress-icon-size-circular-xs; 17 | -dls-progress-icon-size-circular-s: @dls-progress-icon-size-circular-s; 18 | -dls-progress-icon-size-circular-m: @dls-progress-icon-size-circular-m; 19 | -dls-progress-track-width-xs: @dls-progress-track-width-xs; 20 | -dls-progress-track-width-s: @dls-progress-track-width-s; 21 | -dls-progress-track-width-m: @dls-progress-track-width-m; 22 | -dls-progress-border-radius-xs: @dls-progress-border-radius-xs; 23 | -dls-progress-border-radius-s: @dls-progress-border-radius-s; 24 | -dls-progress-border-radius-m: @dls-progress-border-radius-m; 25 | -dls-progress-track-spacing-bar: @dls-progress-track-spacing-bar; 26 | -dls-progress-icon-spacing-bar: @dls-progress-icon-spacing-bar; 27 | -dls-progress-track-color: @dls-progress-track-color; 28 | -dls-progress-indicator-color: @dls-progress-indicator-color; 29 | -dls-progress-indicator-color-success: @dls-progress-indicator-color-success; 30 | -dls-progress-indicator-color-error: @dls-progress-indicator-color-error; 31 | -dls-progress-icon-color-success: @dls-progress-icon-color-success; 32 | -dls-progress-icon-color-error: @dls-progress-icon-color-error; 33 | } 34 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/radio/radio.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-radio-font-size-s: 12px; 3 | -dls-radio-font-size-m: 14px; 4 | -dls-radio-font-color: rgba(13, 15, 18, 0.95); 5 | -dls-radio-font-color-disabled: rgba(83, 101, 138, 0.5); 6 | -dls-radio-size-s: 14px; 7 | -dls-radio-size-m: 16px; 8 | -dls-radio-dot-size-s: 6px; 9 | -dls-radio-dot-size-m: 6px; 10 | -dls-radio-spacing: 8px; 11 | -dls-radio-border-color: #d3d9e6; 12 | -dls-radio-border-color-hover: #a8b0bf; 13 | -dls-radio-border-color-focus: #0054e6; 14 | -dls-radio-border-color-active: #a8b0bf; 15 | -dls-radio-border-color-disabled: #e2e6f0; 16 | -dls-radio-border-color-checked: transparent; 17 | -dls-radio-border-color-checked-hover: transparent; 18 | -dls-radio-border-color-checked-focus: #0054e6; 19 | -dls-radio-border-color-checked-active: transparent; 20 | -dls-radio-border-color-checked-disabled: transparent; 21 | -dls-radio-background-color: #fff; 22 | -dls-radio-background-color-hover: #ebedf5; 23 | -dls-radio-background-color-focus: #ebedf5; 24 | -dls-radio-background-color-active: #d3d9e6; 25 | -dls-radio-background-color-disabled: #f6f7fa; 26 | -dls-radio-background-color-checked: #0054e6; 27 | -dls-radio-background-color-checked-hover: #1a6eff; 28 | -dls-radio-background-color-checked-focus: #1a6eff; 29 | -dls-radio-background-color-checked-active: #0047c4; 30 | -dls-radio-background-color-checked-disabled: #dce9ff; 31 | -dls-radio-dot-color: #fff; 32 | -dls-radio-dot-color-hover: #fff; 33 | -dls-radio-dot-color-focus: #fff; 34 | -dls-radio-dot-color-active: #fff; 35 | -dls-radio-dot-color-disabled: #fff; 36 | -dls-radio-shadow-focus: 0 0 0 2px rgba(26, 110, 255, 0.2); 37 | -dls-radio-group-spacing: 24px; 38 | -dls-radio-group-spacing-simple: 8px; 39 | -dls-radio-group-line-spacing: 8px; 40 | } 41 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/radio/radio.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-radio-font-size-s: @dls-radio-font-size-s; 3 | -dls-radio-font-size-m: @dls-radio-font-size-m; 4 | -dls-radio-font-color: @dls-radio-font-color; 5 | -dls-radio-font-color-disabled: @dls-radio-font-color-disabled; 6 | -dls-radio-size-s: @dls-radio-size-s; 7 | -dls-radio-size-m: @dls-radio-size-m; 8 | -dls-radio-dot-size-s: @dls-radio-dot-size-s; 9 | -dls-radio-dot-size-m: @dls-radio-dot-size-m; 10 | -dls-radio-spacing: @dls-radio-spacing; 11 | -dls-radio-border-color: @dls-radio-border-color; 12 | -dls-radio-border-color-hover: @dls-radio-border-color-hover; 13 | -dls-radio-border-color-focus: @dls-radio-border-color-focus; 14 | -dls-radio-border-color-active: @dls-radio-border-color-active; 15 | -dls-radio-border-color-disabled: @dls-radio-border-color-disabled; 16 | -dls-radio-border-color-checked: @dls-radio-border-color-checked; 17 | -dls-radio-border-color-checked-hover: @dls-radio-border-color-checked-hover; 18 | -dls-radio-border-color-checked-focus: @dls-radio-border-color-checked-focus; 19 | -dls-radio-border-color-checked-active: @dls-radio-border-color-checked-active; 20 | -dls-radio-border-color-checked-disabled: @dls-radio-border-color-checked-disabled; 21 | -dls-radio-background-color: @dls-radio-background-color; 22 | -dls-radio-background-color-hover: @dls-radio-background-color-hover; 23 | -dls-radio-background-color-focus: @dls-radio-background-color-focus; 24 | -dls-radio-background-color-active: @dls-radio-background-color-active; 25 | -dls-radio-background-color-disabled: @dls-radio-background-color-disabled; 26 | -dls-radio-background-color-checked: @dls-radio-background-color-checked; 27 | -dls-radio-background-color-checked-hover: @dls-radio-background-color-checked-hover; 28 | -dls-radio-background-color-checked-focus: @dls-radio-background-color-checked-focus; 29 | -dls-radio-background-color-checked-active: @dls-radio-background-color-checked-active; 30 | -dls-radio-background-color-checked-disabled: @dls-radio-background-color-checked-disabled; 31 | -dls-radio-dot-color: @dls-radio-dot-color; 32 | -dls-radio-dot-color-hover: @dls-radio-dot-color-hover; 33 | -dls-radio-dot-color-focus: @dls-radio-dot-color-focus; 34 | -dls-radio-dot-color-active: @dls-radio-dot-color-active; 35 | -dls-radio-dot-color-disabled: @dls-radio-dot-color-disabled; 36 | -dls-radio-shadow-focus: @dls-radio-shadow-focus; 37 | -dls-radio-group-spacing: @dls-radio-group-spacing; 38 | -dls-radio-group-spacing-simple: @dls-radio-group-spacing-simple; 39 | -dls-radio-group-line-spacing: @dls-radio-group-line-spacing; 40 | } 41 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/rating/rating.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-rating-symbol-color: #d3d9e6; 3 | -dls-rating-symbol-color-selected: #ff9448; 4 | -dls-rating-symbol-gap: var(--dls-rating-symbol-gap, 2px); 5 | -dls-rating-symbol-size: 14px; 6 | -dls-rating-symbol-scale-hover: 1.1; 7 | -dls-rating-label-spacing: var(--dls-rating-label-spacing, 16px); 8 | -dls-rating-label-font-color: rgba(13, 15, 18, 0.95); 9 | -dls-rating-label-font-size: 14px; 10 | } 11 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/rating/rating.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-rating-symbol-color: @dls-rating-symbol-color; 3 | -dls-rating-symbol-color-selected: @dls-rating-symbol-color-selected; 4 | -dls-rating-symbol-gap: @dls-rating-symbol-gap; 5 | -dls-rating-symbol-size: @dls-rating-symbol-size; 6 | -dls-rating-symbol-scale-hover: @dls-rating-symbol-scale-hover; 7 | -dls-rating-label-spacing: @dls-rating-label-spacing; 8 | -dls-rating-label-font-color: @dls-rating-label-font-color; 9 | -dls-rating-label-font-size: @dls-rating-label-font-size; 10 | } 11 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/scrollbar/scrollbar.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-scrollbar-track-width: 10px; 3 | -dls-scrollbar-track-color: transparent; 4 | -dls-scrollbar-thumb-width: 6px; 5 | -dls-scrollbar-thumb-color: rgba(96, 134, 199, 0.2); 6 | -dls-scrollbar-thumb-color-hover: rgba(83, 101, 138, 0.5); 7 | -dls-scrollbar-thumb-border-radius: 3px; 8 | } 9 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/scrollbar/scrollbar.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-scrollbar-track-width: @dls-scrollbar-track-width; 3 | -dls-scrollbar-track-color: @dls-scrollbar-track-color; 4 | -dls-scrollbar-thumb-width: @dls-scrollbar-thumb-width; 5 | -dls-scrollbar-thumb-color: @dls-scrollbar-thumb-color; 6 | -dls-scrollbar-thumb-color-hover: @dls-scrollbar-thumb-color-hover; 7 | -dls-scrollbar-thumb-border-radius: @dls-scrollbar-thumb-border-radius; 8 | } 9 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/search-box/search-box.css: -------------------------------------------------------------------------------- 1 | div { 2 | no: content; 3 | } 4 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/search-box/search-box.less: -------------------------------------------------------------------------------- 1 | div { 2 | no: content; 3 | } 4 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/select/select.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-select-width: 300px; 3 | -dls-select-tag-height-xs: 16px; 4 | -dls-select-tag-height-s: 20px; 5 | -dls-select-tag-height-m: 24px; 6 | -dls-select-tag-height-l: 28px; 7 | -dls-select-padding-x: 12px; 8 | -dls-select-padding-y: 4px; 9 | -dls-select-padding-start: 4px; 10 | -dls-select-content-spacing: 8px; 11 | -dls-select-tag-spacing: 4px; 12 | -dls-select-icon-size-aux: calc(1em + 2px); 13 | -dls-select-icon-color-aux: rgba(73, 86, 107, 0.8); 14 | -dls-select-icon-color-aux-disabled: rgba(83, 101, 138, 0.5); 15 | } 16 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/select/select.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-select-width: @dls-select-width; 3 | -dls-select-tag-height-xs: @dls-select-tag-height-xs; 4 | -dls-select-tag-height-s: @dls-select-tag-height-s; 5 | -dls-select-tag-height-m: @dls-select-tag-height-m; 6 | -dls-select-tag-height-l: @dls-select-tag-height-l; 7 | -dls-select-padding-x: @dls-select-padding-x; 8 | -dls-select-padding-y: @dls-select-padding-y; 9 | -dls-select-padding-start: @dls-select-padding-start; 10 | -dls-select-content-spacing: @dls-select-content-spacing; 11 | -dls-select-tag-spacing: @dls-select-tag-spacing; 12 | -dls-select-icon-size-aux: @dls-select-icon-size-aux; 13 | -dls-select-icon-color-aux: @dls-select-icon-color-aux; 14 | -dls-select-icon-color-aux-disabled: @dls-select-icon-color-aux-disabled; 15 | } 16 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/sidenav/sidenav.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-sidenav-item-height: 32px; 3 | -dls-sidenav-padding-x: 8px; 4 | -dls-sidenav-padding-y: 8px; 5 | -dls-sidenav-item-padding-start: 24px; 6 | -dls-sidenav-item-padding-end: 16px; 7 | -dls-sidenav-item-level-indent: 16px; 8 | -dls-sidenav-item-spacing: 8px; 9 | -dls-sidenav-item-content-spacing: 8px; 10 | -dls-sidenav-item-icon-size: calc(1em + 2px); 11 | -dls-sidenav-item-icon-size-aux: calc(1em + 2px); 12 | -dls-sidenav-item-font-size: 14px; 13 | -dls-sidenav-item-group-font-weight: 500; 14 | -dls-sidenav-item-font-color: rgba(13, 15, 18, 0.95); 15 | -dls-sidenav-item-font-color-hover: rgba(46, 52, 64, 0.9); 16 | -dls-sidenav-item-font-color-focus: rgba(46, 52, 64, 0.9); 17 | -dls-sidenav-item-font-color-active: #000; 18 | -dls-sidenav-item-font-color-disabled: rgba(83, 101, 138, 0.5); 19 | -dls-sidenav-item-font-color-current: #0054e6; 20 | -dls-sidenav-item-font-color-current-hover: #1a6eff; 21 | -dls-sidenav-item-font-color-current-focus: #1a6eff; 22 | -dls-sidenav-item-font-color-current-active: #0047c4; 23 | -dls-sidenav-item-icon-color: currentColor; 24 | -dls-sidenav-item-icon-color-disabled: currentColor; 25 | -dls-sidenav-item-icon-color-current: currentColor; 26 | -dls-sidenav-item-icon-color-aux: currentColor; 27 | -dls-sidenav-item-icon-color-aux-disabled: currentColor; 28 | -dls-sidenav-item-icon-color-aux-current: currentColor; 29 | -dls-sidenav-item-background-color: #fff; 30 | -dls-sidenav-item-background-color-hover: #f6f7fa; 31 | -dls-sidenav-item-background-color-focus: #dce9ff; 32 | -dls-sidenav-item-background-color-active: #e2e6f0; 33 | -dls-sidenav-item-background-color-disabled: #fff; 34 | -dls-sidenav-item-background-color-current: #ebf2ff; 35 | -dls-sidenav-item-background-color-current-hover: #dce9ff; 36 | -dls-sidenav-item-background-color-current-focus: #dce9ff; 37 | -dls-sidenav-item-background-color-current-active: #bfd7ff; 38 | -dls-sidenav-item-border-radius: 4px; 39 | -dls-sidenav-width: 200px; 40 | -dls-sidenav-width-collapsed: 60px; 41 | } 42 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/slider/slider.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-slider-height-vertical: 100px; 3 | -dls-slider-thumb-size-s: 8px; 4 | -dls-slider-thumb-size-m: 12px; 5 | -dls-slider-track-min-width: 2px; 6 | -dls-slider-track-width-s: 2px; 7 | -dls-slider-track-width-m: 4px; 8 | -dls-slider-track-border-radius-s: 1px; 9 | -dls-slider-track-border-radius-m: 2px; 10 | -dls-slider-thumb-dot-min-size: 2px; 11 | -dls-slider-thumb-dot-size-s: 2px; 12 | -dls-slider-thumb-dot-size-m: 4px; 13 | -dls-slider-mark-min-size: 4px; 14 | -dls-slider-mark-size-s: 4px; 15 | -dls-slider-mark-size-m: 8px; 16 | -dls-slider-font-size-s: 12px; 17 | -dls-slider-font-size-m: 14px; 18 | -dls-slider-font-color: rgba(13, 15, 18, 0.95); 19 | -dls-slider-font-color-disabled: rgba(83, 101, 138, 0.5); 20 | -dls-slider-thumb-background-color: #0054e6; 21 | -dls-slider-thumb-background-color-hover: #1a6eff; 22 | -dls-slider-thumb-background-color-focus: #1a6eff; 23 | -dls-slider-thumb-background-color-active: #0047c4; 24 | -dls-slider-thumb-background-color-read-only: #a8b0bf; 25 | -dls-slider-thumb-background-color-read-only-hover: #848b99; 26 | -dls-slider-thumb-background-color-read-only-focus: #848b99; 27 | -dls-slider-thumb-background-color-disabled: #dce9ff; 28 | -dls-slider-thumb-border-color-focus: #0054e6; 29 | -dls-slider-thumb-border-color-read-only-focus: #0054e6; 30 | -dls-slider-thumb-shadow-focus: 0 0 0 2px rgba(26, 110, 255, 0.2); 31 | -dls-slider-thumb-shadow-read-only-focus: 0 0 0 2px rgba(26, 110, 255, 0.2); 32 | -dls-slider-thumb-dot-color: #fff; 33 | -dls-slider-track-color: #e2e6f0; 34 | -dls-slider-track-color-hover: #d3d9e6; 35 | -dls-slider-track-color-read-only: #e2e6f0; 36 | -dls-slider-track-color-disabled: #e2e6f0; 37 | -dls-slider-track-progress-color: #0054e6; 38 | -dls-slider-track-progress-color-hover: #1a6eff; 39 | -dls-slider-track-progress-color-read-only: #a8b0bf; 40 | -dls-slider-track-progress-color-disabled: #dce9ff; 41 | } 42 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/slider/slider.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-slider-height-vertical: @dls-slider-height-vertical; 3 | -dls-slider-thumb-size-s: @dls-slider-thumb-size-s; 4 | -dls-slider-thumb-size-m: @dls-slider-thumb-size-m; 5 | -dls-slider-track-min-width: @dls-slider-track-min-width; 6 | -dls-slider-track-width-s: @dls-slider-track-width-s; 7 | -dls-slider-track-width-m: @dls-slider-track-width-m; 8 | -dls-slider-track-border-radius-s: @dls-slider-track-border-radius-s; 9 | -dls-slider-track-border-radius-m: @dls-slider-track-border-radius-m; 10 | -dls-slider-thumb-dot-min-size: @dls-slider-thumb-dot-min-size; 11 | -dls-slider-thumb-dot-size-s: @dls-slider-thumb-dot-size-s; 12 | -dls-slider-thumb-dot-size-m: @dls-slider-thumb-dot-size-m; 13 | -dls-slider-mark-min-size: @dls-slider-mark-min-size; 14 | -dls-slider-mark-size-s: @dls-slider-mark-size-s; 15 | -dls-slider-mark-size-m: @dls-slider-mark-size-m; 16 | -dls-slider-font-size-s: @dls-slider-font-size-s; 17 | -dls-slider-font-size-m: @dls-slider-font-size-m; 18 | -dls-slider-font-color: @dls-slider-font-color; 19 | -dls-slider-font-color-disabled: @dls-slider-font-color-disabled; 20 | -dls-slider-thumb-background-color: @dls-slider-thumb-background-color; 21 | -dls-slider-thumb-background-color-hover: @dls-slider-thumb-background-color-hover; 22 | -dls-slider-thumb-background-color-focus: @dls-slider-thumb-background-color-focus; 23 | -dls-slider-thumb-background-color-active: @dls-slider-thumb-background-color-active; 24 | -dls-slider-thumb-background-color-read-only: @dls-slider-thumb-background-color-read-only; 25 | -dls-slider-thumb-background-color-read-only-hover: @dls-slider-thumb-background-color-read-only-hover; 26 | -dls-slider-thumb-background-color-read-only-focus: @dls-slider-thumb-background-color-read-only-focus; 27 | -dls-slider-thumb-background-color-disabled: @dls-slider-thumb-background-color-disabled; 28 | -dls-slider-thumb-border-color-focus: @dls-slider-thumb-border-color-focus; 29 | -dls-slider-thumb-border-color-read-only-focus: @dls-slider-thumb-border-color-read-only-focus; 30 | -dls-slider-thumb-shadow-focus: @dls-slider-thumb-shadow-focus; 31 | -dls-slider-thumb-shadow-read-only-focus: @dls-slider-thumb-shadow-read-only-focus; 32 | -dls-slider-thumb-dot-color: @dls-slider-thumb-dot-color; 33 | -dls-slider-track-color: @dls-slider-track-color; 34 | -dls-slider-track-color-hover: @dls-slider-track-color-hover; 35 | -dls-slider-track-color-read-only: @dls-slider-track-color-read-only; 36 | -dls-slider-track-color-disabled: @dls-slider-track-color-disabled; 37 | -dls-slider-track-progress-color: @dls-slider-track-progress-color; 38 | -dls-slider-track-progress-color-hover: @dls-slider-track-progress-color-hover; 39 | -dls-slider-track-progress-color-read-only: @dls-slider-track-progress-color-read-only; 40 | -dls-slider-track-progress-color-disabled: @dls-slider-track-progress-color-disabled; 41 | } 42 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/switch/switch.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-switch-width-xs: 20px; 3 | -dls-switch-width-s: 26px; 4 | -dls-switch-width-m: 32px; 5 | -dls-switch-height-xs: 12px; 6 | -dls-switch-height-s: 16px; 7 | -dls-switch-height-m: 20px; 8 | -dls-switch-thumb-size-xs: 8px; 9 | -dls-switch-thumb-size-s: 12px; 10 | -dls-switch-thumb-size-m: 14px; 11 | -dls-switch-padding-xs: 2px; 12 | -dls-switch-padding-s: 2px; 13 | -dls-switch-padding-m: 3px; 14 | -dls-switch-track-color-on: #0054e6; 15 | -dls-switch-track-color-on-hover: #1a6eff; 16 | -dls-switch-track-color-on-focus: #1a6eff; 17 | -dls-switch-track-color-on-active: #0047c4; 18 | -dls-switch-track-color-on-disabled: #dce9ff; 19 | -dls-switch-track-color-off: #a8b0bf; 20 | -dls-switch-track-color-off-hover: #848b99; 21 | -dls-switch-track-color-off-focus: #848b99; 22 | -dls-switch-track-color-off-active: #545b66; 23 | -dls-switch-track-color-off-disabled: #e2e6f0; 24 | -dls-switch-thumb-color-on: #fff; 25 | -dls-switch-thumb-color-on-hover: #fff; 26 | -dls-switch-thumb-color-on-focus: #fff; 27 | -dls-switch-thumb-color-on-active: #fff; 28 | -dls-switch-thumb-color-on-disabled: #fff; 29 | -dls-switch-thumb-color-off: #fff; 30 | -dls-switch-thumb-color-off-hover: #fff; 31 | -dls-switch-thumb-color-off-focus: #fff; 32 | -dls-switch-thumb-color-off-active: #fff; 33 | -dls-switch-thumb-color-off-disabled: #fff; 34 | -dls-switch-shadow-on-focus: 0 0 0 2px rgba(26, 110, 255, 0.2); 35 | -dls-switch-shadow-off-focus: 0 0 0 2px rgba(26, 110, 255, 0.2); 36 | } 37 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/switch/switch.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-switch-width-xs: @dls-switch-width-xs; 3 | -dls-switch-width-s: @dls-switch-width-s; 4 | -dls-switch-width-m: @dls-switch-width-m; 5 | -dls-switch-height-xs: @dls-switch-height-xs; 6 | -dls-switch-height-s: @dls-switch-height-s; 7 | -dls-switch-height-m: @dls-switch-height-m; 8 | -dls-switch-thumb-size-xs: @dls-switch-thumb-size-xs; 9 | -dls-switch-thumb-size-s: @dls-switch-thumb-size-s; 10 | -dls-switch-thumb-size-m: @dls-switch-thumb-size-m; 11 | -dls-switch-padding-xs: @dls-switch-padding-xs; 12 | -dls-switch-padding-s: @dls-switch-padding-s; 13 | -dls-switch-padding-m: @dls-switch-padding-m; 14 | -dls-switch-track-color-on: @dls-switch-track-color-on; 15 | -dls-switch-track-color-on-hover: @dls-switch-track-color-on-hover; 16 | -dls-switch-track-color-on-focus: @dls-switch-track-color-on-focus; 17 | -dls-switch-track-color-on-active: @dls-switch-track-color-on-active; 18 | -dls-switch-track-color-on-disabled: @dls-switch-track-color-on-disabled; 19 | -dls-switch-track-color-off: @dls-switch-track-color-off; 20 | -dls-switch-track-color-off-hover: @dls-switch-track-color-off-hover; 21 | -dls-switch-track-color-off-focus: @dls-switch-track-color-off-focus; 22 | -dls-switch-track-color-off-active: @dls-switch-track-color-off-active; 23 | -dls-switch-track-color-off-disabled: @dls-switch-track-color-off-disabled; 24 | -dls-switch-thumb-color-on: @dls-switch-thumb-color-on; 25 | -dls-switch-thumb-color-on-hover: @dls-switch-thumb-color-on-hover; 26 | -dls-switch-thumb-color-on-focus: @dls-switch-thumb-color-on-focus; 27 | -dls-switch-thumb-color-on-active: @dls-switch-thumb-color-on-active; 28 | -dls-switch-thumb-color-on-disabled: @dls-switch-thumb-color-on-disabled; 29 | -dls-switch-thumb-color-off: @dls-switch-thumb-color-off; 30 | -dls-switch-thumb-color-off-hover: @dls-switch-thumb-color-off-hover; 31 | -dls-switch-thumb-color-off-focus: @dls-switch-thumb-color-off-focus; 32 | -dls-switch-thumb-color-off-active: @dls-switch-thumb-color-off-active; 33 | -dls-switch-thumb-color-off-disabled: @dls-switch-thumb-color-off-disabled; 34 | -dls-switch-shadow-on-focus: @dls-switch-shadow-on-focus; 35 | -dls-switch-shadow-off-focus: @dls-switch-shadow-off-focus; 36 | } 37 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/table/table.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-table-column-min-width: calc(3em + 16px); 3 | -dls-table-cell-border-color: #ebedf5; 4 | -dls-table-header-border-color: #d3d9e6; 5 | -dls-table-border-color-dragging: #d3d9e6; 6 | -dls-table-padding-x: 16px; 7 | -dls-table-cell-padding-x: 8px; 8 | -dls-table-cell-padding-y: 12px; 9 | -dls-table-cell-padding-y-compact: 8px; 10 | -dls-table-cell-padding-y-loose: 16px; 11 | -dls-table-cell-content-spacing: 4px; 12 | -dls-table-cell-background-color: #fff; 13 | -dls-table-cell-background-color-hover: #f6f7fa; 14 | -dls-table-cell-font-color: rgba(13, 15, 18, 0.95); 15 | -dls-table-header-padding-x: 8px; 16 | -dls-table-header-padding-y: 12px; 17 | -dls-table-header-padding-y-compact: 8px; 18 | -dls-table-header-padding-y-loose: 16px; 19 | -dls-table-header-background-color: #ebedf5; 20 | -dls-table-header-background-color-hover: #e2e6f0; 21 | -dls-table-header-font-weight: 500; 22 | -dls-table-header-font-color: rgba(13, 15, 18, 0.95); 23 | -dls-table-sub-row-background-color: #f6f7fa; 24 | -dls-table-sub-row-background-color-hover: #ebedf5; 25 | -dls-table-font-size-s: 12px; 26 | -dls-table-font-size-m: 14px; 27 | -dls-table-border-radius-s: 4px; 28 | -dls-table-border-radius-m: 4px; 29 | -dls-table-icon-size: calc(1em + 2px); 30 | -dls-table-icon-size-aux: calc(1em + 2px); 31 | -dls-table-header-icon-color: rgba(83, 101, 138, 0.5); 32 | -dls-table-header-icon-color-hover: rgba(73, 86, 107, 0.8); 33 | -dls-table-header-icon-color-active: rgba(46, 52, 64, 0.9); 34 | -dls-table-header-icon-color-disabled: rgba(102, 146, 222, 0.15); 35 | -dls-table-overflow-shadow-top: none; 36 | -dls-table-overflow-shadow-right: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 37 | -dls-table-overflow-shadow-bottom: none; 38 | -dls-table-overflow-shadow-left: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 39 | -dls-table-body-height-no-data: 108px; 40 | -dls-table-action-spacing: 16px; 41 | -dls-table-filter-action-padding-y: 16px; 42 | -dls-table-filter-action-spacing: 16px; 43 | } 44 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/table/table.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-table-column-min-width: @dls-table-column-min-width; 3 | -dls-table-cell-border-color: @dls-table-cell-border-color; 4 | -dls-table-header-border-color: @dls-table-header-border-color; 5 | -dls-table-border-color-dragging: @dls-table-border-color-dragging; 6 | -dls-table-padding-x: @dls-table-padding-x; 7 | -dls-table-cell-padding-x: @dls-table-cell-padding-x; 8 | -dls-table-cell-padding-y: @dls-table-cell-padding-y; 9 | -dls-table-cell-padding-y-compact: @dls-table-cell-padding-y-compact; 10 | -dls-table-cell-padding-y-loose: @dls-table-cell-padding-y-loose; 11 | -dls-table-cell-content-spacing: @dls-table-cell-content-spacing; 12 | -dls-table-cell-background-color: @dls-table-cell-background-color; 13 | -dls-table-cell-background-color-hover: @dls-table-cell-background-color-hover; 14 | -dls-table-cell-font-color: @dls-table-cell-font-color; 15 | -dls-table-header-padding-x: @dls-table-header-padding-x; 16 | -dls-table-header-padding-y: @dls-table-header-padding-y; 17 | -dls-table-header-padding-y-compact: @dls-table-header-padding-y-compact; 18 | -dls-table-header-padding-y-loose: @dls-table-header-padding-y-loose; 19 | -dls-table-header-background-color: @dls-table-header-background-color; 20 | -dls-table-header-background-color-hover: @dls-table-header-background-color-hover; 21 | -dls-table-header-font-weight: @dls-table-header-font-weight; 22 | -dls-table-header-font-color: @dls-table-header-font-color; 23 | -dls-table-sub-row-background-color: @dls-table-sub-row-background-color; 24 | -dls-table-sub-row-background-color-hover: @dls-table-sub-row-background-color-hover; 25 | -dls-table-font-size-s: @dls-table-font-size-s; 26 | -dls-table-font-size-m: @dls-table-font-size-m; 27 | -dls-table-border-radius-s: @dls-table-border-radius-s; 28 | -dls-table-border-radius-m: @dls-table-border-radius-m; 29 | -dls-table-icon-size: @dls-table-icon-size; 30 | -dls-table-icon-size-aux: @dls-table-icon-size-aux; 31 | -dls-table-header-icon-color: @dls-table-header-icon-color; 32 | -dls-table-header-icon-color-hover: @dls-table-header-icon-color-hover; 33 | -dls-table-header-icon-color-active: @dls-table-header-icon-color-active; 34 | -dls-table-header-icon-color-disabled: @dls-table-header-icon-color-disabled; 35 | -dls-table-overflow-shadow-top: @dls-table-overflow-shadow-top; 36 | -dls-table-overflow-shadow-right: @dls-table-overflow-shadow-right; 37 | -dls-table-overflow-shadow-bottom: @dls-table-overflow-shadow-bottom; 38 | -dls-table-overflow-shadow-left: @dls-table-overflow-shadow-left; 39 | -dls-table-body-height-no-data: @dls-table-body-height-no-data; 40 | -dls-table-action-spacing: @dls-table-action-spacing; 41 | -dls-table-filter-action-padding-y: @dls-table-filter-action-padding-y; 42 | -dls-table-filter-action-spacing: @dls-table-filter-action-spacing; 43 | } 44 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/tag-input/tag-input.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-tag-input-padding-start: 4px; 3 | -dls-tag-input-tag-spacing: 4px; 4 | -dls-tag-input-tag-height-xs: 16px; 5 | -dls-tag-input-tag-height-s: 20px; 6 | -dls-tag-input-tag-height-m: 24px; 7 | -dls-tag-input-tag-height-l: 28px; 8 | } 9 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/tag-input/tag-input.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-tag-input-padding-start: @dls-tag-input-padding-start; 3 | -dls-tag-input-tag-spacing: @dls-tag-input-tag-spacing; 4 | -dls-tag-input-tag-height-xs: @dls-tag-input-tag-height-xs; 5 | -dls-tag-input-tag-height-s: @dls-tag-input-tag-height-s; 6 | -dls-tag-input-tag-height-m: @dls-tag-input-tag-height-m; 7 | -dls-tag-input-tag-height-l: @dls-tag-input-tag-height-l; 8 | } 9 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/tag/tag.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-tag-height-xs: 20px; 3 | -dls-tag-height-s: 24px; 4 | -dls-tag-height-m: 28px; 5 | -dls-tag-border-radius-xs: 2px; 6 | -dls-tag-border-radius-s: 4px; 7 | -dls-tag-border-radius-m: 4px; 8 | -dls-tag-border-width: 1px; 9 | -dls-tag-border-width-xs: 0.5px; 10 | -dls-tag-border-width-s: 1px; 11 | -dls-tag-border-width-m: 1px; 12 | -dls-tag-padding: 8px; 13 | -dls-tag-padding-xs: 4px; 14 | -dls-tag-padding-s: 4px; 15 | -dls-tag-padding-m: 4px; 16 | -dls-tag-content-spacing: 8px; 17 | -dls-tag-list-spacing: 4px; 18 | -dls-tag-font-size-xs: 12px; 19 | -dls-tag-font-size-s: 12px; 20 | -dls-tag-font-size-m: 14px; 21 | -dls-tag-icon-size-aux: calc(1em - 2px); 22 | -dls-tag-color: rgba(46, 52, 64, 0.9); 23 | -dls-tag-color-selected: #0054e6; 24 | -dls-tag-color-default: #848b99; 25 | -dls-tag-color-default-selected: #0054e6; 26 | -dls-tag-color-info: #0054e6; 27 | -dls-tag-color-success: #009940; 28 | -dls-tag-color-warning: #ff9448; 29 | -dls-tag-color-error: #d9150b; 30 | -dls-tag-font-color-default: rgba(13, 15, 18, 0.95); 31 | -dls-tag-font-color-selected: #fff; 32 | -dls-tag-font-color-reverse: #fff; 33 | -dls-tag-color-turquoise: #4db2b2; 34 | -dls-tag-color-violet: #5e1ae5; 35 | -dls-tag-color-green: #4bac3a; 36 | -dls-tag-font-opacity-disabled: 0.3; 37 | -dls-tag-font-opacity-selected-disabled: 1; 38 | -dls-tag-font-opacity-reverse-disabled: 1; 39 | -dls-tag-background-opacity: 0.08; 40 | -dls-tag-background-opacity-hover: 0.2; 41 | -dls-tag-background-opacity-active: 0.3; 42 | -dls-tag-background-opacity-disabled: 0.1; 43 | -dls-tag-background-opacity-selected: 1; 44 | -dls-tag-background-opacity-selected-hover: 0.6; 45 | -dls-tag-background-opacity-selected-active: 0.8; 46 | -dls-tag-background-opacity-selected-disabled: 0.1; 47 | -dls-tag-background-opacity-reverse: 1; 48 | -dls-tag-background-opacity-reverse-hover: 0.6; 49 | -dls-tag-background-opacity-reverse-active: 0.8; 50 | -dls-tag-background-opacity-reverse-disabled: 0.1; 51 | -dls-tag-border-opacity: 0.1; 52 | -dls-tag-border-opacity-disabled: 0.1; 53 | } 54 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/textarea/textarea.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-textarea-font-size-s: 12px; 3 | -dls-textarea-font-size-m: 14px; 4 | -dls-textarea-line-height: 1.4; 5 | -dls-textarea-padding-x: 12px; 6 | -dls-textarea-padding-y: 8px; 7 | -dls-textarea-width: 300px; 8 | -dls-textarea-rows: 3; 9 | -dls-textarea-height-s: 68.4px; 10 | -dls-textarea-height-m: 76.8px; 11 | -dls-textarea-count-height: 16px; 12 | -dls-textarea-count-padding: 4px; 13 | -dls-textarea-count-font-size: 12px; 14 | -dls-textarea-count-font-color: #fff; 15 | -dls-textarea-count-font-color-error: #fff; 16 | -dls-textarea-count-background-color: rgba(0, 0, 0, 0.6); 17 | -dls-textarea-count-background-color-error: rgba(217, 21, 11, 0.6); 18 | -dls-textarea-count-border-radius: 4px; 19 | } 20 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/textarea/textarea.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-textarea-font-size-s: @dls-textarea-font-size-s; 3 | -dls-textarea-font-size-m: @dls-textarea-font-size-m; 4 | -dls-textarea-line-height: @dls-textarea-line-height; 5 | -dls-textarea-padding-x: @dls-textarea-padding-x; 6 | -dls-textarea-padding-y: @dls-textarea-padding-y; 7 | -dls-textarea-width: @dls-textarea-width; 8 | -dls-textarea-rows: @dls-textarea-rows; 9 | -dls-textarea-height-s: @dls-textarea-height-s; 10 | -dls-textarea-height-m: @dls-textarea-height-m; 11 | -dls-textarea-count-height: @dls-textarea-count-height; 12 | -dls-textarea-count-padding: @dls-textarea-count-padding; 13 | -dls-textarea-count-font-size: @dls-textarea-count-font-size; 14 | -dls-textarea-count-font-color: @dls-textarea-count-font-color; 15 | -dls-textarea-count-font-color-error: @dls-textarea-count-font-color-error; 16 | -dls-textarea-count-background-color: @dls-textarea-count-background-color; 17 | -dls-textarea-count-background-color-error: @dls-textarea-count-background-color-error; 18 | -dls-textarea-count-border-radius: @dls-textarea-count-border-radius; 19 | } 20 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/time-picker/time-picker.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-time-picker-width: 150px; 3 | -dls-time-picker-dropdown-min-width: 150px; 4 | -dls-time-picker-option-content-min-width: 2ch; 5 | -dls-time-picker-icon-color: rgba(73, 86, 107, 0.8); 6 | -dls-time-picker-icon-color-disabled: rgba(83, 101, 138, 0.5); 7 | } 8 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/time-picker/time-picker.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-time-picker-width: @dls-time-picker-width; 3 | -dls-time-picker-dropdown-min-width: @dls-time-picker-dropdown-min-width; 4 | -dls-time-picker-option-content-min-width: @dls-time-picker-option-content-min-width; 5 | -dls-time-picker-icon-color: @dls-time-picker-icon-color; 6 | -dls-time-picker-icon-color-disabled: @dls-time-picker-icon-color-disabled; 7 | } 8 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/toast/toast.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-toast-font-size-s: 12px; 3 | -dls-toast-font-size-m: 14px; 4 | -dls-toast-border-radius-s: 4px; 5 | -dls-toast-border-radius-m: 4px; 6 | -dls-toast-line-height: 1.8; 7 | -dls-toast-icon-size: calc(1em + 2px); 8 | -dls-toast-icon-size-titled: calc(1em + 2px); 9 | -dls-toast-icon-size-aux: calc(1em + 2px); 10 | -dls-toast-padding-x: 16px; 11 | -dls-toast-padding-y: 8px; 12 | -dls-toast-padding-y-titled: 16px; 13 | -dls-toast-content-spacing-before: 8px; 14 | -dls-toast-content-spacing-after: 16px; 15 | -dls-toast-spacing: 8px; 16 | -dls-toast-max-width: 400px; 17 | -dls-toast-list-spacing-before: 10vh; 18 | -dls-toast-title-font-size-s: 14px; 19 | -dls-toast-title-font-size-m: 16px; 20 | -dls-toast-title-font-weight: 500; 21 | -dls-toast-title-line-height: 1.4; 22 | -dls-toast-title-spacing-after: 4px; 23 | -dls-toast-background-color: #fff; 24 | -dls-toast-font-color: rgba(13, 15, 18, 0.95); 25 | -dls-toast-title-font-color: rgba(13, 15, 18, 0.95); 26 | -dls-toast-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 27 | -dls-toast-icon-color-info: #0054e6; 28 | -dls-toast-icon-color-success: #009940; 29 | -dls-toast-icon-color-warning: #ff9448; 30 | -dls-toast-icon-color-error: #d9150b; 31 | } 32 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/toast/toast.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-toast-font-size-s: @dls-toast-font-size-s; 3 | -dls-toast-font-size-m: @dls-toast-font-size-m; 4 | -dls-toast-border-radius-s: @dls-toast-border-radius-s; 5 | -dls-toast-border-radius-m: @dls-toast-border-radius-m; 6 | -dls-toast-line-height: @dls-toast-line-height; 7 | -dls-toast-icon-size: @dls-toast-icon-size; 8 | -dls-toast-icon-size-titled: @dls-toast-icon-size-titled; 9 | -dls-toast-icon-size-aux: @dls-toast-icon-size-aux; 10 | -dls-toast-padding-x: @dls-toast-padding-x; 11 | -dls-toast-padding-y: @dls-toast-padding-y; 12 | -dls-toast-padding-y-titled: @dls-toast-padding-y-titled; 13 | -dls-toast-content-spacing-before: @dls-toast-content-spacing-before; 14 | -dls-toast-content-spacing-after: @dls-toast-content-spacing-after; 15 | -dls-toast-spacing: @dls-toast-spacing; 16 | -dls-toast-max-width: @dls-toast-max-width; 17 | -dls-toast-list-spacing-before: @dls-toast-list-spacing-before; 18 | -dls-toast-title-font-size-s: @dls-toast-title-font-size-s; 19 | -dls-toast-title-font-size-m: @dls-toast-title-font-size-m; 20 | -dls-toast-title-font-weight: @dls-toast-title-font-weight; 21 | -dls-toast-title-line-height: @dls-toast-title-line-height; 22 | -dls-toast-title-spacing-after: @dls-toast-title-spacing-after; 23 | -dls-toast-background-color: @dls-toast-background-color; 24 | -dls-toast-font-color: @dls-toast-font-color; 25 | -dls-toast-title-font-color: @dls-toast-title-font-color; 26 | -dls-toast-shadow: @dls-toast-shadow; 27 | -dls-toast-icon-color-info: @dls-toast-icon-color-info; 28 | -dls-toast-icon-color-success: @dls-toast-icon-color-success; 29 | -dls-toast-icon-color-warning: @dls-toast-icon-color-warning; 30 | -dls-toast-icon-color-error: @dls-toast-icon-color-error; 31 | } 32 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/tooltip/tooltip.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-tooltip-max-width: calc(16em + 16px); 3 | -dls-tooltip-font-size: 12px; 4 | -dls-tooltip-line-height: 1.6; 5 | -dls-tooltip-padding-x: 8px; 6 | -dls-tooltip-padding-y: 4px; 7 | -dls-tooltip-target-spacing: 4px; 8 | -dls-tooltip-arrow-width: 8px; 9 | -dls-tooltip-arrow-spacing: 8px; 10 | -dls-tooltip-border-radius: 4px; 11 | -dls-tooltip-font-color-normal: rgba(13, 15, 18, 0.95); 12 | -dls-tooltip-background-color-normal: #fff; 13 | -dls-tooltip-shadow-normal: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04); 14 | -dls-tooltip-font-color-reverse: #fff; 15 | -dls-tooltip-background-color-reverse: rgba(0, 0, 0, 0.6); 16 | -dls-tooltip-shadow-reverse: none; 17 | } 18 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/tooltip/tooltip.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-tooltip-max-width: @dls-tooltip-max-width; 3 | -dls-tooltip-font-size: @dls-tooltip-font-size; 4 | -dls-tooltip-line-height: @dls-tooltip-line-height; 5 | -dls-tooltip-padding-x: @dls-tooltip-padding-x; 6 | -dls-tooltip-padding-y: @dls-tooltip-padding-y; 7 | -dls-tooltip-target-spacing: @dls-tooltip-target-spacing; 8 | -dls-tooltip-arrow-width: @dls-tooltip-arrow-width; 9 | -dls-tooltip-arrow-spacing: @dls-tooltip-arrow-spacing; 10 | -dls-tooltip-border-radius: @dls-tooltip-border-radius; 11 | -dls-tooltip-font-color-normal: @dls-tooltip-font-color-normal; 12 | -dls-tooltip-background-color-normal: @dls-tooltip-background-color-normal; 13 | -dls-tooltip-shadow-normal: @dls-tooltip-shadow-normal; 14 | -dls-tooltip-font-color-reverse: @dls-tooltip-font-color-reverse; 15 | -dls-tooltip-background-color-reverse: @dls-tooltip-background-color-reverse; 16 | -dls-tooltip-shadow-reverse: @dls-tooltip-shadow-reverse; 17 | } 18 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/transfer/transfer.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-transfer-font-size-s: 12px; 3 | -dls-transfer-font-size-m: 14px; 4 | -dls-transfer-border-radius-s: 4px; 5 | -dls-transfer-border-radius-m: 4px; 6 | -dls-transfer-padding-x: 12px; 7 | -dls-transfer-header-content-spacing-1: 4px; 8 | -dls-transfer-header-content-spacing-2: 8px; 9 | -dls-transfer-content-padding-y: 4px; 10 | -dls-transfer-item-height-s: 28px; 11 | -dls-transfer-item-height-m: 32px; 12 | -dls-transfer-item-content-spacing: 8px; 13 | -dls-transfer-content-min-height-s: 288px; 14 | -dls-transfer-content-min-height-m: 328px; 15 | -dls-transfer-panel-width-s: 228px; 16 | -dls-transfer-panel-width-m: 260px; 17 | -dls-transfer-panel-spacing: 12px; 18 | -dls-transfer-header-height-s: 32px; 19 | -dls-transfer-header-height-m: 36px; 20 | -dls-transfer-header-background-color: #f6f7fa; 21 | -dls-transfer-header-font-color: rgba(13, 15, 18, 0.95); 22 | -dls-transfer-header-font-weight: 400; 23 | -dls-transfer-header-button-font-weight: 500; 24 | -dls-transfer-border-color: #d3d9e6; 25 | -dls-transfer-item-background-color: #fff; 26 | -dls-transfer-item-background-color-hover: #f6f7fa; 27 | -dls-transfer-item-background-color-focus: #f6f7fa; 28 | -dls-transfer-item-background-color-active: #e2e6f0; 29 | -dls-transfer-item-background-color-disabled: transparent; 30 | -dls-transfer-item-font-color: rgba(13, 15, 18, 0.95); 31 | -dls-transfer-item-font-color-hover: rgba(13, 15, 18, 0.95); 32 | -dls-transfer-item-font-color-focus: rgba(13, 15, 18, 0.95); 33 | -dls-transfer-item-font-color-active: rgba(13, 15, 18, 0.95); 34 | -dls-transfer-item-font-color-disabled: rgba(83, 101, 138, 0.5); 35 | } 36 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/transfer/transfer.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-transfer-font-size-s: @dls-transfer-font-size-s; 3 | -dls-transfer-font-size-m: @dls-transfer-font-size-m; 4 | -dls-transfer-border-radius-s: @dls-transfer-border-radius-s; 5 | -dls-transfer-border-radius-m: @dls-transfer-border-radius-m; 6 | -dls-transfer-padding-x: @dls-transfer-padding-x; 7 | -dls-transfer-header-content-spacing-1: @dls-transfer-header-content-spacing-1; 8 | -dls-transfer-header-content-spacing-2: @dls-transfer-header-content-spacing-2; 9 | -dls-transfer-content-padding-y: @dls-transfer-content-padding-y; 10 | -dls-transfer-item-height-s: @dls-transfer-item-height-s; 11 | -dls-transfer-item-height-m: @dls-transfer-item-height-m; 12 | -dls-transfer-item-content-spacing: @dls-transfer-item-content-spacing; 13 | -dls-transfer-content-min-height-s: @dls-transfer-content-min-height-s; 14 | -dls-transfer-content-min-height-m: @dls-transfer-content-min-height-m; 15 | -dls-transfer-panel-width-s: @dls-transfer-panel-width-s; 16 | -dls-transfer-panel-width-m: @dls-transfer-panel-width-m; 17 | -dls-transfer-panel-spacing: @dls-transfer-panel-spacing; 18 | -dls-transfer-header-height-s: @dls-transfer-header-height-s; 19 | -dls-transfer-header-height-m: @dls-transfer-header-height-m; 20 | -dls-transfer-header-background-color: @dls-transfer-header-background-color; 21 | -dls-transfer-header-font-color: @dls-transfer-header-font-color; 22 | -dls-transfer-header-font-weight: @dls-transfer-header-font-weight; 23 | -dls-transfer-header-button-font-weight: @dls-transfer-header-button-font-weight; 24 | -dls-transfer-border-color: @dls-transfer-border-color; 25 | -dls-transfer-item-background-color: @dls-transfer-item-background-color; 26 | -dls-transfer-item-background-color-hover: @dls-transfer-item-background-color-hover; 27 | -dls-transfer-item-background-color-focus: @dls-transfer-item-background-color-focus; 28 | -dls-transfer-item-background-color-active: @dls-transfer-item-background-color-active; 29 | -dls-transfer-item-background-color-disabled: @dls-transfer-item-background-color-disabled; 30 | -dls-transfer-item-font-color: @dls-transfer-item-font-color; 31 | -dls-transfer-item-font-color-hover: @dls-transfer-item-font-color-hover; 32 | -dls-transfer-item-font-color-focus: @dls-transfer-item-font-color-focus; 33 | -dls-transfer-item-font-color-active: @dls-transfer-item-font-color-active; 34 | -dls-transfer-item-font-color-disabled: @dls-transfer-item-font-color-disabled; 35 | } 36 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/tree/tree.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-tree-node-height-s: 28px; 3 | -dls-tree-node-height-m: 32px; 4 | -dls-tree-font-size-s: 12px; 5 | -dls-tree-font-size-m: 14px; 6 | -dls-tree-icon-size: calc(1em + 2px); 7 | -dls-tree-icon-size-aux: calc(1em + 2px); 8 | -dls-tree-padding-x: 16px; 9 | -dls-tree-node-content-spacing: 8px; 10 | -dls-tree-icon-color-aux: rgba(73, 86, 107, 0.8); 11 | -dls-tree-icon-color-aux-disabled: rgba(83, 101, 138, 0.5); 12 | -dls-tree-node-font-color: rgba(13, 15, 18, 0.95); 13 | -dls-tree-node-font-color-disabled: rgba(83, 101, 138, 0.5); 14 | -dls-tree-node-font-color-selected: #0054e6; 15 | -dls-tree-node-font-color-selected-hover: #1a6eff; 16 | -dls-tree-node-font-color-selected-focus: #1a6eff; 17 | -dls-tree-node-font-color-selected-active: #0047c4; 18 | -dls-tree-node-font-color-highlighted: #f27318; 19 | -dls-tree-node-background-color: #fff; 20 | -dls-tree-node-background-color-hover: #f6f7fa; 21 | -dls-tree-node-background-color-focus: #f6f7fa; 22 | -dls-tree-node-background-color-active: #e2e6f0; 23 | -dls-tree-node-background-color-selected: #ebf2ff; 24 | -dls-tree-node-background-color-selected-hover: #dce9ff; 25 | -dls-tree-node-background-color-selected-focus: #dce9ff; 26 | -dls-tree-node-background-color-selected-active: #bfd7ff; 27 | -dls-tree-node-font-weight-selected: 400; 28 | } 29 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/tree/tree.less: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-tree-node-height-s: @dls-tree-node-height-s; 3 | -dls-tree-node-height-m: @dls-tree-node-height-m; 4 | -dls-tree-font-size-s: @dls-tree-font-size-s; 5 | -dls-tree-font-size-m: @dls-tree-font-size-m; 6 | -dls-tree-icon-size: @dls-tree-icon-size; 7 | -dls-tree-icon-size-aux: @dls-tree-icon-size-aux; 8 | -dls-tree-padding-x: @dls-tree-padding-x; 9 | -dls-tree-node-content-spacing: @dls-tree-node-content-spacing; 10 | -dls-tree-icon-color-aux: @dls-tree-icon-color-aux; 11 | -dls-tree-icon-color-aux-disabled: @dls-tree-icon-color-aux-disabled; 12 | -dls-tree-node-font-color: @dls-tree-node-font-color; 13 | -dls-tree-node-font-color-disabled: @dls-tree-node-font-color-disabled; 14 | -dls-tree-node-font-color-selected: @dls-tree-node-font-color-selected; 15 | -dls-tree-node-font-color-selected-hover: @dls-tree-node-font-color-selected-hover; 16 | -dls-tree-node-font-color-selected-focus: @dls-tree-node-font-color-selected-focus; 17 | -dls-tree-node-font-color-selected-active: @dls-tree-node-font-color-selected-active; 18 | -dls-tree-node-font-color-highlighted: @dls-tree-node-font-color-highlighted; 19 | -dls-tree-node-background-color: @dls-tree-node-background-color; 20 | -dls-tree-node-background-color-hover: @dls-tree-node-background-color-hover; 21 | -dls-tree-node-background-color-focus: @dls-tree-node-background-color-focus; 22 | -dls-tree-node-background-color-active: @dls-tree-node-background-color-active; 23 | -dls-tree-node-background-color-selected: @dls-tree-node-background-color-selected; 24 | -dls-tree-node-background-color-selected-hover: @dls-tree-node-background-color-selected-hover; 25 | -dls-tree-node-background-color-selected-focus: @dls-tree-node-background-color-selected-focus; 26 | -dls-tree-node-background-color-selected-active: @dls-tree-node-background-color-selected-active; 27 | -dls-tree-node-font-weight-selected: @dls-tree-node-font-weight-selected; 28 | } 29 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/test/specs/uploader/uploader.css: -------------------------------------------------------------------------------- 1 | div { 2 | -dls-uploader-font-size-s: 12px; 3 | -dls-uploader-font-size-m: 14px; 4 | -dls-uploader-helper-text-spacing-x: 8px; 5 | -dls-uploader-helper-text-spacing-y: 4px; 6 | -dls-uploader-helper-text-font-color: rgba(73, 86, 107, 0.8); 7 | -dls-uploader-helper-text-max-width-media-s: 160px; 8 | -dls-uploader-helper-text-max-width-media-m: 320px; 9 | -dls-uploader-error-spacing: 4px; 10 | -dls-uploader-file-item-spacing-y: 8px; 11 | -dls-uploader-file-item-padding-x: 4px; 12 | -dls-uploader-file-item-padding-y: 4px; 13 | -dls-uploader-file-item-label-spacing: 4px; 14 | -dls-uploader-file-item-action-spacing: 8px; 15 | -dls-uploader-file-item-width: 264px; 16 | -dls-uploader-file-item-background-color: transparent; 17 | -dls-uploader-file-item-background-color-hover: #f6f7fa; 18 | -dls-uploader-file-item-background-color-error: #ffeceb; 19 | -dls-uploader-file-item-background-color-error-hover: #ffeceb; 20 | -dls-uploader-file-item-font-color: rgba(13, 15, 18, 0.95); 21 | -dls-uploader-file-item-icon-color: rgba(13, 15, 18, 0.95); 22 | -dls-uploader-foreground-color-error: #d9150b; 23 | -dls-uploader-foreground-color-success: #009940; 24 | -dls-uploader-media-border-color-error: #d9150b; 25 | -dls-uploader-media-height-m: 160px; 26 | -dls-uploader-media-height-s: 80px; 27 | -dls-uploader-media-width-m: 160px; 28 | -dls-uploader-media-width-s: 80px; 29 | -dls-uploader-media-icon-size-m: 40px; 30 | -dls-uploader-media-icon-size-s: 24px; 31 | -dls-uploader-media-label-color: rgba(73, 86, 107, 0.8); 32 | -dls-uploader-media-icon-color: rgba(73, 86, 107, 0.8); 33 | -dls-uploader-media-padding-x-m: 12px; 34 | -dls-uploader-media-padding-x-s: 8px; 35 | -dls-uploader-media-content-spacing-m: 4px; 36 | -dls-uploader-media-content-spacing-s: 4px; 37 | -dls-uploader-mask-icon-color: #fff; 38 | -dls-uploader-mask-icon-spacing: 12px; 39 | -dls-uploader-mask-padding-y: 4px; 40 | -dls-uploader-mask-padding-x: 12px; 41 | -dls-uploader-mask-background-color: rgba(0, 0, 0, 0.6); 42 | -dls-uploader-media-entry-spacing: 24px; 43 | -dls-uploader-media-entry-content-spacing: 8px; 44 | -dls-uploader-media-entry-icon-size: calc(1em + 2px); 45 | -dls-uploader-media-spacing-x-m: 16px; 46 | -dls-uploader-media-spacing-x-s: 12px; 47 | -dls-uploader-media-spacing-y-m: 16px; 48 | -dls-uploader-media-spacing-y-s: 12px; 49 | -dls-uploader-media-preview-min-width: 240px; 50 | -dls-uploader-media-preview-max-width: 480px; 51 | } 52 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/accordion.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-accordion-default-gutter: @dls-spacing-unit * 4; 4 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/alert.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-alert-font-size-s: @dls-font-size-0; 5 | @dls-alert-font-size-m: @dls-font-size-1; 6 | @dls-alert-border-radius-s: @dls-border-radius-1; 7 | @dls-alert-border-radius-m: @dls-border-radius-1; 8 | @dls-alert-line-height: @dls-line-height-2; 9 | @dls-alert-icon-size: @dls-icon-size-normal; 10 | @dls-alert-icon-size-titled: @dls-icon-size-normal; 11 | @dls-alert-icon-size-aux: @dls-icon-size-aux; 12 | @dls-alert-padding-x: @dls-padding-unit * 4; 13 | @dls-alert-padding-y: @dls-padding-unit * 1; 14 | @dls-alert-padding-y-multiline: @dls-padding-unit * 2; 15 | @dls-alert-padding-y-titled: @dls-padding-unit * 4; 16 | @dls-alert-content-spacing-before: @dls-padding-unit * 2; 17 | @dls-alert-content-spacing-after: @dls-padding-unit * 4; 18 | 19 | @dls-alert-title-font-size-s: @dls-alert-font-size-s; 20 | @dls-alert-title-font-size-m: @dls-alert-font-size-m; 21 | @dls-alert-title-font-weight: @dls-font-weight-2; 22 | @dls-alert-title-line-height: @dls-line-height-1; 23 | @dls-alert-title-spacing-after: @dls-padding-unit * 1; 24 | 25 | /* Colors */ 26 | @dls-alert-font-color: @dls-foreground-color-neutral; 27 | @dls-alert-title-font-color: @dls-foreground-color-neutral; 28 | 29 | @dls-alert-background-color-info: @dls-background-color-info; 30 | @dls-alert-background-color-success: @dls-background-color-success; 31 | @dls-alert-background-color-warning: @dls-background-color-warning; 32 | @dls-alert-background-color-error: @dls-background-color-error; 33 | 34 | @dls-alert-border-color-info: transparent; 35 | @dls-alert-border-color-success: transparent; 36 | @dls-alert-border-color-warning: transparent; 37 | @dls-alert-border-color-error: transparent; 38 | 39 | @dls-alert-icon-color-info: @dls-foreground-color-info-primary; 40 | @dls-alert-icon-color-success: @dls-foreground-color-success-primary; 41 | @dls-alert-icon-color-warning: @dls-foreground-color-warning-primary; 42 | @dls-alert-icon-color-error: @dls-foreground-color-error-primary; 43 | 44 | /* Pages */ 45 | @dls-alert-pages-spacing: @dls-padding-unit * 1; 46 | @dls-alert-pages-font-color: @dls-foreground-color-neutral-weak; 47 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/anchor.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | @import "./link.less"; 3 | 4 | @dls-anchor-padding-x: @dls-padding-unit * 4; 5 | @dls-anchor-item-spacing: @dls-padding-unit * 3; 6 | @dls-anchor-level-indent: @dls-padding-unit * 4; 7 | @dls-anchor-track-color: @dls-line-color-1; 8 | @dls-anchor-track-width: 1px; 9 | @dls-anchor-indicator-width: 2px; 10 | @dls-anchor-indicator-color: @dls-foreground-color-primary; 11 | @dls-anchor-indicator-color-hover: @dls-foreground-color-primary-hover; 12 | @dls-anchor-indicator-color-focus: @dls-anchor-indicator-color-hover; 13 | @dls-anchor-indicator-color-active: @dls-foreground-color-primary-active; 14 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/badge.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-badge-font-size: @dls-font-size-0; 5 | @dls-badge-dot-size: @dls-height-unit * 2; 6 | @dls-badge-label-height: @dls-height-unit * 4; 7 | @dls-badge-label-min-width: @dls-badge-label-height; 8 | @dls-badge-label-padding-x: @dls-padding-unit * 1; 9 | @dls-badge-label-spacing-status: @dls-padding-unit * 2; 10 | 11 | /* Colors */ 12 | @dls-badge-background-color-info: @dls-background-color-info-primary; 13 | @dls-badge-background-color-success: @dls-background-color-success-primary; 14 | @dls-badge-background-color-warning: @dls-background-color-warning-primary; 15 | @dls-badge-background-color-error: @dls-background-color-error-primary; 16 | @dls-badge-background-color-aux: @dls-background-color-neutral-primary; 17 | 18 | @dls-badge-font-color: @dls-foreground-color-reverse; 19 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/breadcrumb.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-breadcrumb-font-size-s: @dls-font-size-0; 4 | @dls-breadcrumb-font-size-m: @dls-font-size-1; 5 | @dls-breadcrumb-separator-icon-size: @dls-icon-size-aux; 6 | @dls-breadcrumb-separator-color: @dls-icon-color-aux; 7 | @dls-breadcrumb-separator-spacing: @dls-padding-unit * 2; 8 | @dls-breadcrumb-item-current-font-color: @dls-foreground-color-neutral; 9 | @dls-breadcrumb-item-current-font-weight: @dls-font-weight-2; 10 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/carousel.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Indicators */ 4 | @dls-carousel-indicator-width: @dls-height-unit * 3; 5 | @dls-carousel-indicator-width-current: @dls-height-unit * 9; 6 | @dls-carousel-indicator-height: @dls-height-unit * 0.75; 7 | @dls-carousel-indicator-dot-size: @dls-height-unit * 1.5; 8 | @dls-carousel-indicator-border-radius: (@dls-carousel-indicator-height / 2); 9 | @dls-carousel-indicator-spacing-outer: @dls-padding-unit * 3; 10 | @dls-carousel-indicator-spacing-inner: @dls-padding-unit * 1; 11 | @dls-carousel-indicator-background-color: fade(@dls-foreground-color-reverse, 30%); 12 | @dls-carousel-indicator-background-color-hover: fade(@dls-foreground-color-reverse, 40%); 13 | @dls-carousel-indicator-background-color-active: @dls-foreground-color-reverse; 14 | @dls-carousel-indicator-background-color-current: @dls-foreground-color-reverse; 15 | @dls-carousel-indicator-background-color-outside: @dls-background-color-base-3; 16 | @dls-carousel-indicator-background-color-outside-hover: @dls-background-color-base-3-hover; 17 | @dls-carousel-indicator-background-color-outside-active: @dls-background-color-base-3-active; 18 | @dls-carousel-indicator-background-color-outside-current: @dls-foreground-color-primary; 19 | 20 | /* Controls */ 21 | @dls-carousel-control-size: @dls-height-unit * 8; 22 | @dls-carousel-control-border-radius: 50%; 23 | @dls-carousel-control-shadow: @dls-shadow-2; 24 | @dls-carousel-control-icon-size: @dls-height-unit * 4; 25 | @dls-carousel-control-spacing-inside: @dls-padding-unit * 6; 26 | @dls-carousel-control-spacing-outside: @dls-padding-unit * 4; 27 | 28 | /* Pages */ 29 | @dls-carousel-pages-height: @dls-height-unit * 5; 30 | @dls-carousel-pages-font-size: @dls-font-size-0; 31 | @dls-carousel-pages-font-color: @dls-foreground-color-reverse; 32 | @dls-carousel-pages-background-color: @dls-background-color-translucent; 33 | @dls-carousel-pages-padding-x: @dls-padding-unit * 1; 34 | @dls-carousel-pages-border-radius: @dls-border-radius-1; 35 | 36 | @dls-carousel-slide-gutter: @dls-padding-unit * 3; 37 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/cascader.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-cascader-column-min-width: @dls-padding-unit * 30; 4 | 5 | @dls-cascader-option-padding-xs: @dls-cascader-option-padding-m; 6 | @dls-cascader-option-padding-s: @dls-cascader-option-padding-m; 7 | @dls-cascader-option-padding-m: @dls-padding-unit * 3; 8 | @dls-cascader-option-padding-l: @dls-cascader-option-padding-m; 9 | 10 | @dls-cascader-header-padding-y: @dls-padding-unit * 2; 11 | @dls-cascader-footer-padding-y: @dls-padding-unit * 2; 12 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/dialog.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-dialog-width-wide: 800px; 4 | @dls-dialog-width-medium: 600px; 5 | @dls-dialog-width-narrow: 400px; 6 | @dls-dialog-width-contextual: 400px; 7 | 8 | @dls-dialog-border-radius: @dls-border-radius-1; 9 | 10 | @dls-dialog-spacing-y: 20px; 11 | @dls-dialog-max-height: calc(100vh - @dls-dialog-spacing-y * 2); 12 | 13 | @dls-dialog-padding-x: @dls-padding-unit * 6; 14 | @dls-dialog-padding-y: @dls-padding-unit * 6; 15 | 16 | @dls-dialog-title-content-spacing: @dls-padding-unit * 4; 17 | @dls-dialog-title-spacing-after: @dls-padding-unit * 3; 18 | @dls-dialog-action-spacing-before: @dls-padding-unit * 5; 19 | @dls-dialog-action-content-spacing: @dls-padding-unit * 3; 20 | 21 | @dls-dialog-title-spacing-after-contextual: @dls-padding-unit * 1; 22 | @dls-dialog-icon-spacing-contextual: @dls-padding-unit * 3; 23 | @dls-dialog-icon-size-contextual: @dls-icon-size-normal; 24 | 25 | @dls-dialog-title-line-height: @dls-line-height-1; 26 | @dls-dialog-body-line-height: @dls-line-height-3; 27 | 28 | @dls-dialog-title-font-size-s: @dls-font-size-2; 29 | @dls-dialog-title-font-size-m: @dls-font-size-3; 30 | @dls-dialog-body-font-size-s: @dls-font-size-0; 31 | @dls-dialog-body-font-size-m: @dls-font-size-1; 32 | 33 | @dls-dialog-title-font-weight: @dls-font-weight-2; 34 | 35 | @dls-dialog-title-font-color: @dls-foreground-color-neutral; 36 | @dls-dialog-body-font-color: @dls-foreground-color-neutral; 37 | 38 | @dls-dialog-close-icon-size: @dls-icon-size-aux; 39 | @dls-dialog-close-icon-size-fullscreen: @dls-dialog-close-icon-size; 40 | @dls-dialog-close-icon-min-size: 10px; 41 | 42 | @dls-dialog-icon-color-info: @dls-foreground-color-info-primary; 43 | @dls-dialog-icon-color-success: @dls-foreground-color-success-primary; 44 | @dls-dialog-icon-color-warning: @dls-foreground-color-warning-primary; 45 | @dls-dialog-icon-color-error: @dls-foreground-color-error-primary; 46 | 47 | @dls-dialog-background-color: @dls-background-color-base-1; 48 | @dls-dialog-backdrop-color: @dls-background-color-modal; 49 | 50 | @dls-dialog-shadow: @dls-shadow-4; 51 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/drawer.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | @import "./dialog.less"; 3 | 4 | @dls-drawer-width: 800px; 5 | 6 | @dls-drawer-level-indent: 60px; 7 | 8 | @dls-drawer-shadow-top: @dls-shadow-4; 9 | @dls-drawer-shadow-right: @dls-shadow-4; 10 | @dls-drawer-shadow-bottom: @dls-shadow-4; 11 | @dls-drawer-shadow-left: @dls-shadow-4; 12 | 13 | // Detailed styles are the same as Dialog except for these 14 | @dls-drawer-title-font-size-s: @dls-dialog-title-font-size-s; 15 | @dls-drawer-title-font-size-m: @dls-dialog-title-font-size-m; 16 | @dls-drawer-close-icon-size: @dls-dialog-close-icon-size; 17 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/dropdown.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | @import "./button.less"; 3 | 4 | @dls-dropdown-icon-size-aux: @dls-icon-size-aux; 5 | @dls-dropdown-icon-spacing-aux: @dls-padding-unit * 2; 6 | @dls-dropdown-split-button-padding-x: @dls-padding-unit * 3; 7 | 8 | /* Stylistic variants */ 9 | 10 | // important: only applies to splitted toggle buttons 11 | // and only for normal and primary dropdowns 12 | 13 | @dls-dropdown-icon-color-aux-normal: @dls-icon-color-aux; 14 | @dls-dropdown-icon-color-aux-normal-disabled: @dls-icon-color-aux-disabled; 15 | 16 | @dls-dropdown-icon-color-aux-primary: currentColor; 17 | @dls-dropdown-icon-color-aux-primary-disabled: currentColor; 18 | 19 | /* Dropdown menu */ 20 | @dls-dropdown-max-display-items: 8; 21 | @dls-dropdown-menu-max-height-xs: dls-sum( 22 | calc( 23 | @dls-option-height-xs * 24 | var(--dls-dropdown-max-display-items, @dls-dropdown-max-display-items) 25 | ), 26 | @dls-option-group-padding-y * 2 27 | ); 28 | @dls-dropdown-menu-max-height-s: dls-sum( 29 | calc( 30 | @dls-option-height-s * 31 | var(--dls-dropdown-max-display-items, @dls-dropdown-max-display-items) 32 | ), 33 | @dls-option-group-padding-y * 2 34 | ); 35 | @dls-dropdown-menu-max-height-m: dls-sum( 36 | calc( 37 | @dls-option-height-m * 38 | var(--dls-dropdown-max-display-items, @dls-dropdown-max-display-items) 39 | ), 40 | @dls-option-group-padding-y * 2 41 | ); 42 | @dls-dropdown-menu-max-height-l: dls-sum( 43 | calc( 44 | @dls-option-height-l * 45 | var(--dls-dropdown-max-display-items, @dls-dropdown-max-display-items) 46 | ), 47 | @dls-option-group-padding-y * 2 48 | ); 49 | @dls-dropdown-menu-border-radius-xs: @dls-border-radius-1; 50 | @dls-dropdown-menu-border-radius-s: @dls-border-radius-1; 51 | @dls-dropdown-menu-border-radius-m: @dls-border-radius-1; 52 | @dls-dropdown-menu-border-radius-l: @dls-border-radius-1; 53 | @dls-dropdown-menu-target-spacing: @dls-padding-unit * 1; 54 | @dls-dropdown-menu-shadow: @dls-shadow-4; 55 | @dls-dropdown-menu-placeholder-padding-y: @dls-padding-unit * 2; 56 | @dls-dropdown-menu-placeholder-font-color: @dls-foreground-color-neutral-weak; 57 | 58 | // See Button for Dropdown button styles (with text button variant) 59 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/embedded.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | @import "./dialog.less"; 3 | 4 | @dls-embedded-title-font-size-s: @dls-dialog-title-font-size-s; 5 | @dls-embedded-title-font-size-m: @dls-dialog-title-font-size-m; 6 | @dls-embedded-close-icon-size: @dls-dialog-close-icon-size; 7 | @dls-embedded-shadow: @dls-dialog-shadow; 8 | @dls-embedded-border-color: @dls-line-color-1; 9 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/empty.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Sizes */ 4 | @dls-empty-max-width-s: @dls-padding-unit * 60; 5 | @dls-empty-max-width-m: @dls-padding-unit * 80; 6 | @dls-empty-image-max-height-s: @dls-padding-unit * 12; 7 | @dls-empty-image-max-height-m: none; 8 | 9 | 10 | /* Title */ 11 | @dls-empty-title-font-size-s: @dls-font-size-0; 12 | @dls-empty-title-font-size-m: @dls-font-size-1; 13 | @dls-empty-title-line-height: @dls-line-height-1; 14 | @dls-empty-title-font-color: @dls-foreground-color-neutral; 15 | @dls-empty-title-font-weight: @dls-font-weight-2; 16 | 17 | /* Desc */ 18 | @dls-empty-desc-font-size-s: @dls-font-size-0; 19 | @dls-empty-desc-font-size-m: @dls-font-size-1; 20 | @dls-empty-desc-line-height: @dls-line-height-1; 21 | @dls-empty-desc-font-color: @dls-foreground-color-neutral-light; 22 | @dls-empty-desc-font-weight: @dls-font-weight-1; 23 | 24 | /* Spacing */ 25 | @dls-empty-content-spacing: @dls-padding-unit * 2; 26 | @dls-empty-actions-spacing-before: @dls-padding-unit * 4; 27 | @dls-empty-actions-content-spacing: @dls-padding-unit * 2; 28 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/form.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-form-label-spacing-after-horizontal: @dls-padding-unit * 6; 4 | @dls-form-label-spacing-after-vertical: @dls-padding-unit * 2; 5 | @dls-form-label-content-spacing: @dls-padding-unit * 1; 6 | @dls-form-label-width: 7em; 7 | 8 | @dls-form-label-font-color: @dls-foreground-color-neutral; 9 | @dls-form-label-icon-color: @dls-foreground-color-neutral-weak; 10 | @dls-form-label-required-color: @dls-foreground-color-error-primary; 11 | 12 | @dls-form-field-spacing-vertical: @dls-padding-unit * 6; 13 | @dls-form-field-error-font-color: @dls-foreground-color-error-primary; 14 | @dls-form-field-error-spacing-before-vertical: @dls-padding-unit * 1; 15 | @dls-form-actions-spacing-before: @dls-padding-unit * 10; 16 | @dls-form-actions-content-spacing: @dls-padding-unit * 5; 17 | 18 | @dls-form-field-help-spacing: @dls-padding-unit * 2; 19 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/layout.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-layout-min-width: @dls-height-unit * 312; 4 | @dls-layout-background-color: @dls-background-color-base-2; 5 | 6 | /* Header */ 7 | @dls-layout-header-height: @dls-height-unit * 16; 8 | @dls-layout-header-background-color: @dls-background-color-base-1; 9 | @dls-layout-header-shadow: @dls-shadow-1; 10 | 11 | /* Sidebar */ 12 | @dls-layout-sidebar-background-color: @dls-background-color-base-1; 13 | @dls-layout-sidebar-width: @dls-height-unit * 50; 14 | @dls-layout-sidebar-width-slim: @dls-height-unit * 15; 15 | @dls-layout-sidebar-shadow: @dls-shadow-1; 16 | 17 | @dls-layout-sidebar-separator-color: @dls-line-color-1; 18 | 19 | @dls-layout-sidebar-toggle-height: @dls-height-unit * 10; 20 | @dls-layout-sidebar-toggle-padding-x: @dls-height-unit * 2; 21 | 22 | @dls-layout-sidebar-float-toggle-width: @dls-height-unit * 4.5; 23 | @dls-layout-sidebar-float-toggle-radius: @dls-border-radius-1; 24 | @dls-layout-sidebar-float-button-font-color: @dls-foreground-color-reverse; 25 | @dls-layout-sidebar-float-toggle-backgroud-color: @dls-switch-track-color-off; 26 | @dls-layout-sidebar-float-toggle-backgroud-color-hover: @dls-switch-track-color-off-hover; 27 | @dls-layout-sidebar-float-toggle-backgroud-color-active: @dls-switch-track-color-off-active; 28 | 29 | /* Footer */ 30 | @dls-layout-footer-height: @dls-height-unit * 16; 31 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/lightbox.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Spacing */ 4 | @dls-lightbox-padding-x: @dls-padding-unit * 6; 5 | @dls-lightbox-padding-y: @dls-padding-unit * 10; 6 | 7 | @dls-lightbox-content-spacing-y: @dls-padding-unit * 6; 8 | @dls-lightbox-content-spacing-x: @dls-padding-unit * 6; 9 | 10 | /* Colors */ 11 | @dls-lightbox-backdrop-color: @dls-background-color-modal; 12 | @dls-lightbox-font-color: @dls-foreground-color-reverse; 13 | 14 | @dls-lightbox-font-size: @dls-font-size-1; 15 | @dls-lightbox-close-icon-size: @dls-height-unit * 6; 16 | 17 | @dls-lightbox-control-size: @dls-height-unit * 12; 18 | @dls-lightbox-control-border-radius: 50%; 19 | @dls-lightbox-control-icon-size: @dls-height-unit * 6; 20 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/link.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Font sizes */ 4 | @dls-link-font-size-s: @dls-font-size-0; 5 | @dls-link-font-size-m: @dls-font-size-1; 6 | 7 | /* Text decorations */ 8 | @dls-link-text-decoration: none; 9 | @dls-link-text-decoration-hover: none; 10 | @dls-link-text-decoration-focus: underline; 11 | @dls-link-text-decoration-active: none; 12 | 13 | /* Stylistic variants */ 14 | // normal 15 | @dls-link-font-color-normal: @dls-foreground-color-neutral; 16 | @dls-link-font-color-normal-hover: @dls-foreground-color-neutral-hover; 17 | @dls-link-font-color-normal-focus: @dls-foreground-color-neutral-hover; 18 | @dls-link-font-color-normal-active: @dls-foreground-color-neutral-active; 19 | @dls-link-font-color-normal-disabled: @dls-foreground-color-neutral-disabled; 20 | 21 | // strong 22 | @dls-link-font-color-strong: @dls-foreground-color-primary; 23 | @dls-link-font-color-strong-hover: @dls-foreground-color-primary-hover; 24 | @dls-link-font-color-strong-focus: @dls-foreground-color-primary-hover; 25 | @dls-link-font-color-strong-active: @dls-foreground-color-primary-active; 26 | @dls-link-font-color-strong-disabled: @dls-foreground-color-primary-disabled; 27 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/loading.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-loading-font-size-s: @dls-font-size-0; 4 | @dls-loading-font-size-m: @dls-font-size-1; 5 | @dls-loading-font-size-l: @dls-font-size-2; 6 | 7 | @dls-loading-line-height: @dls-line-height-1; 8 | 9 | @dls-loading-size-s: @dls-icon-size-normal; 10 | @dls-loading-size-m: @dls-icon-size-normal; 11 | @dls-loading-size-l: @dls-padding-unit * 6; 12 | 13 | @dls-loading-content-spacing-s: @dls-padding-unit * 1; 14 | @dls-loading-content-spacing-m: @dls-padding-unit * 1; 15 | @dls-loading-content-spacing-l: @dls-padding-unit * 2; 16 | 17 | @dls-loading-font-color-normal: @dls-foreground-color-neutral; 18 | @dls-loading-font-color-strong: @dls-foreground-color-neutral; 19 | @dls-loading-font-color-reverse: @dls-foreground-color-reverse; 20 | 21 | @dls-loading-color-normal: @dls-foreground-color-neutral-weak; 22 | @dls-loading-color-strong: @dls-foreground-color-primary; 23 | @dls-loading-color-reverse: @dls-foreground-color-reverse; 24 | 25 | @dls-loading-background-color: fade(@dls-background-color-base-1, 80%); 26 | @dls-loading-background-color-reverse: @dls-background-color-modal; 27 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/message.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-message-font-size-s: @dls-font-size-0; 5 | @dls-message-font-size-m: @dls-font-size-1; 6 | @dls-message-icon-size: @dls-icon-size-normal; 7 | @dls-message-line-height: @dls-line-height-1; 8 | 9 | @dls-message-content-spacing: @dls-padding-unit * 1; 10 | 11 | /* Colors */ 12 | @dls-message-font-color-standalone: @dls-foreground-color-neutral; 13 | 14 | @dls-message-font-color-info: @dls-foreground-color-neutral; 15 | @dls-message-font-color-success: @dls-foreground-color-success-primary; 16 | @dls-message-font-color-warning: @dls-foreground-color-warning-primary; 17 | @dls-message-font-color-error: @dls-foreground-color-error-primary; 18 | @dls-message-font-color-aux: @dls-foreground-color-neutral-weak; 19 | 20 | @dls-message-icon-color-info: @dls-foreground-color-info-primary; 21 | @dls-message-icon-color-success: @dls-foreground-color-success-primary; 22 | @dls-message-icon-color-warning: @dls-foreground-color-warning-primary; 23 | @dls-message-icon-color-error: @dls-foreground-color-error-primary; 24 | @dls-message-icon-color-aux: @dls-foreground-color-neutral-weak; 25 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/nav.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-nav-item-font-size: @dls-font-size-1; 4 | 5 | /* Nav items */ 6 | // Metrics 7 | @dls-nav-item-height: @dls-height-unit * 16; 8 | @dls-nav-item-padding: 0; 9 | @dls-nav-item-padding-more: @dls-padding-unit * 2; 10 | @dls-nav-item-spacing: @dls-padding-unit * 8; 11 | @dls-nav-item-content-spacing: @dls-padding-unit * 1; 12 | @dls-nav-item-icon-size-aux: @dls-icon-size-aux; 13 | 14 | // Colors 15 | @dls-nav-item-font-color: @dls-foreground-color-neutral-highlightable; 16 | @dls-nav-item-font-color-hover: @dls-foreground-color-neutral-highlightable-hover; 17 | @dls-nav-item-font-color-focus: @dls-nav-item-font-color-hover; 18 | @dls-nav-item-font-color-active: @dls-foreground-color-neutral-highlightable-active; 19 | @dls-nav-item-font-color-disabled: @dls-foreground-color-neutral-highlightable-disabled; 20 | 21 | @dls-nav-item-font-color-current: @dls-foreground-color-primary; 22 | @dls-nav-item-font-color-current-hover: @dls-foreground-color-primary-hover; 23 | @dls-nav-item-font-color-current-focus: @dls-nav-item-font-color-current-hover; 24 | @dls-nav-item-font-color-current-active: @dls-foreground-color-primary-active; 25 | 26 | // Background-colors 27 | @dls-nav-item-background-color-focus: @dls-background-color-focus; 28 | 29 | 30 | @dls-nav-item-icon-color-aux: currentColor; 31 | @dls-nav-item-icon-color-aux-disabled: currentColor; 32 | @dls-nav-item-icon-color-aux-current: currentColor; 33 | 34 | /* Indicators */ 35 | // Metrics 36 | @dls-nav-indicator-stroke-width: 3px; 37 | @dls-nav-indicator-border-radius: (@dls-nav-indicator-width / 2); 38 | @dls-nav-indicator-width: @dls-height-unit * 7; 39 | @dls-nav-indicator-width-hover: @dls-height-unit * 3; 40 | @dls-nav-indicator-width-focus: @dls-nav-indicator-width-hover; 41 | @dls-nav-indicator-width-active: @dls-height-unit * 9; 42 | 43 | // Colors 44 | @dls-nav-indicator-color: @dls-foreground-color-primary; 45 | @dls-nav-indicator-color-hover: @dls-nav-indicator-color; 46 | @dls-nav-indicator-color-focus: @dls-nav-indicator-color-hover; 47 | @dls-nav-indicator-color-active: @dls-menu-indicator-color; 48 | 49 | /* Dropdown card */ 50 | @dls-nav-card-background-color: @dls-background-color-base-1; 51 | @dls-nav-card-border-radius: @dls-border-radius-1; 52 | @dls-nav-card-background-color: @dls-background-color-base-1; 53 | @dls-nav-card-padding: @dls-padding-unit * 6; 54 | @dls-nav-card-column-spacing: @dls-padding-unit * 12; 55 | @dls-nav-card-target-spacing: @dls-padding-unit * 1; 56 | 57 | @dls-nav-card-title-font-color: @dls-foreground-color-neutral; 58 | @dls-nav-card-title-font-size: @dls-font-size-1; 59 | @dls-nav-card-title-font-weight: @dls-font-weight-2; 60 | 61 | // Use Link for items 62 | @dls-nav-card-item-spacing: @dls-padding-unit * 4; 63 | @dls-nav-card-item-font-size: @dls-font-size-1; 64 | @dls-nav-card-item-icon-size: @dls-icon-size-normal; 65 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/number-input.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | @import "./input.less"; 3 | 4 | /* Metrics */ 5 | 6 | // Heights 7 | @dls-number-input-height-xs: @dls-input-height-xs; 8 | @dls-number-input-height-s: @dls-input-height-s; 9 | @dls-number-input-height-m: @dls-input-height-m; 10 | 11 | // Widths 12 | 13 | // Normal 14 | @dls-number-input-spin-icon-size-normal: 0.85em; 15 | @dls-number-input-spin-button-min-width-normal: 18px; 16 | @dls-number-input-spin-button-width-normal-xs: max( 17 | @dls-number-input-spin-button-min-width-normal, 18 | (@dls-number-input-height-xs / 2) 19 | ); 20 | @dls-number-input-spin-button-width-normal-s: max( 21 | @dls-number-input-spin-button-min-width-normal, 22 | (@dls-number-input-height-s / 2) 23 | ); 24 | @dls-number-input-spin-button-width-normal-m: max( 25 | @dls-number-input-spin-button-min-width-normal, 26 | (@dls-number-input-height-m / 2) 27 | ); 28 | 29 | @dls-number-input-digits-normal: 6; 30 | // digits + spin button + horizontal paddings + left border 31 | @dls-number-input-width-normal-xs: dls-sum( 32 | unit(@dls-number-input-digits-normal, ch), 33 | @dls-number-input-spin-button-width-normal-xs, 34 | @dls-input-padding * 2, 35 | 1px 36 | ); 37 | @dls-number-input-width-normal-s: dls-sum( 38 | unit(@dls-number-input-digits-normal, ch), 39 | @dls-number-input-spin-button-width-normal-s, 40 | @dls-input-padding * 2, 41 | 1px 42 | ); 43 | @dls-number-input-width-normal-m: dls-sum( 44 | unit(@dls-number-input-digits-normal, ch), 45 | @dls-number-input-spin-button-width-normal-m, 46 | @dls-input-padding * 2, 47 | 1px 48 | ); 49 | 50 | // Strong 51 | @dls-number-input-spin-icon-size-strong: 1em; 52 | // Strong spin buttons' width and height share the same value 53 | 54 | @dls-number-input-digits-strong: 6; 55 | 56 | @dls-number-input-width-strong-xs: dls-sum( 57 | unit(@dls-number-input-digits-strong, ch), 58 | @dls-number-input-height-xs * 2, 59 | @dls-input-padding * 2 60 | ); 61 | @dls-number-input-width-strong-s: dls-sum( 62 | unit(@dls-number-input-digits-strong, ch), 63 | @dls-number-input-height-s * 2, 64 | @dls-input-padding * 2 65 | ); 66 | @dls-number-input-width-strong-m: dls-sum( 67 | unit(@dls-number-input-digits-strong, ch), 68 | @dls-number-input-height-m * 2, 69 | @dls-input-padding * 2 70 | ); 71 | 72 | // Shared 73 | @dls-number-input-spin-icon-color: @dls-foreground-color-neutral-weak; 74 | @dls-number-input-spin-icon-color-disabled: @dls-foreground-color-neutral-weak-disabled; 75 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/pagination.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | @import "./button.less"; 3 | 4 | /* Metrics */ 5 | @dls-pagination-font-size-xs: @dls-font-size-0; 6 | @dls-pagination-font-size-s: @dls-font-size-0; 7 | @dls-pagination-font-size-m: @dls-font-size-1; 8 | 9 | @dls-pagination-page-item-min-width-xs: @dls-button-height-xs; 10 | @dls-pagination-page-item-min-width-s: @dls-button-height-s; 11 | @dls-pagination-page-item-min-width-m: @dls-button-height-m; 12 | 13 | @dls-pagination-page-item-padding-x: @dls-padding-unit * 1; 14 | @dls-pagination-page-item-spacing: @dls-padding-unit * 1; 15 | 16 | @dls-pagination-part-spacing: @dls-padding-unit * 6; 17 | @dls-pagination-content-spacing: @dls-padding-unit * 2; 18 | 19 | @dls-pagination-goto-input-padding-x: @dls-padding-unit * 2; 20 | @dls-pagination-goto-input-digits: 3; 21 | // 3 digits + padding-x + border-width 22 | @dls-pagination-goto-input-width: dls-sum( 23 | 1ch * @dls-pagination-goto-input-digits, 24 | @dls-pagination-goto-input-padding-x * 2, 25 | 2px 26 | ); 27 | 28 | @dls-pagination-page-item-font-color: @dls-foreground-color-neutral; 29 | @dls-pagination-page-item-font-color-disabled: @dls-foreground-color-neutral-disabled; 30 | @dls-pagination-page-item-background-color: @dls-background-color-pressable; 31 | @dls-pagination-page-item-background-color-hover: @dls-background-color-pressable-hover; 32 | @dls-pagination-page-item-background-color-focus: @dls-pagination-page-item-background-color-hover; 33 | @dls-pagination-page-item-background-color-active: @dls-background-color-pressable-active; 34 | @dls-pagination-page-item-background-color-disabled: @dls-pagination-page-item-background-color; 35 | 36 | @dls-pagination-page-item-font-color-current: @dls-foreground-color-primary; 37 | @dls-pagination-page-item-background-color-current: @dls-background-color-current; 38 | @dls-pagination-page-item-background-color-current-hover: @dls-background-color-current-hover; 39 | @dls-pagination-page-item-background-color-current-focus: @dls-pagination-page-item-background-color-current-hover; 40 | @dls-pagination-page-item-background-color-current-active: @dls-background-color-current-active; 41 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/popover.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-popover-max-width: 400px; 4 | @dls-popover-line-height: @dls-line-height-2; 5 | @dls-popover-padding-x: @dls-padding-unit * 4; 6 | @dls-popover-padding-y: @dls-padding-unit * 4; 7 | @dls-popover-arrow-spacing: @dls-padding-unit * 3; 8 | 9 | @dls-popover-border-radius-s: @dls-border-radius-1; 10 | @dls-popover-border-radius-m: @dls-border-radius-1; 11 | 12 | @dls-popover-font-size-s: @dls-font-size-0; 13 | @dls-popover-font-size-m: @dls-font-size-1; 14 | 15 | @dls-popover-title-font-weight: @dls-font-weight-2; 16 | 17 | @dls-popover-title-spacing-s: @dls-spacing-unit * 1; 18 | @dls-popover-action-spacing-s: @dls-spacing-unit * 2; 19 | 20 | @dls-popover-title-spacing-m: @dls-spacing-unit * 2; 21 | @dls-popover-action-spacing-m: @dls-spacing-unit * 3; 22 | 23 | @dls-popover-title-font-size-s: @dls-font-size-1; 24 | @dls-popover-title-font-size-m: @dls-font-size-2; 25 | 26 | // Colors are the same as reverse tooltips 27 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/progress.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Typography */ 4 | // Default size 5 | @dls-progress-width-bar-xs: @dls-height-unit * 40; 6 | @dls-progress-width-bar-s: @dls-height-unit * 50; 7 | @dls-progress-width-bar-m: @dls-height-unit * 75; 8 | @dls-progress-size-circular-xs: @dls-height-unit * 15; 9 | @dls-progress-size-circular-s: @dls-height-unit * 20; 10 | @dls-progress-size-circular-m: @dls-height-unit * 25; 11 | 12 | @dls-progress-font-size-xs: @dls-font-size-0; 13 | @dls-progress-font-size-s: @dls-font-size-0; 14 | @dls-progress-font-size-m: @dls-font-size-1; 15 | @dls-progress-font-size-circular-xs: @dls-font-size-0; 16 | @dls-progress-font-size-circular-s: @dls-font-size-1; 17 | @dls-progress-font-size-circular-m: @dls-font-size-2; 18 | 19 | @dls-progress-font-color: @dls-foreground-color-neutral-light; 20 | @dls-progress-icon-size-bar: @dls-icon-size-normal; 21 | @dls-progress-icon-size-circular-xs: @dls-height-unit * 4; 22 | @dls-progress-icon-size-circular-s: @dls-height-unit * 6; 23 | @dls-progress-icon-size-circular-m: @dls-height-unit * 8; 24 | 25 | /* Metrics */ 26 | @dls-progress-track-width-xs: @dls-height-unit * 0.5; 27 | @dls-progress-track-width-s: @dls-height-unit * 1; 28 | @dls-progress-track-width-m: @dls-height-unit * 1.5; 29 | 30 | @dls-progress-border-radius-xs: (@dls-progress-track-width-xs / 2); 31 | @dls-progress-border-radius-s: (@dls-progress-track-width-s / 2); 32 | @dls-progress-border-radius-m: (@dls-progress-track-width-m / 2); 33 | 34 | @dls-progress-track-spacing-bar: @dls-padding-unit * 2; 35 | @dls-progress-icon-spacing-bar: @dls-padding-unit * 2; 36 | 37 | /* Colors */ 38 | @dls-progress-track-color: @dls-color-gray-4; 39 | @dls-progress-indicator-color: @dls-background-color-info-primary; 40 | @dls-progress-indicator-color-success: @dls-background-color-success-primary; 41 | @dls-progress-indicator-color-error: @dls-background-color-error-primary; 42 | 43 | @dls-progress-icon-color-success: @dls-foreground-color-success-primary; 44 | @dls-progress-icon-color-error: @dls-foreground-color-error-primary; 45 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/radio.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Typography */ 4 | @dls-radio-font-size-s: @dls-font-size-0; 5 | @dls-radio-font-size-m: @dls-font-size-1; 6 | 7 | @dls-radio-font-color: @dls-foreground-color-neutral; 8 | @dls-radio-font-color-disabled: @dls-foreground-color-neutral-disabled; 9 | 10 | /* Metrics */ 11 | @dls-radio-size-s: dls-sum(@dls-radio-font-size-s, 2px); 12 | @dls-radio-size-m: dls-sum(@dls-radio-font-size-m, 2px); 13 | 14 | @dls-radio-dot-size-s: ceil((round((@dls-radio-size-s / 3)) / 2)) * 2; 15 | @dls-radio-dot-size-m: ceil((round((@dls-radio-size-m / 3)) / 2)) * 2; 16 | 17 | @dls-radio-spacing: @dls-padding-unit * 2; 18 | 19 | /* Colors */ 20 | @dls-radio-border-color: @dls-border-color-fillable; 21 | @dls-radio-border-color-hover: @dls-border-color-fillable-hover; 22 | @dls-radio-border-color-focus: @dls-border-color-focus; 23 | @dls-radio-border-color-active: @dls-border-color-fillable-active; 24 | @dls-radio-border-color-disabled: @dls-border-color-fillable-disabled; 25 | 26 | @dls-radio-border-color-checked: @dls-border-color-primary; 27 | @dls-radio-border-color-checked-hover: @dls-radio-border-color-checked; 28 | @dls-radio-border-color-checked-focus: @dls-border-color-focus; 29 | @dls-radio-border-color-checked-active: @dls-radio-border-color-checked-hover; 30 | @dls-radio-border-color-checked-disabled: @dls-border-color-primary-disabled; 31 | 32 | @dls-radio-background-color: @dls-background-color-fillable; 33 | @dls-radio-background-color-hover: @dls-background-color-fillable-hover; 34 | @dls-radio-background-color-focus: @dls-radio-background-color-hover; 35 | @dls-radio-background-color-active: @dls-background-color-fillable-active; 36 | @dls-radio-background-color-disabled: @dls-background-color-fillable-disabled; 37 | 38 | @dls-radio-background-color-checked: @dls-background-color-primary; 39 | @dls-radio-background-color-checked-hover: @dls-background-color-primary-hover; 40 | @dls-radio-background-color-checked-focus: @dls-radio-background-color-checked-hover; 41 | @dls-radio-background-color-checked-active: @dls-background-color-primary-active; 42 | @dls-radio-background-color-checked-disabled: @dls-background-color-primary-disabled; 43 | 44 | @dls-radio-dot-color: @dls-foreground-color-primary-reverse; 45 | @dls-radio-dot-color-hover: @dls-radio-dot-color; 46 | @dls-radio-dot-color-focus: @dls-radio-dot-color-hover; 47 | @dls-radio-dot-color-active: @dls-radio-dot-color-hover; 48 | @dls-radio-dot-color-disabled: @dls-radio-dot-color; 49 | 50 | /* Focus ring */ 51 | @dls-radio-shadow-focus: @dls-shadow-focus; 52 | 53 | /* Radio group */ 54 | @dls-radio-group-spacing: @dls-padding-unit * 6; 55 | @dls-radio-group-spacing-simple: @dls-padding-unit * 2; 56 | @dls-radio-group-line-spacing: @dls-padding-unit * 2; 57 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/rating.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-rating-symbol-color: @dls-color-gray-4; 4 | @dls-rating-symbol-color-selected: @dls-foreground-color-warning-primary; 5 | @dls-rating-symbol-gap: var(--dls-rating-symbol-gap, @dls-padding-unit * 0.5); 6 | @dls-rating-symbol-size: @dls-rating-label-font-size; 7 | @dls-rating-symbol-scale-hover: 1.1; 8 | 9 | @dls-rating-label-spacing: var(--dls-rating-label-spacing, @dls-padding-unit * 4); 10 | @dls-rating-label-font-color: @dls-foreground-color-neutral; 11 | @dls-rating-label-font-size: @dls-font-size-1; 12 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/scrollbar.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | @dls-scrollbar-track-width: @dls-height-unit * 2.5; 4 | @dls-scrollbar-track-color: transparent; 5 | 6 | @dls-scrollbar-thumb-width: @dls-height-unit * 1.5; 7 | @dls-scrollbar-thumb-color: @dls-color-translucent-4; 8 | @dls-scrollbar-thumb-color-hover: @dls-color-translucent-6; 9 | @dls-scrollbar-thumb-border-radius: (@dls-scrollbar-thumb-width / 2); 10 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/search-box.less: -------------------------------------------------------------------------------- 1 | // See TextInput for input styles 2 | // See Button for search button styles 3 | // See Option for dropdown option styles 4 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/select.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | @import "./input.less"; 3 | @import "./tag-input.less"; 4 | 5 | // Height of single select is defined in Input, 6 | // and height of multiple select is fit to content. 7 | 8 | // default width 9 | @dls-select-width: @dls-input-width; 10 | 11 | // multiple select 12 | @dls-select-tag-height-xs: @dls-tag-input-tag-height-xs; 13 | @dls-select-tag-height-s: @dls-tag-input-tag-height-s; 14 | @dls-select-tag-height-m: @dls-tag-input-tag-height-m; 15 | @dls-select-tag-height-l: @dls-tag-input-tag-height-l; 16 | 17 | @dls-select-padding-x: @dls-input-padding; /* @deprecated, use input padding */ 18 | @dls-select-padding-y: @dls-select-padding-start; /* @deprecated, use padding-start */ 19 | @dls-select-padding-start: @dls-tag-input-padding-start; /* both top/left */ 20 | @dls-select-content-spacing: @dls-input-content-spacing; 21 | @dls-select-tag-spacing: @dls-tag-input-tag-spacing; 22 | 23 | @dls-select-icon-size-aux: @dls-icon-size-aux; 24 | @dls-select-icon-color-aux: @dls-icon-color-aux; 25 | @dls-select-icon-color-aux-disabled: @dls-icon-color-aux-disabled; 26 | 27 | // See Input for other input styles 28 | // See Option for dropdown option styles 29 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/sidenav.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-sidenav-item-height: @dls-height-unit * 8; 5 | 6 | @dls-sidenav-padding-x: @dls-padding-unit * 2; 7 | @dls-sidenav-padding-y: @dls-padding-unit * 2; 8 | 9 | @dls-sidenav-item-padding-start: @dls-padding-unit * 6; 10 | @dls-sidenav-item-padding-end: @dls-padding-unit * 4; 11 | @dls-sidenav-item-level-indent: @dls-padding-unit * 4; 12 | @dls-sidenav-item-spacing: @dls-padding-unit * 2; 13 | @dls-sidenav-item-content-spacing: @dls-padding-unit * 2; 14 | 15 | @dls-sidenav-item-icon-size: @dls-icon-size-normal; 16 | @dls-sidenav-item-icon-size-aux: @dls-icon-size-aux; 17 | 18 | /* Typography */ 19 | @dls-sidenav-item-font-size: @dls-font-size-1; 20 | @dls-sidenav-item-group-font-weight: @dls-font-weight-2; 21 | 22 | /* Colors */ 23 | @dls-sidenav-item-font-color: @dls-foreground-color-neutral; 24 | @dls-sidenav-item-font-color-hover: @dls-foreground-color-neutral-hover; 25 | @dls-sidenav-item-font-color-focus: @dls-sidenav-item-font-color-hover; 26 | @dls-sidenav-item-font-color-active: @dls-foreground-color-neutral-active; 27 | @dls-sidenav-item-font-color-disabled: @dls-foreground-color-neutral-disabled; 28 | 29 | @dls-sidenav-item-font-color-current: @dls-foreground-color-primary; 30 | @dls-sidenav-item-font-color-current-hover: @dls-foreground-color-primary-hover; 31 | @dls-sidenav-item-font-color-current-focus: @dls-sidenav-item-font-color-current-hover; 32 | @dls-sidenav-item-font-color-current-active: @dls-foreground-color-primary-active; 33 | 34 | @dls-sidenav-item-icon-color: currentColor; 35 | @dls-sidenav-item-icon-color-disabled: currentColor; 36 | @dls-sidenav-item-icon-color-current: currentColor; 37 | 38 | @dls-sidenav-item-icon-color-aux: currentColor; 39 | @dls-sidenav-item-icon-color-aux-disabled: currentColor; 40 | @dls-sidenav-item-icon-color-aux-current: currentColor; 41 | 42 | @dls-sidenav-item-background-color: @dls-background-color-pressable; 43 | @dls-sidenav-item-background-color-hover: @dls-background-color-pressable-hover; 44 | @dls-sidenav-item-background-color-focus: @dls-background-color-focus; 45 | @dls-sidenav-item-background-color-active: @dls-background-color-pressable-active; 46 | @dls-sidenav-item-background-color-disabled: @dls-sidenav-item-background-color; 47 | 48 | @dls-sidenav-item-background-color-current: @dls-background-color-current; 49 | @dls-sidenav-item-background-color-current-hover: @dls-background-color-current-hover; 50 | @dls-sidenav-item-background-color-current-focus: @dls-sidenav-item-background-color-current-hover; 51 | @dls-sidenav-item-background-color-current-active: @dls-background-color-current-active; 52 | 53 | @dls-sidenav-item-border-radius: @dls-border-radius-1; 54 | @dls-sidenav-width: @dls-menu-width; 55 | @dls-sidenav-width-collapsed: @dls-menu-width-collapsed; 56 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/switch.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-switch-width-xs: @dls-padding-unit * 5; 5 | @dls-switch-width-s: @dls-padding-unit * 6.5; 6 | @dls-switch-width-m: @dls-padding-unit * 8; 7 | 8 | @dls-switch-height-xs: @dls-height-unit * 3; 9 | @dls-switch-height-s: @dls-height-unit * 4; 10 | @dls-switch-height-m: @dls-height-unit * 5; 11 | 12 | @dls-switch-thumb-size-xs: @dls-height-unit * 2; 13 | @dls-switch-thumb-size-s: @dls-height-unit * 3; 14 | @dls-switch-thumb-size-m: @dls-height-unit * 3.5; 15 | 16 | @dls-switch-padding-xs: ((@dls-switch-height-xs - @dls-switch-thumb-size-xs) / 2); 17 | @dls-switch-padding-s: ((@dls-switch-height-s - @dls-switch-thumb-size-s) / 2); 18 | @dls-switch-padding-m: ((@dls-switch-height-m - @dls-switch-thumb-size-m) / 2); 19 | 20 | /* Colors */ 21 | @dls-switch-track-color-on: @dls-background-color-primary; 22 | @dls-switch-track-color-on-hover: @dls-background-color-primary-hover; 23 | @dls-switch-track-color-on-focus: @dls-switch-track-color-on-hover; 24 | @dls-switch-track-color-on-active: @dls-background-color-primary-active; 25 | @dls-switch-track-color-on-disabled: @dls-background-color-primary-disabled; 26 | 27 | @dls-switch-track-color-off: @dls-background-color-neutral-primary; 28 | @dls-switch-track-color-off-hover: @dls-background-color-neutral-primary-hover; 29 | @dls-switch-track-color-off-focus: @dls-switch-track-color-off-hover; 30 | @dls-switch-track-color-off-active: @dls-background-color-neutral-primary-active; 31 | @dls-switch-track-color-off-disabled: @dls-background-color-neutral-primary-disabled; 32 | 33 | @dls-switch-thumb-color-on: @dls-foreground-color-primary-reverse; 34 | @dls-switch-thumb-color-on-hover: @dls-switch-thumb-color-on; 35 | @dls-switch-thumb-color-on-focus: @dls-switch-thumb-color-on-hover; 36 | @dls-switch-thumb-color-on-active: @dls-switch-thumb-color-on; 37 | @dls-switch-thumb-color-on-disabled: @dls-switch-thumb-color-on; 38 | 39 | @dls-switch-thumb-color-off: @dls-switch-thumb-color-on; 40 | @dls-switch-thumb-color-off-hover: @dls-switch-thumb-color-on; 41 | @dls-switch-thumb-color-off-focus: @dls-switch-thumb-color-off-hover; 42 | @dls-switch-thumb-color-off-active: @dls-switch-thumb-color-on; 43 | @dls-switch-thumb-color-off-disabled: @dls-switch-thumb-color-on; 44 | 45 | @dls-switch-shadow-on-focus: @dls-shadow-focus; 46 | @dls-switch-shadow-off-focus: @dls-switch-shadow-on-focus; 47 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/table.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Common */ 4 | @dls-table-column-min-width: dls-sum(3em, @dls-table-cell-padding-x * 2); 5 | @dls-table-cell-border-color: @dls-line-color-0; 6 | @dls-table-header-border-color: @dls-line-color-2; 7 | @dls-table-border-color-dragging: @dls-line-color-2; 8 | @dls-table-padding-x: @dls-padding-unit * 4; 9 | 10 | /* Cell */ 11 | @dls-table-cell-padding-x: @dls-padding-unit * 2; 12 | @dls-table-cell-padding-y: @dls-padding-unit * 3; 13 | @dls-table-cell-padding-y-compact: @dls-padding-unit * 2; 14 | @dls-table-cell-padding-y-loose: @dls-padding-unit * 4; 15 | 16 | @dls-table-cell-content-spacing: @dls-padding-unit * 1; 17 | 18 | @dls-table-cell-background-color: @dls-background-color-base-1; 19 | @dls-table-cell-background-color-hover: @dls-background-color-base-1-hover; 20 | 21 | @dls-table-cell-font-color: @dls-foreground-color-neutral; 22 | 23 | /* Header */ 24 | @dls-table-header-padding-x: @dls-table-cell-padding-x; 25 | @dls-table-header-padding-y: @dls-table-cell-padding-y; 26 | @dls-table-header-padding-y-compact: @dls-table-cell-padding-y-compact; 27 | @dls-table-header-padding-y-loose: @dls-table-cell-padding-y-loose; 28 | 29 | @dls-table-header-background-color: @dls-background-color-base-3; 30 | @dls-table-header-background-color-hover: @dls-background-color-base-3-hover; 31 | 32 | @dls-table-header-font-weight: @dls-font-weight-2; 33 | @dls-table-header-font-color: @dls-foreground-color-neutral; 34 | 35 | /* Sub-row */ 36 | @dls-table-sub-row-background-color: @dls-background-color-base-2; 37 | @dls-table-sub-row-background-color-hover: @dls-background-color-base-2-hover; 38 | 39 | /* Typography */ 40 | @dls-table-font-size-s: @dls-font-size-0; 41 | @dls-table-font-size-m: @dls-font-size-1; 42 | 43 | /* Misc */ 44 | @dls-table-border-radius-s: @dls-border-radius-1; 45 | @dls-table-border-radius-m: @dls-border-radius-1; 46 | 47 | @dls-table-icon-size: @dls-icon-size-normal; 48 | @dls-table-icon-size-aux: @dls-icon-size-aux; 49 | 50 | @dls-table-header-icon-color: @dls-foreground-color-neutral-dim; 51 | @dls-table-header-icon-color-hover: @dls-foreground-color-neutral-dim-hover; 52 | @dls-table-header-icon-color-active: @dls-foreground-color-neutral-dim-active; 53 | @dls-table-header-icon-color-disabled: @dls-foreground-color-neutral-dim-disabled; 54 | 55 | @dls-table-overflow-shadow-top: none; 56 | @dls-table-overflow-shadow-right: @dls-shadow-4; 57 | @dls-table-overflow-shadow-bottom: none; 58 | @dls-table-overflow-shadow-left: @dls-shadow-4; 59 | 60 | @dls-table-body-height-no-data: @dls-height-unit * 27; 61 | 62 | @dls-table-action-spacing: @dls-padding-unit * 4; 63 | 64 | /* Filter */ 65 | @dls-table-filter-action-padding-y: @dls-padding-unit * 4; 66 | @dls-table-filter-action-spacing: @dls-padding-unit * 4; 67 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/tag-input.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-tag-input-padding-start: @dls-padding-unit * 1; 5 | @dls-tag-input-tag-spacing: @dls-padding-unit * 1; 6 | 7 | @dls-tag-input-tag-height-xs: dls-sum(@dls-height-xs, @dls-height-unit * -2); 8 | @dls-tag-input-tag-height-s: dls-sum(@dls-height-s, @dls-height-unit * -2); 9 | @dls-tag-input-tag-height-m: dls-sum(@dls-height-m, @dls-height-unit * -2); 10 | @dls-tag-input-tag-height-l: dls-sum(@dls-height-l, @dls-height-unit * -2); 11 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/tag.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-tag-height-xs: @dls-height-unit * 5; 5 | @dls-tag-height-s: @dls-height-unit * 6; 6 | @dls-tag-height-m: @dls-height-unit * 7; 7 | 8 | @dls-tag-border-radius-xs: @dls-border-radius-0; 9 | @dls-tag-border-radius-s: @dls-border-radius-1; 10 | @dls-tag-border-radius-m: @dls-border-radius-1; 11 | 12 | @dls-tag-border-width: 1px; 13 | @dls-tag-border-width-xs: 0.5px; 14 | @dls-tag-border-width-s: 1px; 15 | @dls-tag-border-width-m: 1px; 16 | 17 | @dls-tag-padding: @dls-padding-unit * 2; 18 | @dls-tag-padding-xs: @dls-padding-unit * 1; 19 | @dls-tag-padding-s: @dls-padding-unit * 1; 20 | @dls-tag-padding-m: @dls-padding-unit * 1; 21 | @dls-tag-content-spacing: @dls-padding-unit * 2; 22 | @dls-tag-list-spacing: @dls-padding-unit * 1; 23 | 24 | @dls-tag-font-size-xs: @dls-font-size-0; 25 | @dls-tag-font-size-s: @dls-font-size-0; 26 | @dls-tag-font-size-m: @dls-font-size-1; 27 | 28 | // Close icon 29 | // interactive styles are the same as icon buttons 30 | @dls-tag-icon-size-aux: calc(1em - 2px); 31 | 32 | /* Colors */ 33 | @dls-tag-color: @dls-foreground-color-neutral-light; // @deprecated 34 | @dls-tag-color-selected: @dls-foreground-color-primary; // @deprecated 35 | 36 | @dls-tag-color-default: @dls-color-gray-7; 37 | @dls-tag-color-default-selected: @dls-color-brand-7; 38 | 39 | @dls-tag-color-info: @dls-foreground-color-info-primary; 40 | @dls-tag-color-success: @dls-foreground-color-success-primary; 41 | @dls-tag-color-warning: @dls-foreground-color-warning-primary; 42 | @dls-tag-color-error: @dls-foreground-color-error-primary; 43 | 44 | @dls-tag-font-color-default: @dls-foreground-color-neutral; 45 | @dls-tag-font-color-selected: @dls-foreground-color-primary-reverse; 46 | @dls-tag-font-color-reverse: @dls-foreground-color-reverse; 47 | 48 | /* Predefined named colors */ 49 | @dls-tag-color-turquoise: #4db2b2; 50 | @dls-tag-color-violet: #5e1ae5; 51 | @dls-tag-color-green: #4bac3a; 52 | 53 | /* Opacity */ 54 | @dls-tag-font-opacity-disabled: 0.3; 55 | @dls-tag-font-opacity-selected-disabled: 1; 56 | @dls-tag-font-opacity-reverse-disabled: 1; 57 | 58 | @dls-tag-background-opacity: 0.08; 59 | @dls-tag-background-opacity-hover: 0.2; 60 | @dls-tag-background-opacity-active: 0.3; 61 | @dls-tag-background-opacity-disabled: 0.1; 62 | 63 | @dls-tag-background-opacity-selected: 1; 64 | @dls-tag-background-opacity-selected-hover: 0.6; 65 | @dls-tag-background-opacity-selected-active: 0.8; 66 | @dls-tag-background-opacity-selected-disabled: 0.1; 67 | 68 | @dls-tag-background-opacity-reverse: 1; 69 | @dls-tag-background-opacity-reverse-hover: 0.6; 70 | @dls-tag-background-opacity-reverse-active: 0.8; 71 | @dls-tag-background-opacity-reverse-disabled: 0.1; 72 | 73 | @dls-tag-border-opacity: 0.1; 74 | @dls-tag-border-opacity-disabled: 0.1; 75 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/textarea.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | @import "./input.less"; 3 | 4 | /* Typography */ 5 | 6 | // Font sizes 7 | @dls-textarea-font-size-s: @dls-font-size-0; 8 | @dls-textarea-font-size-m: @dls-font-size-1; 9 | 10 | // Line height 11 | @dls-textarea-line-height: @dls-line-height-1; 12 | 13 | /* Metrics */ 14 | 15 | // Paddins 16 | @dls-textarea-padding-x: @dls-padding-unit * 3; 17 | @dls-textarea-padding-y: @dls-padding-unit * 2; 18 | 19 | // Width 20 | @dls-textarea-width: @dls-input-width; 21 | 22 | // Heights 23 | @dls-textarea-rows: 3; 24 | @dls-textarea-height-s: dls-sum( 25 | dls-line-height(@dls-textarea-line-height, @dls-textarea-font-size-s) * 26 | @dls-textarea-rows, 27 | @dls-textarea-padding-y * 2, 28 | 2px 29 | ); 30 | @dls-textarea-height-m: dls-sum( 31 | dls-line-height(@dls-textarea-line-height, @dls-textarea-font-size-m) * 32 | @dls-textarea-rows, 33 | @dls-textarea-padding-y * 2, 34 | 2px 35 | ); 36 | 37 | /* Character count */ 38 | @dls-textarea-count-height: @dls-height-unit * 4; 39 | @dls-textarea-count-padding: @dls-padding-unit * 1; 40 | @dls-textarea-count-font-size: @dls-font-size-0; 41 | @dls-textarea-count-font-color: @dls-foreground-color-reverse; 42 | @dls-textarea-count-font-color-error: @dls-foreground-color-reverse; 43 | @dls-textarea-count-background-color: @dls-background-color-translucent; 44 | @dls-textarea-count-background-color-error: fade(@dls-background-color-error-primary, 60%); 45 | @dls-textarea-count-border-radius: @dls-border-radius-1; 46 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/time-picker.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Widths */ 4 | @dls-time-picker-width: 150px; 5 | @dls-time-picker-dropdown-min-width: @dls-time-picker-width; 6 | @dls-time-picker-option-content-min-width: 2ch; 7 | 8 | /* Icon */ 9 | @dls-time-picker-icon-color: @dls-input-icon-color; 10 | @dls-time-picker-icon-color-disabled: @dls-input-icon-color-disabled; 11 | 12 | // See TextInput for input styles 13 | // See Option for dropdown option styles 14 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/toast.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-toast-font-size-s: @dls-font-size-0; 5 | @dls-toast-font-size-m: @dls-font-size-1; 6 | @dls-toast-border-radius-s: @dls-border-radius-1; 7 | @dls-toast-border-radius-m: @dls-border-radius-1; 8 | @dls-toast-line-height: @dls-line-height-3; 9 | @dls-toast-icon-size: @dls-icon-size-normal; 10 | @dls-toast-icon-size-titled: @dls-icon-size-normal; 11 | @dls-toast-icon-size-aux: @dls-icon-size-aux; 12 | @dls-toast-padding-x: @dls-padding-unit * 4; 13 | @dls-toast-padding-y: @dls-padding-unit * 2; 14 | @dls-toast-padding-y-titled: @dls-padding-unit * 4; 15 | @dls-toast-content-spacing-before: @dls-padding-unit * 2; 16 | @dls-toast-content-spacing-after: @dls-padding-unit * 4; 17 | @dls-toast-spacing: @dls-padding-unit * 2; 18 | @dls-toast-max-width: 400px; 19 | 20 | @dls-toast-list-spacing-before: 10vh; 21 | 22 | @dls-toast-title-font-size-s: @dls-font-size-1; 23 | @dls-toast-title-font-size-m: @dls-font-size-2; 24 | @dls-toast-title-font-weight: @dls-font-weight-2; 25 | @dls-toast-title-line-height: @dls-line-height-1; 26 | @dls-toast-title-spacing-after: @dls-padding-unit * 1; 27 | 28 | /* Colors */ 29 | @dls-toast-background-color: @dls-background-color-base-1; 30 | @dls-toast-font-color: @dls-foreground-color-neutral; 31 | @dls-toast-title-font-color: @dls-toast-font-color; 32 | @dls-toast-shadow: @dls-shadow-4; 33 | 34 | @dls-toast-icon-color-info: @dls-foreground-color-info-primary; 35 | @dls-toast-icon-color-success: @dls-foreground-color-success-primary; 36 | @dls-toast-icon-color-warning: @dls-foreground-color-warning-primary; 37 | @dls-toast-icon-color-error: @dls-foreground-color-error-primary; 38 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/tooltip.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-tooltip-max-width: dls-sum(16em, @dls-tooltip-padding-x * 2); 5 | @dls-tooltip-font-size: @dls-font-size-0; 6 | @dls-tooltip-line-height: @dls-line-height-2; 7 | @dls-tooltip-padding-x: @dls-padding-unit * 2; 8 | @dls-tooltip-padding-y: @dls-padding-unit * 1; 9 | @dls-tooltip-target-spacing: @dls-padding-unit * 1; 10 | @dls-tooltip-arrow-width: @dls-height-unit * 2; 11 | @dls-tooltip-arrow-spacing: @dls-padding-unit * 2; 12 | @dls-tooltip-border-radius: @dls-border-radius-1; 13 | 14 | /* Stylistic variants */ 15 | @dls-tooltip-font-color-normal: @dls-foreground-color-neutral; 16 | @dls-tooltip-background-color-normal: @dls-background-color-base-1; 17 | @dls-tooltip-shadow-normal: @dls-shadow-4; 18 | 19 | @dls-tooltip-font-color-reverse: @dls-foreground-color-reverse; 20 | @dls-tooltip-background-color-reverse: @dls-background-color-translucent; 21 | @dls-tooltip-shadow-reverse: none; 22 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/transfer.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-transfer-font-size-s: @dls-font-size-0; 5 | @dls-transfer-font-size-m: @dls-font-size-1; 6 | 7 | @dls-transfer-border-radius-s: @dls-border-radius-1; 8 | @dls-transfer-border-radius-m: @dls-border-radius-1; 9 | 10 | @dls-transfer-padding-x: @dls-padding-unit * 3; 11 | @dls-transfer-header-content-spacing-1: @dls-padding-unit * 1; 12 | @dls-transfer-header-content-spacing-2: @dls-padding-unit * 2; 13 | @dls-transfer-content-padding-y: @dls-padding-unit * 1; 14 | 15 | @dls-transfer-item-height-s: @dls-height-unit * 7; 16 | @dls-transfer-item-height-m: @dls-height-unit * 8; 17 | 18 | @dls-transfer-item-content-spacing: @dls-padding-unit * 2; 19 | 20 | @dls-transfer-content-min-height-s: dls-sum( 21 | @dls-transfer-item-height-s * 10, 22 | @dls-transfer-content-padding-y * 2 23 | ); 24 | @dls-transfer-content-min-height-m: dls-sum( 25 | @dls-transfer-item-height-m * 10, 26 | @dls-transfer-content-padding-y * 2 27 | ); 28 | 29 | @dls-transfer-panel-width-s: dls-sum( 30 | @dls-font-size-0 * 15, 31 | @dls-transfer-padding-x * 2, 32 | 2px, 33 | @dls-checkbox-size-s, 34 | @dls-transfer-item-content-spacing 35 | ); 36 | @dls-transfer-panel-width-m: dls-sum( 37 | @dls-font-size-1 * 15, 38 | @dls-transfer-padding-x * 2, 39 | 2px, 40 | @dls-checkbox-size-m, 41 | @dls-transfer-item-content-spacing 42 | ); 43 | 44 | @dls-transfer-panel-spacing: @dls-padding-unit * 3; 45 | 46 | /* Headers */ 47 | @dls-transfer-header-height-s: @dls-height-unit * 8; 48 | @dls-transfer-header-height-m: @dls-height-unit * 9; 49 | 50 | @dls-transfer-header-background-color: @dls-background-color-base-2; 51 | @dls-transfer-header-font-color: @dls-foreground-color-neutral; 52 | @dls-transfer-header-font-weight: @dls-font-weight-1; 53 | @dls-transfer-header-button-font-weight: @dls-font-weight-2; 54 | 55 | /* Colors */ 56 | @dls-transfer-border-color: @dls-line-color-2; 57 | 58 | @dls-transfer-item-background-color: @dls-background-color-pressable; 59 | @dls-transfer-item-background-color-hover: @dls-background-color-pressable-hover; 60 | @dls-transfer-item-background-color-focus: @dls-transfer-item-background-color-hover; 61 | @dls-transfer-item-background-color-active: @dls-background-color-pressable-active; 62 | @dls-transfer-item-background-color-disabled: transparent; 63 | 64 | @dls-transfer-item-font-color: @dls-foreground-color-neutral; 65 | @dls-transfer-item-font-color-hover: @dls-transfer-item-font-color; 66 | @dls-transfer-item-font-color-focus: @dls-transfer-item-font-color-hover; 67 | @dls-transfer-item-font-color-active: @dls-transfer-item-font-color-hover; 68 | @dls-transfer-item-font-color-disabled: @dls-foreground-color-neutral-disabled; 69 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/components/tree.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | /* Metrics */ 4 | @dls-tree-node-height-s: @dls-height-unit * 7; 5 | @dls-tree-node-height-m: @dls-height-unit * 8; 6 | 7 | @dls-tree-font-size-s: @dls-font-size-0; 8 | @dls-tree-font-size-m: @dls-font-size-1; 9 | 10 | @dls-tree-icon-size: @dls-icon-size-normal; 11 | @dls-tree-icon-size-aux: @dls-icon-size-aux; 12 | 13 | @dls-tree-padding-x: @dls-padding-unit * 4; 14 | @dls-tree-node-content-spacing: @dls-padding-unit * 2; 15 | 16 | /* Colors & States */ 17 | @dls-tree-icon-color-aux: @dls-icon-color-aux; 18 | @dls-tree-icon-color-aux-disabled: @dls-icon-color-aux-disabled; 19 | 20 | @dls-tree-node-font-color: @dls-foreground-color-neutral; 21 | @dls-tree-node-font-color-disabled: @dls-foreground-color-neutral-disabled; 22 | @dls-tree-node-font-color-selected: @dls-foreground-color-primary; 23 | @dls-tree-node-font-color-selected-hover: @dls-foreground-color-primary-hover; 24 | @dls-tree-node-font-color-selected-focus: @dls-tree-node-font-color-selected-hover; 25 | @dls-tree-node-font-color-selected-active: @dls-foreground-color-primary-active; 26 | @dls-tree-node-font-color-highlighted: @dls-foreground-color-highlighted; 27 | 28 | @dls-tree-node-background-color: @dls-background-color-pressable; 29 | @dls-tree-node-background-color-hover: @dls-background-color-pressable-hover; 30 | @dls-tree-node-background-color-focus: @dls-tree-node-background-color-hover; 31 | @dls-tree-node-background-color-active: @dls-background-color-pressable-active; 32 | @dls-tree-node-background-color-selected: @dls-background-color-current; 33 | @dls-tree-node-background-color-selected-hover: @dls-background-color-current-hover; 34 | @dls-tree-node-background-color-selected-focus: @dls-tree-node-background-color-selected-hover; 35 | @dls-tree-node-background-color-selected-active: @dls-background-color-current-active; 36 | 37 | @dls-tree-node-font-weight-selected: @dls-font-weight-1; 38 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/index.less: -------------------------------------------------------------------------------- 1 | @plugin "../dist/lib"; 2 | 3 | @import "./tokens.less"; 4 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/themes/ai.less: -------------------------------------------------------------------------------- 1 | @import "../global.less"; 2 | 3 | // brand color 4 | @dls-color-brand: #4d79ff; 5 | @dls-color-brand-0: #fff; 6 | @dls-color-brand-1: #f2f7ff; 7 | @dls-color-brand-2: #e3edff; 8 | @dls-color-brand-3: #c4daff; 9 | @dls-color-brand-4: #99beff; 10 | @dls-color-brand-5: #729cfe; 11 | @dls-color-brand-6: #4d79ff; 12 | @dls-color-brand-7: #3a5bfd; 13 | @dls-color-brand-8: #333fe6; 14 | @dls-color-brand-9: #0f2dbd; 15 | @dls-color-brand-10: #1c244a; 16 | @dls-color-brand-11: #000; 17 | 18 | // info color 19 | @dls-color-info: @dls-color-brand; 20 | @dls-color-info-0: @dls-color-brand-0; 21 | @dls-color-info-1: @dls-color-brand-1; 22 | @dls-color-info-2: @dls-color-brand-2; 23 | @dls-color-info-3: @dls-color-brand-3; 24 | @dls-color-info-4: @dls-color-brand-4; 25 | @dls-color-info-5: @dls-color-brand-5; 26 | @dls-color-info-6: @dls-color-brand-6; 27 | @dls-color-info-7: @dls-color-brand-7; 28 | @dls-color-info-8: @dls-color-brand-8; 29 | @dls-color-info-9: @dls-color-brand-9; 30 | @dls-color-info-10: @dls-color-brand-10; 31 | @dls-color-info-11: @dls-color-brand-11; 32 | 33 | @dls-color-success: #3ac222; 34 | @dls-color-warning: #fea800; 35 | @dls-color-error: #f53f3f; 36 | 37 | // component height 38 | @dls-height-xs: @dls-height-unit * 7; 39 | @dls-height-s: @dls-height-unit * 8; 40 | @dls-height-m: @dls-height-unit * 9; 41 | @dls-height-l: @dls-height-unit * 10; 42 | @dls-height-xl: @dls-height-unit * 12; 43 | 44 | // border radius 45 | @dls-border-radius-0: 4px; 46 | @dls-border-radius-1: 6px; 47 | @dls-border-radius-2: 10px; 48 | @dls-border-radius-3: 16px; 49 | @dls-border-radius-4: 26px; 50 | 51 | // shadow color 52 | @dls-shadow-color: #0047c2; 53 | 54 | // component overrides 55 | @dls-checkbox-border-radius: @dls-border-radius-0; 56 | @dls-tag-color-turquoise: #00bbd1; 57 | @dls-tag-color-violet: #824fe7; 58 | @dls-tag-color-green: @dls-color-success-7; 59 | -------------------------------------------------------------------------------- /packages/less-plugin-dls/tokens/tokens.less: -------------------------------------------------------------------------------- 1 | @import "./global.less"; 2 | 3 | @import "./components/button.less"; 4 | @import "./components/link.less"; 5 | @import "./components/radio.less"; 6 | @import "./components/checkbox.less"; 7 | @import "./components/switch.less"; 8 | @import "./components/input.less"; 9 | @import "./components/textarea.less"; 10 | @import "./components/number-input.less"; 11 | @import "./components/option.less"; 12 | @import "./components/time-picker.less"; 13 | @import "./components/pagination.less"; 14 | @import "./components/badge.less"; 15 | @import "./components/breadcrumb.less"; 16 | @import "./components/steps.less"; 17 | @import "./components/tag.less"; 18 | @import "./components/anchor.less"; 19 | @import "./components/loading.less"; 20 | @import "./components/progress.less"; 21 | @import "./components/tree.less"; 22 | @import "./components/transfer.less"; 23 | @import "./components/tabs.less"; 24 | @import "./components/menu.less"; 25 | @import "./components/nav.less"; 26 | @import "./components/sidenav.less"; 27 | @import "./components/select.less"; 28 | @import "./components/dropdown.less"; 29 | @import "./components/slider.less"; 30 | @import "./components/collapse.less"; 31 | @import "./components/tooltip.less"; 32 | @import "./components/popover.less"; 33 | @import "./components/dialog.less"; 34 | @import "./components/drawer.less"; 35 | @import "./components/embedded.less"; 36 | @import "./components/toast.less"; 37 | @import "./components/alert.less"; 38 | @import "./components/carousel.less"; 39 | @import "./components/date-picker.less"; 40 | @import "./components/uploader.less"; 41 | @import "./components/table.less"; 42 | @import "./components/form.less"; 43 | @import "./components/lightbox.less"; 44 | @import "./components/cascader.less"; 45 | @import "./components/accordion.less"; 46 | @import "./components/layout.less"; 47 | @import "./components/message.less"; 48 | @import "./components/empty.less"; 49 | @import "./components/scrollbar.less"; 50 | @import "./components/rating.less"; 51 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - packages/** 3 | --------------------------------------------------------------------------------