diff --git a/styles/base/colors.css b/styles/base/colors.css index 73cd2e3..b85e5be 100644 --- a/styles/base/colors.css +++ b/styles/base/colors.css @@ -32,10 +32,32 @@ --color-bodylinks: oklch(0.48 0.0789 211.58); --color-footlinks: oklch(0.65 0.1104 212.2); - --color-success: oklch(64.01% 0.1751 146.7); - --color-info: oklch(0.55 0.0922 211.57); - --color-warning: oklch(84.42% 0.1722 84.93); - --color-danger: oklch(0.5126 0.1865 22.61); --color-light: oklch(98.16% 0.0017 247.8); --color-dark: oklch(34.51% 0.0133 248.2); + + /* Carbon Blue / dark surface tokens (Portfolio 2026) */ + --color-surface: #121318; + --color-surface-dim: #121318; + --color-surface-bright: #38393f; + --color-surface-container-lowest: #0d0e13; + --color-surface-container-low: #1a1b21; + --color-surface-container: #1e1f25; + --color-surface-container-high: #292a2f; + --color-surface-container-highest:#34343a; + --color-on-surface: #e3e1e9; + --color-on-surface-variant:#c5c5d3; + --color-outline: #8f909d; + --color-outline-variant: #444651; + --color-page-base: #100e0b; + --color-backlight: rgba(96, 165, 250, 0.20); + + --color-primary-fixed: #dce1ff; + --color-primary-fixed-dim: #b6c4ff; + --color-on-primary-fixed: #00164e; + --color-on-primary-fixed-variant: #264191; + + --color-success: #5ccf91; + --color-warning: #f4e04d; + --color-danger: #cc3b3b; + --color-info: #3d7ab0; } diff --git a/theme.json b/theme.json index 003a6e9..f2a82b5 100644 --- a/theme.json +++ b/theme.json @@ -67,6 +67,31 @@ "slug": "theme-info", "color": "var(--color-info)", "name": "Theme Info" + }, + { + "slug": "theme-surface", + "color": "#121318", + "name": "Theme Surface" + }, + { + "slug": "theme-on-surface", + "color": "#e3e1e9", + "name": "Theme On Surface" + }, + { + "slug": "theme-outline", + "color": "#8f909d", + "name": "Theme Outline" + }, + { + "slug": "theme-outline-variant", + "color": "#444651", + "name": "Theme Outline Variant" + }, + { + "slug": "theme-page-base", + "color": "#100e0b", + "name": "Theme Page Base" } ] }, @@ -165,8 +190,8 @@ }, "styles": { "color": { - "background": "var(--wp--preset--color--background)", - "text": "var(--wp--preset--color--text)" + "background": "var(--wp--preset--color--theme-bg, #100e0b)", + "text": "var(--wp--preset--color--theme-text, #e3e1e9)" }, "elements": { "link": {