Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| cdde25d0b4 | |||
| 231c57b596 | |||
| 167dcb2b0a | |||
| fdccdcdf73 |
@@ -1,5 +1,12 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-04-04 - 3.55.0 - feat(theme)
|
||||
centralize theme CSS tokens in theme defaults and add missing interactive color variables
|
||||
|
||||
- Refactors theme CSS variables to derive light and dark values from the shared themeDefaults token map instead of hardcoded color literals.
|
||||
- Adjusts dark background token values so secondary and tertiary surfaces align more consistently with the dark UI palette.
|
||||
- Adds new theme variables for interactive states, focus ring, tooltip, link, code, selection, and scrollbar styling.
|
||||
|
||||
## 2026-04-04 - 3.54.0 - feat(media)
|
||||
rename media tile components to thumbnail components and add shared thumbnail base exports
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "3.54.0",
|
||||
"version": "3.55.0",
|
||||
"private": false,
|
||||
"description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
|
||||
"main": "dist_ts_web/index.js",
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.54.0',
|
||||
version: '3.55.0',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@@ -102,8 +102,8 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
left: 0px;
|
||||
height: calc(100% - 24px);
|
||||
width: 240px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
|
||||
font-size: 13px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
z-index: 2;
|
||||
@@ -114,7 +114,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@@ -127,25 +127,22 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: ${cssManager.bdTheme(
|
||||
'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
|
||||
'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
|
||||
)};
|
||||
background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
|
||||
box-shadow: ${cssManager.bdTheme(
|
||||
'0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)',
|
||||
'0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
|
||||
'0 1px 2px rgb(0 0 0 / 0.05)',
|
||||
'0 1px 2px rgb(0 0 0 / 0.2)'
|
||||
)};
|
||||
}
|
||||
|
||||
.header-icon-wrapper dees-icon {
|
||||
font-size: 18px;
|
||||
color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.appName {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -181,7 +178,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
|
||||
color: ${cssManager.bdTheme('#737373', '#737373')};
|
||||
padding: 8px 12px 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@@ -199,25 +196,25 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
padding: 10px 12px;
|
||||
cursor: default;
|
||||
transition: all 0.15s ease;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
|
||||
color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.viewTab:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
|
||||
color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
|
||||
}
|
||||
|
||||
.viewTab:active {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.viewTab.selected {
|
||||
background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
|
||||
color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -229,7 +226,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
bottom: 8px;
|
||||
width: 3px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: ${cssManager.bdTheme('hsl(215 70% 50%)', 'hsl(215 70% 60%)')};
|
||||
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.viewTab dees-icon {
|
||||
@@ -243,8 +240,8 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
}
|
||||
|
||||
.viewTab.selected dees-icon {
|
||||
opacity: 0.9;
|
||||
color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
|
||||
opacity: 1;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.viewTab span {
|
||||
@@ -256,7 +253,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
|
||||
.appActions {
|
||||
padding: 12px 8px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
|
||||
}
|
||||
|
||||
.action {
|
||||
@@ -267,7 +264,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
border-radius: 8px;
|
||||
cursor: default;
|
||||
transition: all 0.15s ease;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
|
||||
color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
@@ -295,7 +292,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
bottom: 24px;
|
||||
width: calc(100% - 240px);
|
||||
overflow: auto;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
@@ -335,14 +332,14 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
}
|
||||
|
||||
.controlbar {
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@@ -361,9 +358,9 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
|
||||
transition: all 0.15s ease;
|
||||
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
|
||||
|
||||
}
|
||||
|
||||
@@ -372,8 +369,8 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.06)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
|
||||
}
|
||||
|
||||
.control dees-icon {
|
||||
@@ -381,11 +378,11 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
}
|
||||
|
||||
.control.status-connected dees-icon {
|
||||
color: hsl(142 70% 50%);
|
||||
color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
|
||||
}
|
||||
|
||||
.control.status-terminal dees-icon {
|
||||
color: hsl(45 90% 55%);
|
||||
color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
|
||||
}
|
||||
|
||||
/* Global Message Banners */
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { css, type CSSResult } from '@design.estate/dees-element';
|
||||
import { css, cssManager, unsafeCSS, type CSSResult } from '@design.estate/dees-element';
|
||||
|
||||
// ============================================
|
||||
// Theme Token Type Definitions
|
||||
@@ -11,6 +11,7 @@ export interface IThemeColors {
|
||||
textPrimary: string;
|
||||
textSecondary: string;
|
||||
textMuted: string;
|
||||
textWarm: string;
|
||||
borderDefault: string;
|
||||
borderSubtle: string;
|
||||
borderStrong: string;
|
||||
@@ -18,6 +19,14 @@ export interface IThemeColors {
|
||||
accentSuccess: string;
|
||||
accentWarning: string;
|
||||
accentError: string;
|
||||
badgeDefaultBg: string;
|
||||
badgeDefaultFg: string;
|
||||
badgeSuccessBg: string;
|
||||
badgeSuccessFg: string;
|
||||
badgeWarningBg: string;
|
||||
badgeWarningFg: string;
|
||||
badgeErrorBg: string;
|
||||
badgeErrorFg: string;
|
||||
}
|
||||
|
||||
export interface IThemeSpacing {
|
||||
@@ -79,34 +88,52 @@ export interface ITheme {
|
||||
export const themeDefaults: ITheme = {
|
||||
colors: {
|
||||
light: {
|
||||
bgPrimary: '#ffffff',
|
||||
bgSecondary: '#fafafa',
|
||||
bgTertiary: '#f4f4f5',
|
||||
textPrimary: '#09090b',
|
||||
textSecondary: '#374151',
|
||||
textMuted: '#71717a',
|
||||
borderDefault: '#e5e7eb',
|
||||
borderSubtle: '#f4f4f5',
|
||||
borderStrong: '#d1d5db',
|
||||
bgPrimary: 'hsl(0 0% 100%)', // #ffffff
|
||||
bgSecondary: 'hsl(0 0% 98%)', // #fafafa
|
||||
bgTertiary: 'hsl(0 0% 96%)', // #f5f5f5
|
||||
textPrimary: 'hsl(0 0% 3.9%)', // #0a0a0a
|
||||
textSecondary: 'hsl(0 0% 20%)', // #333333
|
||||
textMuted: 'hsl(0 0% 45%)', // #737373
|
||||
textWarm: '#78716c', // warm stone
|
||||
borderDefault: 'hsl(0 0% 89.8%)', // #e5e5e5
|
||||
borderSubtle: 'hsl(0 0% 93%)', // #ededed
|
||||
borderStrong: 'hsl(0 0% 80%)', // #cccccc
|
||||
accentPrimary: '#3b82f6',
|
||||
accentSuccess: '#22c55e',
|
||||
accentWarning: '#f59e0b',
|
||||
accentError: '#ef4444',
|
||||
badgeDefaultBg: '#f4f4f5',
|
||||
badgeDefaultFg: '#3f3f46',
|
||||
badgeSuccessBg: '#dcfce7',
|
||||
badgeSuccessFg: '#166534',
|
||||
badgeWarningBg: '#fef3c7',
|
||||
badgeWarningFg: '#92400e',
|
||||
badgeErrorBg: '#fee2e2',
|
||||
badgeErrorFg: '#991b1b',
|
||||
},
|
||||
dark: {
|
||||
bgPrimary: '#09090b',
|
||||
bgSecondary: '#0a0a0a',
|
||||
bgTertiary: '#18181b',
|
||||
textPrimary: '#fafafa',
|
||||
textSecondary: '#d4d4d8',
|
||||
textMuted: '#a1a1aa',
|
||||
borderDefault: '#27272a',
|
||||
borderSubtle: '#1a1a1a',
|
||||
borderStrong: '#3f3f46',
|
||||
bgPrimary: 'hsl(0 0% 3.9%)', // #0a0a0a
|
||||
bgSecondary: 'hsl(0 0% 3.9%)', // #0a0a0a (matches sidebar/tile in dark)
|
||||
bgTertiary: 'hsl(0 0% 7%)', // #121212
|
||||
textPrimary: 'hsl(0 0% 98%)', // #fafafa
|
||||
textSecondary: 'hsl(0 0% 63.9%)', // #a3a3a3
|
||||
textMuted: 'hsl(0 0% 55%)', // #8c8c8c
|
||||
textWarm: '#b5a99a', // warm stone
|
||||
borderDefault: 'hsl(0 0% 14.9%)', // #262626
|
||||
borderSubtle: 'hsl(0 0% 11%)', // #1c1c1c
|
||||
borderStrong: 'hsl(0 0% 20%)', // #333333
|
||||
accentPrimary: '#3b82f6',
|
||||
accentSuccess: '#22c55e',
|
||||
accentWarning: '#f59e0b',
|
||||
accentError: '#ef4444',
|
||||
badgeDefaultBg: '#27272a',
|
||||
badgeDefaultFg: '#a1a1aa',
|
||||
badgeSuccessBg: '#14532d',
|
||||
badgeSuccessFg: '#4ade80',
|
||||
badgeWarningBg: '#451a03',
|
||||
badgeWarningFg: '#fbbf24',
|
||||
badgeErrorBg: '#450a0a',
|
||||
badgeErrorFg: '#f87171',
|
||||
},
|
||||
},
|
||||
spacing: {
|
||||
@@ -146,13 +173,17 @@ export const themeDefaults: ITheme = {
|
||||
},
|
||||
};
|
||||
|
||||
// Shorthand aliases for CSS template usage
|
||||
const l = themeDefaults.colors.light;
|
||||
const d = themeDefaults.colors.dark;
|
||||
|
||||
// ============================================
|
||||
// CSS Block for Component Import
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Default theme styles to be imported into every component's static styles array.
|
||||
* Provides CSS custom properties for spacing, radius, shadows, transitions, and control heights.
|
||||
* Provides CSS custom properties for colors, spacing, radius, shadows, transitions, and control heights.
|
||||
*
|
||||
* Usage:
|
||||
* ```typescript
|
||||
@@ -170,6 +201,93 @@ export const themeDefaults: ITheme = {
|
||||
*/
|
||||
export const themeDefaultStyles: CSSResult = css`
|
||||
:host {
|
||||
/* ========================================
|
||||
* Colors — Background (from themeDefaults)
|
||||
* ======================================== */
|
||||
--dees-color-bg-primary: ${cssManager.bdTheme(l.bgPrimary, d.bgPrimary)};
|
||||
--dees-color-bg-secondary: ${cssManager.bdTheme(l.bgSecondary, d.bgSecondary)};
|
||||
--dees-color-bg-tertiary: ${cssManager.bdTheme(l.bgTertiary, d.bgTertiary)};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Text (from themeDefaults)
|
||||
* ======================================== */
|
||||
--dees-color-text-primary: ${cssManager.bdTheme(l.textPrimary, d.textPrimary)};
|
||||
--dees-color-text-secondary: ${cssManager.bdTheme(l.textSecondary, d.textSecondary)};
|
||||
--dees-color-text-muted: ${cssManager.bdTheme(l.textMuted, d.textMuted)};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Border (from themeDefaults)
|
||||
* ======================================== */
|
||||
--dees-color-border-default: ${cssManager.bdTheme(l.borderDefault, d.borderDefault)};
|
||||
--dees-color-border-subtle: ${cssManager.bdTheme(l.borderSubtle, d.borderSubtle)};
|
||||
--dees-color-border-strong: ${cssManager.bdTheme(l.borderStrong, d.borderStrong)};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Warm Text (from themeDefaults)
|
||||
* ======================================== */
|
||||
--dees-color-text-warm: ${cssManager.bdTheme(l.textWarm, d.textWarm)};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Accent (from themeDefaults)
|
||||
* ======================================== */
|
||||
--dees-color-accent-primary: ${cssManager.bdTheme(l.accentPrimary, d.accentPrimary)};
|
||||
--dees-color-accent-success: ${cssManager.bdTheme(l.accentSuccess, d.accentSuccess)};
|
||||
--dees-color-accent-warning: ${cssManager.bdTheme(l.accentWarning, d.accentWarning)};
|
||||
--dees-color-accent-error: ${cssManager.bdTheme(l.accentError, d.accentError)};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Badge (from themeDefaults)
|
||||
* ======================================== */
|
||||
--dees-color-badge-default-bg: ${cssManager.bdTheme(l.badgeDefaultBg, d.badgeDefaultBg)};
|
||||
--dees-color-badge-default-fg: ${cssManager.bdTheme(l.badgeDefaultFg, d.badgeDefaultFg)};
|
||||
--dees-color-badge-success-bg: ${cssManager.bdTheme(l.badgeSuccessBg, d.badgeSuccessBg)};
|
||||
--dees-color-badge-success-fg: ${cssManager.bdTheme(l.badgeSuccessFg, d.badgeSuccessFg)};
|
||||
--dees-color-badge-warning-bg: ${cssManager.bdTheme(l.badgeWarningBg, d.badgeWarningBg)};
|
||||
--dees-color-badge-warning-fg: ${cssManager.bdTheme(l.badgeWarningFg, d.badgeWarningFg)};
|
||||
--dees-color-badge-error-bg: ${cssManager.bdTheme(l.badgeErrorBg, d.badgeErrorBg)};
|
||||
--dees-color-badge-error-fg: ${cssManager.bdTheme(l.badgeErrorFg, d.badgeErrorFg)};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Interactive States
|
||||
* ======================================== */
|
||||
--dees-color-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
|
||||
--dees-color-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
|
||||
--dees-color-pressed: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Focus Ring
|
||||
* ======================================== */
|
||||
--dees-color-focus-ring: ${cssManager.bdTheme('rgba(59, 130, 246, 0.4)', 'rgba(59, 130, 246, 0.4)')};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Tooltip (inverted contrast)
|
||||
* ======================================== */
|
||||
--dees-color-tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
--dees-color-tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Link
|
||||
* ======================================== */
|
||||
--dees-color-link: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
||||
--dees-color-link-hover: ${cssManager.bdTheme('#2563eb', '#93bbfd')};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Code
|
||||
* ======================================== */
|
||||
--dees-color-code-bg: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
|
||||
--dees-color-code-block-bg: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Selection
|
||||
* ======================================== */
|
||||
--dees-color-selection: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.3)')};
|
||||
|
||||
/* ========================================
|
||||
* Colors — Scrollbar
|
||||
* ======================================== */
|
||||
--dees-color-scrollbar-thumb: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
|
||||
--dees-color-scrollbar-thumb-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
|
||||
|
||||
/* ========================================
|
||||
* Spacing Scale
|
||||
* ======================================== */
|
||||
|
||||
Reference in New Issue
Block a user