@ojiepermana/angular 0.0.2 → 0.0.3
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.
- package/fesm2022/ojiepermana-angular-layout.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-theme-component.mjs +2 -2
- package/fesm2022/ojiepermana-angular-theme-component.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-theme-service.mjs +3 -1
- package/fesm2022/ojiepermana-angular-theme-service.mjs.map +1 -1
- package/layout/README.md +2 -1
- package/package.json +1 -1
- package/styles/index.css +1 -1
- package/theme/styles/adapters/material-ui/index.css +0 -1
- package/theme/styles/layout/horizontal.css +117 -0
- package/theme/styles/layout/index.css +19 -1
- package/theme/styles/layout/vertical.css +77 -0
- package/theme/styles/presets/colors/blue.css +35 -0
- package/theme/styles/presets/colors/brand.css +41 -0
- package/theme/styles/presets/colors/cyan.css +35 -0
- package/theme/styles/presets/colors/green.css +35 -0
- package/theme/styles/presets/colors/orange.css +35 -0
- package/theme/styles/presets/colors/purple.css +35 -0
- package/theme/styles/presets/colors/red.css +35 -0
- package/theme/styles/presets/styles/flat.css +54 -20
- package/layout/styles/index.css +0 -157
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ojiepermana-angular-layout.mjs","sources":["../../../projects/library/layout/src/layout.token.ts","../../../projects/library/layout/src/layout.types.ts","../../../projects/library/layout/src/layout.service.ts","../../../projects/library/layout/src/layout-host.directive.ts","../../../projects/library/layout/src/elements.directive.ts","../../../projects/library/layout/src/horizontal.ts","../../../projects/library/layout/src/vertical.ts","../../../projects/library/layout/src/layout-container-switcher.ts","../../../projects/library/layout/src/layout-mode-switcher.ts","../../../projects/library/layout/src/layout.provider.ts","../../../projects/library/layout/ojiepermana-angular-layout.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { NgLayoutConfig } from './layout.types';\n\nexport const DEFAULT_NG_LAYOUT_CONFIG: NgLayoutConfig = {\n defaultMode: 'vertical',\n defaultContainer: 'full',\n};\n\nexport const NG_LAYOUT_CONFIG = new InjectionToken<NgLayoutConfig>('NG_LAYOUT_CONFIG', {\n providedIn: 'root',\n factory: () => ({ ...DEFAULT_NG_LAYOUT_CONFIG }),\n});\n","export const LAYOUT_MODES = ['vertical', 'horizontal', 'empty'] as const;\nexport type LayoutMode = (typeof LAYOUT_MODES)[number];\n\nexport const LAYOUT_CONTAINERS = ['full', 'boxed'] as const;\nexport type LayoutContainer = (typeof LAYOUT_CONTAINERS)[number];\n\nconst LAYOUT_MODE_SET = new Set<LayoutMode>(LAYOUT_MODES);\nconst LAYOUT_CONTAINER_SET = new Set<LayoutContainer>(LAYOUT_CONTAINERS);\n\nexport function isLayoutMode(value: unknown): value is LayoutMode {\n return typeof value === 'string' && LAYOUT_MODE_SET.has(value as LayoutMode);\n}\n\nexport function isLayoutContainer(value: unknown): value is LayoutContainer {\n return typeof value === 'string' && LAYOUT_CONTAINER_SET.has(value as LayoutContainer);\n}\n\nexport interface NgLayoutConfig {\n defaultMode: LayoutMode;\n defaultContainer: LayoutContainer;\n}\n","import { Injectable, PLATFORM_ID, effect, inject, signal } from '@angular/core';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { LocalStorageStateAdapter } from '@ojiepermana/angular/internal';\nimport { NG_LAYOUT_CONFIG } from './layout.token';\nimport { isLayoutContainer, isLayoutMode, LayoutContainer, LayoutMode } from './layout.types';\n\nconst STORAGE_KEYS = {\n 'layout-mode': 'layout-mode',\n 'layout-container': 'layout-container',\n} as const;\n\ntype LayoutStorageAxis = keyof typeof STORAGE_KEYS;\n\nconst LEGACY_STORAGE_PREFIX = 'ng-theme:v2';\n\n@Injectable({ providedIn: 'root' })\nexport class LayoutService {\n private readonly config = inject(NG_LAYOUT_CONFIG);\n private readonly document = inject(DOCUMENT);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n private readonly storage = new LocalStorageStateAdapter<LayoutStorageAxis>({\n isBrowser: this.isBrowser,\n storage: this.document.defaultView?.localStorage ?? null,\n keys: STORAGE_KEYS,\n legacyPrefix: LEGACY_STORAGE_PREFIX,\n });\n\n readonly mode = signal<LayoutMode>(\n this.storage.read('layout-mode', this.config.defaultMode, isLayoutMode),\n );\n readonly container = signal<LayoutContainer>(\n this.storage.read('layout-container', this.config.defaultContainer, isLayoutContainer),\n );\n\n constructor() {\n effect(() => {\n if (this.isBrowser) {\n this.applyToDOM();\n }\n });\n }\n\n /**\n * Updates the active shell mode and persists the value for future sessions.\n */\n setMode(value: LayoutMode): void {\n this.storage.persist('layout-mode', value);\n this.mode.set(value);\n }\n\n /**\n * Updates the active container width mode and persists the value for future sessions.\n */\n setContainer(value: LayoutContainer): void {\n this.storage.persist('layout-container', value);\n this.container.set(value);\n }\n\n /**\n * Clears persisted layout state and restores the configured defaults for mode and container.\n */\n reset(): void {\n this.storage.clear('layout-mode');\n this.storage.clear('layout-container');\n this.mode.set(this.config.defaultMode);\n this.container.set(this.config.defaultContainer);\n }\n\n private applyToDOM(): void {\n const element = this.document.documentElement;\n\n element.dataset['layoutMode'] = this.mode();\n element.dataset['layoutContainer'] = this.container();\n }\n}\n","import { Directive, inject } from '@angular/core';\nimport { LayoutService } from './layout.service';\n\n@Directive({\n selector: '[ngtLayoutHost]',\n host: {\n '[attr.data-layout-mode]': 'layout.mode()',\n '[attr.data-layout-container]': 'layout.container()',\n },\n})\nexport class LayoutHostDirective {\n protected readonly layout = inject(LayoutService);\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: 'layout',\n})\nexport class LayoutElementDirective {}\n\n@Directive({\n selector: 'content,shell-content',\n})\nexport class ContentElementDirective {}\n\n@Directive({\n selector: 'brand',\n})\nexport class BrandElementDirective {}\n\n@Directive({\n selector: 'panel',\n})\nexport class PanelElementDirective {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport {\n BrandElementDirective,\n ContentElementDirective,\n LayoutElementDirective,\n PanelElementDirective,\n} from './elements.directive';\n\n@Component({\n selector: 'horizontal',\n imports: [\n RouterOutlet,\n LayoutElementDirective,\n ContentElementDirective,\n BrandElementDirective,\n PanelElementDirective,\n ],\n host: {\n '[attr.data-layout-mode]': '\"horizontal\"',\n },\n template: `\n <layout>\n <shell-content>\n <header>\n <brand>\n <ng-content select=\"[headerBrand]\"></ng-content>\n </brand>\n\n <nav>\n <ng-content select=\"[headerNavigation]\"></ng-content>\n </nav>\n\n <panel>\n <ng-content select=\"[headerActions]\"></ng-content>\n </panel>\n </header>\n\n <main>\n <router-outlet />\n </main>\n </shell-content>\n </layout>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LayoutHorizontalComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { ContentElementDirective, LayoutElementDirective } from './elements.directive';\n\n@Component({\n selector: 'vertical',\n imports: [RouterOutlet, LayoutElementDirective, ContentElementDirective],\n host: {\n '[attr.data-layout-mode]': '\"vertical\"',\n },\n template: `\n <layout>\n <shell-content>\n <aside>\n <ng-content select=\"[navigation]\"></ng-content>\n </aside>\n <main>\n <router-outlet />\n </main>\n </shell-content>\n </layout>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LayoutVerticalComponent {}\n","import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { libraryLucideConfigProvider } from '@ojiepermana/angular/internal';\nimport { LucideExpand, LucideShrink } from '@lucide/angular';\nimport { LayoutService } from './layout.service';\n\n@Component({\n selector: 'layout-container-switcher',\n imports: [MatIconButton, MatTooltip, LucideExpand, LucideShrink],\n providers: [libraryLucideConfigProvider],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <button\n class=\"ngt-icon-button\"\n type=\"button\"\n mat-icon-button\n aria-label=\"Boxed layout container\"\n [attr.aria-pressed]=\"layout.container() === 'boxed'\"\n [matTooltip]=\"label()\"\n (click)=\"toggle()\"\n >\n @if (layout.container() === 'full') {\n <svg lucideExpand aria-hidden=\"true\"></svg>\n } @else {\n <svg lucideShrink aria-hidden=\"true\"></svg>\n }\n </button>\n `,\n})\nexport class LayoutContainerSwitcherComponent {\n protected readonly layout = inject(LayoutService);\n\n protected readonly label = computed(() =>\n this.layout.container() === 'boxed'\n ? 'Boxed layout container enabled'\n : 'Boxed layout container disabled',\n );\n\n protected toggle(): void {\n this.layout.setContainer(this.layout.container() === 'full' ? 'boxed' : 'full');\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { libraryLucideConfigProvider } from '@ojiepermana/angular/internal';\nimport { LucideAppWindow, LucidePanelLeft, LucidePanelTop } from '@lucide/angular';\nimport { LayoutService } from './layout.service';\n\n@Component({\n selector: 'layout-mode-switcher',\n imports: [\n MatIconButton,\n MatTooltip,\n MatMenu,\n MatMenuItem,\n MatMenuTrigger,\n LucidePanelLeft,\n LucidePanelTop,\n LucideAppWindow,\n ],\n providers: [libraryLucideConfigProvider],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <button\n class=\"ngt-icon-button\"\n type=\"button\"\n mat-icon-button\n [attr.aria-label]=\"'Layout mode: ' + currentOption().label\"\n [matTooltip]=\"'Layout mode: ' + currentOption().label\"\n [matMenuTriggerFor]=\"menu\"\n >\n @switch (layout.mode()) {\n @case ('vertical') {\n <svg lucidePanelLeft aria-hidden=\"true\"></svg>\n }\n @case ('horizontal') {\n <svg lucidePanelTop aria-hidden=\"true\"></svg>\n }\n @default {\n <svg lucideAppWindow aria-hidden=\"true\"></svg>\n }\n }\n </button>\n\n <mat-menu #menu=\"matMenu\">\n @for (option of options; track option.value) {\n <button\n type=\"button\"\n mat-menu-item\n role=\"menuitemradio\"\n [attr.aria-checked]=\"layout.mode() === option.value\"\n (click)=\"layout.setMode(option.value)\"\n >\n @switch (option.value) {\n @case ('vertical') {\n <svg lucidePanelLeft aria-hidden=\"true\"></svg>\n }\n @case ('horizontal') {\n <svg lucidePanelTop aria-hidden=\"true\"></svg>\n }\n @default {\n <svg lucideAppWindow aria-hidden=\"true\"></svg>\n }\n }\n <span>{{ option.label }}</span>\n </button>\n }\n </mat-menu>\n `,\n})\nexport class LayoutModeSwitcherComponent {\n protected readonly layout = inject(LayoutService);\n\n // Empty mode remains programmatic so the UI only exposes the two navigational shell variants.\n protected readonly options = [\n { value: 'vertical' as const, label: 'Vertical Sidebar' },\n { value: 'horizontal' as const, label: 'Horizontal Navbar' },\n ];\n\n protected readonly currentOption = computed(\n () =>\n this.options.find((option) => option.value === this.layout.mode()) ?? {\n value: 'empty' as const,\n label: 'Content Only',\n },\n );\n}\n","import { EnvironmentProviders, isDevMode, makeEnvironmentProviders } from '@angular/core';\nimport { DEFAULT_NG_LAYOUT_CONFIG, NG_LAYOUT_CONFIG } from './layout.token';\nimport {\n isLayoutContainer,\n isLayoutMode,\n LayoutContainer,\n LayoutMode,\n NgLayoutConfig,\n} from './layout.types';\n\nfunction warnInvalidLayoutConfig(message: string): void {\n if (isDevMode()) {\n console.warn(`[provideNgLayout] ${message}`);\n }\n}\n\nfunction normalizeLayoutMode(value: unknown): LayoutMode {\n if (typeof value === 'undefined' || isLayoutMode(value)) {\n return value ?? DEFAULT_NG_LAYOUT_CONFIG.defaultMode;\n }\n\n warnInvalidLayoutConfig(\n `Ignoring invalid defaultMode ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_LAYOUT_CONFIG.defaultMode)}.`,\n );\n\n return DEFAULT_NG_LAYOUT_CONFIG.defaultMode;\n}\n\nfunction normalizeLayoutContainer(value: unknown): LayoutContainer {\n if (typeof value === 'undefined' || isLayoutContainer(value)) {\n return value ?? DEFAULT_NG_LAYOUT_CONFIG.defaultContainer;\n }\n\n warnInvalidLayoutConfig(\n `Ignoring invalid defaultContainer ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_LAYOUT_CONFIG.defaultContainer)}.`,\n );\n\n return DEFAULT_NG_LAYOUT_CONFIG.defaultContainer;\n}\n\nfunction normalizeLayoutConfig(config: Partial<NgLayoutConfig>): NgLayoutConfig {\n return {\n ...DEFAULT_NG_LAYOUT_CONFIG,\n defaultMode: normalizeLayoutMode(config.defaultMode),\n defaultContainer: normalizeLayoutContainer(config.defaultContainer),\n };\n}\n\nexport function provideNgLayout(config: Partial<NgLayoutConfig> = {}): EnvironmentProviders {\n return makeEnvironmentProviders([\n { provide: NG_LAYOUT_CONFIG, useValue: normalizeLayoutConfig(config) },\n ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-layout.mjs","sources":["../../../projects/library/layout/src/state/layout.token.ts","../../../projects/library/layout/src/state/layout.types.ts","../../../projects/library/layout/src/state/layout.service.ts","../../../projects/library/layout/src/directive/layout-host.directive.ts","../../../projects/library/layout/src/directive/elements.directive.ts","../../../projects/library/layout/src/component/horizontal/horizontal.ts","../../../projects/library/layout/src/component/vertical/vertical.ts","../../../projects/library/layout/src/component/layout/layout-container-switcher.ts","../../../projects/library/layout/src/component/layout/layout-mode-switcher.ts","../../../projects/library/layout/src/state/layout.provider.ts","../../../projects/library/layout/ojiepermana-angular-layout.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { NgLayoutConfig } from './layout.types';\n\nexport const DEFAULT_NG_LAYOUT_CONFIG: NgLayoutConfig = {\n defaultMode: 'vertical',\n defaultContainer: 'full',\n};\n\nexport const NG_LAYOUT_CONFIG = new InjectionToken<NgLayoutConfig>('NG_LAYOUT_CONFIG', {\n providedIn: 'root',\n factory: () => ({ ...DEFAULT_NG_LAYOUT_CONFIG }),\n});\n","export const LAYOUT_MODES = ['vertical', 'horizontal', 'empty'] as const;\nexport type LayoutMode = (typeof LAYOUT_MODES)[number];\n\nexport const LAYOUT_CONTAINERS = ['full', 'boxed'] as const;\nexport type LayoutContainer = (typeof LAYOUT_CONTAINERS)[number];\n\nconst LAYOUT_MODE_SET = new Set<LayoutMode>(LAYOUT_MODES);\nconst LAYOUT_CONTAINER_SET = new Set<LayoutContainer>(LAYOUT_CONTAINERS);\n\nexport function isLayoutMode(value: unknown): value is LayoutMode {\n return typeof value === 'string' && LAYOUT_MODE_SET.has(value as LayoutMode);\n}\n\nexport function isLayoutContainer(value: unknown): value is LayoutContainer {\n return typeof value === 'string' && LAYOUT_CONTAINER_SET.has(value as LayoutContainer);\n}\n\nexport interface NgLayoutConfig {\n defaultMode: LayoutMode;\n defaultContainer: LayoutContainer;\n}\n","import { Injectable, PLATFORM_ID, effect, inject, signal } from '@angular/core';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { LocalStorageStateAdapter } from '@ojiepermana/angular/internal';\nimport { NG_LAYOUT_CONFIG } from './layout.token';\nimport { isLayoutContainer, isLayoutMode, LayoutContainer, LayoutMode } from './layout.types';\n\nconst STORAGE_KEYS = {\n 'layout-mode': 'layout-mode',\n 'layout-container': 'layout-container',\n} as const;\n\ntype LayoutStorageAxis = keyof typeof STORAGE_KEYS;\n\nconst LEGACY_STORAGE_PREFIX = 'ng-theme:v2';\n\n@Injectable({ providedIn: 'root' })\nexport class LayoutService {\n private readonly config = inject(NG_LAYOUT_CONFIG);\n private readonly document = inject(DOCUMENT);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n private readonly storage = new LocalStorageStateAdapter<LayoutStorageAxis>({\n isBrowser: this.isBrowser,\n storage: this.document.defaultView?.localStorage ?? null,\n keys: STORAGE_KEYS,\n legacyPrefix: LEGACY_STORAGE_PREFIX,\n });\n\n readonly mode = signal<LayoutMode>(\n this.storage.read('layout-mode', this.config.defaultMode, isLayoutMode),\n );\n readonly container = signal<LayoutContainer>(\n this.storage.read('layout-container', this.config.defaultContainer, isLayoutContainer),\n );\n\n constructor() {\n effect(() => {\n if (this.isBrowser) {\n this.applyToDOM();\n }\n });\n }\n\n /**\n * Updates the active shell mode and persists the value for future sessions.\n */\n setMode(value: LayoutMode): void {\n this.storage.persist('layout-mode', value);\n this.mode.set(value);\n }\n\n /**\n * Updates the active container width mode and persists the value for future sessions.\n */\n setContainer(value: LayoutContainer): void {\n this.storage.persist('layout-container', value);\n this.container.set(value);\n }\n\n /**\n * Clears persisted layout state and restores the configured defaults for mode and container.\n */\n reset(): void {\n this.storage.clear('layout-mode');\n this.storage.clear('layout-container');\n this.mode.set(this.config.defaultMode);\n this.container.set(this.config.defaultContainer);\n }\n\n private applyToDOM(): void {\n const element = this.document.documentElement;\n\n element.dataset['layoutMode'] = this.mode();\n element.dataset['layoutContainer'] = this.container();\n }\n}\n","import { Directive, inject } from '@angular/core';\nimport { LayoutService } from '../state/layout.service';\n\n@Directive({\n selector: '[ngtLayoutHost]',\n host: {\n '[attr.data-layout-mode]': 'layout.mode()',\n '[attr.data-layout-container]': 'layout.container()',\n },\n})\nexport class LayoutHostDirective {\n protected readonly layout = inject(LayoutService);\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: 'layout',\n})\nexport class LayoutElementDirective {}\n\n@Directive({\n selector: 'content,shell-content',\n})\nexport class ContentElementDirective {}\n\n@Directive({\n selector: 'brand',\n})\nexport class BrandElementDirective {}\n\n@Directive({\n selector: 'panel',\n})\nexport class PanelElementDirective {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport {\n BrandElementDirective,\n ContentElementDirective,\n LayoutElementDirective,\n PanelElementDirective,\n} from '../../directive/elements.directive';\n\n@Component({\n selector: 'horizontal',\n imports: [\n RouterOutlet,\n LayoutElementDirective,\n ContentElementDirective,\n BrandElementDirective,\n PanelElementDirective,\n ],\n host: {\n '[attr.data-layout-mode]': '\"horizontal\"',\n },\n template: `\n <layout>\n <shell-content>\n <header>\n <brand>\n <ng-content select=\"[headerBrand]\"></ng-content>\n </brand>\n\n <nav>\n <ng-content select=\"[headerNavigation]\"></ng-content>\n </nav>\n\n <panel>\n <ng-content select=\"[headerActions]\"></ng-content>\n </panel>\n </header>\n\n <main>\n <router-outlet />\n </main>\n </shell-content>\n </layout>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LayoutHorizontalComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport {\n ContentElementDirective,\n LayoutElementDirective,\n} from '../../directive/elements.directive';\n\n@Component({\n selector: 'vertical',\n imports: [RouterOutlet, LayoutElementDirective, ContentElementDirective],\n host: {\n '[attr.data-layout-mode]': '\"vertical\"',\n },\n template: `\n <layout>\n <shell-content>\n <aside>\n <ng-content select=\"[navigation]\"></ng-content>\n </aside>\n <main>\n <router-outlet />\n </main>\n </shell-content>\n </layout>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LayoutVerticalComponent {}\n","import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { libraryLucideConfigProvider } from '@ojiepermana/angular/internal';\nimport { LucideExpand, LucideShrink } from '@lucide/angular';\nimport { LayoutService } from '../../state/layout.service';\n\n@Component({\n selector: 'layout-container-switcher',\n imports: [MatIconButton, MatTooltip, LucideExpand, LucideShrink],\n providers: [libraryLucideConfigProvider],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <button\n class=\"ngt-icon-button\"\n type=\"button\"\n mat-icon-button\n aria-label=\"Boxed layout container\"\n [attr.aria-pressed]=\"layout.container() === 'boxed'\"\n [matTooltip]=\"label()\"\n (click)=\"toggle()\"\n >\n @if (layout.container() === 'full') {\n <svg lucideExpand aria-hidden=\"true\"></svg>\n } @else {\n <svg lucideShrink aria-hidden=\"true\"></svg>\n }\n </button>\n `,\n})\nexport class LayoutContainerSwitcherComponent {\n protected readonly layout = inject(LayoutService);\n\n protected readonly label = computed(() =>\n this.layout.container() === 'boxed'\n ? 'Boxed layout container enabled'\n : 'Boxed layout container disabled',\n );\n\n protected toggle(): void {\n this.layout.setContainer(this.layout.container() === 'full' ? 'boxed' : 'full');\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { libraryLucideConfigProvider } from '@ojiepermana/angular/internal';\nimport { LucideAppWindow, LucidePanelLeft, LucidePanelTop } from '@lucide/angular';\nimport { LayoutService } from '../../state/layout.service';\n\n@Component({\n selector: 'layout-mode-switcher',\n imports: [\n MatIconButton,\n MatTooltip,\n MatMenu,\n MatMenuItem,\n MatMenuTrigger,\n LucidePanelLeft,\n LucidePanelTop,\n LucideAppWindow,\n ],\n providers: [libraryLucideConfigProvider],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <button\n class=\"ngt-icon-button\"\n type=\"button\"\n mat-icon-button\n [attr.aria-label]=\"'Layout mode: ' + currentOption().label\"\n [matTooltip]=\"'Layout mode: ' + currentOption().label\"\n [matMenuTriggerFor]=\"menu\"\n >\n @switch (layout.mode()) {\n @case ('vertical') {\n <svg lucidePanelLeft aria-hidden=\"true\"></svg>\n }\n @case ('horizontal') {\n <svg lucidePanelTop aria-hidden=\"true\"></svg>\n }\n @default {\n <svg lucideAppWindow aria-hidden=\"true\"></svg>\n }\n }\n </button>\n\n <mat-menu #menu=\"matMenu\">\n @for (option of options; track option.value) {\n <button\n type=\"button\"\n mat-menu-item\n role=\"menuitemradio\"\n [attr.aria-checked]=\"layout.mode() === option.value\"\n (click)=\"layout.setMode(option.value)\"\n >\n @switch (option.value) {\n @case ('vertical') {\n <svg lucidePanelLeft aria-hidden=\"true\"></svg>\n }\n @case ('horizontal') {\n <svg lucidePanelTop aria-hidden=\"true\"></svg>\n }\n @default {\n <svg lucideAppWindow aria-hidden=\"true\"></svg>\n }\n }\n <span>{{ option.label }}</span>\n </button>\n }\n </mat-menu>\n `,\n})\nexport class LayoutModeSwitcherComponent {\n protected readonly layout = inject(LayoutService);\n\n // Empty mode remains programmatic so the UI only exposes the two navigational shell variants.\n protected readonly options = [\n { value: 'vertical' as const, label: 'Vertical Sidebar' },\n { value: 'horizontal' as const, label: 'Horizontal Navbar' },\n ];\n\n protected readonly currentOption = computed(\n () =>\n this.options.find((option) => option.value === this.layout.mode()) ?? {\n value: 'empty' as const,\n label: 'Content Only',\n },\n );\n}\n","import { EnvironmentProviders, isDevMode, makeEnvironmentProviders } from '@angular/core';\nimport { DEFAULT_NG_LAYOUT_CONFIG, NG_LAYOUT_CONFIG } from './layout.token';\nimport {\n isLayoutContainer,\n isLayoutMode,\n LayoutContainer,\n LayoutMode,\n NgLayoutConfig,\n} from './layout.types';\n\nfunction warnInvalidLayoutConfig(message: string): void {\n if (isDevMode()) {\n console.warn(`[provideNgLayout] ${message}`);\n }\n}\n\nfunction normalizeLayoutMode(value: unknown): LayoutMode {\n if (typeof value === 'undefined' || isLayoutMode(value)) {\n return value ?? DEFAULT_NG_LAYOUT_CONFIG.defaultMode;\n }\n\n warnInvalidLayoutConfig(\n `Ignoring invalid defaultMode ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_LAYOUT_CONFIG.defaultMode)}.`,\n );\n\n return DEFAULT_NG_LAYOUT_CONFIG.defaultMode;\n}\n\nfunction normalizeLayoutContainer(value: unknown): LayoutContainer {\n if (typeof value === 'undefined' || isLayoutContainer(value)) {\n return value ?? DEFAULT_NG_LAYOUT_CONFIG.defaultContainer;\n }\n\n warnInvalidLayoutConfig(\n `Ignoring invalid defaultContainer ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_LAYOUT_CONFIG.defaultContainer)}.`,\n );\n\n return DEFAULT_NG_LAYOUT_CONFIG.defaultContainer;\n}\n\nfunction normalizeLayoutConfig(config: Partial<NgLayoutConfig>): NgLayoutConfig {\n return {\n ...DEFAULT_NG_LAYOUT_CONFIG,\n defaultMode: normalizeLayoutMode(config.defaultMode),\n defaultContainer: normalizeLayoutContainer(config.defaultContainer),\n };\n}\n\nexport function provideNgLayout(config: Partial<NgLayoutConfig> = {}): EnvironmentProviders {\n return makeEnvironmentProviders([\n { provide: NG_LAYOUT_CONFIG, useValue: normalizeLayoutConfig(config) },\n ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -68,7 +68,7 @@ class ColorPickerComponent {
|
|
|
68
68
|
@for (c of colors(); track c.value) {
|
|
69
69
|
<button
|
|
70
70
|
type="button"
|
|
71
|
-
class="color-picker-button focus-ring inline-flex size-11 items-center justify-center rounded-full p-1.5
|
|
71
|
+
class="color-picker-button focus-ring inline-flex size-11 items-center justify-center rounded-full p-1.5"
|
|
72
72
|
[class.color-picker-button-selected]="theme.color() === c.value"
|
|
73
73
|
[attr.aria-label]="
|
|
74
74
|
theme.color() === c.value
|
|
@@ -96,7 +96,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
96
96
|
@for (c of colors(); track c.value) {
|
|
97
97
|
<button
|
|
98
98
|
type="button"
|
|
99
|
-
class="color-picker-button focus-ring inline-flex size-11 items-center justify-center rounded-full p-1.5
|
|
99
|
+
class="color-picker-button focus-ring inline-flex size-11 items-center justify-center rounded-full p-1.5"
|
|
100
100
|
[class.color-picker-button-selected]="theme.color() === c.value"
|
|
101
101
|
[attr.aria-label]="
|
|
102
102
|
theme.color() === c.value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ojiepermana-angular-theme-component.mjs","sources":["../../../projects/library/theme/component/src/style-switcher.ts","../../../projects/library/theme/component/src/color-picker.ts","../../../projects/library/theme/component/src/scheme-switcher.ts","../../../projects/library/theme/component/ojiepermana-angular-theme-component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { libraryLucideConfigProvider } from '@ojiepermana/angular/internal';\nimport { LucideBlend, LucideLayoutDashboard } from '@lucide/angular';\nimport { ThemeService } from '@ojiepermana/angular/theme/service';\n\n@Component({\n selector: 'style-switcher',\n imports: [MatIconButton, MatTooltip, LucideBlend, LucideLayoutDashboard],\n providers: [libraryLucideConfigProvider],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <button\n class=\"ngt-icon-button\"\n type=\"button\"\n mat-icon-button\n aria-label=\"Glass style\"\n [attr.aria-pressed]=\"theme.style() === 'glass'\"\n [matTooltip]=\"label()\"\n (click)=\"toggle()\"\n >\n @if (theme.style() === 'flat') {\n <svg lucideLayoutDashboard aria-hidden=\"true\"></svg>\n } @else {\n <svg lucideBlend aria-hidden=\"true\"></svg>\n }\n </button>\n `,\n})\nexport class StyleSwitcherComponent {\n protected readonly theme = inject(ThemeService);\n\n protected readonly label = computed(() =>\n this.theme.style() === 'glass' ? 'Glass style enabled' : 'Glass style disabled',\n );\n\n protected toggle(): void {\n this.theme.setStyle(this.theme.style() === 'flat' ? 'glass' : 'flat');\n }\n}","import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { ThemeService } from '@ojiepermana/angular/theme/service';\n\n@Component({\n selector: 'color-picker',\n imports: [MatTooltip],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: `\n .color-picker-button {\n border: 1px solid transparent;\n background: transparent;\n }\n\n .color-picker-button-selected {\n border-color: color-mix(in oklab, var(--ring) 42%, var(--border));\n background: color-mix(in oklab, var(--accent) 60%, transparent);\n box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ring) 26%, transparent);\n }\n\n .color-picker-swatch {\n background: var(--theme-primary);\n border-color: color-mix(in oklab, var(--theme-primary) 42%, white 58%);\n }\n `,\n template: `\n <div class=\"flex items-center gap-1\" role=\"group\" aria-label=\"Theme colors\">\n @for (c of colors(); track c.value) {\n <button\n type=\"button\"\n class=\"color-picker-button focus-ring inline-flex size-11 items-center justify-center rounded-full p-1.5 transition-transform duration-150 hover:-translate-y-px\"\n [class.color-picker-button-selected]=\"theme.color() === c.value\"\n [attr.aria-label]=\"\n theme.color() === c.value\n ? 'Theme color: ' + c.label + ' (selected)'\n : 'Theme color: ' + c.label\n \"\n [attr.aria-pressed]=\"theme.color() === c.value\"\n [matTooltip]=\"c.label\"\n (click)=\"theme.setColor(c.value)\"\n >\n <span\n class=\"color-picker-swatch size-7 rounded-full border\"\n [attr.data-theme-color]=\"c.value\"\n aria-hidden=\"true\"\n ></span>\n </button>\n }\n </div>\n `,\n})\nexport class ColorPickerComponent {\n protected readonly theme = inject(ThemeService);\n\n protected readonly colors = this.theme.colorOptions;\n}\n","import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { libraryLucideConfigProvider } from '@ojiepermana/angular/internal';\nimport { LucideMonitorCog, LucideMoonStar, LucideSun } from '@lucide/angular';\nimport { ThemeService } from '@ojiepermana/angular/theme/service';\n\n@Component({\n selector: 'scheme-switcher',\n imports: [\n MatIconButton,\n MatMenu,\n MatMenuItem,\n MatMenuTrigger,\n MatTooltip,\n LucideSun,\n LucideMoonStar,\n LucideMonitorCog,\n ],\n providers: [libraryLucideConfigProvider],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <button\n class=\"ngt-icon-button\"\n type=\"button\"\n mat-icon-button\n [attr.aria-label]=\"'Color scheme: ' + currentOption().label\"\n [matTooltip]=\"'Color scheme: ' + currentOption().label\"\n [matMenuTriggerFor]=\"menu\"\n >\n @switch (theme.scheme()) {\n @case ('light') {\n <svg lucideSun aria-hidden=\"true\"></svg>\n }\n @case ('dark') {\n <svg lucideMoonStar aria-hidden=\"true\"></svg>\n }\n @default {\n <svg lucideMonitorCog aria-hidden=\"true\"></svg>\n }\n }\n </button>\n\n <mat-menu #menu=\"matMenu\">\n @for (option of options; track option.value) {\n <button\n type=\"button\"\n mat-menu-item\n role=\"menuitemradio\"\n [attr.aria-checked]=\"theme.scheme() === option.value\"\n (click)=\"theme.setScheme(option.value)\"\n >\n @switch (option.value) {\n @case ('light') {\n <svg lucideSun aria-hidden=\"true\"></svg>\n }\n @case ('dark') {\n <svg lucideMoonStar aria-hidden=\"true\"></svg>\n }\n @default {\n <svg lucideMonitorCog aria-hidden=\"true\"></svg>\n }\n }\n <span>{{ option.label }}</span>\n </button>\n }\n </mat-menu>\n `,\n})\nexport class SchemeSwitcherComponent {\n protected readonly theme = inject(ThemeService);\n\n protected readonly options = [\n { value: 'light' as const, label: 'Light' },\n { value: 'dark' as const, label: 'Dark' },\n { value: 'system' as const, label: 'System' },\n ];\n\n protected readonly currentOption = computed(\n () => this.options.find((option) => option.value === this.theme.scheme()) ?? this.options[2],\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-theme-component.mjs","sources":["../../../projects/library/theme/component/src/style-switcher.ts","../../../projects/library/theme/component/src/color-picker.ts","../../../projects/library/theme/component/src/scheme-switcher.ts","../../../projects/library/theme/component/ojiepermana-angular-theme-component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { libraryLucideConfigProvider } from '@ojiepermana/angular/internal';\nimport { LucideBlend, LucideLayoutDashboard } from '@lucide/angular';\nimport { ThemeService } from '@ojiepermana/angular/theme/service';\n\n@Component({\n selector: 'style-switcher',\n imports: [MatIconButton, MatTooltip, LucideBlend, LucideLayoutDashboard],\n providers: [libraryLucideConfigProvider],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <button\n class=\"ngt-icon-button\"\n type=\"button\"\n mat-icon-button\n aria-label=\"Glass style\"\n [attr.aria-pressed]=\"theme.style() === 'glass'\"\n [matTooltip]=\"label()\"\n (click)=\"toggle()\"\n >\n @if (theme.style() === 'flat') {\n <svg lucideLayoutDashboard aria-hidden=\"true\"></svg>\n } @else {\n <svg lucideBlend aria-hidden=\"true\"></svg>\n }\n </button>\n `,\n})\nexport class StyleSwitcherComponent {\n protected readonly theme = inject(ThemeService);\n\n protected readonly label = computed(() =>\n this.theme.style() === 'glass' ? 'Glass style enabled' : 'Glass style disabled',\n );\n\n protected toggle(): void {\n this.theme.setStyle(this.theme.style() === 'flat' ? 'glass' : 'flat');\n }\n}","import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { ThemeService } from '@ojiepermana/angular/theme/service';\n\n@Component({\n selector: 'color-picker',\n imports: [MatTooltip],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: `\n .color-picker-button {\n border: 1px solid transparent;\n background: transparent;\n }\n\n .color-picker-button-selected {\n border-color: color-mix(in oklab, var(--ring) 42%, var(--border));\n background: color-mix(in oklab, var(--accent) 60%, transparent);\n box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ring) 26%, transparent);\n }\n\n .color-picker-swatch {\n background: var(--theme-primary);\n border-color: color-mix(in oklab, var(--theme-primary) 42%, white 58%);\n }\n `,\n template: `\n <div class=\"flex items-center gap-1\" role=\"group\" aria-label=\"Theme colors\">\n @for (c of colors(); track c.value) {\n <button\n type=\"button\"\n class=\"color-picker-button focus-ring inline-flex size-11 items-center justify-center rounded-full p-1.5\"\n [class.color-picker-button-selected]=\"theme.color() === c.value\"\n [attr.aria-label]=\"\n theme.color() === c.value\n ? 'Theme color: ' + c.label + ' (selected)'\n : 'Theme color: ' + c.label\n \"\n [attr.aria-pressed]=\"theme.color() === c.value\"\n [matTooltip]=\"c.label\"\n (click)=\"theme.setColor(c.value)\"\n >\n <span\n class=\"color-picker-swatch size-7 rounded-full border\"\n [attr.data-theme-color]=\"c.value\"\n aria-hidden=\"true\"\n ></span>\n </button>\n }\n </div>\n `,\n})\nexport class ColorPickerComponent {\n protected readonly theme = inject(ThemeService);\n\n protected readonly colors = this.theme.colorOptions;\n}\n","import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { libraryLucideConfigProvider } from '@ojiepermana/angular/internal';\nimport { LucideMonitorCog, LucideMoonStar, LucideSun } from '@lucide/angular';\nimport { ThemeService } from '@ojiepermana/angular/theme/service';\n\n@Component({\n selector: 'scheme-switcher',\n imports: [\n MatIconButton,\n MatMenu,\n MatMenuItem,\n MatMenuTrigger,\n MatTooltip,\n LucideSun,\n LucideMoonStar,\n LucideMonitorCog,\n ],\n providers: [libraryLucideConfigProvider],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <button\n class=\"ngt-icon-button\"\n type=\"button\"\n mat-icon-button\n [attr.aria-label]=\"'Color scheme: ' + currentOption().label\"\n [matTooltip]=\"'Color scheme: ' + currentOption().label\"\n [matMenuTriggerFor]=\"menu\"\n >\n @switch (theme.scheme()) {\n @case ('light') {\n <svg lucideSun aria-hidden=\"true\"></svg>\n }\n @case ('dark') {\n <svg lucideMoonStar aria-hidden=\"true\"></svg>\n }\n @default {\n <svg lucideMonitorCog aria-hidden=\"true\"></svg>\n }\n }\n </button>\n\n <mat-menu #menu=\"matMenu\">\n @for (option of options; track option.value) {\n <button\n type=\"button\"\n mat-menu-item\n role=\"menuitemradio\"\n [attr.aria-checked]=\"theme.scheme() === option.value\"\n (click)=\"theme.setScheme(option.value)\"\n >\n @switch (option.value) {\n @case ('light') {\n <svg lucideSun aria-hidden=\"true\"></svg>\n }\n @case ('dark') {\n <svg lucideMoonStar aria-hidden=\"true\"></svg>\n }\n @default {\n <svg lucideMonitorCog aria-hidden=\"true\"></svg>\n }\n }\n <span>{{ option.label }}</span>\n </button>\n }\n </mat-menu>\n `,\n})\nexport class SchemeSwitcherComponent {\n protected readonly theme = inject(ThemeService);\n\n protected readonly options = [\n { value: 'light' as const, label: 'Light' },\n { value: 'dark' as const, label: 'Dark' },\n { value: 'system' as const, label: 'System' },\n ];\n\n protected readonly currentOption = computed(\n () => this.options.find((option) => option.value === this.theme.scheme()) ?? this.options[2],\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MA8Ba,sBAAsB,CAAA;AACd,IAAA,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC;IAE5B,KAAK,GAAG,QAAQ,CAAC,MAClC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,OAAO,GAAG,qBAAqB,GAAG,sBAAsB,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAChF;IAES,MAAM,GAAA;QACd,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACvE;uGATW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,SAAA,EApBtB,CAAC,2BAA2B,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAE9B;;;;;;;;;;;;;;;;AAgBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAnBS,aAAa,EAAA,QAAA,EAAA,sFAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,WAAW,6DAAE,qBAAqB,EAAA,QAAA,EAAA,4BAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAqB5D,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAvBlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;oBAC1B,OAAO,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,qBAAqB,CAAC;oBACxE,SAAS,EAAE,CAAC,2BAA2B,CAAC;oBACxC,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;AAgBT,EAAA,CAAA;AACF,iBAAA;;;MCsBY,oBAAoB,CAAA;AACZ,IAAA,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC;AAE5B,IAAA,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;uGAHxC,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA1BrB;;;;;;;;;;;;;;;;;;;;;;;;AAwBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2aAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA3CS,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FA6CT,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBA/ChC,SAAS;+BACE,cAAc,EAAA,OAAA,EACf,CAAC,UAAU,CAAC,mBACJ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAkBrC;;;;;;;;;;;;;;;;;;;;;;;;AAwBT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,2aAAA,CAAA,EAAA;;;MCqBU,uBAAuB,CAAA;AACf,IAAA,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC;AAE5B,IAAA,OAAO,GAAG;AAC3B,QAAA,EAAE,KAAK,EAAE,OAAgB,EAAE,KAAK,EAAE,OAAO,EAAE;AAC3C,QAAA,EAAE,KAAK,EAAE,MAAe,EAAE,KAAK,EAAE,MAAM,EAAE;AACzC,QAAA,EAAE,KAAK,EAAE,QAAiB,EAAE,KAAK,EAAE,QAAQ,EAAE;KAC9C;AAEkB,IAAA,aAAa,GAAG,QAAQ,CACzC,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,oFAC7F;uGAXU,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,SAAA,EAlDvB,CAAC,2BAA2B,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAzDC,aAAa,EAAA,QAAA,EAAA,sFAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,OAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,cAAc,EAAA,QAAA,EAAA,6CAAA,EAAA,MAAA,EAAA,CAAA,sBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,4BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,SAAS,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,cAAc,gEACd,gBAAgB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAoDP,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBA9DnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,OAAO,EAAE;wBACP,aAAa;wBACb,OAAO;wBACP,WAAW;wBACX,cAAc;wBACd,UAAU;wBACV,SAAS;wBACT,cAAc;wBACd,gBAAgB;AACjB,qBAAA;oBACD,SAAS,EAAE,CAAC,2BAA2B,CAAC;oBACxC,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CT,EAAA,CAAA;AACF,iBAAA;;;ACrED;;AAEG;;;;"}
|
|
@@ -63,7 +63,9 @@ class ThemeService {
|
|
|
63
63
|
legacyPrefix: LEGACY_STORAGE_PREFIX,
|
|
64
64
|
});
|
|
65
65
|
mediaQuery = this.isBrowser
|
|
66
|
-
?
|
|
66
|
+
? typeof this.document.defaultView?.matchMedia === 'function'
|
|
67
|
+
? this.document.defaultView.matchMedia('(prefers-color-scheme: dark)')
|
|
68
|
+
: null
|
|
67
69
|
: null;
|
|
68
70
|
systemPrefersDark = signal(this.mediaQuery?.matches ?? false, ...(ngDevMode ? [{ debugName: "systemPrefersDark" }] : /* istanbul ignore next */ []));
|
|
69
71
|
availableColorOptions = createThemeColorOptions(this.config.colors, this.config.colorLabels);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ojiepermana-angular-theme-service.mjs","sources":["../../../projects/library/theme/service/src/theme.token.ts","../../../projects/library/theme/service/src/theme.types.ts","../../../projects/library/theme/service/src/theme.service.ts","../../../projects/library/theme/service/src/theme.provider.ts","../../../projects/library/theme/service/ojiepermana-angular-theme-service.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { NgThemeConfig } from './theme.types';\n\nexport const DEFAULT_NG_THEME_CONFIG: NgThemeConfig = {\n defaultScheme: 'system',\n defaultColor: 'brand',\n defaultStyle: 'flat',\n};\n\nexport const NG_THEME_CONFIG = new InjectionToken<NgThemeConfig>('NG_THEME_CONFIG', {\n providedIn: 'root',\n factory: () => ({ ...DEFAULT_NG_THEME_CONFIG }),\n});\n","export const THEME_SCHEMES = ['light', 'dark', 'system'] as const;\nexport type ThemeScheme = (typeof THEME_SCHEMES)[number];\n\nexport const THEME_COLORS = ['brand', 'blue', 'green', 'red', 'cyan', 'purple', 'orange'] as const;\nexport type ThemeColor = (typeof THEME_COLORS)[number];\n\nexport const THEME_STYLES = ['flat', 'glass'] as const;\nexport type ThemeStyle = (typeof THEME_STYLES)[number];\n\nconst THEME_SCHEME_SET = new Set<ThemeScheme>(THEME_SCHEMES);\nconst THEME_COLOR_SET = new Set<ThemeColor>(THEME_COLORS);\nconst THEME_STYLE_SET = new Set<ThemeStyle>(THEME_STYLES);\n\nexport function isThemeScheme(value: unknown): value is ThemeScheme {\n return typeof value === 'string' && THEME_SCHEME_SET.has(value as ThemeScheme);\n}\n\nexport function isThemeColor(value: unknown): value is ThemeColor {\n return typeof value === 'string' && THEME_COLOR_SET.has(value as ThemeColor);\n}\n\nexport function isThemeStyle(value: unknown): value is ThemeStyle {\n return typeof value === 'string' && THEME_STYLE_SET.has(value as ThemeStyle);\n}\n\nexport interface ThemeColorOption {\n readonly value: ThemeColor;\n readonly label: string;\n}\n\nexport type ThemeColorLabels = Partial<Record<ThemeColor, string>>;\n\nexport interface NgThemeConfig {\n defaultScheme: ThemeScheme;\n defaultColor: ThemeColor;\n defaultStyle: ThemeStyle;\n colors?: readonly ThemeColor[];\n colorLabels?: ThemeColorLabels;\n}\n","import {\n DestroyRef,\n Injectable,\n PLATFORM_ID,\n computed,\n effect,\n inject,\n signal,\n} from '@angular/core';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { LocalStorageStateAdapter } from '@ojiepermana/angular/internal';\nimport { NG_THEME_CONFIG } from './theme.token';\nimport {\n isThemeColor,\n isThemeScheme,\n isThemeStyle,\n NgThemeConfig,\n ThemeStyle,\n ThemeColor,\n ThemeColorLabels,\n ThemeColorOption,\n ThemeScheme,\n} from './theme.types';\n\nconst THEME_COLOR_OPTIONS: readonly ThemeColorOption[] = [\n { value: 'brand', label: 'Brand' },\n { value: 'blue', label: 'Blue' },\n { value: 'green', label: 'Green' },\n { value: 'red', label: 'Red' },\n { value: 'cyan', label: 'Cyan' },\n { value: 'purple', label: 'Purple' },\n { value: 'orange', label: 'Orange' },\n] as const;\n\nfunction createThemeColorOptions(\n allowedColors: readonly ThemeColor[] | undefined,\n colorLabels: ThemeColorLabels | undefined,\n): readonly ThemeColorOption[] {\n const allowedSet = allowedColors ? new Set(allowedColors) : null;\n\n return THEME_COLOR_OPTIONS.filter((option) => !allowedSet || allowedSet.has(option.value)).map(\n (option) => ({\n value: option.value,\n label: colorLabels?.[option.value] ?? option.label,\n }),\n );\n}\n\nconst STORAGE_KEYS = {\n scheme: 'theme-scheme',\n color: 'theme-color',\n style: 'theme-style',\n} as const;\n\ntype ThemeStorageAxis = keyof typeof STORAGE_KEYS;\n\nconst LEGACY_STORAGE_PREFIX = 'ng-theme:v2';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n private readonly config = inject(NG_THEME_CONFIG);\n private readonly document = inject(DOCUMENT);\n private readonly destroyRef = inject(DestroyRef);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n private readonly storage = new LocalStorageStateAdapter<ThemeStorageAxis>({\n isBrowser: this.isBrowser,\n storage: this.document.defaultView?.localStorage ?? null,\n keys: STORAGE_KEYS,\n legacyPrefix: LEGACY_STORAGE_PREFIX,\n });\n private readonly mediaQuery = this.isBrowser\n ? (this.document.defaultView?.matchMedia('(prefers-color-scheme: dark)') ?? null)\n : null;\n private readonly systemPrefersDark = signal(this.mediaQuery?.matches ?? false);\n private readonly availableColorOptions = createThemeColorOptions(\n this.config.colors,\n this.config.colorLabels,\n );\n\n readonly scheme = signal<ThemeScheme>(\n this.storage.read('scheme', this.config.defaultScheme, isThemeScheme),\n );\n readonly color = signal<ThemeColor>(\n this.storage.read('color', this.config.defaultColor, isThemeColor),\n );\n readonly style = signal<ThemeStyle>(\n this.storage.read('style', this.config.defaultStyle, isThemeStyle),\n );\n readonly colorOptions = computed<readonly ThemeColorOption[]>(() => this.availableColorOptions);\n\n readonly resolvedScheme = computed<'light' | 'dark'>(() => {\n if (this.scheme() !== 'system') return this.scheme() as 'light' | 'dark';\n return this.systemPrefersDark() ? 'dark' : 'light';\n });\n\n constructor() {\n if (this.mediaQuery) {\n const syncSystemPreference = (event: MediaQueryListEvent): void => {\n this.systemPrefersDark.set(event.matches);\n };\n\n this.mediaQuery.addEventListener('change', syncSystemPreference);\n this.destroyRef.onDestroy(() => {\n this.mediaQuery?.removeEventListener('change', syncSystemPreference);\n });\n }\n\n effect(() => {\n if (this.isBrowser) {\n this.applyToDOM();\n }\n });\n }\n\n /**\n * Updates the selected theme scheme and persists the choice for future sessions.\n */\n setScheme(value: ThemeScheme): void {\n this.storage.persist('scheme', value);\n this.scheme.set(value);\n }\n\n /**\n * Updates the active theme color when it is part of the configured preset list.\n */\n setColor(value: ThemeColor): void {\n if (!this.colorOptions().some((option) => option.value === value)) {\n return;\n }\n\n this.storage.persist('color', value);\n this.color.set(value);\n }\n\n /**\n * Updates the active style preset and persists it to local storage.\n */\n setStyle(value: ThemeStyle): void {\n this.storage.persist('style', value);\n this.style.set(value);\n }\n\n /**\n * Cycles the scheme through light, dark, and system while keeping the DOM contract in sync.\n */\n toggleScheme(): void {\n const next: ThemeScheme =\n this.scheme() === 'light' ? 'dark' : this.scheme() === 'dark' ? 'system' : 'light';\n this.setScheme(next);\n }\n\n /**\n * Clears persisted theme state and restores the configured defaults for all theme axes.\n */\n reset(): void {\n this.storage.clear('scheme');\n this.storage.clear('color');\n this.storage.clear('style');\n this.scheme.set(this.config.defaultScheme);\n this.color.set(this.config.defaultColor);\n this.style.set(this.config.defaultStyle);\n }\n\n private applyToDOM(): void {\n const element = this.document.documentElement;\n\n element.classList.toggle('dark', this.resolvedScheme() === 'dark');\n element.dataset['themeScheme'] = this.scheme();\n element.dataset['themeColor'] = this.color();\n element.dataset['themeStyle'] = this.style();\n element.style.colorScheme = this.resolvedScheme();\n }\n}\n","import { EnvironmentProviders, isDevMode, makeEnvironmentProviders } from '@angular/core';\nimport { DEFAULT_NG_THEME_CONFIG, NG_THEME_CONFIG } from './theme.token';\nimport {\n isThemeColor,\n isThemeScheme,\n isThemeStyle,\n NgThemeConfig,\n ThemeColor,\n ThemeColorLabels,\n ThemeScheme,\n ThemeStyle,\n} from './theme.types';\n\nfunction warnInvalidThemeConfig(message: string): void {\n if (isDevMode()) {\n console.warn(`[provideNgTheme] ${message}`);\n }\n}\n\nfunction normalizeThemeScheme(value: unknown): ThemeScheme {\n if (typeof value === 'undefined' || isThemeScheme(value)) {\n return value ?? DEFAULT_NG_THEME_CONFIG.defaultScheme;\n }\n\n warnInvalidThemeConfig(\n `Ignoring invalid defaultScheme ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultScheme)}.`,\n );\n\n return DEFAULT_NG_THEME_CONFIG.defaultScheme;\n}\n\nfunction normalizeThemeColor(value: unknown): ThemeColor {\n if (typeof value === 'undefined' || isThemeColor(value)) {\n return value ?? DEFAULT_NG_THEME_CONFIG.defaultColor;\n }\n\n warnInvalidThemeConfig(\n `Ignoring invalid defaultColor ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultColor)}.`,\n );\n\n return DEFAULT_NG_THEME_CONFIG.defaultColor;\n}\n\nfunction normalizeThemeStyle(value: unknown): ThemeStyle {\n if (typeof value === 'undefined' || isThemeStyle(value)) {\n return value ?? DEFAULT_NG_THEME_CONFIG.defaultStyle;\n }\n\n warnInvalidThemeConfig(\n `Ignoring invalid defaultStyle ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultStyle)}.`,\n );\n\n return DEFAULT_NG_THEME_CONFIG.defaultStyle;\n}\n\nfunction normalizeThemeColors(value: unknown): readonly ThemeColor[] | undefined {\n if (typeof value === 'undefined') {\n return undefined;\n }\n\n if (!Array.isArray(value)) {\n warnInvalidThemeConfig('Ignoring invalid colors config because it is not an array.');\n return undefined;\n }\n\n const normalizedColors = Array.from(new Set(value.filter(isThemeColor)));\n\n if (normalizedColors.length !== value.length) {\n warnInvalidThemeConfig('Ignoring unsupported values in colors config.');\n }\n\n return normalizedColors.length > 0 ? normalizedColors : undefined;\n}\n\nfunction normalizeThemeColorLabels(value: unknown): ThemeColorLabels | undefined {\n if (typeof value === 'undefined') {\n return undefined;\n }\n\n if (!value || Array.isArray(value) || typeof value !== 'object') {\n warnInvalidThemeConfig('Ignoring invalid colorLabels config because it is not an object map.');\n return undefined;\n }\n\n const entries = Object.entries(value);\n const normalizedEntries = entries.flatMap(([color, label]) => {\n if (isThemeColor(color) && typeof label === 'string' && label.trim().length > 0) {\n return [[color, label.trim()] as const];\n }\n\n return [];\n });\n\n if (normalizedEntries.length !== entries.length) {\n warnInvalidThemeConfig('Ignoring unsupported entries in colorLabels config.');\n }\n\n return normalizedEntries.length > 0\n ? (Object.fromEntries(normalizedEntries) as ThemeColorLabels)\n : undefined;\n}\n\nfunction normalizeThemeConfig(config: Partial<NgThemeConfig>): NgThemeConfig {\n const colors = normalizeThemeColors(config.colors);\n const colorLabels = normalizeThemeColorLabels(config.colorLabels);\n let defaultColor = normalizeThemeColor(config.defaultColor);\n\n if (colors && !colors.includes(defaultColor)) {\n warnInvalidThemeConfig(\n `Adjusting defaultColor ${JSON.stringify(defaultColor)} to ${JSON.stringify(colors[0])} so it stays within the configured colors list.`,\n );\n defaultColor = colors[0];\n }\n\n return {\n ...DEFAULT_NG_THEME_CONFIG,\n defaultScheme: normalizeThemeScheme(config.defaultScheme),\n defaultColor,\n defaultStyle: normalizeThemeStyle(config.defaultStyle),\n ...(colors ? { colors } : {}),\n ...(colorLabels ? { colorLabels } : {}),\n };\n}\n\nexport function provideNgTheme(config: Partial<NgThemeConfig> = {}): EnvironmentProviders {\n return makeEnvironmentProviders([\n { provide: NG_THEME_CONFIG, useValue: normalizeThemeConfig(config) },\n ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-theme-service.mjs","sources":["../../../projects/library/theme/service/src/theme.token.ts","../../../projects/library/theme/service/src/theme.types.ts","../../../projects/library/theme/service/src/theme.service.ts","../../../projects/library/theme/service/src/theme.provider.ts","../../../projects/library/theme/service/ojiepermana-angular-theme-service.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { NgThemeConfig } from './theme.types';\n\nexport const DEFAULT_NG_THEME_CONFIG: NgThemeConfig = {\n defaultScheme: 'system',\n defaultColor: 'brand',\n defaultStyle: 'flat',\n};\n\nexport const NG_THEME_CONFIG = new InjectionToken<NgThemeConfig>('NG_THEME_CONFIG', {\n providedIn: 'root',\n factory: () => ({ ...DEFAULT_NG_THEME_CONFIG }),\n});\n","export const THEME_SCHEMES = ['light', 'dark', 'system'] as const;\nexport type ThemeScheme = (typeof THEME_SCHEMES)[number];\n\nexport const THEME_COLORS = ['brand', 'blue', 'green', 'red', 'cyan', 'purple', 'orange'] as const;\nexport type ThemeColor = (typeof THEME_COLORS)[number];\n\nexport const THEME_STYLES = ['flat', 'glass'] as const;\nexport type ThemeStyle = (typeof THEME_STYLES)[number];\n\nconst THEME_SCHEME_SET = new Set<ThemeScheme>(THEME_SCHEMES);\nconst THEME_COLOR_SET = new Set<ThemeColor>(THEME_COLORS);\nconst THEME_STYLE_SET = new Set<ThemeStyle>(THEME_STYLES);\n\nexport function isThemeScheme(value: unknown): value is ThemeScheme {\n return typeof value === 'string' && THEME_SCHEME_SET.has(value as ThemeScheme);\n}\n\nexport function isThemeColor(value: unknown): value is ThemeColor {\n return typeof value === 'string' && THEME_COLOR_SET.has(value as ThemeColor);\n}\n\nexport function isThemeStyle(value: unknown): value is ThemeStyle {\n return typeof value === 'string' && THEME_STYLE_SET.has(value as ThemeStyle);\n}\n\nexport interface ThemeColorOption {\n readonly value: ThemeColor;\n readonly label: string;\n}\n\nexport type ThemeColorLabels = Partial<Record<ThemeColor, string>>;\n\nexport interface NgThemeConfig {\n defaultScheme: ThemeScheme;\n defaultColor: ThemeColor;\n defaultStyle: ThemeStyle;\n colors?: readonly ThemeColor[];\n colorLabels?: ThemeColorLabels;\n}\n","import {\n DestroyRef,\n Injectable,\n PLATFORM_ID,\n computed,\n effect,\n inject,\n signal,\n} from '@angular/core';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { LocalStorageStateAdapter } from '@ojiepermana/angular/internal';\nimport { NG_THEME_CONFIG } from './theme.token';\nimport {\n isThemeColor,\n isThemeScheme,\n isThemeStyle,\n NgThemeConfig,\n ThemeStyle,\n ThemeColor,\n ThemeColorLabels,\n ThemeColorOption,\n ThemeScheme,\n} from './theme.types';\n\nconst THEME_COLOR_OPTIONS: readonly ThemeColorOption[] = [\n { value: 'brand', label: 'Brand' },\n { value: 'blue', label: 'Blue' },\n { value: 'green', label: 'Green' },\n { value: 'red', label: 'Red' },\n { value: 'cyan', label: 'Cyan' },\n { value: 'purple', label: 'Purple' },\n { value: 'orange', label: 'Orange' },\n] as const;\n\nfunction createThemeColorOptions(\n allowedColors: readonly ThemeColor[] | undefined,\n colorLabels: ThemeColorLabels | undefined,\n): readonly ThemeColorOption[] {\n const allowedSet = allowedColors ? new Set(allowedColors) : null;\n\n return THEME_COLOR_OPTIONS.filter((option) => !allowedSet || allowedSet.has(option.value)).map(\n (option) => ({\n value: option.value,\n label: colorLabels?.[option.value] ?? option.label,\n }),\n );\n}\n\nconst STORAGE_KEYS = {\n scheme: 'theme-scheme',\n color: 'theme-color',\n style: 'theme-style',\n} as const;\n\ntype ThemeStorageAxis = keyof typeof STORAGE_KEYS;\n\nconst LEGACY_STORAGE_PREFIX = 'ng-theme:v2';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n private readonly config = inject(NG_THEME_CONFIG);\n private readonly document = inject(DOCUMENT);\n private readonly destroyRef = inject(DestroyRef);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n private readonly storage = new LocalStorageStateAdapter<ThemeStorageAxis>({\n isBrowser: this.isBrowser,\n storage: this.document.defaultView?.localStorage ?? null,\n keys: STORAGE_KEYS,\n legacyPrefix: LEGACY_STORAGE_PREFIX,\n });\n private readonly mediaQuery = this.isBrowser\n ? typeof this.document.defaultView?.matchMedia === 'function'\n ? this.document.defaultView.matchMedia('(prefers-color-scheme: dark)')\n : null\n : null;\n private readonly systemPrefersDark = signal(this.mediaQuery?.matches ?? false);\n private readonly availableColorOptions = createThemeColorOptions(\n this.config.colors,\n this.config.colorLabels,\n );\n\n readonly scheme = signal<ThemeScheme>(\n this.storage.read('scheme', this.config.defaultScheme, isThemeScheme),\n );\n readonly color = signal<ThemeColor>(\n this.storage.read('color', this.config.defaultColor, isThemeColor),\n );\n readonly style = signal<ThemeStyle>(\n this.storage.read('style', this.config.defaultStyle, isThemeStyle),\n );\n readonly colorOptions = computed<readonly ThemeColorOption[]>(() => this.availableColorOptions);\n\n readonly resolvedScheme = computed<'light' | 'dark'>(() => {\n if (this.scheme() !== 'system') return this.scheme() as 'light' | 'dark';\n return this.systemPrefersDark() ? 'dark' : 'light';\n });\n\n constructor() {\n if (this.mediaQuery) {\n const syncSystemPreference = (event: MediaQueryListEvent): void => {\n this.systemPrefersDark.set(event.matches);\n };\n\n this.mediaQuery.addEventListener('change', syncSystemPreference);\n this.destroyRef.onDestroy(() => {\n this.mediaQuery?.removeEventListener('change', syncSystemPreference);\n });\n }\n\n effect(() => {\n if (this.isBrowser) {\n this.applyToDOM();\n }\n });\n }\n\n /**\n * Updates the selected theme scheme and persists the choice for future sessions.\n */\n setScheme(value: ThemeScheme): void {\n this.storage.persist('scheme', value);\n this.scheme.set(value);\n }\n\n /**\n * Updates the active theme color when it is part of the configured preset list.\n */\n setColor(value: ThemeColor): void {\n if (!this.colorOptions().some((option) => option.value === value)) {\n return;\n }\n\n this.storage.persist('color', value);\n this.color.set(value);\n }\n\n /**\n * Updates the active style preset and persists it to local storage.\n */\n setStyle(value: ThemeStyle): void {\n this.storage.persist('style', value);\n this.style.set(value);\n }\n\n /**\n * Cycles the scheme through light, dark, and system while keeping the DOM contract in sync.\n */\n toggleScheme(): void {\n const next: ThemeScheme =\n this.scheme() === 'light' ? 'dark' : this.scheme() === 'dark' ? 'system' : 'light';\n this.setScheme(next);\n }\n\n /**\n * Clears persisted theme state and restores the configured defaults for all theme axes.\n */\n reset(): void {\n this.storage.clear('scheme');\n this.storage.clear('color');\n this.storage.clear('style');\n this.scheme.set(this.config.defaultScheme);\n this.color.set(this.config.defaultColor);\n this.style.set(this.config.defaultStyle);\n }\n\n private applyToDOM(): void {\n const element = this.document.documentElement;\n\n element.classList.toggle('dark', this.resolvedScheme() === 'dark');\n element.dataset['themeScheme'] = this.scheme();\n element.dataset['themeColor'] = this.color();\n element.dataset['themeStyle'] = this.style();\n element.style.colorScheme = this.resolvedScheme();\n }\n}\n","import { EnvironmentProviders, isDevMode, makeEnvironmentProviders } from '@angular/core';\nimport { DEFAULT_NG_THEME_CONFIG, NG_THEME_CONFIG } from './theme.token';\nimport {\n isThemeColor,\n isThemeScheme,\n isThemeStyle,\n NgThemeConfig,\n ThemeColor,\n ThemeColorLabels,\n ThemeScheme,\n ThemeStyle,\n} from './theme.types';\n\nfunction warnInvalidThemeConfig(message: string): void {\n if (isDevMode()) {\n console.warn(`[provideNgTheme] ${message}`);\n }\n}\n\nfunction normalizeThemeScheme(value: unknown): ThemeScheme {\n if (typeof value === 'undefined' || isThemeScheme(value)) {\n return value ?? DEFAULT_NG_THEME_CONFIG.defaultScheme;\n }\n\n warnInvalidThemeConfig(\n `Ignoring invalid defaultScheme ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultScheme)}.`,\n );\n\n return DEFAULT_NG_THEME_CONFIG.defaultScheme;\n}\n\nfunction normalizeThemeColor(value: unknown): ThemeColor {\n if (typeof value === 'undefined' || isThemeColor(value)) {\n return value ?? DEFAULT_NG_THEME_CONFIG.defaultColor;\n }\n\n warnInvalidThemeConfig(\n `Ignoring invalid defaultColor ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultColor)}.`,\n );\n\n return DEFAULT_NG_THEME_CONFIG.defaultColor;\n}\n\nfunction normalizeThemeStyle(value: unknown): ThemeStyle {\n if (typeof value === 'undefined' || isThemeStyle(value)) {\n return value ?? DEFAULT_NG_THEME_CONFIG.defaultStyle;\n }\n\n warnInvalidThemeConfig(\n `Ignoring invalid defaultStyle ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultStyle)}.`,\n );\n\n return DEFAULT_NG_THEME_CONFIG.defaultStyle;\n}\n\nfunction normalizeThemeColors(value: unknown): readonly ThemeColor[] | undefined {\n if (typeof value === 'undefined') {\n return undefined;\n }\n\n if (!Array.isArray(value)) {\n warnInvalidThemeConfig('Ignoring invalid colors config because it is not an array.');\n return undefined;\n }\n\n const normalizedColors = Array.from(new Set(value.filter(isThemeColor)));\n\n if (normalizedColors.length !== value.length) {\n warnInvalidThemeConfig('Ignoring unsupported values in colors config.');\n }\n\n return normalizedColors.length > 0 ? normalizedColors : undefined;\n}\n\nfunction normalizeThemeColorLabels(value: unknown): ThemeColorLabels | undefined {\n if (typeof value === 'undefined') {\n return undefined;\n }\n\n if (!value || Array.isArray(value) || typeof value !== 'object') {\n warnInvalidThemeConfig('Ignoring invalid colorLabels config because it is not an object map.');\n return undefined;\n }\n\n const entries = Object.entries(value);\n const normalizedEntries = entries.flatMap(([color, label]) => {\n if (isThemeColor(color) && typeof label === 'string' && label.trim().length > 0) {\n return [[color, label.trim()] as const];\n }\n\n return [];\n });\n\n if (normalizedEntries.length !== entries.length) {\n warnInvalidThemeConfig('Ignoring unsupported entries in colorLabels config.');\n }\n\n return normalizedEntries.length > 0\n ? (Object.fromEntries(normalizedEntries) as ThemeColorLabels)\n : undefined;\n}\n\nfunction normalizeThemeConfig(config: Partial<NgThemeConfig>): NgThemeConfig {\n const colors = normalizeThemeColors(config.colors);\n const colorLabels = normalizeThemeColorLabels(config.colorLabels);\n let defaultColor = normalizeThemeColor(config.defaultColor);\n\n if (colors && !colors.includes(defaultColor)) {\n warnInvalidThemeConfig(\n `Adjusting defaultColor ${JSON.stringify(defaultColor)} to ${JSON.stringify(colors[0])} so it stays within the configured colors list.`,\n );\n defaultColor = colors[0];\n }\n\n return {\n ...DEFAULT_NG_THEME_CONFIG,\n defaultScheme: normalizeThemeScheme(config.defaultScheme),\n defaultColor,\n defaultStyle: normalizeThemeStyle(config.defaultStyle),\n ...(colors ? { colors } : {}),\n ...(colorLabels ? { colorLabels } : {}),\n };\n}\n\nexport function provideNgTheme(config: Partial<NgThemeConfig> = {}): EnvironmentProviders {\n return makeEnvironmentProviders([\n { provide: NG_THEME_CONFIG, useValue: normalizeThemeConfig(config) },\n ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/layout/README.md
CHANGED
|
@@ -67,7 +67,8 @@ Persistence keys are fixed by the runtime. Deprecated config fields such as `sto
|
|
|
67
67
|
|
|
68
68
|
The layout stylesheet source is `projects/library/layout/styles/index.css` inside this workspace.
|
|
69
69
|
|
|
70
|
-
It owns the `data-layout-*` selectors and the
|
|
70
|
+
It owns the `data-layout-*` selectors and imports the mode-scoped shell styles.
|
|
71
|
+
Layout-wide axis selectors such as `data-layout-container` and `data-layout-mode='empty'` stay in `projects/library/layout/styles/index.css`, while the flat shell rules now live in `projects/library/layout/styles/horizontal/flat.css` and `projects/library/layout/styles/vertical/flat.css`.
|
|
71
72
|
|
|
72
73
|
Layout styles consume theme tokens. For application usage, prefer the aggregate stylesheet entry at `projects/library/styles/index.css` in this workspace or `@ojiepermana/angular/styles/index.css` from the published package.
|
|
73
74
|
The shared bundle now includes reduced-motion-aware transitions for shell chrome colors, shadows, and radii while keeping structural mode changes immediate to avoid layout jank.
|
package/package.json
CHANGED
package/styles/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
@import '../theme/styles/index.css';
|
|
2
|
-
@import '../
|
|
2
|
+
@import '../theme/styles/layout/index.css';
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
horizontal[data-layout-mode='horizontal'] {
|
|
2
|
+
display: block;
|
|
3
|
+
block-size: 100dvh;
|
|
4
|
+
min-block-size: 100dvh;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
horizontal[data-layout-mode='horizontal'] > layout {
|
|
9
|
+
display: block;
|
|
10
|
+
block-size: 100dvh;
|
|
11
|
+
min-block-size: 100dvh;
|
|
12
|
+
padding: var(--layout-shell-padding);
|
|
13
|
+
background: var(--background);
|
|
14
|
+
color: var(--foreground);
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
transition: var(--ngt-chrome-transition);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
inline-size: min(100%, var(--layout-shell-max-width));
|
|
23
|
+
block-size: calc(100dvh - (var(--layout-shell-padding) * 2));
|
|
24
|
+
min-block-size: 0;
|
|
25
|
+
margin-inline: auto;
|
|
26
|
+
border: 1px solid var(--container-border);
|
|
27
|
+
border-radius: var(--layout-shell-radius);
|
|
28
|
+
background: var(--container-surface);
|
|
29
|
+
color: var(--container-foreground);
|
|
30
|
+
box-shadow: var(--container-shadow);
|
|
31
|
+
backdrop-filter: var(--container-backdrop);
|
|
32
|
+
-webkit-backdrop-filter: var(--container-backdrop);
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
transition: var(--ngt-shell-transition);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header {
|
|
38
|
+
display: var(--layout-header-display);
|
|
39
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: 1rem;
|
|
42
|
+
min-block-size: var(--layout-header-height);
|
|
43
|
+
padding: 0.875rem 1rem;
|
|
44
|
+
border-bottom: 1px solid var(--nav-border);
|
|
45
|
+
background: var(--nav-surface);
|
|
46
|
+
color: var(--nav-foreground);
|
|
47
|
+
transition: var(--ngt-chrome-transition);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > brand,
|
|
51
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > panel {
|
|
52
|
+
display: flex;
|
|
53
|
+
min-inline-size: 0;
|
|
54
|
+
align-items: center;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > brand {
|
|
58
|
+
justify-content: flex-start;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > nav {
|
|
62
|
+
display: flex;
|
|
63
|
+
min-inline-size: 0;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
gap: 0.75rem;
|
|
67
|
+
flex-wrap: wrap;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > panel {
|
|
71
|
+
justify-content: flex-end;
|
|
72
|
+
gap: 0.5rem;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > main {
|
|
76
|
+
flex: 1 1 auto;
|
|
77
|
+
block-size: 100%;
|
|
78
|
+
min-inline-size: 0;
|
|
79
|
+
min-block-size: 0;
|
|
80
|
+
overflow: auto;
|
|
81
|
+
background-color: var(--background);
|
|
82
|
+
background-image: linear-gradient(
|
|
83
|
+
180deg,
|
|
84
|
+
color-mix(in oklab, var(--background) 94%, white 6%),
|
|
85
|
+
var(--background)
|
|
86
|
+
);
|
|
87
|
+
color: var(--foreground);
|
|
88
|
+
transition:
|
|
89
|
+
background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
|
|
90
|
+
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@media (max-width: 60rem) {
|
|
94
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header {
|
|
95
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
96
|
+
align-items: flex-start;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > nav {
|
|
100
|
+
grid-column: 1 / -1;
|
|
101
|
+
justify-content: flex-start;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@media (max-width: 40rem) {
|
|
106
|
+
horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header {
|
|
107
|
+
grid-template-columns: 1fr;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
horizontal[data-layout-mode='horizontal']
|
|
111
|
+
> layout
|
|
112
|
+
> :is(content, shell-content)
|
|
113
|
+
> header
|
|
114
|
+
> panel {
|
|
115
|
+
justify-content: flex-start;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
@@ -1 +1,19 @@
|
|
|
1
|
-
@import '
|
|
1
|
+
@import './horizontal.css';
|
|
2
|
+
@import './vertical.css';
|
|
3
|
+
|
|
4
|
+
[data-layout-container='full'] {
|
|
5
|
+
--layout-shell-max-width: 100%;
|
|
6
|
+
--layout-shell-padding: 0rem;
|
|
7
|
+
--layout-shell-radius: 0rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
[data-layout-container='boxed'] {
|
|
11
|
+
--layout-shell-max-width: 82rem;
|
|
12
|
+
--layout-shell-padding: clamp(1rem, 2vw, 2rem);
|
|
13
|
+
--layout-shell-radius: var(--radius-xl);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[data-layout-mode='empty'] {
|
|
17
|
+
--layout-header-display: none;
|
|
18
|
+
--layout-sidebar-display: none;
|
|
19
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
vertical[data-layout-mode='vertical'] {
|
|
2
|
+
display: block;
|
|
3
|
+
block-size: 100dvh;
|
|
4
|
+
min-block-size: 100dvh;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
vertical[data-layout-mode='vertical'] > layout {
|
|
9
|
+
display: block;
|
|
10
|
+
block-size: 100dvh;
|
|
11
|
+
min-block-size: 100dvh;
|
|
12
|
+
padding: var(--layout-shell-padding);
|
|
13
|
+
background: var(--background);
|
|
14
|
+
color: var(--foreground);
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
transition: var(--ngt-chrome-transition);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
inline-size: min(100%, var(--layout-shell-max-width));
|
|
23
|
+
block-size: calc(100dvh - (var(--layout-shell-padding) * 2));
|
|
24
|
+
min-block-size: 0;
|
|
25
|
+
margin-inline: auto;
|
|
26
|
+
border: 1px solid var(--container-border);
|
|
27
|
+
border-radius: var(--layout-shell-radius);
|
|
28
|
+
background: var(--container-surface);
|
|
29
|
+
color: var(--container-foreground);
|
|
30
|
+
box-shadow: var(--container-shadow);
|
|
31
|
+
backdrop-filter: var(--container-backdrop);
|
|
32
|
+
-webkit-backdrop-filter: var(--container-backdrop);
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
transition: var(--ngt-shell-transition);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > aside {
|
|
38
|
+
display: var(--layout-sidebar-display);
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
inline-size: 100%;
|
|
41
|
+
min-block-size: 0;
|
|
42
|
+
border-bottom: 1px solid var(--sidebar-chrome-border);
|
|
43
|
+
background: var(--sidebar-chrome-surface);
|
|
44
|
+
color: var(--sidebar-chrome-foreground);
|
|
45
|
+
overflow: auto;
|
|
46
|
+
transition: var(--ngt-chrome-transition);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > main {
|
|
50
|
+
flex: 1 1 auto;
|
|
51
|
+
block-size: 100%;
|
|
52
|
+
min-inline-size: 0;
|
|
53
|
+
min-block-size: 0;
|
|
54
|
+
overflow: auto;
|
|
55
|
+
background-color: var(--background);
|
|
56
|
+
background-image: linear-gradient(
|
|
57
|
+
180deg,
|
|
58
|
+
color-mix(in oklab, var(--background) 94%, white 6%),
|
|
59
|
+
var(--background)
|
|
60
|
+
);
|
|
61
|
+
color: var(--foreground);
|
|
62
|
+
transition:
|
|
63
|
+
background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
|
|
64
|
+
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@media (min-width: 48rem) {
|
|
68
|
+
vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) {
|
|
69
|
+
flex-direction: row;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > aside {
|
|
73
|
+
inline-size: var(--layout-sidebar-width);
|
|
74
|
+
border-bottom: 0;
|
|
75
|
+
border-right: 1px solid var(--sidebar-chrome-border);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -8,3 +8,38 @@
|
|
|
8
8
|
--theme-neutral: oklch(0.735 0.031 260.347);
|
|
9
9
|
--theme-on-neutral: oklch(0.205 0.012 285.9);
|
|
10
10
|
}
|
|
11
|
+
|
|
12
|
+
[data-theme-color='blue'] :where(h1, h2, h3, h4, h5, h6, a) {
|
|
13
|
+
color: var(--primary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[data-theme-color='blue'] :where(a) {
|
|
17
|
+
text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
|
|
18
|
+
text-decoration-thickness: 0.08em;
|
|
19
|
+
text-underline-offset: 0.18em;
|
|
20
|
+
transition:
|
|
21
|
+
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
22
|
+
text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
23
|
+
outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
[data-theme-color='blue'] :where(a:hover) {
|
|
27
|
+
color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
|
|
28
|
+
text-decoration-color: currentColor;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-theme-color='blue'] :where(a:visited) {
|
|
32
|
+
color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-theme-color='blue'] :where(a:active) {
|
|
36
|
+
color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
|
|
37
|
+
text-decoration-color: currentColor;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-theme-color='blue'] :where(a:focus-visible) {
|
|
41
|
+
outline: 2px solid var(--control-focus-ring);
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
border-radius: 0.15em;
|
|
44
|
+
text-decoration-color: currentColor;
|
|
45
|
+
}
|
|
@@ -9,3 +9,44 @@
|
|
|
9
9
|
--theme-neutral: oklch(0.736 0.035 265.705);
|
|
10
10
|
--theme-on-neutral: oklch(0.205 0.012 285.9);
|
|
11
11
|
}
|
|
12
|
+
|
|
13
|
+
:root :where(h1, h2, h3, h4, h5, h6, a),
|
|
14
|
+
[data-theme-color='brand'] :where(h1, h2, h3, h4, h5, h6, a) {
|
|
15
|
+
color: var(--primary);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
:root :where(a),
|
|
19
|
+
[data-theme-color='brand'] :where(a) {
|
|
20
|
+
text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
|
|
21
|
+
text-decoration-thickness: 0.08em;
|
|
22
|
+
text-underline-offset: 0.18em;
|
|
23
|
+
transition:
|
|
24
|
+
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
25
|
+
text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
26
|
+
outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:root :where(a:hover),
|
|
30
|
+
[data-theme-color='brand'] :where(a:hover) {
|
|
31
|
+
color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
|
|
32
|
+
text-decoration-color: currentColor;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:root :where(a:visited),
|
|
36
|
+
[data-theme-color='brand'] :where(a:visited) {
|
|
37
|
+
color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:root :where(a:active),
|
|
41
|
+
[data-theme-color='brand'] :where(a:active) {
|
|
42
|
+
color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
|
|
43
|
+
text-decoration-color: currentColor;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:root :where(a:focus-visible),
|
|
47
|
+
[data-theme-color='brand'] :where(a:focus-visible) {
|
|
48
|
+
outline: 2px solid var(--control-focus-ring);
|
|
49
|
+
outline-offset: 2px;
|
|
50
|
+
border-radius: 0.15em;
|
|
51
|
+
text-decoration-color: currentColor;
|
|
52
|
+
}
|
|
@@ -8,3 +8,38 @@
|
|
|
8
8
|
--theme-neutral: oklch(0.756 0.024 242.306);
|
|
9
9
|
--theme-on-neutral: oklch(0.205 0.012 285.9);
|
|
10
10
|
}
|
|
11
|
+
|
|
12
|
+
[data-theme-color='cyan'] :where(h1, h2, h3, h4, h5, h6, a) {
|
|
13
|
+
color: var(--primary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[data-theme-color='cyan'] :where(a) {
|
|
17
|
+
text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
|
|
18
|
+
text-decoration-thickness: 0.08em;
|
|
19
|
+
text-underline-offset: 0.18em;
|
|
20
|
+
transition:
|
|
21
|
+
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
22
|
+
text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
23
|
+
outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
[data-theme-color='cyan'] :where(a:hover) {
|
|
27
|
+
color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
|
|
28
|
+
text-decoration-color: currentColor;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-theme-color='cyan'] :where(a:visited) {
|
|
32
|
+
color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-theme-color='cyan'] :where(a:active) {
|
|
36
|
+
color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
|
|
37
|
+
text-decoration-color: currentColor;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-theme-color='cyan'] :where(a:focus-visible) {
|
|
41
|
+
outline: 2px solid var(--control-focus-ring);
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
border-radius: 0.15em;
|
|
44
|
+
text-decoration-color: currentColor;
|
|
45
|
+
}
|
|
@@ -8,3 +8,38 @@
|
|
|
8
8
|
--theme-neutral: oklch(0.749 0.02 176.021);
|
|
9
9
|
--theme-on-neutral: oklch(0.205 0.012 285.9);
|
|
10
10
|
}
|
|
11
|
+
|
|
12
|
+
[data-theme-color='green'] :where(h1, h2, h3, h4, h5, h6, a) {
|
|
13
|
+
color: var(--primary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[data-theme-color='green'] :where(a) {
|
|
17
|
+
text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
|
|
18
|
+
text-decoration-thickness: 0.08em;
|
|
19
|
+
text-underline-offset: 0.18em;
|
|
20
|
+
transition:
|
|
21
|
+
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
22
|
+
text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
23
|
+
outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
[data-theme-color='green'] :where(a:hover) {
|
|
27
|
+
color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
|
|
28
|
+
text-decoration-color: currentColor;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-theme-color='green'] :where(a:visited) {
|
|
32
|
+
color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-theme-color='green'] :where(a:active) {
|
|
36
|
+
color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
|
|
37
|
+
text-decoration-color: currentColor;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-theme-color='green'] :where(a:focus-visible) {
|
|
41
|
+
outline: 2px solid var(--control-focus-ring);
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
border-radius: 0.15em;
|
|
44
|
+
text-decoration-color: currentColor;
|
|
45
|
+
}
|
|
@@ -8,3 +8,38 @@
|
|
|
8
8
|
--theme-neutral: oklch(0.757 0.016 44.49);
|
|
9
9
|
--theme-on-neutral: oklch(0.205 0.012 285.9);
|
|
10
10
|
}
|
|
11
|
+
|
|
12
|
+
[data-theme-color='orange'] :where(h1, h2, h3, h4, h5, h6, a) {
|
|
13
|
+
color: var(--primary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[data-theme-color='orange'] :where(a) {
|
|
17
|
+
text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
|
|
18
|
+
text-decoration-thickness: 0.08em;
|
|
19
|
+
text-underline-offset: 0.18em;
|
|
20
|
+
transition:
|
|
21
|
+
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
22
|
+
text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
23
|
+
outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
[data-theme-color='orange'] :where(a:hover) {
|
|
27
|
+
color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
|
|
28
|
+
text-decoration-color: currentColor;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-theme-color='orange'] :where(a:visited) {
|
|
32
|
+
color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-theme-color='orange'] :where(a:active) {
|
|
36
|
+
color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
|
|
37
|
+
text-decoration-color: currentColor;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-theme-color='orange'] :where(a:focus-visible) {
|
|
41
|
+
outline: 2px solid var(--control-focus-ring);
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
border-radius: 0.15em;
|
|
44
|
+
text-decoration-color: currentColor;
|
|
45
|
+
}
|
|
@@ -8,3 +8,38 @@
|
|
|
8
8
|
--theme-neutral: oklch(0.74 0.039 307.23);
|
|
9
9
|
--theme-on-neutral: oklch(0.205 0.012 285.9);
|
|
10
10
|
}
|
|
11
|
+
|
|
12
|
+
[data-theme-color='purple'] :where(h1, h2, h3, h4, h5, h6, a) {
|
|
13
|
+
color: var(--primary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[data-theme-color='purple'] :where(a) {
|
|
17
|
+
text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
|
|
18
|
+
text-decoration-thickness: 0.08em;
|
|
19
|
+
text-underline-offset: 0.18em;
|
|
20
|
+
transition:
|
|
21
|
+
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
22
|
+
text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
23
|
+
outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
[data-theme-color='purple'] :where(a:hover) {
|
|
27
|
+
color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
|
|
28
|
+
text-decoration-color: currentColor;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-theme-color='purple'] :where(a:visited) {
|
|
32
|
+
color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-theme-color='purple'] :where(a:active) {
|
|
36
|
+
color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
|
|
37
|
+
text-decoration-color: currentColor;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-theme-color='purple'] :where(a:focus-visible) {
|
|
41
|
+
outline: 2px solid var(--control-focus-ring);
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
border-radius: 0.15em;
|
|
44
|
+
text-decoration-color: currentColor;
|
|
45
|
+
}
|
|
@@ -8,3 +8,38 @@
|
|
|
8
8
|
--theme-neutral: oklch(0.742 0.032 8.67);
|
|
9
9
|
--theme-on-neutral: oklch(0.205 0.012 285.9);
|
|
10
10
|
}
|
|
11
|
+
|
|
12
|
+
[data-theme-color='red'] :where(h1, h2, h3, h4, h5, h6, a) {
|
|
13
|
+
color: var(--primary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[data-theme-color='red'] :where(a) {
|
|
17
|
+
text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
|
|
18
|
+
text-decoration-thickness: 0.08em;
|
|
19
|
+
text-underline-offset: 0.18em;
|
|
20
|
+
transition:
|
|
21
|
+
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
22
|
+
text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
|
|
23
|
+
outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
[data-theme-color='red'] :where(a:hover) {
|
|
27
|
+
color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
|
|
28
|
+
text-decoration-color: currentColor;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-theme-color='red'] :where(a:visited) {
|
|
32
|
+
color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-theme-color='red'] :where(a:active) {
|
|
36
|
+
color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
|
|
37
|
+
text-decoration-color: currentColor;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-theme-color='red'] :where(a:focus-visible) {
|
|
41
|
+
outline: 2px solid var(--control-focus-ring);
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
border-radius: 0.15em;
|
|
44
|
+
text-decoration-color: currentColor;
|
|
45
|
+
}
|
|
@@ -1,30 +1,64 @@
|
|
|
1
1
|
:root,
|
|
2
2
|
[data-theme-style='flat'] {
|
|
3
|
-
--typeface-plain: var(
|
|
4
|
-
--theme-style-flat-plain-font,
|
|
5
|
-
ui-sans-serif,
|
|
6
|
-
system-ui,
|
|
7
|
-
-apple-system,
|
|
8
|
-
BlinkMacSystemFont,
|
|
9
|
-
'Segoe UI',
|
|
10
|
-
sans-serif
|
|
11
|
-
);
|
|
3
|
+
--typeface-plain: var(--theme-style-flat-plain-font, 'Helvetica Neue', 'Arial Nova', sans-serif);
|
|
12
4
|
--typeface-brand: var(--theme-style-flat-brand-font, var(--typeface-plain));
|
|
13
|
-
--typeface-mono: var(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
);
|
|
5
|
+
--typeface-mono: var(--theme-style-flat-mono-font, 'Azeret Mono', ui-monospace, monospace);
|
|
6
|
+
--radius: 0.5rem;
|
|
7
|
+
--background: #f2f1ed;
|
|
8
|
+
--foreground: #26251e;
|
|
9
|
+
--card: #ebeae5;
|
|
10
|
+
--card-foreground: var(--foreground);
|
|
11
|
+
--popover: #f7f7f4;
|
|
12
|
+
--popover-foreground: var(--foreground);
|
|
13
|
+
--muted: #e6e5e0;
|
|
14
|
+
--muted-foreground: rgb(38 37 30 / 0.62);
|
|
15
|
+
--border: oklab(0.263084 -0.00230259 0.0124794 / 0.1);
|
|
16
|
+
--input: oklab(0.263084 -0.00230259 0.0124794 / 0.16);
|
|
17
|
+
--ring: color-mix(in oklab, var(--theme-primary) 34%, var(--foreground));
|
|
18
|
+
--sidebar: #e6e5e0;
|
|
19
|
+
--sidebar-foreground: var(--foreground);
|
|
20
|
+
--sidebar-primary: color-mix(in oklab, var(--foreground) 8%, var(--background));
|
|
21
|
+
--sidebar-primary-foreground: var(--foreground);
|
|
22
|
+
--sidebar-accent: color-mix(in oklab, var(--theme-primary) 12%, var(--sidebar));
|
|
23
|
+
--sidebar-accent-foreground: var(--foreground);
|
|
21
24
|
--shell-surface: var(--card);
|
|
22
25
|
--shell-foreground: var(--card-foreground);
|
|
23
26
|
--shell-border: var(--border);
|
|
24
|
-
--shell-shadow:
|
|
27
|
+
--shell-shadow:
|
|
28
|
+
rgb(0 0 0 / 0.14) 0 28px 70px, rgb(0 0 0 / 0.1) 0 14px 32px,
|
|
29
|
+
oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0 0 0 1px;
|
|
25
30
|
--shell-backdrop: var(--backdrop);
|
|
26
31
|
--surface-elevated: var(--popover);
|
|
27
32
|
--surface-elevated-foreground: var(--popover-foreground);
|
|
28
|
-
--surface-elevated-border:
|
|
29
|
-
--surface-elevated-shadow:
|
|
33
|
+
--surface-elevated-border: oklab(0.263084 -0.00230259 0.0124794 / 0.2);
|
|
34
|
+
--surface-elevated-shadow:
|
|
35
|
+
rgb(0 0 0 / 0.12) 0 24px 52px, rgb(0 0 0 / 0.08) 0 10px 24px,
|
|
36
|
+
oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0 0 0 1px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.dark[data-theme-style='flat'] {
|
|
40
|
+
--background: #181710;
|
|
41
|
+
--foreground: #ebe7de;
|
|
42
|
+
--card: #24221a;
|
|
43
|
+
--card-foreground: var(--foreground);
|
|
44
|
+
--popover: #2b2820;
|
|
45
|
+
--popover-foreground: var(--foreground);
|
|
46
|
+
--muted: #302d24;
|
|
47
|
+
--muted-foreground: rgb(235 231 222 / 0.72);
|
|
48
|
+
--border: rgb(235 231 222 / 0.12);
|
|
49
|
+
--input: rgb(235 231 222 / 0.18);
|
|
50
|
+
--ring: color-mix(in oklab, var(--theme-primary) 48%, var(--foreground));
|
|
51
|
+
--sidebar: #1f1d16;
|
|
52
|
+
--sidebar-foreground: var(--foreground);
|
|
53
|
+
--sidebar-primary: color-mix(in oklab, var(--foreground) 12%, var(--background));
|
|
54
|
+
--sidebar-primary-foreground: var(--foreground);
|
|
55
|
+
--sidebar-accent: color-mix(in oklab, var(--theme-primary) 18%, var(--sidebar));
|
|
56
|
+
--sidebar-accent-foreground: var(--foreground);
|
|
57
|
+
--shell-shadow:
|
|
58
|
+
rgb(0 0 0 / 0.44) 0 28px 70px, rgb(0 0 0 / 0.28) 0 14px 32px, rgb(235 231 222 / 0.08) 0 0 0 1px;
|
|
59
|
+
--surface-elevated: #2b2820;
|
|
60
|
+
--surface-elevated-foreground: var(--foreground);
|
|
61
|
+
--surface-elevated-border: rgb(235 231 222 / 0.12);
|
|
62
|
+
--surface-elevated-shadow:
|
|
63
|
+
rgb(0 0 0 / 0.42) 0 24px 60px, rgb(0 0 0 / 0.28) 0 12px 28px, rgb(235 231 222 / 0.08) 0 0 0 1px;
|
|
30
64
|
}
|
package/layout/styles/index.css
DELETED
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
[data-layout-container='full'] {
|
|
2
|
-
--layout-shell-max-width: 100%;
|
|
3
|
-
--layout-shell-padding: 0rem;
|
|
4
|
-
--layout-shell-radius: 0rem;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
[data-layout-container='boxed'] {
|
|
8
|
-
--layout-shell-max-width: 82rem;
|
|
9
|
-
--layout-shell-padding: clamp(1rem, 2vw, 2rem);
|
|
10
|
-
--layout-shell-radius: var(--radius-xl);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
[data-layout-mode='empty'] {
|
|
14
|
-
--layout-header-display: none;
|
|
15
|
-
--layout-sidebar-display: none;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
horizontal,
|
|
19
|
-
vertical {
|
|
20
|
-
display: block;
|
|
21
|
-
min-block-size: 100dvh;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
horizontal > layout,
|
|
25
|
-
vertical > layout {
|
|
26
|
-
display: block;
|
|
27
|
-
min-block-size: 100dvh;
|
|
28
|
-
padding: var(--layout-shell-padding);
|
|
29
|
-
background: var(--background);
|
|
30
|
-
color: var(--foreground);
|
|
31
|
-
transition: var(--ngt-chrome-transition);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
horizontal > layout > :is(content, shell-content),
|
|
35
|
-
vertical > layout > :is(content, shell-content) {
|
|
36
|
-
display: flex;
|
|
37
|
-
inline-size: min(100%, var(--layout-shell-max-width));
|
|
38
|
-
min-block-size: calc(100dvh - (var(--layout-shell-padding) * 2));
|
|
39
|
-
margin-inline: auto;
|
|
40
|
-
border: 1px solid var(--container-border);
|
|
41
|
-
border-radius: var(--layout-shell-radius);
|
|
42
|
-
background: var(--container-surface);
|
|
43
|
-
color: var(--container-foreground);
|
|
44
|
-
box-shadow: var(--container-shadow);
|
|
45
|
-
backdrop-filter: var(--container-backdrop);
|
|
46
|
-
-webkit-backdrop-filter: var(--container-backdrop);
|
|
47
|
-
overflow: hidden;
|
|
48
|
-
transition: var(--ngt-shell-transition);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
horizontal > layout > :is(content, shell-content) {
|
|
52
|
-
flex-direction: column;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
vertical > layout > :is(content, shell-content) {
|
|
56
|
-
flex-direction: column;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
horizontal > layout > :is(content, shell-content) > header {
|
|
60
|
-
display: var(--layout-header-display);
|
|
61
|
-
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
62
|
-
align-items: center;
|
|
63
|
-
gap: 1rem;
|
|
64
|
-
min-block-size: var(--layout-header-height);
|
|
65
|
-
padding: 0.875rem 1rem;
|
|
66
|
-
border-bottom: 1px solid var(--nav-border);
|
|
67
|
-
background: var(--nav-surface);
|
|
68
|
-
color: var(--nav-foreground);
|
|
69
|
-
transition: var(--ngt-chrome-transition);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
horizontal > layout > :is(content, shell-content) > header > brand,
|
|
73
|
-
horizontal > layout > :is(content, shell-content) > header > panel {
|
|
74
|
-
display: flex;
|
|
75
|
-
min-inline-size: 0;
|
|
76
|
-
align-items: center;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
horizontal > layout > :is(content, shell-content) > header > brand {
|
|
80
|
-
justify-content: flex-start;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
horizontal > layout > :is(content, shell-content) > header > nav {
|
|
84
|
-
display: flex;
|
|
85
|
-
min-inline-size: 0;
|
|
86
|
-
align-items: center;
|
|
87
|
-
justify-content: center;
|
|
88
|
-
gap: 0.75rem;
|
|
89
|
-
flex-wrap: wrap;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
horizontal > layout > :is(content, shell-content) > header > panel {
|
|
93
|
-
justify-content: flex-end;
|
|
94
|
-
gap: 0.5rem;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
vertical > layout > :is(content, shell-content) > aside {
|
|
98
|
-
display: var(--layout-sidebar-display);
|
|
99
|
-
flex-direction: column;
|
|
100
|
-
inline-size: 100%;
|
|
101
|
-
border-bottom: 1px solid var(--sidebar-chrome-border);
|
|
102
|
-
background: var(--sidebar-chrome-surface);
|
|
103
|
-
color: var(--sidebar-chrome-foreground);
|
|
104
|
-
transition: var(--ngt-chrome-transition);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
horizontal > layout > :is(content, shell-content) > main,
|
|
108
|
-
vertical > layout > :is(content, shell-content) > main {
|
|
109
|
-
flex: 1 1 auto;
|
|
110
|
-
min-inline-size: 0;
|
|
111
|
-
min-block-size: 0;
|
|
112
|
-
overflow: auto;
|
|
113
|
-
background-color: var(--background);
|
|
114
|
-
background-image: linear-gradient(
|
|
115
|
-
180deg,
|
|
116
|
-
color-mix(in oklab, var(--background) 94%, white 6%),
|
|
117
|
-
var(--background)
|
|
118
|
-
);
|
|
119
|
-
color: var(--foreground);
|
|
120
|
-
transition:
|
|
121
|
-
background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
|
|
122
|
-
color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
@media (min-width: 48rem) {
|
|
126
|
-
vertical > layout > :is(content, shell-content) {
|
|
127
|
-
flex-direction: row;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
vertical > layout > :is(content, shell-content) > aside {
|
|
131
|
-
inline-size: var(--layout-sidebar-width);
|
|
132
|
-
border-bottom: 0;
|
|
133
|
-
border-right: 1px solid var(--sidebar-chrome-border);
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
@media (max-width: 60rem) {
|
|
138
|
-
horizontal > layout > :is(content, shell-content) > header {
|
|
139
|
-
grid-template-columns: minmax(0, 1fr) auto;
|
|
140
|
-
align-items: flex-start;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
horizontal > layout > :is(content, shell-content) > header > nav {
|
|
144
|
-
grid-column: 1 / -1;
|
|
145
|
-
justify-content: flex-start;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
@media (max-width: 40rem) {
|
|
150
|
-
horizontal > layout > :is(content, shell-content) > header {
|
|
151
|
-
grid-template-columns: 1fr;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
horizontal > layout > :is(content, shell-content) > header > panel {
|
|
155
|
-
justify-content: flex-start;
|
|
156
|
-
}
|
|
157
|
-
}
|