Skip to content

Commit fc40c77

Browse files
thetaPCthetaPC
committed
feat(core): update dark tokens
1 parent db67416 commit fc40c77

File tree

6 files changed

+58
-42
lines changed

6 files changed

+58
-42
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { mix, generateColorSteps } from '../../utils/theme';
1+
import { mix } from '../../utils/theme';
22
import type { DarkTheme } from '../themes.interfaces';
33

44
const colors = {
@@ -160,7 +160,6 @@ export const darkTheme: DarkTheme = {
160160
tint: mix('#000', colors.dark, '12%'),
161161
},
162162
},
163-
gray: generateColorSteps('#fff', '#000', true),
164163
},
165164

166165
backgroundColor: '#000000',

‎core/src/themes/base/default.tokens.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { generateColorSteps } from '../../utils/theme';
12
import type { DefaultTheme } from '../themes.interfaces';
23

34
import { darkTheme } from './dark.tokens';
@@ -160,4 +161,9 @@ export const defaultTheme: DefaultTheme = {
160161
xl: '2',
161162
xxl: '2.4',
162163
},
164+
165+
color: {
166+
// TODO: Update hex values to use the text color variable and background color variable
167+
gray: generateColorSteps('#fff', '#000'),
168+
},
163169
};

‎core/src/themes/base/light.tokens.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { mix, generateColorSteps } from '../../utils/theme';
1+
import { mix } from '../../utils/theme';
22
import type { LightTheme } from '../themes.interfaces';
33

44
const colors = {
@@ -159,6 +159,5 @@ export const lightTheme: LightTheme = {
159159
tint: mix('#fff', colors.dark, '4%'),
160160
},
161161
},
162-
gray: generateColorSteps('#fff', '#000'),
163162
},
164163
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { generateColorSteps } from '../../utils/theme';
12
import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
23
import type { DarkTheme } from '../themes.interfaces';
34

@@ -51,6 +52,11 @@ export const darkTheme: DarkTheme = {
5152
950: '#0d0d0d',
5253
},
5354

55+
color: {
56+
// TODO: Update hex values to use the text color variable and background color variable
57+
gray: generateColorSteps('#ffffff', '#000000', true),
58+
},
59+
5460
components: {
5561
IonCard: {
5662
background: '#1c1c1d',

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { generateColorSteps } from '../../utils/theme';
12
import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
23
import type { DarkTheme } from '../themes.interfaces';
34

@@ -53,6 +54,11 @@ export const darkTheme: DarkTheme = {
5354
950: '#1e1e1e',
5455
},
5556

57+
color: {
58+
// TODO: Update hex values to use the text color variable and background color variable
59+
gray: generateColorSteps('#ffffff', '#121212', true),
60+
},
61+
5662
components: {
5763
IonCard: {
5864
background: '#1e1e1e',

‎core/src/themes/native/native.theme.default.scss‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -29,155 +29,155 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
2929
$background-color-step-50: var(
3030
--ion-color-step-50,
3131
var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))
32-
);
32+
); // f2f2f2 --ion-color-gray-50
3333
$background-color-step-100: var(
3434
--ion-color-step-100,
3535
var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))
36-
);
36+
); // e6e6e6 --ion-color-gray-100
3737
$background-color-step-150: var(
3838
--ion-color-step-150,
3939
var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))
40-
);
40+
); // d9d9d9 --ion-color-gray-150
4141
$background-color-step-200: var(
4242
--ion-color-step-200,
4343
var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))
44-
);
44+
); // cccccc --ion-color-gray-200
4545
$background-color-step-250: var(
4646
--ion-color-step-250,
4747
var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))
48-
);
48+
); // bfbfbf --ion-color-gray-250
4949
$background-color-step-300: var(
5050
--ion-color-step-300,
5151
var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))
52-
);
52+
); // b3b3b3 --ion-color-gray-300
5353
$background-color-step-350: var(
5454
--ion-color-step-350,
5555
var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))
56-
);
56+
); // a6a6a6 --ion-color-gray-350
5757
$background-color-step-400: var(
5858
--ion-color-step-400,
5959
var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))
60-
);
60+
); // 999999 --ion-color-gray-400
6161
$background-color-step-450: var(
6262
--ion-color-step-450,
6363
var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))
64-
);
64+
); // 8c8c8c --ion-color-gray-450
6565
$background-color-step-500: var(
6666
--ion-color-step-500,
6767
var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))
68-
);
68+
); // 808080 --ion-color-gray-500
6969
$background-color-step-550: var(
7070
--ion-color-step-550,
7171
var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))
72-
);
72+
); // 737373 --ion-color-gray-550
7373
$background-color-step-600: var(
7474
--ion-color-step-600,
7575
var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))
76-
);
76+
); // 666666 --ion-color-gray-600
7777
$background-color-step-650: var(
7878
--ion-color-step-650,
7979
var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))
80-
);
80+
); // 595959 --ion-color-gray-650
8181
$background-color-step-700: var(
8282
--ion-color-step-700,
8383
var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))
84-
);
84+
); // 4d4d4d --ion-color-gray-700
8585
$background-color-step-750: var(
8686
--ion-color-step-750,
8787
var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))
88-
);
88+
); // 404040 --ion-color-gray-750
8989
$background-color-step-800: var(
9090
--ion-color-step-800,
9191
var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))
92-
);
92+
); // 333333 --ion-color-gray-800
9393
$background-color-step-850: var(
9494
--ion-color-step-850,
9595
var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))
96-
);
96+
); // 262626 --ion-color-gray-850
9797
$background-color-step-900: var(
9898
--ion-color-step-900,
9999
var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))
100-
);
100+
); // 191919 --ion-color-gray-900
101101
$background-color-step-950: var(
102102
--ion-color-step-950,
103103
var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))
104-
);
104+
); // 0d0d0d --ion-color-gray-950
105105
$text-color-step-50: var(
106106
--ion-color-step-950,
107107
var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))
108-
);
108+
); // 0d0d0d --ion-color-gray-950
109109
$text-color-step-100: var(
110110
--ion-color-step-900,
111111
var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))
112-
);
112+
); // 191919 --ion-color-gray-900
113113
$text-color-step-150: var(
114114
--ion-color-step-850,
115115
var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))
116-
);
116+
); // 262626 --ion-color-gray-850
117117
$text-color-step-200: var(
118118
--ion-color-step-800,
119119
var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))
120-
);
120+
); // 333333 --ion-color-gray-800
121121
$text-color-step-250: var(
122122
--ion-color-step-750,
123123
var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))
124-
);
124+
); // 404040 --ion-color-gray-750
125125
$text-color-step-300: var(
126126
--ion-color-step-700,
127127
var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))
128-
);
128+
); // 4d4d4d --ion-color-gray-700
129129
$text-color-step-350: var(
130130
--ion-color-step-650,
131131
var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))
132-
);
132+
); // 595959 --ion-color-gray-650
133133
$text-color-step-400: var(
134134
--ion-color-step-600,
135135
var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))
136-
);
136+
); // 666666 --ion-color-gray-600
137137
$text-color-step-450: var(
138138
--ion-color-step-550,
139139
var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))
140-
);
140+
); // 737373 --ion-color-gray-550
141141
$text-color-step-500: var(
142142
--ion-color-step-500,
143143
var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))
144-
);
144+
); // 808080 --ion-color-gray-500
145145
$text-color-step-550: var(
146146
--ion-color-step-450,
147147
var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))
148-
);
148+
); // 8c8c8c --ion-color-gray-450
149149
$text-color-step-600: var(
150150
--ion-color-step-400,
151151
var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))
152-
);
152+
); // 999999 --ion-color-gray-400
153153
$text-color-step-650: var(
154154
--ion-color-step-350,
155155
var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))
156-
);
156+
); // a6a6a6 --ion-color-gray-350
157157
$text-color-step-700: var(
158158
--ion-color-step-300,
159159
var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))
160-
);
160+
); // b3b3b3 --ion-color-gray-300
161161
$text-color-step-750: var(
162162
--ion-color-step-250,
163163
var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))
164-
);
164+
); // bfbfbf --ion-color-gray-250
165165
$text-color-step-800: var(
166166
--ion-color-step-200,
167167
var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))
168-
);
168+
); // cccccc --ion-color-gray-200
169169
$text-color-step-850: var(
170170
--ion-color-step-150,
171171
var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))
172-
);
172+
); // d9d9d9 --ion-color-gray-150
173173
$text-color-step-900: var(
174174
--ion-color-step-100,
175175
var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))
176-
);
176+
); // e6e6e6 --ion-color-gray-100
177177
$text-color-step-950: var(
178178
--ion-color-step-50,
179179
var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))
180-
);
180+
); // f2f2f2 --ion-color-gray-50
181181

182182
// Default General Colors
183183
// --------------------------------------------------

0 commit comments

Comments
 (0)