mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 02:31:34 +08:00
2414b78bef
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. -->
210 lines
8.0 KiB
SCSS
210 lines
8.0 KiB
SCSS
/**
|
|
* This is an auto-generated file, please do not change it directly.
|
|
* Ionic Design System
|
|
*/
|
|
|
|
: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;
|
|
--ionic-font-letter-spacing-m: 0.15em;
|
|
--ionic-font-line-height-xs: 16px;
|
|
--ionic-font-line-height-s: 20px;
|
|
--ionic-font-line-height-m: 24px;
|
|
--ionic-font-line-height-l: 28px;
|
|
--ionic-font-line-height-xl: 32px;
|
|
--ionic-font-line-height-xxl: 36px;
|
|
--ionic-font-line-height-display-s: 44px;
|
|
--ionic-font-line-height-display-m: 48px;
|
|
--ionic-font-line-height-full: 100%;
|
|
--ionic-font-size-h1: 28px;
|
|
--ionic-font-size-h2: 32px;
|
|
--ionic-font-size-h3: 24px;
|
|
--ionic-font-size-h4: 22px;
|
|
--ionic-font-size-h5: 20px;
|
|
--ionic-font-size-h6: 18px;
|
|
--ionic-font-size-display-s: 32px;
|
|
--ionic-font-size-display-m: 36px;
|
|
--ionic-font-size-s: 12px;
|
|
--ionic-font-size-m: 14px;
|
|
--ionic-font-size-l: 16px;
|
|
--ionic-font-weight-light: 300;
|
|
--ionic-font-weight-regular: 400;
|
|
--ionic-font-weight-medium: 500;
|
|
--ionic-font-weight-semi-bold: 600;
|
|
--ionic-font-weight-bold: 700;
|
|
--ionic-space-none: 0;
|
|
--ionic-space-xxxxs: 2px;
|
|
--ionic-space-xxxs: 4px;
|
|
--ionic-space-xxs: 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);
|
|
}
|