Skip to content

Commit 527af98

Browse files
thetaPCthetaPC
committed
feat(many): use gray tokens
1 parent fb011cc commit 527af98

File tree

4 files changed

+83
-83
lines changed

4 files changed

+83
-83
lines changed

‎core/src/themes/ios/dark.tokens.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ export const darkTheme: DarkTheme = {
6969
paragraphTextColor: colors.gray['450']!,
7070
},
7171
IonModal: {
72-
background: 'var(--ion-background-color-step-100)',
73-
toolbarBackground: 'var(--ion-background-color-step-150)',
74-
toolbarBorderColor: 'var(--ion-background-color-step-250)',
72+
background: 'var(--ion-color-gray-100)',
73+
toolbarBackground: 'var(--ion-color-gray-150)',
74+
toolbarBorderColor: 'var(--ion-color-gray-250)',
7575
handleBg: colors.gray['350']!,
7676
},
7777
IonDatetime: {

‎docs/sass-guidelines.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
201201
$backdrop-ios-color: var(--ion-backdrop-color, #000);
202202
$overlay-ios-background-color: var(
203203
--ion-overlay-background-color,
204-
var(--ion-color-step-100, #f9f9f9)
204+
var(--ion-color-gray-100, #f9f9f9)
205205
);
206206
```
207207

‎packages/react-router/test/base/src/theme/variables.css‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -159,25 +159,25 @@ http://ionicframework.com/docs/theming/ */
159159
--ion-text-color: #ffffff;
160160
--ion-text-color-rgb: 255, 255, 255;
161161

162-
--ion-color-step-50: #0d0d0d;
163-
--ion-color-step-100: #1a1a1a;
164-
--ion-color-step-150: #262626;
165-
--ion-color-step-200: #333333;
166-
--ion-color-step-250: #404040;
167-
--ion-color-step-300: #4d4d4d;
168-
--ion-color-step-350: #595959;
169-
--ion-color-step-400: #666666;
170-
--ion-color-step-450: #737373;
171-
--ion-color-step-500: #808080;
172-
--ion-color-step-550: #8c8c8c;
173-
--ion-color-step-600: #999999;
174-
--ion-color-step-650: #a6a6a6;
175-
--ion-color-step-700: #b3b3b3;
176-
--ion-color-step-750: #bfbfbf;
177-
--ion-color-step-800: #cccccc;
178-
--ion-color-step-850: #d9d9d9;
179-
--ion-color-step-900: #e6e6e6;
180-
--ion-color-step-950: #f2f2f2;
162+
--ion-color-gray-50: #0d0d0d;
163+
--ion-color-gray-100: #1a1a1a;
164+
--ion-color-gray-150: #262626;
165+
--ion-color-gray-200: #333333;
166+
--ion-color-gray-250: #404040;
167+
--ion-color-gray-300: #4d4d4d;
168+
--ion-color-gray-350: #595959;
169+
--ion-color-gray-400: #666666;
170+
--ion-color-gray-450: #737373;
171+
--ion-color-gray-500: #808080;
172+
--ion-color-gray-550: #8c8c8c;
173+
--ion-color-gray-600: #999999;
174+
--ion-color-gray-650: #a6a6a6;
175+
--ion-color-gray-700: #b3b3b3;
176+
--ion-color-gray-750: #bfbfbf;
177+
--ion-color-gray-800: #cccccc;
178+
--ion-color-gray-850: #d9d9d9;
179+
--ion-color-gray-900: #e6e6e6;
180+
--ion-color-gray-950: #f2f2f2;
181181

182182
--ion-toolbar-background: #0d0d0d;
183183

@@ -198,25 +198,25 @@ http://ionicframework.com/docs/theming/ */
198198

199199
--ion-border-color: #222222;
200200

201-
--ion-color-step-50: #1e1e1e;
202-
--ion-color-step-100: #2a2a2a;
203-
--ion-color-step-150: #363636;
204-
--ion-color-step-200: #414141;
205-
--ion-color-step-250: #4d4d4d;
206-
--ion-color-step-300: #595959;
207-
--ion-color-step-350: #656565;
208-
--ion-color-step-400: #717171;
209-
--ion-color-step-450: #7d7d7d;
210-
--ion-color-step-500: #898989;
211-
--ion-color-step-550: #949494;
212-
--ion-color-step-600: #a0a0a0;
213-
--ion-color-step-650: #acacac;
214-
--ion-color-step-700: #b8b8b8;
215-
--ion-color-step-750: #c4c4c4;
216-
--ion-color-step-800: #d0d0d0;
217-
--ion-color-step-850: #dbdbdb;
218-
--ion-color-step-900: #e7e7e7;
219-
--ion-color-step-950: #f3f3f3;
201+
--ion-color-gray-50: #1e1e1e;
202+
--ion-color-gray-100: #2a2a2a;
203+
--ion-color-gray-150: #363636;
204+
--ion-color-gray-200: #414141;
205+
--ion-color-gray-250: #4d4d4d;
206+
--ion-color-gray-300: #595959;
207+
--ion-color-gray-350: #656565;
208+
--ion-color-gray-400: #717171;
209+
--ion-color-gray-450: #7d7d7d;
210+
--ion-color-gray-500: #898989;
211+
--ion-color-gray-550: #949494;
212+
--ion-color-gray-600: #a0a0a0;
213+
--ion-color-gray-650: #acacac;
214+
--ion-color-gray-700: #b8b8b8;
215+
--ion-color-gray-750: #c4c4c4;
216+
--ion-color-gray-800: #d0d0d0;
217+
--ion-color-gray-850: #dbdbdb;
218+
--ion-color-gray-900: #e7e7e7;
219+
--ion-color-gray-950: #f3f3f3;
220220

221221
--ion-item-background: #1e1e1e;
222222

‎packages/react/test/base/src/theme/variables.css‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -159,35 +159,35 @@ http://ionicframework.com/docs/theming/ */
159159
--ion-text-color: #ffffff;
160160
--ion-text-color-rgb: 255,255,255;
161161

162-
--ion-color-step-50: #0d0d0d;
163-
--ion-color-step-100: #1a1a1a;
164-
--ion-color-step-150: #262626;
165-
--ion-color-step-200: #333333;
166-
--ion-color-step-250: #404040;
167-
--ion-color-step-300: #4d4d4d;
168-
--ion-color-step-350: #595959;
169-
--ion-color-step-400: #666666;
170-
--ion-color-step-450: #737373;
171-
--ion-color-step-500: #808080;
172-
--ion-color-step-550: #8c8c8c;
173-
--ion-color-step-600: #999999;
174-
--ion-color-step-650: #a6a6a6;
175-
--ion-color-step-700: #b3b3b3;
176-
--ion-color-step-750: #bfbfbf;
177-
--ion-color-step-800: #cccccc;
178-
--ion-color-step-850: #d9d9d9;
179-
--ion-color-step-900: #e6e6e6;
180-
--ion-color-step-950: #f2f2f2;
162+
--ion-color-gray-50: #0d0d0d;
163+
--ion-color-gray-100: #1a1a1a;
164+
--ion-color-gray-150: #262626;
165+
--ion-color-gray-200: #333333;
166+
--ion-color-gray-250: #404040;
167+
--ion-color-gray-300: #4d4d4d;
168+
--ion-color-gray-350: #595959;
169+
--ion-color-gray-400: #666666;
170+
--ion-color-gray-450: #737373;
171+
--ion-color-gray-500: #808080;
172+
--ion-color-gray-550: #8c8c8c;
173+
--ion-color-gray-600: #999999;
174+
--ion-color-gray-650: #a6a6a6;
175+
--ion-color-gray-700: #b3b3b3;
176+
--ion-color-gray-750: #bfbfbf;
177+
--ion-color-gray-800: #cccccc;
178+
--ion-color-gray-850: #d9d9d9;
179+
--ion-color-gray-900: #e6e6e6;
180+
--ion-color-gray-950: #f2f2f2;
181181

182182
--ion-item-background: #000000;
183183

184184
--ion-card-background: #1c1c1d;
185185
}
186186

187187
.ios ion-modal {
188-
--ion-background-color: var(--ion-color-step-100);
189-
--ion-toolbar-background: var(--ion-color-step-150);
190-
--ion-toolbar-border-color: var(--ion-color-step-250);
188+
--ion-background-color: var(--ion-color-gray-100);
189+
--ion-toolbar-background: var(--ion-color-gray-150);
190+
--ion-toolbar-border-color: var(--ion-color-gray-250);
191191
}
192192

193193

@@ -205,25 +205,25 @@ http://ionicframework.com/docs/theming/ */
205205

206206
--ion-border-color: #222222;
207207

208-
--ion-color-step-50: #1e1e1e;
209-
--ion-color-step-100: #2a2a2a;
210-
--ion-color-step-150: #363636;
211-
--ion-color-step-200: #414141;
212-
--ion-color-step-250: #4d4d4d;
213-
--ion-color-step-300: #595959;
214-
--ion-color-step-350: #656565;
215-
--ion-color-step-400: #717171;
216-
--ion-color-step-450: #7d7d7d;
217-
--ion-color-step-500: #898989;
218-
--ion-color-step-550: #949494;
219-
--ion-color-step-600: #a0a0a0;
220-
--ion-color-step-650: #acacac;
221-
--ion-color-step-700: #b8b8b8;
222-
--ion-color-step-750: #c4c4c4;
223-
--ion-color-step-800: #d0d0d0;
224-
--ion-color-step-850: #dbdbdb;
225-
--ion-color-step-900: #e7e7e7;
226-
--ion-color-step-950: #f3f3f3;
208+
--ion-color-gray-50: #1e1e1e;
209+
--ion-color-gray-100: #2a2a2a;
210+
--ion-color-gray-150: #363636;
211+
--ion-color-gray-200: #414141;
212+
--ion-color-gray-250: #4d4d4d;
213+
--ion-color-gray-300: #595959;
214+
--ion-color-gray-350: #656565;
215+
--ion-color-gray-400: #717171;
216+
--ion-color-gray-450: #7d7d7d;
217+
--ion-color-gray-500: #898989;
218+
--ion-color-gray-550: #949494;
219+
--ion-color-gray-600: #a0a0a0;
220+
--ion-color-gray-650: #acacac;
221+
--ion-color-gray-700: #b8b8b8;
222+
--ion-color-gray-750: #c4c4c4;
223+
--ion-color-gray-800: #d0d0d0;
224+
--ion-color-gray-850: #dbdbdb;
225+
--ion-color-gray-900: #e7e7e7;
226+
--ion-color-gray-950: #f3f3f3;
227227

228228
--ion-item-background: #1e1e1e;
229229

0 commit comments

Comments
 (0)