javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tokens): replace remaining stepped color CSS variables

Browse Source
This commit is contained in:
Maria Hutt
2026-02-27 15:56:14 -08:00
parent b6e2e2be2c
commit 520146d892
7 changed files with 254 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/themes/ios/dark.tokens.ts
View File

@@ -26,9 +26,9 @@ export const darkTheme: DarkTheme = {
background: '#000000',
},
IonModal: {
background: 'var(--ion-background-color-step-100)',
toolbarBackground: 'var(--ion-background-color-step-150)',
toolbarBorderColor: 'var(--ion-background-color-step-250)',
background: 'var(--ion-color-gray-100)',
toolbarBackground: 'var(--ion-color-gray-150)',
toolbarBorderColor: 'var(--ion-color-gray-250)',
},
},
};

82
core/src/themes/native/test/css-variables/css/dark.css
View File

@@ -80,25 +80,25 @@ body {
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;
--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-color-gray-50: #0d0d0d;
--ion-color-gray-100: #1a1a1a;
--ion-color-gray-150: #262626;
--ion-color-gray-200: #333333;
--ion-color-gray-250: #404040;
--ion-color-gray-300: #4d4d4d;
--ion-color-gray-350: #595959;
--ion-color-gray-400: #666666;
--ion-color-gray-450: #737373;
--ion-color-gray-500: #808080;
--ion-color-gray-550: #8c8c8c;
--ion-color-gray-600: #999999;
--ion-color-gray-650: #a6a6a6;
--ion-color-gray-700: #b3b3b3;
--ion-color-gray-750: #bfbfbf;
--ion-color-gray-800: #cccccc;
--ion-color-gray-850: #d9d9d9;
--ion-color-gray-900: #e6e6e6;
--ion-color-gray-950: #f2f2f2;
--ion-item-background: #000000;
@@ -106,9 +106,9 @@ body {
}
.ios ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
--ion-background-color: var(--ion-color-gray-100);
--ion-toolbar-background: var(--ion-color-gray-150);
--ion-toolbar-border-color: var(--ion-color-gray-250);
}
/*
@@ -125,25 +125,25 @@ body {
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-color-gray-50: #1e1e1e;
--ion-color-gray-100: #2a2a2a;
--ion-color-gray-150: #363636;
--ion-color-gray-200: #414141;
--ion-color-gray-250: #4d4d4d;
--ion-color-gray-300: #595959;
--ion-color-gray-350: #656565;
--ion-color-gray-400: #717171;
--ion-color-gray-450: #7d7d7d;
--ion-color-gray-500: #898989;
--ion-color-gray-550: #949494;
--ion-color-gray-600: #a0a0a0;
--ion-color-gray-650: #acacac;
--ion-color-gray-700: #b8b8b8;
--ion-color-gray-750: #c4c4c4;
--ion-color-gray-800: #d0d0d0;
--ion-color-gray-850: #dbdbdb;
--ion-color-gray-900: #e7e7e7;
--ion-color-gray-950: #f3f3f3;
--ion-item-background: #1e1e1e;

40
core/src/themes/native/test/css-variables/css/oceanic.css
View File

@@ -96,24 +96,24 @@
--ion-text-color: #fff;
--ion-text-color-rgb: 255,255,255;
--ion-color-step-50: #26363e;
--ion-color-step-100: #324048;
--ion-color-step-150: #3d4b52;
--ion-color-step-200: #49555d;
--ion-color-step-250: #546067;
--ion-color-step-300: #5f6b71;
--ion-color-step-350: #6b757b;
--ion-color-step-400: #768085;
--ion-color-step-450: #828a8f;
--ion-color-step-500: #8d959a;
--ion-color-step-550: #98a0a4;
--ion-color-step-600: #a4aaae;
--ion-color-step-650: #afb5b8;
--ion-color-step-700: #bbbfc2;
--ion-color-step-750: #c6cacc;
--ion-color-step-800: #d1d5d6;
--ion-color-step-850: #dddfe1;
--ion-color-step-900: #e8eaeb;
--ion-color-step-950: #f4f4f5;
--ion-color-step-1000: #fff;
--ion-color-gray-50: #26363e;
--ion-color-gray-100: #324048;
--ion-color-gray-150: #3d4b52;
--ion-color-gray-200: #49555d;
--ion-color-gray-250: #546067;
--ion-color-gray-300: #5f6b71;
--ion-color-gray-350: #6b757b;
--ion-color-gray-400: #768085;
--ion-color-gray-450: #828a8f;
--ion-color-gray-500: #8d959a;
--ion-color-gray-550: #98a0a4;
--ion-color-gray-600: #a4aaae;
--ion-color-gray-650: #afb5b8;
--ion-color-gray-700: #bbbfc2;
--ion-color-gray-750: #c6cacc;
--ion-color-gray-800: #d1d5d6;
--ion-color-gray-850: #dddfe1;
--ion-color-gray-900: #e8eaeb;
--ion-color-gray-950: #f4f4f5;
--ion-color-gray-1000: #fff;
}

225
core/src/themes/native/test/steps/index.html
View File

@@ -1,225 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Themes - Steps</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.block {
display: inline-block;
height: 60px;
width: 150px;
}
.background-step-50 {
background: var(--ion-color-step-50, #f2f2f2);
}
.background-step-100 {
background: var(--ion-color-step-100, #e6e6e6);
}
.background-step-150 {
background: var(--ion-color-step-150, #d9d9d9);
}
.background-step-200 {
background: var(--ion-color-step-200, #cccccc);
}
.background-step-250 {
background: var(--ion-color-step-250, #bfbfbf);
}
.background-step-300 {
background: var(--ion-color-step-300, #b3b3b3);
}
.background-step-350 {
background: var(--ion-color-step-350, #a6a6a6);
}
.background-step-400 {
background: var(--ion-color-step-400, #999999);
}
.background-step-450 {
background: var(--ion-color-step-450, #8c8c8c);
}
.background-step-500 {
background: var(--ion-color-step-500, gray);
}
.background-step-550 {
background: var(--ion-color-step-550, #737373);
}
.background-step-600 {
background: var(--ion-color-step-600, #666666);
}
.background-step-650 {
background: var(--ion-color-step-650, #595959);
}
.background-step-700 {
background: var(--ion-color-step-700, #4d4d4d);
}
.background-step-750 {
background: var(--ion-color-step-750, #404040);
}
.background-step-800 {
background: var(--ion-color-step-800, #333333);
}
.background-step-850 {
background: var(--ion-color-step-850, #262626);
}
.background-step-900 {
background: var(--ion-color-step-900, #1a1a1a);
}
.background-step-950 {
background: var(--ion-color-step-950, #0d0d0d);
}
.text-step-50 {
color: var(--ion-color-step-950, #0d0d0d);
}
.text-step-100 {
color: var(--ion-color-step-900, #1a1a1a);
}
.text-step-150 {
color: var(--ion-color-step-850, #262626);
}
.text-step-200 {
color: var(--ion-color-step-800, #333333);
}
.text-step-250 {
color: var(--ion-color-step-750, #404040);
}
.text-step-300 {
color: var(--ion-color-step-700, #4d4d4d);
}
.text-step-350 {
color: var(--ion-color-step-650, #595959);
}
.text-step-400 {
color: var(--ion-color-step-600, #666666);
}
.text-step-450 {
color: var(--ion-color-step-550, #737373);
}
.text-step-500 {
color: var(--ion-color-step-500, gray);
}
.text-step-550 {
color: var(--ion-color-step-450, #8c8c8c);
}
.text-step-600 {
color: var(--ion-color-step-400, #999999);
}
.text-step-650 {
color: var(--ion-color-step-350, #a6a6a6);
}
.text-step-700 {
color: var(--ion-color-step-300, #b3b3b3);
}
.text-step-750 {
color: var(--ion-color-step-250, #bfbfbf);
}
.text-step-800 {
color: var(--ion-color-step-200, #cccccc);
}
.text-step-850 {
color: var(--ion-color-step-150, #d9d9d9);
}
.text-step-900 {
color: var(--ion-color-step-100, #e6e6e6);
}
.text-step-950 {
color: var(--ion-color-step-50, #f2f2f2);
}
</style>
</head>
<body>
<ion-app>
<ion-content class="ion-padding">
<div class="block">Background</div>
<div class="block background-step-50">Step 50</div>
<div class="block background-step-100">Step 100</div>
<div class="block background-step-150">Step 150</div>
<div class="block background-step-200">Step 200</div>
<div class="block background-step-250">Step 250</div>
<div class="block background-step-300">Step 300</div>
<div class="block background-step-350">Step 350</div>
<div class="block background-step-400">Step 400</div>
<div class="block background-step-450">Step 450</div>
<div class="block background-step-500">Step 500</div>
<div class="block background-step-550">Step 550</div>
<div class="block background-step-600">Step 600</div>
<div class="block background-step-650">Step 650</div>
<div class="block background-step-700">Step 700</div>
<div class="block background-step-750">Step 750</div>
<div class="block background-step-800">Step 800</div>
<div class="block background-step-850">Step 850</div>
<div class="block background-step-900">Step 900</div>
<div class="block background-step-950">Step 950</div>
<hr />
<div class="block">Text</div>
<div class="block text-step-50">Step 50</div>
<div class="block text-step-100">Step 100</div>
<div class="block text-step-150">Step 150</div>
<div class="block text-step-200">Step 200</div>
<div class="block text-step-250">Step 250</div>
<div class="block text-step-300">Step 300</div>
<div class="block text-step-350">Step 350</div>
<div class="block text-step-400">Step 400</div>
<div class="block text-step-450">Step 450</div>
<div class="block text-step-500">Step 500</div>
<div class="block text-step-550">Step 550</div>
<div class="block text-step-600">Step 600</div>
<div class="block text-step-650">Step 650</div>
<div class="block text-step-700">Step 700</div>
<div class="block text-step-750">Step 750</div>
<div class="block text-step-800">Step 800</div>
<div class="block text-step-850">Step 850</div>
<div class="block text-step-900">Step 900</div>
<div class="block text-step-950">Step 950</div>
</ion-content>
</ion-app>
</body>
</html>

111
core/src/themes/test/color/index.html
View File

@@ -30,6 +30,7 @@
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 16px 10px;
gap: 10px;
@@ -86,6 +87,13 @@
background: var(--ion-color-subtle-tint);
color: var(--ion-color-subtle-contrast);
}
.color-tile {
border: 1px solid #f2f2f2;
height: 40px;
width: 80px;
cursor: pointer;
}
</style>
</head>
@@ -233,7 +241,110 @@
</div>
</div>
</div>
<div class="grid">
<div class="column">
<h2>Gray</h2>
<div id="gray" class="row"></div>
</div>
<div class="column">
<h2>Text</h2>
<div id="text" class="row"></div>
</div>
</div>
</ion-content>
</ion-app>
<script>
document.addEventListener('DOMContentLoaded', function () {
const generateGrayColors = () => {
const grayContainer = document.getElementById('gray');
const bodyStyles = getComputedStyle(document.body);
if (!bodyStyles.getPropertyValue('--ion-color-gray-0')) {
const error = document.createElement('span');
error.textContent = 'Gray color variables not found.';
grayContainer.appendChild(error);
return;
}
for (let i = 0; i <= 1000; i += 50) {
const grayColor = `--ion-color-gray-${i}`;
const colorValue = bodyStyles.getPropertyValue(grayColor).trim();
const item = document.createElement('span');
const color = document.createElement('div');
color.classList.add('block', 'color-tile');
color.style.backgroundColor = `var(${grayColor})`;
color.addEventListener('click', () => {
navigator.clipboard.writeText(grayColor);
console.log(`${grayColor} copied to clipboard`);
});
item.appendChild(color);
const name = document.createElement('div');
name.textContent = `gray-${i}`;
item.appendChild(name);
const value = document.createElement('div');
value.textContent = colorValue;
item.appendChild(value);
grayContainer.appendChild(item);
}
};
const generateTextColors = () => {
const textContainer = document.getElementById('text');
const bodyStyles = getComputedStyle(document.body);
if (!bodyStyles.getPropertyValue('--ion-color-text-0')) {
const error = document.createElement('span');
error.textContent = 'Text color variables not found.';
textContainer.appendChild(error);
return;
}
for (let i = 0; i <= 1000; i += 50) {
const textColor = `--ion-color-text-${i}`;
const colorValue = bodyStyles.getPropertyValue(textColor).trim();
const item = document.createElement('span');
const color = document.createElement('div');
color.classList.add('block', 'color-tile');
color.style.backgroundColor = `var(${textColor})`;
color.addEventListener('click', () => {
navigator.clipboard.writeText(textColor);
console.log(`${textColor} copied to clipboard`);
});
item.appendChild(color);
const name = document.createElement('div');
name.textContent = `text-${i}`;
item.appendChild(name);
const value = document.createElement('div');
value.textContent = colorValue;
item.appendChild(value);
textContainer.appendChild(item);
}
};
generateGrayColors();
generateTextColors();
});
</script>
</body>
</html>

76
packages/react-router/test/base/src/theme/variables.css
View File

@@ -159,25 +159,25 @@ http://ionicframework.com/docs/theming/ */
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;
--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-color-gray-50: #0d0d0d;
--ion-color-gray-100: #1a1a1a;
--ion-color-gray-150: #262626;
--ion-color-gray-200: #333333;
--ion-color-gray-250: #404040;
--ion-color-gray-300: #4d4d4d;
--ion-color-gray-350: #595959;
--ion-color-gray-400: #666666;
--ion-color-gray-450: #737373;
--ion-color-gray-500: #808080;
--ion-color-gray-550: #8c8c8c;
--ion-color-gray-600: #999999;
--ion-color-gray-650: #a6a6a6;
--ion-color-gray-700: #b3b3b3;
--ion-color-gray-750: #bfbfbf;
--ion-color-gray-800: #cccccc;
--ion-color-gray-850: #d9d9d9;
--ion-color-gray-900: #e6e6e6;
--ion-color-gray-950: #f2f2f2;
--ion-toolbar-background: #0d0d0d;
@@ -198,25 +198,25 @@ http://ionicframework.com/docs/theming/ */
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-color-gray-50: #1e1e1e;
--ion-color-gray-100: #2a2a2a;
--ion-color-gray-150: #363636;
--ion-color-gray-200: #414141;
--ion-color-gray-250: #4d4d4d;
--ion-color-gray-300: #595959;
--ion-color-gray-350: #656565;
--ion-color-gray-400: #717171;
--ion-color-gray-450: #7d7d7d;
--ion-color-gray-500: #898989;
--ion-color-gray-550: #949494;
--ion-color-gray-600: #a0a0a0;
--ion-color-gray-650: #acacac;
--ion-color-gray-700: #b8b8b8;
--ion-color-gray-750: #c4c4c4;
--ion-color-gray-800: #d0d0d0;
--ion-color-gray-850: #dbdbdb;
--ion-color-gray-900: #e7e7e7;
--ion-color-gray-950: #f3f3f3;
--ion-item-background: #1e1e1e;

82
packages/react/test/base/src/theme/variables.css
View File

@@ -159,25 +159,25 @@ http://ionicframework.com/docs/theming/ */
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-color-gray-50: #0d0d0d;
--ion-color-gray-100: #1a1a1a;
--ion-color-gray-150: #262626;
--ion-color-gray-200: #333333;
--ion-color-gray-250: #404040;
--ion-color-gray-300: #4d4d4d;
--ion-color-gray-350: #595959;
--ion-color-gray-400: #666666;
--ion-color-gray-450: #737373;
--ion-color-gray-500: #808080;
--ion-color-gray-550: #8c8c8c;
--ion-color-gray-600: #999999;
--ion-color-gray-650: #a6a6a6;
--ion-color-gray-700: #b3b3b3;
--ion-color-gray-750: #bfbfbf;
--ion-color-gray-800: #cccccc;
--ion-color-gray-850: #d9d9d9;
--ion-color-gray-900: #e6e6e6;
--ion-color-gray-950: #f2f2f2;
--ion-item-background: #000000;
@@ -185,9 +185,9 @@ http://ionicframework.com/docs/theming/ */
}
.ios ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
--ion-background-color: var(--ion-color-gray-100);
--ion-toolbar-background: var(--ion-color-gray-150);
--ion-toolbar-border-color: var(--ion-color-gray-250);
}
@@ -205,25 +205,25 @@ http://ionicframework.com/docs/theming/ */
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-color-gray-50: #1e1e1e;
--ion-color-gray-100: #2a2a2a;
--ion-color-gray-150: #363636;
--ion-color-gray-200: #414141;
--ion-color-gray-250: #4d4d4d;
--ion-color-gray-300: #595959;
--ion-color-gray-350: #656565;
--ion-color-gray-400: #717171;
--ion-color-gray-450: #7d7d7d;
--ion-color-gray-500: #898989;
--ion-color-gray-550: #949494;
--ion-color-gray-600: #a0a0a0;
--ion-color-gray-650: #acacac;
--ion-color-gray-700: #b8b8b8;
--ion-color-gray-750: #c4c4c4;
--ion-color-gray-800: #d0d0d0;
--ion-color-gray-850: #dbdbdb;
--ion-color-gray-900: #e7e7e7;
--ion-color-gray-950: #f3f3f3;
--ion-item-background: #1e1e1e;