mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
feat(tokens): add design tokens architecture (#29245)
<!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Following the Design Doc for the new Ionic Design System, an architecture for Design Tokens was added. 1. Added new `foundations` folder inside the `src`, to hold all the tokens related files. 2. On this file, a json with all the tokens for the new Design System was added. The format followed was the one suggested on the [W3C draft](https://design-tokens.github.io/community-group/format/). 3. Added a dev dependency for [Styles Dictionary](https://amzn.github.io/style-dictionary/#/), version 3.9.2. 4. Added a tokens.js script that will take care of transforming the json tokens into the desired output. For now, three files are being generated: ionic.vars.css (:root with all CSS Variables); ionic.vars.css (scss variables for each token) and ionic.utility.css (a new utility-class for each token) 5. Added the script `npm run build.tokens` to package.json, that will generate the three files mentioned above. For now, all these changes bring no impact to the rest of the Framework, as these variables are not yet being consumed. The `margin`, `padding` and `border-radius` were removed from the prohibited properties on lint, to prevent lint errors with the new utility-classes. This is very open to discussion/feedback if it's seen as not ok. The `build` command now includes the `build.tokens` script, to make sure the files are always generated, in case someone forget to run the command, after changing the json file! ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 6. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> --------- Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
This commit is contained in:
Bernardo Cardoso
@ -29,4 +29,4 @@ runs:
|
|||||||
with:
|
with:
|
||||||
name: ionic-core
|
name: ionic-core
|
||||||
output: core/CoreBuild.zip
|
output: core/CoreBuild.zip
|
||||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
|
paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
|
||||||
|
|||||||
@ -31,4 +31,4 @@ runs:
|
|||||||
with:
|
with:
|
||||||
name: ionic-core
|
name: ionic-core
|
||||||
output: core/CoreBuild.zip
|
output: core/CoreBuild.zip
|
||||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
|
paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
|
||||||
|
|||||||
@ -23,10 +23,10 @@ rules:
|
|||||||
at-rule-empty-line-before:
|
at-rule-empty-line-before:
|
||||||
- always
|
- always
|
||||||
- except:
|
- except:
|
||||||
- blockless-after-blockless
|
- blockless-after-blockless
|
||||||
- first-nested
|
- first-nested
|
||||||
ignore:
|
ignore:
|
||||||
- after-comment
|
- after-comment
|
||||||
|
|
||||||
block-closing-brace-newline-before:
|
block-closing-brace-newline-before:
|
||||||
- always
|
- always
|
||||||
@ -40,14 +40,13 @@ rules:
|
|||||||
custom-property-empty-line-before:
|
custom-property-empty-line-before:
|
||||||
- always
|
- always
|
||||||
- except:
|
- except:
|
||||||
- after-comment
|
- after-comment
|
||||||
- after-custom-property
|
- after-custom-property
|
||||||
- first-nested
|
- first-nested
|
||||||
|
|
||||||
declaration-no-important:
|
declaration-no-important:
|
||||||
- true
|
- true
|
||||||
|
|
||||||
|
|
||||||
order/order:
|
order/order:
|
||||||
- custom-properties
|
- custom-properties
|
||||||
- dollar-variables
|
- dollar-variables
|
||||||
@ -57,216 +56,212 @@ rules:
|
|||||||
|
|
||||||
# https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
|
# https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
|
||||||
order/properties-order:
|
order/properties-order:
|
||||||
|
|
||||||
# Box
|
# Box
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- display
|
- display
|
||||||
- position
|
- position
|
||||||
- top
|
- top
|
||||||
- right
|
- right
|
||||||
- bottom
|
- bottom
|
||||||
- left
|
- left
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- flex
|
- flex
|
||||||
- flex-basis
|
- flex-basis
|
||||||
- flex-direction
|
- flex-direction
|
||||||
- flex-flow
|
- flex-flow
|
||||||
- flex-grow
|
- flex-grow
|
||||||
- flex-shrink
|
- flex-shrink
|
||||||
- flex-wrap
|
- flex-wrap
|
||||||
- align-content
|
- align-content
|
||||||
- align-items
|
- align-items
|
||||||
- align-self
|
- align-self
|
||||||
- justify-content
|
- justify-content
|
||||||
- order
|
- order
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- width
|
- width
|
||||||
- min-width
|
- min-width
|
||||||
- max-width
|
- max-width
|
||||||
|
|
||||||
- height
|
- height
|
||||||
- min-height
|
- min-height
|
||||||
- max-height
|
- max-height
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- margin
|
- margin
|
||||||
- margin-top
|
- margin-top
|
||||||
- margin-right
|
- margin-right
|
||||||
- margin-bottom
|
- margin-bottom
|
||||||
- margin-left
|
- margin-left
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- padding
|
- padding
|
||||||
- padding-top
|
- padding-top
|
||||||
- padding-right
|
- padding-right
|
||||||
- padding-bottom
|
- padding-bottom
|
||||||
- padding-left
|
- padding-left
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- float
|
- float
|
||||||
- clear
|
- clear
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- columns
|
- columns
|
||||||
- column-gap
|
- column-gap
|
||||||
- column-fill
|
- column-fill
|
||||||
- column-rule
|
- column-rule
|
||||||
- column-span
|
- column-span
|
||||||
- column-count
|
- column-count
|
||||||
- column-width
|
- column-width
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- transform
|
- transform
|
||||||
- transform-box
|
- transform-box
|
||||||
- transform-origin
|
- transform-origin
|
||||||
- transform-style
|
- transform-style
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- transition
|
- transition
|
||||||
- transition-delay
|
- transition-delay
|
||||||
- transition-duration
|
- transition-duration
|
||||||
- transition-property
|
- transition-property
|
||||||
- transition-timing-function
|
- transition-timing-function
|
||||||
|
|
||||||
# Border
|
# Border
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- border
|
- border
|
||||||
- border-top
|
- border-top
|
||||||
- border-right
|
- border-right
|
||||||
- border-bottom
|
- border-bottom
|
||||||
- border-left
|
- border-left
|
||||||
- border-width
|
- border-width
|
||||||
- border-top-width
|
- border-top-width
|
||||||
- border-right-width
|
- border-right-width
|
||||||
- border-bottom-width
|
- border-bottom-width
|
||||||
- border-left-width
|
- border-left-width
|
||||||
|
|
||||||
- border-style
|
- border-style
|
||||||
- border-top-style
|
- border-top-style
|
||||||
- border-right-style
|
- border-right-style
|
||||||
- border-bottom-style
|
- border-bottom-style
|
||||||
- border-left-style
|
- border-left-style
|
||||||
|
|
||||||
- border-radius
|
- border-radius
|
||||||
- border-top-left-radius
|
- border-top-left-radius
|
||||||
- border-top-right-radius
|
- border-top-right-radius
|
||||||
- border-bottom-left-radius
|
- border-bottom-left-radius
|
||||||
- border-bottom-right-radius
|
- border-bottom-right-radius
|
||||||
|
|
||||||
- border-color
|
- border-color
|
||||||
- border-top-color
|
- border-top-color
|
||||||
- border-right-color
|
- border-right-color
|
||||||
- border-bottom-color
|
- border-bottom-color
|
||||||
- border-left-color
|
- border-left-color
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- outline
|
- outline
|
||||||
- outline-color
|
- outline-color
|
||||||
- outline-offset
|
- outline-offset
|
||||||
- outline-style
|
- outline-style
|
||||||
- outline-width
|
- outline-width
|
||||||
|
|
||||||
# Background
|
# Background
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- background
|
- background
|
||||||
- background-attachment
|
- background-attachment
|
||||||
- background-clip
|
- background-clip
|
||||||
- background-color
|
- background-color
|
||||||
- background-image
|
- background-image
|
||||||
- background-repeat
|
- background-repeat
|
||||||
- background-position
|
- background-position
|
||||||
- background-size
|
- background-size
|
||||||
|
|
||||||
# Text
|
# Text
|
||||||
|
|
||||||
- color
|
- color
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- font
|
- font
|
||||||
- font-family
|
- font-family
|
||||||
- font-size
|
- font-size
|
||||||
- font-smoothing
|
- font-smoothing
|
||||||
- font-style
|
- font-style
|
||||||
- font-variant
|
- font-variant
|
||||||
- font-weight
|
- font-weight
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- letter-spacing
|
- letter-spacing
|
||||||
- line-height
|
- line-height
|
||||||
- list-style
|
- list-style
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- text-align
|
- text-align
|
||||||
- text-decoration
|
- text-decoration
|
||||||
- text-indent
|
- text-indent
|
||||||
- text-overflow
|
- text-overflow
|
||||||
- text-rendering
|
- text-rendering
|
||||||
- text-shadow
|
- text-shadow
|
||||||
- text-transform
|
- text-transform
|
||||||
- text-wrap
|
- text-wrap
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- white-space
|
- white-space
|
||||||
- word-spacing
|
- word-spacing
|
||||||
|
|
||||||
# Other
|
# Other
|
||||||
|
|
||||||
- emptyLineBefore: always
|
- emptyLineBefore: always
|
||||||
properties:
|
properties:
|
||||||
- border-collapse
|
- border-collapse
|
||||||
- border-spacing
|
- border-spacing
|
||||||
- box-shadow
|
- box-shadow
|
||||||
- caption-side
|
- caption-side
|
||||||
- contain
|
- contain
|
||||||
- content
|
- content
|
||||||
- cursor
|
- cursor
|
||||||
- direction
|
- direction
|
||||||
- empty-cells
|
- empty-cells
|
||||||
- object-fit
|
- object-fit
|
||||||
- opacity
|
- opacity
|
||||||
- overflow
|
- overflow
|
||||||
- quotes
|
- quotes
|
||||||
- speak
|
- speak
|
||||||
- table-layout
|
- table-layout
|
||||||
- touch-action
|
- touch-action
|
||||||
- user-select
|
- user-select
|
||||||
- vertical-align
|
- vertical-align
|
||||||
- visibility
|
- visibility
|
||||||
- z-index
|
- z-index
|
||||||
|
|
||||||
property-disallowed-list:
|
property-disallowed-list:
|
||||||
- background-position
|
- background-position
|
||||||
- right
|
- right
|
||||||
- left
|
- left
|
||||||
- float
|
- float
|
||||||
- padding
|
|
||||||
- padding-left
|
- padding-left
|
||||||
- padding-right
|
- padding-right
|
||||||
- margin
|
|
||||||
- margin-left
|
- margin-left
|
||||||
- margin-right
|
- margin-right
|
||||||
- border-radius
|
|
||||||
- border-top-left-radius
|
- border-top-left-radius
|
||||||
- border-top-right-radius
|
- border-top-right-radius
|
||||||
- border-bottom-right-radius
|
- border-bottom-right-radius
|
||||||
|
|||||||
1647
core/package-lock.json
generated
1647
core/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -67,14 +67,16 @@
|
|||||||
"rollup": "^2.26.4",
|
"rollup": "^2.26.4",
|
||||||
"sass": "^1.33.0",
|
"sass": "^1.33.0",
|
||||||
"serve": "^14.0.1",
|
"serve": "^14.0.1",
|
||||||
|
"style-dictionary": "^3.9.2",
|
||||||
"stylelint": "^13.13.1",
|
"stylelint": "^13.13.1",
|
||||||
"stylelint-order": "^4.1.0"
|
"stylelint-order": "^4.1.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
|
"build": "npm run clean && npm run build.tokens && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
|
||||||
"build.css": "npm run css.sass && npm run css.minify",
|
"build.css": "npm run css.sass && npm run css.minify",
|
||||||
"build.debug": "npm run clean && stencil build --debug",
|
"build.debug": "npm run clean && stencil build --debug",
|
||||||
"build.docs.json": "stencil build --docs-json dist/docs.json",
|
"build.docs.json": "stencil build --docs-json dist/docs.json",
|
||||||
|
"build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix",
|
||||||
"clean": "node scripts/clean.js",
|
"clean": "node scripts/clean.js",
|
||||||
"css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
|
"css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
|
||||||
"css.sass": "sass --embed-sources src/css:./css",
|
"css.sass": "sass --embed-sources src/css:./css",
|
||||||
|
|||||||
158
core/scripts/tokens.js
Normal file
158
core/scripts/tokens.js
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
/* For generating Design Tokens, we use Style Dictionary for several reasons:
|
||||||
|
- It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
|
||||||
|
- It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
|
||||||
|
- It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
|
||||||
|
- It can easily scale to different necessities we might have in the future.
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const StyleDictionary = require('style-dictionary');
|
||||||
|
|
||||||
|
const { fileHeader } = StyleDictionary.formatHelpers;
|
||||||
|
|
||||||
|
// Empty for as an example of how we can add some extra variables, not from the tokens JSON
|
||||||
|
const customVariables = ``;
|
||||||
|
|
||||||
|
// Prefix for all generated variables
|
||||||
|
const variablesPrefix = 'ionic';
|
||||||
|
|
||||||
|
// CSS vanilla :root format
|
||||||
|
StyleDictionary.registerFormat({
|
||||||
|
name: 'rootFormat',
|
||||||
|
formatter({ dictionary, file }) {
|
||||||
|
// Add a prefix to all variable names
|
||||||
|
const prefixedVariables = dictionary.allProperties.map((prop) => {
|
||||||
|
return ` --${variablesPrefix}-${prop.name}: ${prop.value};`;
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
fileHeader({ file }) +
|
||||||
|
':root {\n' +
|
||||||
|
prefixedVariables.join('\n') + // Join all prefixed variables with a newline
|
||||||
|
customVariables +
|
||||||
|
'\n}\n'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// scss variables format
|
||||||
|
StyleDictionary.registerFormat({
|
||||||
|
name: 'scssVariablesFormat',
|
||||||
|
formatter({ dictionary, file }) {
|
||||||
|
// Add a prefix to all variable names
|
||||||
|
const prefixedVariables = dictionary.allProperties.map((prop) => {
|
||||||
|
return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});`;
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
fileHeader({ file }) +
|
||||||
|
prefixedVariables.join('\n') + // Join all prefixed variables with a newline
|
||||||
|
customVariables +
|
||||||
|
'\n'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create utility-classes
|
||||||
|
StyleDictionary.registerFormat({
|
||||||
|
name: 'cssUtilityClassesFormat',
|
||||||
|
formatter({ dictionary, file }) {
|
||||||
|
const utilityClasses = dictionary.allProperties.map((prop) => {
|
||||||
|
let tokenType = prop.attributes.category;
|
||||||
|
const className = `${prop.name}`;
|
||||||
|
let utilityClass = '';
|
||||||
|
|
||||||
|
switch (tokenType) {
|
||||||
|
case 'color':
|
||||||
|
utilityClass = `.${variablesPrefix}-${className} {\n color: $ionic-${prop.name};\n}
|
||||||
|
.${variablesPrefix}-background-${className} {\n background-color: $ionic-${prop.name};\n}`;
|
||||||
|
break;
|
||||||
|
case 'border':
|
||||||
|
const borderAttribute = prop.attributes.type === 'radius' ? 'border-radius' : 'border-width';
|
||||||
|
utilityClass = `.${variablesPrefix}-${className} {\n ${borderAttribute}: $ionic-${prop.name};\n}`;
|
||||||
|
break;
|
||||||
|
case 'font':
|
||||||
|
const fontAttribute = prop.attributes.type === 'size' ? 'font-size' : 'font-weight';
|
||||||
|
utilityClass = `.${variablesPrefix}-${className} {\n ${fontAttribute}: $ionic-${prop.name};\n}`;
|
||||||
|
break;
|
||||||
|
case 'elevation':
|
||||||
|
utilityClass = `.${variablesPrefix}-${className} {\n box-shadow: $ionic-${prop.name};\n}`;
|
||||||
|
break;
|
||||||
|
case 'space':
|
||||||
|
utilityClass = `.${variablesPrefix}-margin-${className} {\n margin: $ionic-${prop.name};\n};
|
||||||
|
.${variablesPrefix}-padding-${className} {\n padding: $ionic-${prop.name};\n}`;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
utilityClass = `.${variablesPrefix}-${className} {\n ${tokenType}: $ionic-${prop.name};\n}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return utilityClass;
|
||||||
|
});
|
||||||
|
|
||||||
|
return [fileHeader({ file }), '@import "./ionic.vars";\n', utilityClasses.join('\n')].join('\n');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
|
||||||
|
const w3cTokenJsonParser = {
|
||||||
|
pattern: /\.json|\.tokens\.json|\.tokens$/,
|
||||||
|
parse(_a) {
|
||||||
|
var contents = _a.contents;
|
||||||
|
// replace $value with value so that style dictionary recognizes it
|
||||||
|
var preparedContent = (contents || '{}')
|
||||||
|
.replace(/"\$?value":/g, '"value":')
|
||||||
|
// convert $description to comment
|
||||||
|
.replace(/"\$?description":/g, '"comment":');
|
||||||
|
//
|
||||||
|
return JSON.parse(preparedContent);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
StyleDictionary.registerParser(w3cTokenJsonParser);
|
||||||
|
|
||||||
|
// Generate Tokens
|
||||||
|
StyleDictionary.extend({
|
||||||
|
source: ['./src/foundations/*.json'],
|
||||||
|
platforms: {
|
||||||
|
css: {
|
||||||
|
buildPath: './src/foundations/',
|
||||||
|
transformGroup: 'css',
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
destination: 'ionic.root.scss',
|
||||||
|
format: 'rootFormat',
|
||||||
|
options: {
|
||||||
|
outputReferences: true,
|
||||||
|
fileHeader: `myFileHeader`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
scss: {
|
||||||
|
buildPath: './src/foundations/',
|
||||||
|
transformGroup: 'scss',
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
destination: 'ionic.vars.scss',
|
||||||
|
format: 'scssVariablesFormat',
|
||||||
|
options: {
|
||||||
|
outputReferences: true,
|
||||||
|
fileHeader: `myFileHeader`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
destination: 'ionic.utility.scss',
|
||||||
|
format: 'cssUtilityClassesFormat',
|
||||||
|
options: {
|
||||||
|
outputReferences: true,
|
||||||
|
fileHeader: `myFileHeader`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fileHeader: {
|
||||||
|
myFileHeader: () => {
|
||||||
|
return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}).buildAllPlatforms();
|
||||||
378
core/src/foundations/_design-tokens.json
Normal file
378
core/src/foundations/_design-tokens.json
Normal file
@ -0,0 +1,378 @@
|
|||||||
|
{
|
||||||
|
"color": {
|
||||||
|
"$type": "color",
|
||||||
|
"primary": {
|
||||||
|
"{}": {
|
||||||
|
"$value": "{color.primary.400}"
|
||||||
|
},
|
||||||
|
"10": {
|
||||||
|
"$value": "#f7faff"
|
||||||
|
},
|
||||||
|
"50": {
|
||||||
|
"$value": "#cbdffe"
|
||||||
|
},
|
||||||
|
"100": {
|
||||||
|
"$value": "#9ec4fd"
|
||||||
|
},
|
||||||
|
"200": {
|
||||||
|
"$value": "#74aafc"
|
||||||
|
},
|
||||||
|
"300": {
|
||||||
|
"$value": "#4991fb"
|
||||||
|
},
|
||||||
|
"400": {
|
||||||
|
"$value": "#1068eb"
|
||||||
|
},
|
||||||
|
"500": {
|
||||||
|
"$value": "#0750be"
|
||||||
|
},
|
||||||
|
"600": {
|
||||||
|
"$value": "#053d90"
|
||||||
|
},
|
||||||
|
"700": {
|
||||||
|
"$value": "#062b63"
|
||||||
|
},
|
||||||
|
"800": {
|
||||||
|
"$value": "#061935"
|
||||||
|
},
|
||||||
|
"900": {
|
||||||
|
"$value": "#010408"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"secondary": {
|
||||||
|
"$value": "#303d60"
|
||||||
|
},
|
||||||
|
"neutral": {
|
||||||
|
"10": {
|
||||||
|
"$value": "#f5f5f5"
|
||||||
|
},
|
||||||
|
"50": {
|
||||||
|
"$value": "#e7e7e7"
|
||||||
|
},
|
||||||
|
"100": {
|
||||||
|
"$value": "#dadada"
|
||||||
|
},
|
||||||
|
"200": {
|
||||||
|
"$value": "#c9c9c9"
|
||||||
|
},
|
||||||
|
"300": {
|
||||||
|
"$value": "#b8b8b8"
|
||||||
|
},
|
||||||
|
"400": {
|
||||||
|
"$value": "#9a9a9a"
|
||||||
|
},
|
||||||
|
"500": {
|
||||||
|
"$value": "#767676"
|
||||||
|
},
|
||||||
|
"600": {
|
||||||
|
"$value": "#535353"
|
||||||
|
},
|
||||||
|
"700": {
|
||||||
|
"$value": "#373737"
|
||||||
|
},
|
||||||
|
"800": {
|
||||||
|
"$value": "#212121"
|
||||||
|
},
|
||||||
|
"900": {
|
||||||
|
"$value": "#05080f"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"error": {
|
||||||
|
"{}": {
|
||||||
|
"$value": "{color.error.400}"
|
||||||
|
},
|
||||||
|
"10": {
|
||||||
|
"$value": "#fffafa"
|
||||||
|
},
|
||||||
|
"50": {
|
||||||
|
"$value": "#ffd5d5"
|
||||||
|
},
|
||||||
|
"100": {
|
||||||
|
"$value": "#ffafaf"
|
||||||
|
},
|
||||||
|
"200": {
|
||||||
|
"$value": "#ff8a8a"
|
||||||
|
},
|
||||||
|
"300": {
|
||||||
|
"$value": "#ff6666"
|
||||||
|
},
|
||||||
|
"400": {
|
||||||
|
"$value": "#f72c2c"
|
||||||
|
},
|
||||||
|
"500": {
|
||||||
|
"$value": "#c71212"
|
||||||
|
},
|
||||||
|
"600": {
|
||||||
|
"$value": "#970606"
|
||||||
|
},
|
||||||
|
"700": {
|
||||||
|
"$value": "#670202"
|
||||||
|
},
|
||||||
|
"800": {
|
||||||
|
"$value": "#380101"
|
||||||
|
},
|
||||||
|
"900": {
|
||||||
|
"$value": "#080000"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"warning": {
|
||||||
|
"{}": {
|
||||||
|
"$value": "{color.warning.400}"
|
||||||
|
},
|
||||||
|
"10": {
|
||||||
|
"$value": "#fffdfa"
|
||||||
|
},
|
||||||
|
"50": {
|
||||||
|
"$value": "#ffecce"
|
||||||
|
},
|
||||||
|
"100": {
|
||||||
|
"$value": "#ffdba0"
|
||||||
|
},
|
||||||
|
"200": {
|
||||||
|
"$value": "#ffca73"
|
||||||
|
},
|
||||||
|
"300": {
|
||||||
|
"$value": "#ffb845"
|
||||||
|
},
|
||||||
|
"400": {
|
||||||
|
"$value": "#ff9707"
|
||||||
|
},
|
||||||
|
"500": {
|
||||||
|
"$value": "#ce7a06"
|
||||||
|
},
|
||||||
|
"600": {
|
||||||
|
"$value": "#9c5f0a"
|
||||||
|
},
|
||||||
|
"700": {
|
||||||
|
"$value": "#6b430c"
|
||||||
|
},
|
||||||
|
"800": {
|
||||||
|
"$value": "#39260b"
|
||||||
|
},
|
||||||
|
"900": {
|
||||||
|
"$value": "#080502"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"success": {
|
||||||
|
"{}": {
|
||||||
|
"$value": "{color.success.400}"
|
||||||
|
},
|
||||||
|
"10": {
|
||||||
|
"$value": "#fbfffa"
|
||||||
|
},
|
||||||
|
"50": {
|
||||||
|
"$value": "#def7d8"
|
||||||
|
},
|
||||||
|
"100": {
|
||||||
|
"$value": "#c6f0b7"
|
||||||
|
},
|
||||||
|
"200": {
|
||||||
|
"$value": "#a4e188"
|
||||||
|
},
|
||||||
|
"300": {
|
||||||
|
"$value": "#73c346"
|
||||||
|
},
|
||||||
|
"400": {
|
||||||
|
"$value": "#52a518"
|
||||||
|
},
|
||||||
|
"500": {
|
||||||
|
"$value": "#36870C"
|
||||||
|
},
|
||||||
|
"600": {
|
||||||
|
"$value": "#36870c"
|
||||||
|
},
|
||||||
|
"700": {
|
||||||
|
"$value": "#226907"
|
||||||
|
},
|
||||||
|
"800": {
|
||||||
|
"$value": "#144b05"
|
||||||
|
},
|
||||||
|
"900": {
|
||||||
|
"$value": "#030f02"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"info": {
|
||||||
|
"{}": {
|
||||||
|
"$value": "{color.info.400}"
|
||||||
|
},
|
||||||
|
"10": {
|
||||||
|
"$value": "#f5fbff"
|
||||||
|
},
|
||||||
|
"50": {
|
||||||
|
"$value": "#c6e7ff"
|
||||||
|
},
|
||||||
|
"100": {
|
||||||
|
"$value": "#97d3ff"
|
||||||
|
},
|
||||||
|
"200": {
|
||||||
|
"$value": "#6ac0fe"
|
||||||
|
},
|
||||||
|
"300": {
|
||||||
|
"$value": "#3dadfe"
|
||||||
|
},
|
||||||
|
"400": {
|
||||||
|
"$value": "#008bef"
|
||||||
|
},
|
||||||
|
"500": {
|
||||||
|
"$value": "#0071c2"
|
||||||
|
},
|
||||||
|
"600": {
|
||||||
|
"$value": "#005796"
|
||||||
|
},
|
||||||
|
"700": {
|
||||||
|
"$value": "#003d69"
|
||||||
|
},
|
||||||
|
"800": {
|
||||||
|
"$value": "#02243c"
|
||||||
|
},
|
||||||
|
"900": {
|
||||||
|
"$value": "#020a0f"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"font": {
|
||||||
|
"$type": "font",
|
||||||
|
"size": {
|
||||||
|
"h1": {
|
||||||
|
"$value": "32px"
|
||||||
|
},
|
||||||
|
"h2": {
|
||||||
|
"$value": "28px"
|
||||||
|
},
|
||||||
|
"h3": {
|
||||||
|
"$value": "26px"
|
||||||
|
},
|
||||||
|
"h4": {
|
||||||
|
"$value": "22px"
|
||||||
|
},
|
||||||
|
"h5": {
|
||||||
|
"$value": "20px"
|
||||||
|
},
|
||||||
|
"h6": {
|
||||||
|
"$value": "18px"
|
||||||
|
},
|
||||||
|
"display": {
|
||||||
|
"$value": "36px"
|
||||||
|
},
|
||||||
|
"base": {
|
||||||
|
"$value": "16px"
|
||||||
|
},
|
||||||
|
"s": {
|
||||||
|
"$value": "14px"
|
||||||
|
},
|
||||||
|
"xs": {
|
||||||
|
"$value": "12px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"light": {
|
||||||
|
"$value": "300"
|
||||||
|
},
|
||||||
|
"regular": {
|
||||||
|
"$value": "400"
|
||||||
|
},
|
||||||
|
"semi-bold": {
|
||||||
|
"$value": "600"
|
||||||
|
},
|
||||||
|
"bold": {
|
||||||
|
"$value": "700"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"space": {
|
||||||
|
"$type": "space",
|
||||||
|
"none": {
|
||||||
|
"$value": "0"
|
||||||
|
},
|
||||||
|
"xxxxs": {
|
||||||
|
"$value": "2px"
|
||||||
|
},
|
||||||
|
"xxxs": {
|
||||||
|
"$value": "4px"
|
||||||
|
},
|
||||||
|
"xss": {
|
||||||
|
"$value": "6px"
|
||||||
|
},
|
||||||
|
"xs": {
|
||||||
|
"$value": "8px"
|
||||||
|
},
|
||||||
|
"s": {
|
||||||
|
"$value": "12px"
|
||||||
|
},
|
||||||
|
"base": {
|
||||||
|
"$value": "16px"
|
||||||
|
},
|
||||||
|
"m": {
|
||||||
|
"$value": "20px"
|
||||||
|
},
|
||||||
|
"l": {
|
||||||
|
"$value": "24px"
|
||||||
|
},
|
||||||
|
"xl": {
|
||||||
|
"$value": "28px"
|
||||||
|
},
|
||||||
|
"xxl": {
|
||||||
|
"$value": "32px"
|
||||||
|
},
|
||||||
|
"xxxl": {
|
||||||
|
"$value": "36px"
|
||||||
|
},
|
||||||
|
"xxxxl": {
|
||||||
|
"$value": "40px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"border": {
|
||||||
|
"$type": "border",
|
||||||
|
"radius": {
|
||||||
|
"$type": "radius",
|
||||||
|
"square": {
|
||||||
|
"$value": "0"
|
||||||
|
},
|
||||||
|
"rounded": {
|
||||||
|
"small": {
|
||||||
|
"$value": "4px"
|
||||||
|
},
|
||||||
|
"medium": {
|
||||||
|
"$value": "8px"
|
||||||
|
},
|
||||||
|
"large": {
|
||||||
|
"$value": "16px"
|
||||||
|
},
|
||||||
|
"x-large": {
|
||||||
|
"$value": "32px"
|
||||||
|
},
|
||||||
|
"full": {
|
||||||
|
"$value": "100%"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"$type": "size",
|
||||||
|
"small": {
|
||||||
|
"$value": "1px"
|
||||||
|
},
|
||||||
|
"medium": {
|
||||||
|
"$value": "2px"
|
||||||
|
},
|
||||||
|
"large": {
|
||||||
|
"$value": "3px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"elevation": {
|
||||||
|
"$type": "elevation",
|
||||||
|
"0": {
|
||||||
|
"$value": "none"
|
||||||
|
},
|
||||||
|
"1": {
|
||||||
|
"$value": "0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)"
|
||||||
|
},
|
||||||
|
"2": {
|
||||||
|
"$value": "0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05)"
|
||||||
|
},
|
||||||
|
"3": {
|
||||||
|
"$value": "0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 15px 32px 0px rgba(0, 0, 0, 0.09)"
|
||||||
|
},
|
||||||
|
"4": {
|
||||||
|
"$value": "0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 20px 48px 0px rgba(0, 0, 0, 0.12)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
120
core/src/foundations/ionic.root.scss
Normal file
120
core/src/foundations/ionic.root.scss
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
/**
|
||||||
|
* This is an auto-generated file, please do not change it directly.
|
||||||
|
* Ionic Design System
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--ionic-color-primary-10: #f7faff;
|
||||||
|
--ionic-color-primary-50: #cbdffe;
|
||||||
|
--ionic-color-primary-100: #9ec4fd;
|
||||||
|
--ionic-color-primary-200: #74aafc;
|
||||||
|
--ionic-color-primary-300: #4991fb;
|
||||||
|
--ionic-color-primary-400: #1068eb;
|
||||||
|
--ionic-color-primary-500: #0750be;
|
||||||
|
--ionic-color-primary-600: #053d90;
|
||||||
|
--ionic-color-primary-700: #062b63;
|
||||||
|
--ionic-color-primary-800: #061935;
|
||||||
|
--ionic-color-primary-900: #010408;
|
||||||
|
--ionic-color-primary: #1068eb;
|
||||||
|
--ionic-color-secondary: #303d60;
|
||||||
|
--ionic-color-neutral-10: #f5f5f5;
|
||||||
|
--ionic-color-neutral-50: #e7e7e7;
|
||||||
|
--ionic-color-neutral-100: #dadada;
|
||||||
|
--ionic-color-neutral-200: #c9c9c9;
|
||||||
|
--ionic-color-neutral-300: #b8b8b8;
|
||||||
|
--ionic-color-neutral-400: #9a9a9a;
|
||||||
|
--ionic-color-neutral-500: #767676;
|
||||||
|
--ionic-color-neutral-600: #535353;
|
||||||
|
--ionic-color-neutral-700: #373737;
|
||||||
|
--ionic-color-neutral-800: #212121;
|
||||||
|
--ionic-color-neutral-900: #05080f;
|
||||||
|
--ionic-color-error-10: #fffafa;
|
||||||
|
--ionic-color-error-50: #ffd5d5;
|
||||||
|
--ionic-color-error-100: #ffafaf;
|
||||||
|
--ionic-color-error-200: #ff8a8a;
|
||||||
|
--ionic-color-error-300: #ff6666;
|
||||||
|
--ionic-color-error-400: #f72c2c;
|
||||||
|
--ionic-color-error-500: #c71212;
|
||||||
|
--ionic-color-error-600: #970606;
|
||||||
|
--ionic-color-error-700: #670202;
|
||||||
|
--ionic-color-error-800: #380101;
|
||||||
|
--ionic-color-error-900: #080000;
|
||||||
|
--ionic-color-error: #f72c2c;
|
||||||
|
--ionic-color-warning-10: #fffdfa;
|
||||||
|
--ionic-color-warning-50: #ffecce;
|
||||||
|
--ionic-color-warning-100: #ffdba0;
|
||||||
|
--ionic-color-warning-200: #ffca73;
|
||||||
|
--ionic-color-warning-300: #ffb845;
|
||||||
|
--ionic-color-warning-400: #ff9707;
|
||||||
|
--ionic-color-warning-500: #ce7a06;
|
||||||
|
--ionic-color-warning-600: #9c5f0a;
|
||||||
|
--ionic-color-warning-700: #6b430c;
|
||||||
|
--ionic-color-warning-800: #39260b;
|
||||||
|
--ionic-color-warning-900: #080502;
|
||||||
|
--ionic-color-warning: #ff9707;
|
||||||
|
--ionic-color-success-10: #fbfffa;
|
||||||
|
--ionic-color-success-50: #def7d8;
|
||||||
|
--ionic-color-success-100: #c6f0b7;
|
||||||
|
--ionic-color-success-200: #a4e188;
|
||||||
|
--ionic-color-success-300: #73c346;
|
||||||
|
--ionic-color-success-400: #52a518;
|
||||||
|
--ionic-color-success-500: #36870c;
|
||||||
|
--ionic-color-success-600: #36870c;
|
||||||
|
--ionic-color-success-700: #226907;
|
||||||
|
--ionic-color-success-800: #144b05;
|
||||||
|
--ionic-color-success-900: #030f02;
|
||||||
|
--ionic-color-success: #52a518;
|
||||||
|
--ionic-color-info-10: #f5fbff;
|
||||||
|
--ionic-color-info-50: #c6e7ff;
|
||||||
|
--ionic-color-info-100: #97d3ff;
|
||||||
|
--ionic-color-info-200: #6ac0fe;
|
||||||
|
--ionic-color-info-300: #3dadfe;
|
||||||
|
--ionic-color-info-400: #008bef;
|
||||||
|
--ionic-color-info-500: #0071c2;
|
||||||
|
--ionic-color-info-600: #005796;
|
||||||
|
--ionic-color-info-700: #003d69;
|
||||||
|
--ionic-color-info-800: #02243c;
|
||||||
|
--ionic-color-info-900: #020a0f;
|
||||||
|
--ionic-color-info: #008bef;
|
||||||
|
--ionic-font-size-h1: 32px;
|
||||||
|
--ionic-font-size-h2: 28px;
|
||||||
|
--ionic-font-size-h3: 26px;
|
||||||
|
--ionic-font-size-h4: 22px;
|
||||||
|
--ionic-font-size-h5: 20px;
|
||||||
|
--ionic-font-size-h6: 18px;
|
||||||
|
--ionic-font-size-display: 36px;
|
||||||
|
--ionic-font-size-base: 16px;
|
||||||
|
--ionic-font-size-s: 14px;
|
||||||
|
--ionic-font-size-xs: 12px;
|
||||||
|
--ionic-font-light: 300;
|
||||||
|
--ionic-font-regular: 400;
|
||||||
|
--ionic-font-semi-bold: 600;
|
||||||
|
--ionic-font-bold: 700;
|
||||||
|
--ionic-space-none: 0;
|
||||||
|
--ionic-space-xxxxs: 2px;
|
||||||
|
--ionic-space-xxxs: 4px;
|
||||||
|
--ionic-space-xss: 6px;
|
||||||
|
--ionic-space-xs: 8px;
|
||||||
|
--ionic-space-s: 12px;
|
||||||
|
--ionic-space-base: 16px;
|
||||||
|
--ionic-space-m: 20px;
|
||||||
|
--ionic-space-l: 24px;
|
||||||
|
--ionic-space-xl: 28px;
|
||||||
|
--ionic-space-xxl: 32px;
|
||||||
|
--ionic-space-xxxl: 36px;
|
||||||
|
--ionic-space-xxxxl: 40px;
|
||||||
|
--ionic-border-radius-square: 0;
|
||||||
|
--ionic-border-radius-rounded-small: 4px;
|
||||||
|
--ionic-border-radius-rounded-medium: 8px;
|
||||||
|
--ionic-border-radius-rounded-large: 16px;
|
||||||
|
--ionic-border-radius-rounded-x-large: 32px;
|
||||||
|
--ionic-border-radius-rounded-full: 100%;
|
||||||
|
--ionic-border-size-small: 1px;
|
||||||
|
--ionic-border-size-medium: 2px;
|
||||||
|
--ionic-border-size-large: 3px;
|
||||||
|
--ionic-elevation-0: none;
|
||||||
|
--ionic-elevation-1: 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
|
||||||
|
--ionic-elevation-2: 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
|
||||||
|
--ionic-elevation-3: 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 15px 32px 0px rgba(0, 0, 0, 0.09);
|
||||||
|
--ionic-elevation-4: 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 20px 48px 0px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
602
core/src/foundations/ionic.utility.scss
Normal file
602
core/src/foundations/ionic.utility.scss
Normal file
@ -0,0 +1,602 @@
|
|||||||
|
/**
|
||||||
|
* This is an auto-generated file, please do not change it directly.
|
||||||
|
* Ionic Design System
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
@import "./ionic.vars";
|
||||||
|
|
||||||
|
.ionic-color-primary-10 {
|
||||||
|
color: $ionic-color-primary-10;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-10 {
|
||||||
|
background-color: $ionic-color-primary-10;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-50 {
|
||||||
|
color: $ionic-color-primary-50;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-50 {
|
||||||
|
background-color: $ionic-color-primary-50;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-100 {
|
||||||
|
color: $ionic-color-primary-100;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-100 {
|
||||||
|
background-color: $ionic-color-primary-100;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-200 {
|
||||||
|
color: $ionic-color-primary-200;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-200 {
|
||||||
|
background-color: $ionic-color-primary-200;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-300 {
|
||||||
|
color: $ionic-color-primary-300;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-300 {
|
||||||
|
background-color: $ionic-color-primary-300;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-400 {
|
||||||
|
color: $ionic-color-primary-400;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-400 {
|
||||||
|
background-color: $ionic-color-primary-400;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-500 {
|
||||||
|
color: $ionic-color-primary-500;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-500 {
|
||||||
|
background-color: $ionic-color-primary-500;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-600 {
|
||||||
|
color: $ionic-color-primary-600;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-600 {
|
||||||
|
background-color: $ionic-color-primary-600;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-700 {
|
||||||
|
color: $ionic-color-primary-700;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-700 {
|
||||||
|
background-color: $ionic-color-primary-700;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-800 {
|
||||||
|
color: $ionic-color-primary-800;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-800 {
|
||||||
|
background-color: $ionic-color-primary-800;
|
||||||
|
}
|
||||||
|
.ionic-color-primary-900 {
|
||||||
|
color: $ionic-color-primary-900;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary-900 {
|
||||||
|
background-color: $ionic-color-primary-900;
|
||||||
|
}
|
||||||
|
.ionic-color-primary {
|
||||||
|
color: $ionic-color-primary;
|
||||||
|
}
|
||||||
|
.ionic-background-color-primary {
|
||||||
|
background-color: $ionic-color-primary;
|
||||||
|
}
|
||||||
|
.ionic-color-secondary {
|
||||||
|
color: $ionic-color-secondary;
|
||||||
|
}
|
||||||
|
.ionic-background-color-secondary {
|
||||||
|
background-color: $ionic-color-secondary;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-10 {
|
||||||
|
color: $ionic-color-neutral-10;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-10 {
|
||||||
|
background-color: $ionic-color-neutral-10;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-50 {
|
||||||
|
color: $ionic-color-neutral-50;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-50 {
|
||||||
|
background-color: $ionic-color-neutral-50;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-100 {
|
||||||
|
color: $ionic-color-neutral-100;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-100 {
|
||||||
|
background-color: $ionic-color-neutral-100;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-200 {
|
||||||
|
color: $ionic-color-neutral-200;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-200 {
|
||||||
|
background-color: $ionic-color-neutral-200;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-300 {
|
||||||
|
color: $ionic-color-neutral-300;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-300 {
|
||||||
|
background-color: $ionic-color-neutral-300;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-400 {
|
||||||
|
color: $ionic-color-neutral-400;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-400 {
|
||||||
|
background-color: $ionic-color-neutral-400;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-500 {
|
||||||
|
color: $ionic-color-neutral-500;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-500 {
|
||||||
|
background-color: $ionic-color-neutral-500;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-600 {
|
||||||
|
color: $ionic-color-neutral-600;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-600 {
|
||||||
|
background-color: $ionic-color-neutral-600;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-700 {
|
||||||
|
color: $ionic-color-neutral-700;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-700 {
|
||||||
|
background-color: $ionic-color-neutral-700;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-800 {
|
||||||
|
color: $ionic-color-neutral-800;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-800 {
|
||||||
|
background-color: $ionic-color-neutral-800;
|
||||||
|
}
|
||||||
|
.ionic-color-neutral-900 {
|
||||||
|
color: $ionic-color-neutral-900;
|
||||||
|
}
|
||||||
|
.ionic-background-color-neutral-900 {
|
||||||
|
background-color: $ionic-color-neutral-900;
|
||||||
|
}
|
||||||
|
.ionic-color-error-10 {
|
||||||
|
color: $ionic-color-error-10;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-10 {
|
||||||
|
background-color: $ionic-color-error-10;
|
||||||
|
}
|
||||||
|
.ionic-color-error-50 {
|
||||||
|
color: $ionic-color-error-50;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-50 {
|
||||||
|
background-color: $ionic-color-error-50;
|
||||||
|
}
|
||||||
|
.ionic-color-error-100 {
|
||||||
|
color: $ionic-color-error-100;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-100 {
|
||||||
|
background-color: $ionic-color-error-100;
|
||||||
|
}
|
||||||
|
.ionic-color-error-200 {
|
||||||
|
color: $ionic-color-error-200;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-200 {
|
||||||
|
background-color: $ionic-color-error-200;
|
||||||
|
}
|
||||||
|
.ionic-color-error-300 {
|
||||||
|
color: $ionic-color-error-300;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-300 {
|
||||||
|
background-color: $ionic-color-error-300;
|
||||||
|
}
|
||||||
|
.ionic-color-error-400 {
|
||||||
|
color: $ionic-color-error-400;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-400 {
|
||||||
|
background-color: $ionic-color-error-400;
|
||||||
|
}
|
||||||
|
.ionic-color-error-500 {
|
||||||
|
color: $ionic-color-error-500;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-500 {
|
||||||
|
background-color: $ionic-color-error-500;
|
||||||
|
}
|
||||||
|
.ionic-color-error-600 {
|
||||||
|
color: $ionic-color-error-600;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-600 {
|
||||||
|
background-color: $ionic-color-error-600;
|
||||||
|
}
|
||||||
|
.ionic-color-error-700 {
|
||||||
|
color: $ionic-color-error-700;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-700 {
|
||||||
|
background-color: $ionic-color-error-700;
|
||||||
|
}
|
||||||
|
.ionic-color-error-800 {
|
||||||
|
color: $ionic-color-error-800;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-800 {
|
||||||
|
background-color: $ionic-color-error-800;
|
||||||
|
}
|
||||||
|
.ionic-color-error-900 {
|
||||||
|
color: $ionic-color-error-900;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error-900 {
|
||||||
|
background-color: $ionic-color-error-900;
|
||||||
|
}
|
||||||
|
.ionic-color-error {
|
||||||
|
color: $ionic-color-error;
|
||||||
|
}
|
||||||
|
.ionic-background-color-error {
|
||||||
|
background-color: $ionic-color-error;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-10 {
|
||||||
|
color: $ionic-color-warning-10;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-10 {
|
||||||
|
background-color: $ionic-color-warning-10;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-50 {
|
||||||
|
color: $ionic-color-warning-50;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-50 {
|
||||||
|
background-color: $ionic-color-warning-50;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-100 {
|
||||||
|
color: $ionic-color-warning-100;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-100 {
|
||||||
|
background-color: $ionic-color-warning-100;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-200 {
|
||||||
|
color: $ionic-color-warning-200;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-200 {
|
||||||
|
background-color: $ionic-color-warning-200;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-300 {
|
||||||
|
color: $ionic-color-warning-300;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-300 {
|
||||||
|
background-color: $ionic-color-warning-300;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-400 {
|
||||||
|
color: $ionic-color-warning-400;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-400 {
|
||||||
|
background-color: $ionic-color-warning-400;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-500 {
|
||||||
|
color: $ionic-color-warning-500;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-500 {
|
||||||
|
background-color: $ionic-color-warning-500;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-600 {
|
||||||
|
color: $ionic-color-warning-600;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-600 {
|
||||||
|
background-color: $ionic-color-warning-600;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-700 {
|
||||||
|
color: $ionic-color-warning-700;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-700 {
|
||||||
|
background-color: $ionic-color-warning-700;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-800 {
|
||||||
|
color: $ionic-color-warning-800;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-800 {
|
||||||
|
background-color: $ionic-color-warning-800;
|
||||||
|
}
|
||||||
|
.ionic-color-warning-900 {
|
||||||
|
color: $ionic-color-warning-900;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning-900 {
|
||||||
|
background-color: $ionic-color-warning-900;
|
||||||
|
}
|
||||||
|
.ionic-color-warning {
|
||||||
|
color: $ionic-color-warning;
|
||||||
|
}
|
||||||
|
.ionic-background-color-warning {
|
||||||
|
background-color: $ionic-color-warning;
|
||||||
|
}
|
||||||
|
.ionic-color-success-10 {
|
||||||
|
color: $ionic-color-success-10;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-10 {
|
||||||
|
background-color: $ionic-color-success-10;
|
||||||
|
}
|
||||||
|
.ionic-color-success-50 {
|
||||||
|
color: $ionic-color-success-50;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-50 {
|
||||||
|
background-color: $ionic-color-success-50;
|
||||||
|
}
|
||||||
|
.ionic-color-success-100 {
|
||||||
|
color: $ionic-color-success-100;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-100 {
|
||||||
|
background-color: $ionic-color-success-100;
|
||||||
|
}
|
||||||
|
.ionic-color-success-200 {
|
||||||
|
color: $ionic-color-success-200;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-200 {
|
||||||
|
background-color: $ionic-color-success-200;
|
||||||
|
}
|
||||||
|
.ionic-color-success-300 {
|
||||||
|
color: $ionic-color-success-300;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-300 {
|
||||||
|
background-color: $ionic-color-success-300;
|
||||||
|
}
|
||||||
|
.ionic-color-success-400 {
|
||||||
|
color: $ionic-color-success-400;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-400 {
|
||||||
|
background-color: $ionic-color-success-400;
|
||||||
|
}
|
||||||
|
.ionic-color-success-500 {
|
||||||
|
color: $ionic-color-success-500;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-500 {
|
||||||
|
background-color: $ionic-color-success-500;
|
||||||
|
}
|
||||||
|
.ionic-color-success-600 {
|
||||||
|
color: $ionic-color-success-600;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-600 {
|
||||||
|
background-color: $ionic-color-success-600;
|
||||||
|
}
|
||||||
|
.ionic-color-success-700 {
|
||||||
|
color: $ionic-color-success-700;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-700 {
|
||||||
|
background-color: $ionic-color-success-700;
|
||||||
|
}
|
||||||
|
.ionic-color-success-800 {
|
||||||
|
color: $ionic-color-success-800;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-800 {
|
||||||
|
background-color: $ionic-color-success-800;
|
||||||
|
}
|
||||||
|
.ionic-color-success-900 {
|
||||||
|
color: $ionic-color-success-900;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success-900 {
|
||||||
|
background-color: $ionic-color-success-900;
|
||||||
|
}
|
||||||
|
.ionic-color-success {
|
||||||
|
color: $ionic-color-success;
|
||||||
|
}
|
||||||
|
.ionic-background-color-success {
|
||||||
|
background-color: $ionic-color-success;
|
||||||
|
}
|
||||||
|
.ionic-color-info-10 {
|
||||||
|
color: $ionic-color-info-10;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-10 {
|
||||||
|
background-color: $ionic-color-info-10;
|
||||||
|
}
|
||||||
|
.ionic-color-info-50 {
|
||||||
|
color: $ionic-color-info-50;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-50 {
|
||||||
|
background-color: $ionic-color-info-50;
|
||||||
|
}
|
||||||
|
.ionic-color-info-100 {
|
||||||
|
color: $ionic-color-info-100;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-100 {
|
||||||
|
background-color: $ionic-color-info-100;
|
||||||
|
}
|
||||||
|
.ionic-color-info-200 {
|
||||||
|
color: $ionic-color-info-200;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-200 {
|
||||||
|
background-color: $ionic-color-info-200;
|
||||||
|
}
|
||||||
|
.ionic-color-info-300 {
|
||||||
|
color: $ionic-color-info-300;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-300 {
|
||||||
|
background-color: $ionic-color-info-300;
|
||||||
|
}
|
||||||
|
.ionic-color-info-400 {
|
||||||
|
color: $ionic-color-info-400;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-400 {
|
||||||
|
background-color: $ionic-color-info-400;
|
||||||
|
}
|
||||||
|
.ionic-color-info-500 {
|
||||||
|
color: $ionic-color-info-500;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-500 {
|
||||||
|
background-color: $ionic-color-info-500;
|
||||||
|
}
|
||||||
|
.ionic-color-info-600 {
|
||||||
|
color: $ionic-color-info-600;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-600 {
|
||||||
|
background-color: $ionic-color-info-600;
|
||||||
|
}
|
||||||
|
.ionic-color-info-700 {
|
||||||
|
color: $ionic-color-info-700;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-700 {
|
||||||
|
background-color: $ionic-color-info-700;
|
||||||
|
}
|
||||||
|
.ionic-color-info-800 {
|
||||||
|
color: $ionic-color-info-800;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-800 {
|
||||||
|
background-color: $ionic-color-info-800;
|
||||||
|
}
|
||||||
|
.ionic-color-info-900 {
|
||||||
|
color: $ionic-color-info-900;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info-900 {
|
||||||
|
background-color: $ionic-color-info-900;
|
||||||
|
}
|
||||||
|
.ionic-color-info {
|
||||||
|
color: $ionic-color-info;
|
||||||
|
}
|
||||||
|
.ionic-background-color-info {
|
||||||
|
background-color: $ionic-color-info;
|
||||||
|
}
|
||||||
|
.ionic-font-size-h1 {
|
||||||
|
font-size: $ionic-font-size-h1;
|
||||||
|
}
|
||||||
|
.ionic-font-size-h2 {
|
||||||
|
font-size: $ionic-font-size-h2;
|
||||||
|
}
|
||||||
|
.ionic-font-size-h3 {
|
||||||
|
font-size: $ionic-font-size-h3;
|
||||||
|
}
|
||||||
|
.ionic-font-size-h4 {
|
||||||
|
font-size: $ionic-font-size-h4;
|
||||||
|
}
|
||||||
|
.ionic-font-size-h5 {
|
||||||
|
font-size: $ionic-font-size-h5;
|
||||||
|
}
|
||||||
|
.ionic-font-size-h6 {
|
||||||
|
font-size: $ionic-font-size-h6;
|
||||||
|
}
|
||||||
|
.ionic-font-size-display {
|
||||||
|
font-size: $ionic-font-size-display;
|
||||||
|
}
|
||||||
|
.ionic-font-size-base {
|
||||||
|
font-size: $ionic-font-size-base;
|
||||||
|
}
|
||||||
|
.ionic-font-size-s {
|
||||||
|
font-size: $ionic-font-size-s;
|
||||||
|
}
|
||||||
|
.ionic-font-size-xs {
|
||||||
|
font-size: $ionic-font-size-xs;
|
||||||
|
}
|
||||||
|
.ionic-font-light {
|
||||||
|
font-weight: $ionic-font-light;
|
||||||
|
}
|
||||||
|
.ionic-font-regular {
|
||||||
|
font-weight: $ionic-font-regular;
|
||||||
|
}
|
||||||
|
.ionic-font-semi-bold {
|
||||||
|
font-weight: $ionic-font-semi-bold;
|
||||||
|
}
|
||||||
|
.ionic-font-bold {
|
||||||
|
font-weight: $ionic-font-bold;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-none {
|
||||||
|
margin: $ionic-space-none;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-none {
|
||||||
|
padding: $ionic-space-none;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-xxxxs {
|
||||||
|
margin: $ionic-space-xxxxs;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-xxxxs {
|
||||||
|
padding: $ionic-space-xxxxs;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-xxxs {
|
||||||
|
margin: $ionic-space-xxxs;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-xxxs {
|
||||||
|
padding: $ionic-space-xxxs;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-xss {
|
||||||
|
margin: $ionic-space-xss;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-xss {
|
||||||
|
padding: $ionic-space-xss;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-xs {
|
||||||
|
margin: $ionic-space-xs;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-xs {
|
||||||
|
padding: $ionic-space-xs;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-s {
|
||||||
|
margin: $ionic-space-s;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-s {
|
||||||
|
padding: $ionic-space-s;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-base {
|
||||||
|
margin: $ionic-space-base;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-base {
|
||||||
|
padding: $ionic-space-base;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-m {
|
||||||
|
margin: $ionic-space-m;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-m {
|
||||||
|
padding: $ionic-space-m;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-l {
|
||||||
|
margin: $ionic-space-l;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-l {
|
||||||
|
padding: $ionic-space-l;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-xl {
|
||||||
|
margin: $ionic-space-xl;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-xl {
|
||||||
|
padding: $ionic-space-xl;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-xxl {
|
||||||
|
margin: $ionic-space-xxl;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-xxl {
|
||||||
|
padding: $ionic-space-xxl;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-xxxl {
|
||||||
|
margin: $ionic-space-xxxl;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-xxxl {
|
||||||
|
padding: $ionic-space-xxxl;
|
||||||
|
}
|
||||||
|
.ionic-margin-space-xxxxl {
|
||||||
|
margin: $ionic-space-xxxxl;
|
||||||
|
};
|
||||||
|
.ionic-padding-space-xxxxl {
|
||||||
|
padding: $ionic-space-xxxxl;
|
||||||
|
}
|
||||||
|
.ionic-border-radius-square {
|
||||||
|
border-radius: $ionic-border-radius-square;
|
||||||
|
}
|
||||||
|
.ionic-border-radius-rounded-small {
|
||||||
|
border-radius: $ionic-border-radius-rounded-small;
|
||||||
|
}
|
||||||
|
.ionic-border-radius-rounded-medium {
|
||||||
|
border-radius: $ionic-border-radius-rounded-medium;
|
||||||
|
}
|
||||||
|
.ionic-border-radius-rounded-large {
|
||||||
|
border-radius: $ionic-border-radius-rounded-large;
|
||||||
|
}
|
||||||
|
.ionic-border-radius-rounded-x-large {
|
||||||
|
border-radius: $ionic-border-radius-rounded-x-large;
|
||||||
|
}
|
||||||
|
.ionic-border-radius-rounded-full {
|
||||||
|
border-radius: $ionic-border-radius-rounded-full;
|
||||||
|
}
|
||||||
|
.ionic-border-size-small {
|
||||||
|
border-width: $ionic-border-size-small;
|
||||||
|
}
|
||||||
|
.ionic-border-size-medium {
|
||||||
|
border-width: $ionic-border-size-medium;
|
||||||
|
}
|
||||||
|
.ionic-border-size-large {
|
||||||
|
border-width: $ionic-border-size-large;
|
||||||
|
}
|
||||||
|
.ionic-elevation-0 {
|
||||||
|
box-shadow: $ionic-elevation-0;
|
||||||
|
}
|
||||||
|
.ionic-elevation-1 {
|
||||||
|
box-shadow: $ionic-elevation-1;
|
||||||
|
}
|
||||||
|
.ionic-elevation-2 {
|
||||||
|
box-shadow: $ionic-elevation-2;
|
||||||
|
}
|
||||||
|
.ionic-elevation-3 {
|
||||||
|
box-shadow: $ionic-elevation-3;
|
||||||
|
}
|
||||||
|
.ionic-elevation-4 {
|
||||||
|
box-shadow: $ionic-elevation-4;
|
||||||
|
}
|
||||||
118
core/src/foundations/ionic.vars.scss
Normal file
118
core/src/foundations/ionic.vars.scss
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
/**
|
||||||
|
* This is an auto-generated file, please do not change it directly.
|
||||||
|
* Ionic Design System
|
||||||
|
*/
|
||||||
|
|
||||||
|
$ionic-color-primary-10: var(--ionic-color-primary-10, #f7faff);
|
||||||
|
$ionic-color-primary-50: var(--ionic-color-primary-50, #cbdffe);
|
||||||
|
$ionic-color-primary-100: var(--ionic-color-primary-100, #9ec4fd);
|
||||||
|
$ionic-color-primary-200: var(--ionic-color-primary-200, #74aafc);
|
||||||
|
$ionic-color-primary-300: var(--ionic-color-primary-300, #4991fb);
|
||||||
|
$ionic-color-primary-400: var(--ionic-color-primary-400, #1068eb);
|
||||||
|
$ionic-color-primary-500: var(--ionic-color-primary-500, #0750be);
|
||||||
|
$ionic-color-primary-600: var(--ionic-color-primary-600, #053d90);
|
||||||
|
$ionic-color-primary-700: var(--ionic-color-primary-700, #062b63);
|
||||||
|
$ionic-color-primary-800: var(--ionic-color-primary-800, #061935);
|
||||||
|
$ionic-color-primary-900: var(--ionic-color-primary-900, #010408);
|
||||||
|
$ionic-color-primary: var(--ionic-color-primary, #1068eb);
|
||||||
|
$ionic-color-secondary: var(--ionic-color-secondary, #303d60);
|
||||||
|
$ionic-color-neutral-10: var(--ionic-color-neutral-10, #f5f5f5);
|
||||||
|
$ionic-color-neutral-50: var(--ionic-color-neutral-50, #e7e7e7);
|
||||||
|
$ionic-color-neutral-100: var(--ionic-color-neutral-100, #dadada);
|
||||||
|
$ionic-color-neutral-200: var(--ionic-color-neutral-200, #c9c9c9);
|
||||||
|
$ionic-color-neutral-300: var(--ionic-color-neutral-300, #b8b8b8);
|
||||||
|
$ionic-color-neutral-400: var(--ionic-color-neutral-400, #9a9a9a);
|
||||||
|
$ionic-color-neutral-500: var(--ionic-color-neutral-500, #767676);
|
||||||
|
$ionic-color-neutral-600: var(--ionic-color-neutral-600, #535353);
|
||||||
|
$ionic-color-neutral-700: var(--ionic-color-neutral-700, #373737);
|
||||||
|
$ionic-color-neutral-800: var(--ionic-color-neutral-800, #212121);
|
||||||
|
$ionic-color-neutral-900: var(--ionic-color-neutral-900, #05080f);
|
||||||
|
$ionic-color-error-10: var(--ionic-color-error-10, #fffafa);
|
||||||
|
$ionic-color-error-50: var(--ionic-color-error-50, #ffd5d5);
|
||||||
|
$ionic-color-error-100: var(--ionic-color-error-100, #ffafaf);
|
||||||
|
$ionic-color-error-200: var(--ionic-color-error-200, #ff8a8a);
|
||||||
|
$ionic-color-error-300: var(--ionic-color-error-300, #ff6666);
|
||||||
|
$ionic-color-error-400: var(--ionic-color-error-400, #f72c2c);
|
||||||
|
$ionic-color-error-500: var(--ionic-color-error-500, #c71212);
|
||||||
|
$ionic-color-error-600: var(--ionic-color-error-600, #970606);
|
||||||
|
$ionic-color-error-700: var(--ionic-color-error-700, #670202);
|
||||||
|
$ionic-color-error-800: var(--ionic-color-error-800, #380101);
|
||||||
|
$ionic-color-error-900: var(--ionic-color-error-900, #080000);
|
||||||
|
$ionic-color-error: var(--ionic-color-error, #f72c2c);
|
||||||
|
$ionic-color-warning-10: var(--ionic-color-warning-10, #fffdfa);
|
||||||
|
$ionic-color-warning-50: var(--ionic-color-warning-50, #ffecce);
|
||||||
|
$ionic-color-warning-100: var(--ionic-color-warning-100, #ffdba0);
|
||||||
|
$ionic-color-warning-200: var(--ionic-color-warning-200, #ffca73);
|
||||||
|
$ionic-color-warning-300: var(--ionic-color-warning-300, #ffb845);
|
||||||
|
$ionic-color-warning-400: var(--ionic-color-warning-400, #ff9707);
|
||||||
|
$ionic-color-warning-500: var(--ionic-color-warning-500, #ce7a06);
|
||||||
|
$ionic-color-warning-600: var(--ionic-color-warning-600, #9c5f0a);
|
||||||
|
$ionic-color-warning-700: var(--ionic-color-warning-700, #6b430c);
|
||||||
|
$ionic-color-warning-800: var(--ionic-color-warning-800, #39260b);
|
||||||
|
$ionic-color-warning-900: var(--ionic-color-warning-900, #080502);
|
||||||
|
$ionic-color-warning: var(--ionic-color-warning, #ff9707);
|
||||||
|
$ionic-color-success-10: var(--ionic-color-success-10, #fbfffa);
|
||||||
|
$ionic-color-success-50: var(--ionic-color-success-50, #def7d8);
|
||||||
|
$ionic-color-success-100: var(--ionic-color-success-100, #c6f0b7);
|
||||||
|
$ionic-color-success-200: var(--ionic-color-success-200, #a4e188);
|
||||||
|
$ionic-color-success-300: var(--ionic-color-success-300, #73c346);
|
||||||
|
$ionic-color-success-400: var(--ionic-color-success-400, #52a518);
|
||||||
|
$ionic-color-success-500: var(--ionic-color-success-500, #36870c);
|
||||||
|
$ionic-color-success-600: var(--ionic-color-success-600, #36870c);
|
||||||
|
$ionic-color-success-700: var(--ionic-color-success-700, #226907);
|
||||||
|
$ionic-color-success-800: var(--ionic-color-success-800, #144b05);
|
||||||
|
$ionic-color-success-900: var(--ionic-color-success-900, #030f02);
|
||||||
|
$ionic-color-success: var(--ionic-color-success, #52a518);
|
||||||
|
$ionic-color-info-10: var(--ionic-color-info-10, #f5fbff);
|
||||||
|
$ionic-color-info-50: var(--ionic-color-info-50, #c6e7ff);
|
||||||
|
$ionic-color-info-100: var(--ionic-color-info-100, #97d3ff);
|
||||||
|
$ionic-color-info-200: var(--ionic-color-info-200, #6ac0fe);
|
||||||
|
$ionic-color-info-300: var(--ionic-color-info-300, #3dadfe);
|
||||||
|
$ionic-color-info-400: var(--ionic-color-info-400, #008bef);
|
||||||
|
$ionic-color-info-500: var(--ionic-color-info-500, #0071c2);
|
||||||
|
$ionic-color-info-600: var(--ionic-color-info-600, #005796);
|
||||||
|
$ionic-color-info-700: var(--ionic-color-info-700, #003d69);
|
||||||
|
$ionic-color-info-800: var(--ionic-color-info-800, #02243c);
|
||||||
|
$ionic-color-info-900: var(--ionic-color-info-900, #020a0f);
|
||||||
|
$ionic-color-info: var(--ionic-color-info, #008bef);
|
||||||
|
$ionic-font-size-h1: var(--ionic-font-size-h1, 32px);
|
||||||
|
$ionic-font-size-h2: var(--ionic-font-size-h2, 28px);
|
||||||
|
$ionic-font-size-h3: var(--ionic-font-size-h3, 26px);
|
||||||
|
$ionic-font-size-h4: var(--ionic-font-size-h4, 22px);
|
||||||
|
$ionic-font-size-h5: var(--ionic-font-size-h5, 20px);
|
||||||
|
$ionic-font-size-h6: var(--ionic-font-size-h6, 18px);
|
||||||
|
$ionic-font-size-display: var(--ionic-font-size-display, 36px);
|
||||||
|
$ionic-font-size-base: var(--ionic-font-size-base, 16px);
|
||||||
|
$ionic-font-size-s: var(--ionic-font-size-s, 14px);
|
||||||
|
$ionic-font-size-xs: var(--ionic-font-size-xs, 12px);
|
||||||
|
$ionic-font-light: var(--ionic-font-light, 300);
|
||||||
|
$ionic-font-regular: var(--ionic-font-regular, 400);
|
||||||
|
$ionic-font-semi-bold: var(--ionic-font-semi-bold, 600);
|
||||||
|
$ionic-font-bold: var(--ionic-font-bold, 700);
|
||||||
|
$ionic-space-none: var(--ionic-space-none, 0);
|
||||||
|
$ionic-space-xxxxs: var(--ionic-space-xxxxs, 2px);
|
||||||
|
$ionic-space-xxxs: var(--ionic-space-xxxs, 4px);
|
||||||
|
$ionic-space-xss: var(--ionic-space-xss, 6px);
|
||||||
|
$ionic-space-xs: var(--ionic-space-xs, 8px);
|
||||||
|
$ionic-space-s: var(--ionic-space-s, 12px);
|
||||||
|
$ionic-space-base: var(--ionic-space-base, 16px);
|
||||||
|
$ionic-space-m: var(--ionic-space-m, 20px);
|
||||||
|
$ionic-space-l: var(--ionic-space-l, 24px);
|
||||||
|
$ionic-space-xl: var(--ionic-space-xl, 28px);
|
||||||
|
$ionic-space-xxl: var(--ionic-space-xxl, 32px);
|
||||||
|
$ionic-space-xxxl: var(--ionic-space-xxxl, 36px);
|
||||||
|
$ionic-space-xxxxl: var(--ionic-space-xxxxl, 40px);
|
||||||
|
$ionic-border-radius-square: var(--ionic-border-radius-square, 0);
|
||||||
|
$ionic-border-radius-rounded-small: var(--ionic-border-radius-rounded-small, 4px);
|
||||||
|
$ionic-border-radius-rounded-medium: var(--ionic-border-radius-rounded-medium, 8px);
|
||||||
|
$ionic-border-radius-rounded-large: var(--ionic-border-radius-rounded-large, 16px);
|
||||||
|
$ionic-border-radius-rounded-x-large: var(--ionic-border-radius-rounded-x-large, 32px);
|
||||||
|
$ionic-border-radius-rounded-full: var(--ionic-border-radius-rounded-full, 100%);
|
||||||
|
$ionic-border-size-small: var(--ionic-border-size-small, 1px);
|
||||||
|
$ionic-border-size-medium: var(--ionic-border-size-medium, 2px);
|
||||||
|
$ionic-border-size-large: var(--ionic-border-size-large, 3px);
|
||||||
|
$ionic-elevation-0: var(--ionic-elevation-0, none);
|
||||||
|
$ionic-elevation-1: var(--ionic-elevation-1, 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04));
|
||||||
|
$ionic-elevation-2: var(--ionic-elevation-2, 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05));
|
||||||
|
$ionic-elevation-3: var(--ionic-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 15px 32px 0px rgba(0, 0, 0, 0.09));
|
||||||
|
$ionic-elevation-4: var(--ionic-elevation-4, 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 20px 48px 0px rgba(0, 0, 0, 0.12));
|
||||||
Reference in New Issue
Block a user