@atom-learning/theme 6.0.0-beta.0 → 6.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/theme-atom.css +19 -15
  2. package/lib/theme-atom.d.ts +8 -8
  3. package/lib/theme-atom.js +8 -8
  4. package/lib/theme-quest-reports.css +19 -15
  5. package/lib/theme-quest-reports.d.ts +8 -8
  6. package/lib/theme-quest-reports.js +8 -8
  7. package/lib/theme-quest.css +19 -15
  8. package/lib/theme-quest.d.ts +8 -8
  9. package/lib/theme-quest.js +8 -8
  10. package/package.json +1 -1
package/lib/theme-atom.css CHANGED
@@ -1,14 +1,16 @@
1
+
1
2
  @theme {
2
3
  --color-*: initial;
3
4
  --font-*: initial;
4
5
  --text-*: initial;
5
6
  --radius-*: initial;
6
7
  --shadow-*: initial;
7
- --color-text-bold: #1f1f1f;
8
+
9
+ --color-text-bold: #1f1f1f;
8
10
  --color-text-regular: #333333;
9
11
  --color-text-subtle: #545454;
10
12
  --color-text-minimal: #757575;
11
- --color-background-base: #f5f5f5;
13
+ --color-background: #f5f5f5;
12
14
  --color-background-accent: #f5f9ff;
13
15
  --color-black: #000000;
14
16
  --color-white: #ffffff;
@@ -198,19 +200,19 @@
198
200
  --color-alpha-250: rgba(51, 51, 51, 0.25);
199
201
  --color-alpha-600: rgba(51, 51, 51, 0.6);
200
202
  --color-info-light: #f5f9ff;
201
- --color-info-base: #0f67f5;
203
+ --color-info: #0f67f5;
202
204
  --color-info-mid: #184ac9;
203
205
  --color-info-dark: #102da2;
204
206
  --color-success-light: #e9f6e9;
205
- --color-success-base: #028a00;
207
+ --color-success: #028a00;
206
208
  --color-success-mid: #007007;
207
209
  --color-success-dark: #005709;
208
210
  --color-danger-light: #fce8e8;
209
- --color-danger-base: #f00505;
211
+ --color-danger: #f00505;
210
212
  --color-danger-mid: #cd0404;
211
213
  --color-danger-dark: #ab0303;
212
214
  --color-warning-light: #fff4e0;
213
- --color-warning-base: #ffb61a;
215
+ --color-warning: #ffb61a;
214
216
  --color-warning-mid: #e7a20d;
215
217
  --color-warning-dark: #d18f00;
216
218
  --color-warning-text: #bd4b00;
@@ -253,17 +255,19 @@
253
255
  --text-2xl: 2.3125rem;
254
256
  --text-3xl: 3.125rem;
255
257
  --text-4xl: 5.625rem;
256
- --radius-0: 0.25rem;
257
- --radius-1: 0.5rem;
258
- --radius-2: 0.75rem;
259
- --radius-3: 1rem;
258
+ --radius-sm: 0.25rem;
259
+ --radius-md: 0.5rem;
260
+ --radius-lg: 0.75rem;
261
+ --radius-xl: 1rem;
260
262
  --radius-round: 100rem;
261
- --shadow-0: 0 1px 3px rgba(51, 51, 51, 0.1), 0 1px 2px rgba(51, 51, 51, 0.15);
262
- --shadow-1: 0 3px 6px rgba(51, 51, 51, 0.1), 0 3px 6px rgba(51, 51, 51, 0.1);
263
- --shadow-2: 0 10px 20px rgba(51, 51, 51, 0.1), 0 6px 6px rgba(51, 51, 51, 0.1);
264
- --shadow-3: 0 14px 28px rgba(51, 51, 51, 0.15), 0 10px 10px rgba(51, 51, 51, 0.1);
263
+ --shadow-sm: 0 1px 3px rgba(51, 51, 51, 0.1), 0 1px 2px rgba(51, 51, 51, 0.15);
264
+ --shadow-md: 0 3px 6px rgba(51, 51, 51, 0.1), 0 3px 6px rgba(51, 51, 51, 0.1);
265
+ --shadow-lg: 0 10px 20px rgba(51, 51, 51, 0.1), 0 6px 6px rgba(51, 51, 51, 0.1);
266
+ --shadow-xl: 0 14px 28px rgba(51, 51, 51, 0.15), 0 10px 10px rgba(51, 51, 51, 0.1);
265
267
  --font-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
266
268
  --font-mono: 'SFMono-Regular', Consolas, Menlo, monospace;
267
269
  --font-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
268
270
  --font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
269
- }
271
+
272
+ --default-font-family: var(--font-body);
273
+ }
package/lib/theme-atom.d.ts CHANGED
@@ -279,17 +279,17 @@ export type Theme = {
279
279
  "8": string
280
280
  },
281
281
  "radii": {
282
- "0": string
283
- "1": string
284
- "2": string
285
- "3": string
282
+ "sm": string
283
+ "md": string
284
+ "lg": string
285
+ "xl": string
286
286
  "round": string
287
287
  },
288
288
  "shadows": {
289
- "0": string
290
- "1": string
291
- "2": string
292
- "3": string
289
+ "sm": string
290
+ "md": string
291
+ "lg": string
292
+ "xl": string
293
293
  },
294
294
  "ratios": {
295
295
  "16-9": string
package/lib/theme-atom.js CHANGED
@@ -279,17 +279,17 @@ module.exports = {
279
279
  "8": "8rem"
280
280
  },
281
281
  "radii": {
282
- "0": "0.25rem",
283
- "1": "0.5rem",
284
- "2": "0.75rem",
285
- "3": "1rem",
282
+ "sm": "0.25rem",
283
+ "md": "0.5rem",
284
+ "lg": "0.75rem",
285
+ "xl": "1rem",
286
286
  "round": "100rem"
287
287
  },
288
288
  "shadows": {
289
- "0": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
290
- "1": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
291
- "2": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
292
- "3": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
289
+ "sm": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
290
+ "md": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
291
+ "lg": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
292
+ "xl": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
293
293
  },
294
294
  "ratios": {
295
295
  "16-9": "16/9",
package/lib/theme-quest-reports.css CHANGED
@@ -1,14 +1,16 @@
1
+
1
2
  @theme {
2
3
  --color-*: initial;
3
4
  --font-*: initial;
4
5
  --text-*: initial;
5
6
  --radius-*: initial;
6
7
  --shadow-*: initial;
7
- --color-text-bold: #1f1f1f;
8
+
9
+ --color-text-bold: #1f1f1f;
8
10
  --color-text-regular: #333333;
9
11
  --color-text-subtle: #545454;
10
12
  --color-text-minimal: #757575;
11
- --color-background-base: #f5f5f5;
13
+ --color-background: #f5f5f5;
12
14
  --color-background-accent: #f5f9ff;
13
15
  --color-black: #000000;
14
16
  --color-white: #ffffff;
@@ -198,19 +200,19 @@
198
200
  --color-alpha-250: rgba(51, 51, 51, 0.25);
199
201
  --color-alpha-600: rgba(51, 51, 51, 0.6);
200
202
  --color-info-light: #f5f9ff;
201
- --color-info-base: #0f67f5;
203
+ --color-info: #0f67f5;
202
204
  --color-info-mid: #184ac9;
203
205
  --color-info-dark: #102da2;
204
206
  --color-success-light: #e9f6e9;
205
- --color-success-base: #028a00;
207
+ --color-success: #028a00;
206
208
  --color-success-mid: #007007;
207
209
  --color-success-dark: #005709;
208
210
  --color-danger-light: #fce8e8;
209
- --color-danger-base: #f00505;
211
+ --color-danger: #f00505;
210
212
  --color-danger-mid: #cd0404;
211
213
  --color-danger-dark: #ab0303;
212
214
  --color-warning-light: #fff4e0;
213
- --color-warning-base: #ffb61a;
215
+ --color-warning: #ffb61a;
214
216
  --color-warning-mid: #e7a20d;
215
217
  --color-warning-dark: #d18f00;
216
218
  --color-warning-text: #bd4b00;
@@ -253,17 +255,19 @@
253
255
  --text-2xl: 1.75rem;
254
256
  --text-3xl: 2.3125rem;
255
257
  --text-4xl: 3.125rem;
256
- --radius-0: 0.25rem;
257
- --radius-1: 0.5rem;
258
- --radius-2: 0.75rem;
259
- --radius-3: 1rem;
258
+ --radius-sm: 0.25rem;
259
+ --radius-md: 0.5rem;
260
+ --radius-lg: 0.75rem;
261
+ --radius-xl: 1rem;
260
262
  --radius-round: 100rem;
261
- --shadow-0: 0 1px 3px rgba(51, 51, 51, 0.1), 0 1px 2px rgba(51, 51, 51, 0.15);
262
- --shadow-1: 0 3px 6px rgba(51, 51, 51, 0.1), 0 3px 6px rgba(51, 51, 51, 0.1);
263
- --shadow-2: 0 10px 20px rgba(51, 51, 51, 0.1), 0 6px 6px rgba(51, 51, 51, 0.1);
264
- --shadow-3: 0 14px 28px rgba(51, 51, 51, 0.15), 0 10px 10px rgba(51, 51, 51, 0.1);
263
+ --shadow-sm: 0 1px 3px rgba(51, 51, 51, 0.1), 0 1px 2px rgba(51, 51, 51, 0.15);
264
+ --shadow-md: 0 3px 6px rgba(51, 51, 51, 0.1), 0 3px 6px rgba(51, 51, 51, 0.1);
265
+ --shadow-lg: 0 10px 20px rgba(51, 51, 51, 0.1), 0 6px 6px rgba(51, 51, 51, 0.1);
266
+ --shadow-xl: 0 14px 28px rgba(51, 51, 51, 0.15), 0 10px 10px rgba(51, 51, 51, 0.1);
265
267
  --font-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
266
268
  --font-mono: 'SFMono-Regular', Consolas, Menlo, monospace;
267
269
  --font-display: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
268
270
  --font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
269
- }
271
+
272
+ --default-font-family: var(--font-body);
273
+ }
package/lib/theme-quest-reports.d.ts CHANGED
@@ -279,17 +279,17 @@ export type Theme = {
279
279
  "8": string
280
280
  },
281
281
  "radii": {
282
- "0": string
283
- "1": string
284
- "2": string
285
- "3": string
282
+ "sm": string
283
+ "md": string
284
+ "lg": string
285
+ "xl": string
286
286
  "round": string
287
287
  },
288
288
  "shadows": {
289
- "0": string
290
- "1": string
291
- "2": string
292
- "3": string
289
+ "sm": string
290
+ "md": string
291
+ "lg": string
292
+ "xl": string
293
293
  },
294
294
  "ratios": {
295
295
  "16-9": string
package/lib/theme-quest-reports.js CHANGED
@@ -279,17 +279,17 @@ module.exports = {
279
279
  "8": "8rem"
280
280
  },
281
281
  "radii": {
282
- "0": "0.25rem",
283
- "1": "0.5rem",
284
- "2": "0.75rem",
285
- "3": "1rem",
282
+ "sm": "0.25rem",
283
+ "md": "0.5rem",
284
+ "lg": "0.75rem",
285
+ "xl": "1rem",
286
286
  "round": "100rem"
287
287
  },
288
288
  "shadows": {
289
- "0": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
290
- "1": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
291
- "2": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
292
- "3": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
289
+ "sm": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
290
+ "md": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
291
+ "lg": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
292
+ "xl": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
293
293
  },
294
294
  "ratios": {
295
295
  "16-9": "16/9",
package/lib/theme-quest.css CHANGED
@@ -1,14 +1,16 @@
1
+
1
2
  @theme {
2
3
  --color-*: initial;
3
4
  --font-*: initial;
4
5
  --text-*: initial;
5
6
  --radius-*: initial;
6
7
  --shadow-*: initial;
7
- --color-text-bold: #1f1f1f;
8
+
9
+ --color-text-bold: #1f1f1f;
8
10
  --color-text-regular: #333333;
9
11
  --color-text-subtle: #545454;
10
12
  --color-text-minimal: #757575;
11
- --color-background-base: #f5f5f5;
13
+ --color-background: #f5f5f5;
12
14
  --color-background-accent: #f5f9ff;
13
15
  --color-black: #000000;
14
16
  --color-white: #ffffff;
@@ -198,19 +200,19 @@
198
200
  --color-alpha-250: rgba(51, 51, 51, 0.25);
199
201
  --color-alpha-600: rgba(51, 51, 51, 0.6);
200
202
  --color-info-light: #f5f9ff;
201
- --color-info-base: #0f67f5;
203
+ --color-info: #0f67f5;
202
204
  --color-info-mid: #184ac9;
203
205
  --color-info-dark: #102da2;
204
206
  --color-success-light: #e9f6e9;
205
- --color-success-base: #028a00;
207
+ --color-success: #028a00;
206
208
  --color-success-mid: #007007;
207
209
  --color-success-dark: #005709;
208
210
  --color-danger-light: #fce8e8;
209
- --color-danger-base: #f00505;
211
+ --color-danger: #f00505;
210
212
  --color-danger-mid: #cd0404;
211
213
  --color-danger-dark: #ab0303;
212
214
  --color-warning-light: #fff4e0;
213
- --color-warning-base: #ffb61a;
215
+ --color-warning: #ffb61a;
214
216
  --color-warning-mid: #e7a20d;
215
217
  --color-warning-dark: #d18f00;
216
218
  --color-warning-text: #bd4b00;
@@ -253,17 +255,19 @@
253
255
  --text-2xl: 2.3125rem;
254
256
  --text-3xl: 3.125rem;
255
257
  --text-4xl: 5.625rem;
256
- --radius-0: 0.25rem;
257
- --radius-1: 0.5rem;
258
- --radius-2: 0.75rem;
259
- --radius-3: 1rem;
258
+ --radius-sm: 0.25rem;
259
+ --radius-md: 0.5rem;
260
+ --radius-lg: 0.75rem;
261
+ --radius-xl: 1rem;
260
262
  --radius-round: 100rem;
261
- --shadow-0: 0 1px 3px rgba(51, 51, 51, 0.1), 0 1px 2px rgba(51, 51, 51, 0.15);
262
- --shadow-1: 0 3px 6px rgba(51, 51, 51, 0.1), 0 3px 6px rgba(51, 51, 51, 0.1);
263
- --shadow-2: 0 10px 20px rgba(51, 51, 51, 0.1), 0 6px 6px rgba(51, 51, 51, 0.1);
264
- --shadow-3: 0 14px 28px rgba(51, 51, 51, 0.15), 0 10px 10px rgba(51, 51, 51, 0.1);
263
+ --shadow-sm: 0 1px 3px rgba(51, 51, 51, 0.1), 0 1px 2px rgba(51, 51, 51, 0.15);
264
+ --shadow-md: 0 3px 6px rgba(51, 51, 51, 0.1), 0 3px 6px rgba(51, 51, 51, 0.1);
265
+ --shadow-lg: 0 10px 20px rgba(51, 51, 51, 0.1), 0 6px 6px rgba(51, 51, 51, 0.1);
266
+ --shadow-xl: 0 14px 28px rgba(51, 51, 51, 0.15), 0 10px 10px rgba(51, 51, 51, 0.1);
265
267
  --font-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
266
268
  --font-mono: 'SFMono-Regular', Consolas, Menlo, monospace;
267
269
  --font-display: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
268
270
  --font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
269
- }
271
+
272
+ --default-font-family: var(--font-body);
273
+ }
package/lib/theme-quest.d.ts CHANGED
@@ -279,17 +279,17 @@ export type Theme = {
279
279
  "8": string
280
280
  },
281
281
  "radii": {
282
- "0": string
283
- "1": string
284
- "2": string
285
- "3": string
282
+ "sm": string
283
+ "md": string
284
+ "lg": string
285
+ "xl": string
286
286
  "round": string
287
287
  },
288
288
  "shadows": {
289
- "0": string
290
- "1": string
291
- "2": string
292
- "3": string
289
+ "sm": string
290
+ "md": string
291
+ "lg": string
292
+ "xl": string
293
293
  },
294
294
  "ratios": {
295
295
  "16-9": string
package/lib/theme-quest.js CHANGED
@@ -279,17 +279,17 @@ module.exports = {
279
279
  "8": "8rem"
280
280
  },
281
281
  "radii": {
282
- "0": "0.25rem",
283
- "1": "0.5rem",
284
- "2": "0.75rem",
285
- "3": "1rem",
282
+ "sm": "0.25rem",
283
+ "md": "0.5rem",
284
+ "lg": "0.75rem",
285
+ "xl": "1rem",
286
286
  "round": "100rem"
287
287
  },
288
288
  "shadows": {
289
- "0": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
290
- "1": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
291
- "2": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
292
- "3": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
289
+ "sm": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
290
+ "md": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
291
+ "lg": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
292
+ "xl": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
293
293
  },
294
294
  "ratios": {
295
295
  "16-9": "16/9",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atom-learning/theme",
3
- "version": "6.0.0-beta.0",
3
+ "version": "6.0.0-beta.1",
4
4
  "description": "Design tokens and assets for Atom Learning and Quest",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",