Pernoise/Rocketmc
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

feat: introduce surface variables, text variables & shades (#4413)

Browse Source 
* feat: surface variables & gradients

* feat: text vars

* fix: lint

* chore: remove L from surface vars

* fix: fully remove L from surface vars

---------

Co-authored-by: --global <--global>
This commit is contained in:
Calum H.
2025-10-07 17:35:45 +01:00
committed by GitHub
parent 87f8773401
commit ad705fa66f
5 changed files with 444 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
apps/app-frontend/tailwind.config.js → apps/app-frontend/tailwind.config.ts
View File

@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/components/**/*.{js,vue,ts}',
'./src/layouts/**/*.vue',
@@ -13,18 +14,116 @@ export default {
theme: {
extend: {
colors: {
surface: {
1: 'var(--surface-1)',
2: 'var(--surface-2)',
3: 'var(--surface-3)',
4: 'var(--surface-4)',
5: 'var(--surface-5)',
},
/// TODO: Clean up these aliases within codebase to use default, primary, tertiary.
// text-default
primary: 'var(--color-text-default)',
// text-primary
contrast: 'var(--color-text-primary)',
// text-tertiary
secondary: 'var(--color-text-tertiary)',
red: {
DEFAULT: 'var(--color-red)',
50: 'var(--color-red-50)',
100: 'var(--color-red-100)',
200: 'var(--color-red-200)',
300: 'var(--color-red-300)',
400: 'var(--color-red-400)',
500: 'var(--color-red-500)',
600: 'var(--color-red-600)',
700: 'var(--color-red-700)',
800: 'var(--color-red-800)',
900: 'var(--color-red-900)',
950: 'var(--color-red-950)',
},
orange: {
DEFAULT: 'var(--color-orange)',
50: 'var(--color-orange-50)',
100: 'var(--color-orange-100)',
200: 'var(--color-orange-200)',
300: 'var(--color-orange-300)',
400: 'var(--color-orange-400)',
500: 'var(--color-orange-500)',
600: 'var(--color-orange-600)',
700: 'var(--color-orange-700)',
800: 'var(--color-orange-800)',
900: 'var(--color-orange-900)',
950: 'var(--color-orange-950)',
},
green: {
DEFAULT: 'var(--color-green)',
50: 'var(--color-green-50)',
100: 'var(--color-green-100)',
200: 'var(--color-green-200)',
300: 'var(--color-green-300)',
400: 'var(--color-green-400)',
500: 'var(--color-green-500)',
600: 'var(--color-green-600)',
700: 'var(--color-green-700)',
800: 'var(--color-green-800)',
900: 'var(--color-green-900)',
950: 'var(--color-green-950)',
},
blue: {
DEFAULT: 'var(--color-blue)',
50: 'var(--color-blue-50)',
100: 'var(--color-blue-100)',
200: 'var(--color-blue-200)',
300: 'var(--color-blue-300)',
400: 'var(--color-blue-400)',
500: 'var(--color-blue-500)',
600: 'var(--color-blue-600)',
700: 'var(--color-blue-700)',
800: 'var(--color-blue-800)',
900: 'var(--color-blue-900)',
950: 'var(--color-blue-950)',
},
purple: {
DEFAULT: 'var(--color-purple)',
50: 'var(--color-purple-50)',
100: 'var(--color-purple-100)',
200: 'var(--color-purple-200)',
300: 'var(--color-purple-300)',
400: 'var(--color-purple-400)',
500: 'var(--color-purple-500)',
600: 'var(--color-purple-600)',
700: 'var(--color-purple-700)',
800: 'var(--color-purple-800)',
900: 'var(--color-purple-900)',
950: 'var(--color-purple-950)',
},
gray: {
DEFAULT: 'var(--color-gray)',
50: 'var(--color-gray-50)',
100: 'var(--color-gray-100)',
200: 'var(--color-gray-200)',
300: 'var(--color-gray-300)',
400: 'var(--color-gray-400)',
500: 'var(--color-gray-500)',
600: 'var(--color-gray-600)',
700: 'var(--color-gray-700)',
800: 'var(--color-gray-800)',
900: 'var(--color-gray-900)',
950: 'var(--color-gray-950)',
},
/// === LEGACY ===
icon: 'var(--color-base)',
// Text
primary: 'var(--color-base)',
contrast: 'var(--color-contrast)',
secondary: 'var(--color-secondary)',
inactive: 'var(--color-text-inactive)',
dark: 'var(--color-text-dark)',
inverted: 'var(--color-text-inverted)',
heading: 'var(--color-heading)',
red: 'var(--color-red)',
orange: 'var(--color-orange)',
purple: 'var(--color-purple)',
bg: {
DEFAULT: 'var(--color-bg)',
red: 'var(--color-red-bg)',
@@ -125,6 +224,7 @@ export default {
backgroundImage: {
mazeBg: 'var(--landing-maze-bg)',
mazeGradientBg: 'var(--landing-maze-gradient-bg)',
// @ts-ignore
landing: {
mazeOuterBg: 'var(--landing-maze-outer-bg)',
colorHeading: 'var(--landing-color-heading)',
@@ -151,3 +251,5 @@ export default {
preflight: false,
},
}
export default config