mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 02:31:34 +08:00
feat(tokens): generate rgb variants of colors (#29331)
Issue number: N/A --------- <!-- 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 current behavior? <!-- Please describe the current behavior that you are modifying. --> The generated design tokens only generate HEX output of colors. This prevents us from using the color tokens when we need to manipulate the alpha channel of the color. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Generate a rgb color token and sass variable for each existing color token. - These "rgb" formatted variables are an existing practice to Ionic Framework. Developers are expected to pass the variable into an `rgb` or `rgba` function. ## 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. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
This commit is contained in:
Sean Perkins
@ -15,13 +15,27 @@ const customVariables = ``;
|
||||
// Prefix for all generated variables
|
||||
const variablesPrefix = 'ionic';
|
||||
|
||||
function hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result
|
||||
? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
// 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};`;
|
||||
const rgb = hexToRgb(prop.value);
|
||||
return ` --${variablesPrefix}-${prop.name}: ${prop.value};${
|
||||
rgb ? `\n --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : ``
|
||||
}`;
|
||||
});
|
||||
|
||||
return (
|
||||
@ -40,7 +54,12 @@ StyleDictionary.registerFormat({
|
||||
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});`;
|
||||
const rgb = hexToRgb(prop.value);
|
||||
return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${
|
||||
rgb
|
||||
? `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`
|
||||
: ``
|
||||
}`;
|
||||
});
|
||||
|
||||
return (
|
||||
@ -111,14 +130,14 @@ StyleDictionary.registerFormat({
|
||||
// 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;
|
||||
parse({ 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);
|
||||
},
|
||||
};
|
||||
|
||||
@ -5,78 +5,151 @@
|
||||
|
||||
:root {
|
||||
--ionic-color-primary-10: #f7faff;
|
||||
--ionic-color-primary-10-rgb: 247, 250, 255;
|
||||
--ionic-color-primary-50: #cbdffe;
|
||||
--ionic-color-primary-50-rgb: 203, 223, 254;
|
||||
--ionic-color-primary-100: #9ec4fd;
|
||||
--ionic-color-primary-100-rgb: 158, 196, 253;
|
||||
--ionic-color-primary-200: #74aafc;
|
||||
--ionic-color-primary-200-rgb: 116, 170, 252;
|
||||
--ionic-color-primary-300: #4991fb;
|
||||
--ionic-color-primary-300-rgb: 73, 145, 251;
|
||||
--ionic-color-primary-400: #1068eb;
|
||||
--ionic-color-primary-400-rgb: 16, 104, 235;
|
||||
--ionic-color-primary-500: #0750be;
|
||||
--ionic-color-primary-500-rgb: 7, 80, 190;
|
||||
--ionic-color-primary-600: #053d90;
|
||||
--ionic-color-primary-600-rgb: 5, 61, 144;
|
||||
--ionic-color-primary-700: #062b63;
|
||||
--ionic-color-primary-700-rgb: 6, 43, 99;
|
||||
--ionic-color-primary-800: #061935;
|
||||
--ionic-color-primary-800-rgb: 6, 25, 53;
|
||||
--ionic-color-primary-900: #010408;
|
||||
--ionic-color-primary-900-rgb: 1, 4, 8;
|
||||
--ionic-color-primary: #1068eb;
|
||||
--ionic-color-primary-rgb: 16, 104, 235;
|
||||
--ionic-color-secondary: #303d60;
|
||||
--ionic-color-secondary-rgb: 48, 61, 96;
|
||||
--ionic-color-neutral-0: #ffffff;
|
||||
--ionic-color-neutral-0-rgb: 255, 255, 255;
|
||||
--ionic-color-neutral-10: #f5f5f5;
|
||||
--ionic-color-neutral-10-rgb: 245, 245, 245;
|
||||
--ionic-color-neutral-50: #e7e7e7;
|
||||
--ionic-color-neutral-50-rgb: 231, 231, 231;
|
||||
--ionic-color-neutral-100: #dadada;
|
||||
--ionic-color-neutral-100-rgb: 218, 218, 218;
|
||||
--ionic-color-neutral-200: #c9c9c9;
|
||||
--ionic-color-neutral-200-rgb: 201, 201, 201;
|
||||
--ionic-color-neutral-300: #b8b8b8;
|
||||
--ionic-color-neutral-300-rgb: 184, 184, 184;
|
||||
--ionic-color-neutral-400: #9a9a9a;
|
||||
--ionic-color-neutral-400-rgb: 154, 154, 154;
|
||||
--ionic-color-neutral-500: #767676;
|
||||
--ionic-color-neutral-500-rgb: 118, 118, 118;
|
||||
--ionic-color-neutral-600: #535353;
|
||||
--ionic-color-neutral-600-rgb: 83, 83, 83;
|
||||
--ionic-color-neutral-700: #373737;
|
||||
--ionic-color-neutral-700-rgb: 55, 55, 55;
|
||||
--ionic-color-neutral-800: #212121;
|
||||
--ionic-color-neutral-800-rgb: 33, 33, 33;
|
||||
--ionic-color-neutral-900: #05080f;
|
||||
--ionic-color-neutral-900-rgb: 5, 8, 15;
|
||||
--ionic-color-error-10: #fffafa;
|
||||
--ionic-color-error-10-rgb: 255, 250, 250;
|
||||
--ionic-color-error-50: #ffd5d5;
|
||||
--ionic-color-error-50-rgb: 255, 213, 213;
|
||||
--ionic-color-error-100: #ffafaf;
|
||||
--ionic-color-error-100-rgb: 255, 175, 175;
|
||||
--ionic-color-error-200: #ff8a8a;
|
||||
--ionic-color-error-200-rgb: 255, 138, 138;
|
||||
--ionic-color-error-300: #ff6666;
|
||||
--ionic-color-error-300-rgb: 255, 102, 102;
|
||||
--ionic-color-error-400: #f72c2c;
|
||||
--ionic-color-error-400-rgb: 247, 44, 44;
|
||||
--ionic-color-error-500: #c71212;
|
||||
--ionic-color-error-500-rgb: 199, 18, 18;
|
||||
--ionic-color-error-600: #970606;
|
||||
--ionic-color-error-600-rgb: 151, 6, 6;
|
||||
--ionic-color-error-700: #670202;
|
||||
--ionic-color-error-700-rgb: 103, 2, 2;
|
||||
--ionic-color-error-800: #380101;
|
||||
--ionic-color-error-800-rgb: 56, 1, 1;
|
||||
--ionic-color-error-900: #080000;
|
||||
--ionic-color-error-900-rgb: 8, 0, 0;
|
||||
--ionic-color-error: #f72c2c;
|
||||
--ionic-color-error-rgb: 247, 44, 44;
|
||||
--ionic-color-warning-10: #fffdfa;
|
||||
--ionic-color-warning-10-rgb: 255, 253, 250;
|
||||
--ionic-color-warning-50: #ffecce;
|
||||
--ionic-color-warning-50-rgb: 255, 236, 206;
|
||||
--ionic-color-warning-100: #ffdba0;
|
||||
--ionic-color-warning-100-rgb: 255, 219, 160;
|
||||
--ionic-color-warning-200: #ffca73;
|
||||
--ionic-color-warning-200-rgb: 255, 202, 115;
|
||||
--ionic-color-warning-300: #ffb845;
|
||||
--ionic-color-warning-300-rgb: 255, 184, 69;
|
||||
--ionic-color-warning-400: #ff9707;
|
||||
--ionic-color-warning-400-rgb: 255, 151, 7;
|
||||
--ionic-color-warning-500: #ce7a06;
|
||||
--ionic-color-warning-500-rgb: 206, 122, 6;
|
||||
--ionic-color-warning-600: #9c5f0a;
|
||||
--ionic-color-warning-600-rgb: 156, 95, 10;
|
||||
--ionic-color-warning-700: #6b430c;
|
||||
--ionic-color-warning-700-rgb: 107, 67, 12;
|
||||
--ionic-color-warning-800: #39260b;
|
||||
--ionic-color-warning-800-rgb: 57, 38, 11;
|
||||
--ionic-color-warning-900: #080502;
|
||||
--ionic-color-warning-900-rgb: 8, 5, 2;
|
||||
--ionic-color-warning: #ff9707;
|
||||
--ionic-color-warning-rgb: 255, 151, 7;
|
||||
--ionic-color-success-10: #fbfffa;
|
||||
--ionic-color-success-10-rgb: 251, 255, 250;
|
||||
--ionic-color-success-50: #def7d8;
|
||||
--ionic-color-success-50-rgb: 222, 247, 216;
|
||||
--ionic-color-success-100: #c6f0b7;
|
||||
--ionic-color-success-100-rgb: 198, 240, 183;
|
||||
--ionic-color-success-200: #a4e188;
|
||||
--ionic-color-success-200-rgb: 164, 225, 136;
|
||||
--ionic-color-success-300: #73c346;
|
||||
--ionic-color-success-300-rgb: 115, 195, 70;
|
||||
--ionic-color-success-400: #52a518;
|
||||
--ionic-color-success-400-rgb: 82, 165, 24;
|
||||
--ionic-color-success-500: #36870c;
|
||||
--ionic-color-success-500-rgb: 54, 135, 12;
|
||||
--ionic-color-success-600: #36870c;
|
||||
--ionic-color-success-600-rgb: 54, 135, 12;
|
||||
--ionic-color-success-700: #226907;
|
||||
--ionic-color-success-700-rgb: 34, 105, 7;
|
||||
--ionic-color-success-800: #144b05;
|
||||
--ionic-color-success-800-rgb: 20, 75, 5;
|
||||
--ionic-color-success-900: #030f02;
|
||||
--ionic-color-success-900-rgb: 3, 15, 2;
|
||||
--ionic-color-success: #52a518;
|
||||
--ionic-color-success-rgb: 82, 165, 24;
|
||||
--ionic-color-info-10: #f5fbff;
|
||||
--ionic-color-info-10-rgb: 245, 251, 255;
|
||||
--ionic-color-info-50: #c6e7ff;
|
||||
--ionic-color-info-50-rgb: 198, 231, 255;
|
||||
--ionic-color-info-100: #97d3ff;
|
||||
--ionic-color-info-100-rgb: 151, 211, 255;
|
||||
--ionic-color-info-200: #6ac0fe;
|
||||
--ionic-color-info-200-rgb: 106, 192, 254;
|
||||
--ionic-color-info-300: #3dadfe;
|
||||
--ionic-color-info-300-rgb: 61, 173, 254;
|
||||
--ionic-color-info-400: #008bef;
|
||||
--ionic-color-info-400-rgb: 0, 139, 239;
|
||||
--ionic-color-info-500: #0071c2;
|
||||
--ionic-color-info-500-rgb: 0, 113, 194;
|
||||
--ionic-color-info-600: #005796;
|
||||
--ionic-color-info-600-rgb: 0, 87, 150;
|
||||
--ionic-color-info-700: #003d69;
|
||||
--ionic-color-info-700-rgb: 0, 61, 105;
|
||||
--ionic-color-info-800: #02243c;
|
||||
--ionic-color-info-800-rgb: 2, 36, 60;
|
||||
--ionic-color-info-900: #020a0f;
|
||||
--ionic-color-info-900-rgb: 2, 10, 15;
|
||||
--ionic-color-info: #008bef;
|
||||
--ionic-color-info-rgb: 0, 139, 239;
|
||||
--ionic-font-family: "Inter", sans-serif;
|
||||
--ionic-font-letter-spacing-none: 0em;
|
||||
--ionic-font-letter-spacing-s: 0.1em;
|
||||
|
||||
@ -4,78 +4,151 @@
|
||||
*/
|
||||
|
||||
$ionic-color-primary-10: var(--ionic-color-primary-10, #f7faff);
|
||||
$ionic-color-primary-10-rgb: var(--ionic-color-primary-10-rgb, 247, 250, 255);
|
||||
$ionic-color-primary-50: var(--ionic-color-primary-50, #cbdffe);
|
||||
$ionic-color-primary-50-rgb: var(--ionic-color-primary-50-rgb, 203, 223, 254);
|
||||
$ionic-color-primary-100: var(--ionic-color-primary-100, #9ec4fd);
|
||||
$ionic-color-primary-100-rgb: var(--ionic-color-primary-100-rgb, 158, 196, 253);
|
||||
$ionic-color-primary-200: var(--ionic-color-primary-200, #74aafc);
|
||||
$ionic-color-primary-200-rgb: var(--ionic-color-primary-200-rgb, 116, 170, 252);
|
||||
$ionic-color-primary-300: var(--ionic-color-primary-300, #4991fb);
|
||||
$ionic-color-primary-300-rgb: var(--ionic-color-primary-300-rgb, 73, 145, 251);
|
||||
$ionic-color-primary-400: var(--ionic-color-primary-400, #1068eb);
|
||||
$ionic-color-primary-400-rgb: var(--ionic-color-primary-400-rgb, 16, 104, 235);
|
||||
$ionic-color-primary-500: var(--ionic-color-primary-500, #0750be);
|
||||
$ionic-color-primary-500-rgb: var(--ionic-color-primary-500-rgb, 7, 80, 190);
|
||||
$ionic-color-primary-600: var(--ionic-color-primary-600, #053d90);
|
||||
$ionic-color-primary-600-rgb: var(--ionic-color-primary-600-rgb, 5, 61, 144);
|
||||
$ionic-color-primary-700: var(--ionic-color-primary-700, #062b63);
|
||||
$ionic-color-primary-700-rgb: var(--ionic-color-primary-700-rgb, 6, 43, 99);
|
||||
$ionic-color-primary-800: var(--ionic-color-primary-800, #061935);
|
||||
$ionic-color-primary-800-rgb: var(--ionic-color-primary-800-rgb, 6, 25, 53);
|
||||
$ionic-color-primary-900: var(--ionic-color-primary-900, #010408);
|
||||
$ionic-color-primary-900-rgb: var(--ionic-color-primary-900-rgb, 1, 4, 8);
|
||||
$ionic-color-primary: var(--ionic-color-primary, #1068eb);
|
||||
$ionic-color-primary-rgb: var(--ionic-color-primary-rgb, 16, 104, 235);
|
||||
$ionic-color-secondary: var(--ionic-color-secondary, #303d60);
|
||||
$ionic-color-secondary-rgb: var(--ionic-color-secondary-rgb, 48, 61, 96);
|
||||
$ionic-color-neutral-0: var(--ionic-color-neutral-0, #ffffff);
|
||||
$ionic-color-neutral-0-rgb: var(--ionic-color-neutral-0-rgb, 255, 255, 255);
|
||||
$ionic-color-neutral-10: var(--ionic-color-neutral-10, #f5f5f5);
|
||||
$ionic-color-neutral-10-rgb: var(--ionic-color-neutral-10-rgb, 245, 245, 245);
|
||||
$ionic-color-neutral-50: var(--ionic-color-neutral-50, #e7e7e7);
|
||||
$ionic-color-neutral-50-rgb: var(--ionic-color-neutral-50-rgb, 231, 231, 231);
|
||||
$ionic-color-neutral-100: var(--ionic-color-neutral-100, #dadada);
|
||||
$ionic-color-neutral-100-rgb: var(--ionic-color-neutral-100-rgb, 218, 218, 218);
|
||||
$ionic-color-neutral-200: var(--ionic-color-neutral-200, #c9c9c9);
|
||||
$ionic-color-neutral-200-rgb: var(--ionic-color-neutral-200-rgb, 201, 201, 201);
|
||||
$ionic-color-neutral-300: var(--ionic-color-neutral-300, #b8b8b8);
|
||||
$ionic-color-neutral-300-rgb: var(--ionic-color-neutral-300-rgb, 184, 184, 184);
|
||||
$ionic-color-neutral-400: var(--ionic-color-neutral-400, #9a9a9a);
|
||||
$ionic-color-neutral-400-rgb: var(--ionic-color-neutral-400-rgb, 154, 154, 154);
|
||||
$ionic-color-neutral-500: var(--ionic-color-neutral-500, #767676);
|
||||
$ionic-color-neutral-500-rgb: var(--ionic-color-neutral-500-rgb, 118, 118, 118);
|
||||
$ionic-color-neutral-600: var(--ionic-color-neutral-600, #535353);
|
||||
$ionic-color-neutral-600-rgb: var(--ionic-color-neutral-600-rgb, 83, 83, 83);
|
||||
$ionic-color-neutral-700: var(--ionic-color-neutral-700, #373737);
|
||||
$ionic-color-neutral-700-rgb: var(--ionic-color-neutral-700-rgb, 55, 55, 55);
|
||||
$ionic-color-neutral-800: var(--ionic-color-neutral-800, #212121);
|
||||
$ionic-color-neutral-800-rgb: var(--ionic-color-neutral-800-rgb, 33, 33, 33);
|
||||
$ionic-color-neutral-900: var(--ionic-color-neutral-900, #05080f);
|
||||
$ionic-color-neutral-900-rgb: var(--ionic-color-neutral-900-rgb, 5, 8, 15);
|
||||
$ionic-color-error-10: var(--ionic-color-error-10, #fffafa);
|
||||
$ionic-color-error-10-rgb: var(--ionic-color-error-10-rgb, 255, 250, 250);
|
||||
$ionic-color-error-50: var(--ionic-color-error-50, #ffd5d5);
|
||||
$ionic-color-error-50-rgb: var(--ionic-color-error-50-rgb, 255, 213, 213);
|
||||
$ionic-color-error-100: var(--ionic-color-error-100, #ffafaf);
|
||||
$ionic-color-error-100-rgb: var(--ionic-color-error-100-rgb, 255, 175, 175);
|
||||
$ionic-color-error-200: var(--ionic-color-error-200, #ff8a8a);
|
||||
$ionic-color-error-200-rgb: var(--ionic-color-error-200-rgb, 255, 138, 138);
|
||||
$ionic-color-error-300: var(--ionic-color-error-300, #ff6666);
|
||||
$ionic-color-error-300-rgb: var(--ionic-color-error-300-rgb, 255, 102, 102);
|
||||
$ionic-color-error-400: var(--ionic-color-error-400, #f72c2c);
|
||||
$ionic-color-error-400-rgb: var(--ionic-color-error-400-rgb, 247, 44, 44);
|
||||
$ionic-color-error-500: var(--ionic-color-error-500, #c71212);
|
||||
$ionic-color-error-500-rgb: var(--ionic-color-error-500-rgb, 199, 18, 18);
|
||||
$ionic-color-error-600: var(--ionic-color-error-600, #970606);
|
||||
$ionic-color-error-600-rgb: var(--ionic-color-error-600-rgb, 151, 6, 6);
|
||||
$ionic-color-error-700: var(--ionic-color-error-700, #670202);
|
||||
$ionic-color-error-700-rgb: var(--ionic-color-error-700-rgb, 103, 2, 2);
|
||||
$ionic-color-error-800: var(--ionic-color-error-800, #380101);
|
||||
$ionic-color-error-800-rgb: var(--ionic-color-error-800-rgb, 56, 1, 1);
|
||||
$ionic-color-error-900: var(--ionic-color-error-900, #080000);
|
||||
$ionic-color-error-900-rgb: var(--ionic-color-error-900-rgb, 8, 0, 0);
|
||||
$ionic-color-error: var(--ionic-color-error, #f72c2c);
|
||||
$ionic-color-error-rgb: var(--ionic-color-error-rgb, 247, 44, 44);
|
||||
$ionic-color-warning-10: var(--ionic-color-warning-10, #fffdfa);
|
||||
$ionic-color-warning-10-rgb: var(--ionic-color-warning-10-rgb, 255, 253, 250);
|
||||
$ionic-color-warning-50: var(--ionic-color-warning-50, #ffecce);
|
||||
$ionic-color-warning-50-rgb: var(--ionic-color-warning-50-rgb, 255, 236, 206);
|
||||
$ionic-color-warning-100: var(--ionic-color-warning-100, #ffdba0);
|
||||
$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 219, 160);
|
||||
$ionic-color-warning-200: var(--ionic-color-warning-200, #ffca73);
|
||||
$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 202, 115);
|
||||
$ionic-color-warning-300: var(--ionic-color-warning-300, #ffb845);
|
||||
$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 184, 69);
|
||||
$ionic-color-warning-400: var(--ionic-color-warning-400, #ff9707);
|
||||
$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 151, 7);
|
||||
$ionic-color-warning-500: var(--ionic-color-warning-500, #ce7a06);
|
||||
$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 206, 122, 6);
|
||||
$ionic-color-warning-600: var(--ionic-color-warning-600, #9c5f0a);
|
||||
$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 156, 95, 10);
|
||||
$ionic-color-warning-700: var(--ionic-color-warning-700, #6b430c);
|
||||
$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 107, 67, 12);
|
||||
$ionic-color-warning-800: var(--ionic-color-warning-800, #39260b);
|
||||
$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 57, 38, 11);
|
||||
$ionic-color-warning-900: var(--ionic-color-warning-900, #080502);
|
||||
$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 8, 5, 2);
|
||||
$ionic-color-warning: var(--ionic-color-warning, #ff9707);
|
||||
$ionic-color-warning-rgb: var(--ionic-color-warning-rgb, 255, 151, 7);
|
||||
$ionic-color-success-10: var(--ionic-color-success-10, #fbfffa);
|
||||
$ionic-color-success-10-rgb: var(--ionic-color-success-10-rgb, 251, 255, 250);
|
||||
$ionic-color-success-50: var(--ionic-color-success-50, #def7d8);
|
||||
$ionic-color-success-50-rgb: var(--ionic-color-success-50-rgb, 222, 247, 216);
|
||||
$ionic-color-success-100: var(--ionic-color-success-100, #c6f0b7);
|
||||
$ionic-color-success-100-rgb: var(--ionic-color-success-100-rgb, 198, 240, 183);
|
||||
$ionic-color-success-200: var(--ionic-color-success-200, #a4e188);
|
||||
$ionic-color-success-200-rgb: var(--ionic-color-success-200-rgb, 164, 225, 136);
|
||||
$ionic-color-success-300: var(--ionic-color-success-300, #73c346);
|
||||
$ionic-color-success-300-rgb: var(--ionic-color-success-300-rgb, 115, 195, 70);
|
||||
$ionic-color-success-400: var(--ionic-color-success-400, #52a518);
|
||||
$ionic-color-success-400-rgb: var(--ionic-color-success-400-rgb, 82, 165, 24);
|
||||
$ionic-color-success-500: var(--ionic-color-success-500, #36870c);
|
||||
$ionic-color-success-500-rgb: var(--ionic-color-success-500-rgb, 54, 135, 12);
|
||||
$ionic-color-success-600: var(--ionic-color-success-600, #36870c);
|
||||
$ionic-color-success-600-rgb: var(--ionic-color-success-600-rgb, 54, 135, 12);
|
||||
$ionic-color-success-700: var(--ionic-color-success-700, #226907);
|
||||
$ionic-color-success-700-rgb: var(--ionic-color-success-700-rgb, 34, 105, 7);
|
||||
$ionic-color-success-800: var(--ionic-color-success-800, #144b05);
|
||||
$ionic-color-success-800-rgb: var(--ionic-color-success-800-rgb, 20, 75, 5);
|
||||
$ionic-color-success-900: var(--ionic-color-success-900, #030f02);
|
||||
$ionic-color-success-900-rgb: var(--ionic-color-success-900-rgb, 3, 15, 2);
|
||||
$ionic-color-success: var(--ionic-color-success, #52a518);
|
||||
$ionic-color-success-rgb: var(--ionic-color-success-rgb, 82, 165, 24);
|
||||
$ionic-color-info-10: var(--ionic-color-info-10, #f5fbff);
|
||||
$ionic-color-info-10-rgb: var(--ionic-color-info-10-rgb, 245, 251, 255);
|
||||
$ionic-color-info-50: var(--ionic-color-info-50, #c6e7ff);
|
||||
$ionic-color-info-50-rgb: var(--ionic-color-info-50-rgb, 198, 231, 255);
|
||||
$ionic-color-info-100: var(--ionic-color-info-100, #97d3ff);
|
||||
$ionic-color-info-100-rgb: var(--ionic-color-info-100-rgb, 151, 211, 255);
|
||||
$ionic-color-info-200: var(--ionic-color-info-200, #6ac0fe);
|
||||
$ionic-color-info-200-rgb: var(--ionic-color-info-200-rgb, 106, 192, 254);
|
||||
$ionic-color-info-300: var(--ionic-color-info-300, #3dadfe);
|
||||
$ionic-color-info-300-rgb: var(--ionic-color-info-300-rgb, 61, 173, 254);
|
||||
$ionic-color-info-400: var(--ionic-color-info-400, #008bef);
|
||||
$ionic-color-info-400-rgb: var(--ionic-color-info-400-rgb, 0, 139, 239);
|
||||
$ionic-color-info-500: var(--ionic-color-info-500, #0071c2);
|
||||
$ionic-color-info-500-rgb: var(--ionic-color-info-500-rgb, 0, 113, 194);
|
||||
$ionic-color-info-600: var(--ionic-color-info-600, #005796);
|
||||
$ionic-color-info-600-rgb: var(--ionic-color-info-600-rgb, 0, 87, 150);
|
||||
$ionic-color-info-700: var(--ionic-color-info-700, #003d69);
|
||||
$ionic-color-info-700-rgb: var(--ionic-color-info-700-rgb, 0, 61, 105);
|
||||
$ionic-color-info-800: var(--ionic-color-info-800, #02243c);
|
||||
$ionic-color-info-800-rgb: var(--ionic-color-info-800-rgb, 2, 36, 60);
|
||||
$ionic-color-info-900: var(--ionic-color-info-900, #020a0f);
|
||||
$ionic-color-info-900-rgb: var(--ionic-color-info-900-rgb, 2, 10, 15);
|
||||
$ionic-color-info: var(--ionic-color-info, #008bef);
|
||||
$ionic-color-info-rgb: var(--ionic-color-info-rgb, 0, 139, 239);
|
||||
$ionic-font-family: var(--ionic-font-family, "Inter", sans-serif);
|
||||
$ionic-font-letter-spacing-none: var(--ionic-font-letter-spacing-none, 0em);
|
||||
$ionic-font-letter-spacing-s: var(--ionic-font-letter-spacing-s, 0.1em);
|
||||
|
||||
Reference in New Issue
Block a user