@ngstarter-ui/components 1.0.48 → 21.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +109 -109
  2. package/fesm2022/ngstarter-ui-components-color-scheme.mjs +24 -1
  3. package/fesm2022/ngstarter-ui-components-color-scheme.mjs.map +1 -1
  4. package/fesm2022/ngstarter-ui-components-core.mjs +80 -52
  5. package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/styles/_tokens.scss +98 -86
  8. package/styles/themes/modern.scss +54 -54
package/README.md CHANGED
@@ -89,124 +89,124 @@ The same values can be controlled with document attributes:
89
89
 
90
90
  The documentation site includes live demos and API examples for each component:
91
91
 
92
- - [Documentation](https://ngstarter.com)
93
- - [Installation](https://ngstarter.com/installation)
94
- - [AI component registry](https://ngstarter.com/ai/component-registry.json)
92
+ - [Documentation](https://docs.ngstarter.com)
93
+ - [Installation](https://docs.ngstarter.com/installation)
94
+ - [AI component registry](https://docs.ngstarter.com/ai/component-registry.json)
95
95
 
96
96
  ### Forms
97
97
 
98
- - [Autocomplete](https://ngstarter.com/forms/autocomplete)
99
- - [Button](https://ngstarter.com/forms/buttons)
100
- - [Button Toggle](https://ngstarter.com/forms/button-toggle)
101
- - [Checkbox](https://ngstarter.com/forms/checkbox)
102
- - [Country Select](https://ngstarter.com/forms/country)
103
- - [Currency Select](https://ngstarter.com/forms/currency-select)
104
- - [Date Format Select](https://ngstarter.com/forms/date-format-select)
105
- - [Form Renderer](https://ngstarter.com/forms/form-renderer)
106
- - [Inline Text Edit](https://ngstarter.com/forms/inline-text-edit)
107
- - [Input](https://ngstarter.com/forms/input)
108
- - [Input Mask](https://ngstarter.com/forms/input-mask)
109
- - [Input Validator](https://ngstarter.com/forms/input-validator)
110
- - [Number Input](https://ngstarter.com/forms/number-input)
111
- - [Password Strength](https://ngstarter.com/forms/password-strength)
112
- - [Phone Input](https://ngstarter.com/forms/phone-input)
113
- - [Pin Input](https://ngstarter.com/forms/pin-input)
114
- - [Radio](https://ngstarter.com/forms/radio)
115
- - [Segmented](https://ngstarter.com/forms/segmented)
116
- - [Select](https://ngstarter.com/forms/select)
117
- - [Slide Toggle](https://ngstarter.com/forms/slide-toggle)
118
- - [Timezone Select](https://ngstarter.com/forms/timezone)
98
+ - [Autocomplete](https://docs.ngstarter.com/forms/autocomplete)
99
+ - [Button](https://docs.ngstarter.com/forms/buttons)
100
+ - [Button Toggle](https://docs.ngstarter.com/forms/button-toggle)
101
+ - [Checkbox](https://docs.ngstarter.com/forms/checkbox)
102
+ - [Country Select](https://docs.ngstarter.com/forms/country)
103
+ - [Currency Select](https://docs.ngstarter.com/forms/currency-select)
104
+ - [Date Format Select](https://docs.ngstarter.com/forms/date-format-select)
105
+ - [Form Renderer](https://docs.ngstarter.com/forms/form-renderer)
106
+ - [Inline Text Edit](https://docs.ngstarter.com/forms/inline-text-edit)
107
+ - [Input](https://docs.ngstarter.com/forms/input)
108
+ - [Input Mask](https://docs.ngstarter.com/forms/input-mask)
109
+ - [Input Validator](https://docs.ngstarter.com/forms/input-validator)
110
+ - [Number Input](https://docs.ngstarter.com/forms/number-input)
111
+ - [Password Strength](https://docs.ngstarter.com/forms/password-strength)
112
+ - [Phone Input](https://docs.ngstarter.com/forms/phone-input)
113
+ - [Pin Input](https://docs.ngstarter.com/forms/pin-input)
114
+ - [Radio](https://docs.ngstarter.com/forms/radio)
115
+ - [Segmented](https://docs.ngstarter.com/forms/segmented)
116
+ - [Select](https://docs.ngstarter.com/forms/select)
117
+ - [Slide Toggle](https://docs.ngstarter.com/forms/slide-toggle)
118
+ - [Timezone Select](https://docs.ngstarter.com/forms/timezone)
119
119
 
120
120
  ### Navigation
121
121
 
122
- - [Breadcrumbs](https://ngstarter.com/navigation/breadcrumbs)
123
- - [Navigation](https://ngstarter.com/navigation/navigation)
124
- - [Rail Navigation](https://ngstarter.com/navigation/rail-nav)
125
- - [Sidebar](https://ngstarter.com/navigation/sidebar)
126
- - [Side Panel](https://ngstarter.com/navigation/side-panel)
127
- - [Tab Panel](https://ngstarter.com/navigation/tab-panel)
122
+ - [Breadcrumbs](https://docs.ngstarter.com/navigation/breadcrumbs)
123
+ - [Navigation](https://docs.ngstarter.com/navigation/navigation)
124
+ - [Rail Navigation](https://docs.ngstarter.com/navigation/rail-nav)
125
+ - [Sidebar](https://docs.ngstarter.com/navigation/sidebar)
126
+ - [Side Panel](https://docs.ngstarter.com/navigation/side-panel)
127
+ - [Tab Panel](https://docs.ngstarter.com/navigation/tab-panel)
128
128
 
129
129
  ### Data, Layout, And Libraries
130
130
 
131
- - [Content Editor](https://ngstarter.com/libraries/content-editor)
132
- - [Data View](https://ngstarter.com/libraries/data-view)
133
- - [Image Designer](https://ngstarter.com/libraries/image-designer)
134
- - [Kanban Board](https://ngstarter.com/libraries/kanban-board)
135
- - [Micro Charts](https://ngstarter.com/micro-charts)
136
- - [Video Player](https://ngstarter.com/libraries/video-player)
137
- - [Visual Builder](https://ngstarter.com/libraries/visual-builder)
131
+ - [Content Editor](https://docs.ngstarter.com/libraries/content-editor)
132
+ - [Data View](https://docs.ngstarter.com/libraries/data-view)
133
+ - [Image Designer](https://docs.ngstarter.com/libraries/image-designer)
134
+ - [Kanban Board](https://docs.ngstarter.com/libraries/kanban-board)
135
+ - [Micro Charts](https://docs.ngstarter.com/micro-charts)
136
+ - [Video Player](https://docs.ngstarter.com/libraries/video-player)
137
+ - [Visual Builder](https://docs.ngstarter.com/libraries/visual-builder)
138
138
 
139
139
  ### Components
140
140
 
141
- - [Action Required](https://ngstarter.com/components/action-required)
142
- - [Alert](https://ngstarter.com/components/alert)
143
- - [Announcement](https://ngstarter.com/components/announcement)
144
- - [Avatar](https://ngstarter.com/components/avatar)
145
- - [Badge](https://ngstarter.com/components/badge)
146
- - [Block Loader](https://ngstarter.com/components/block-loader)
147
- - [Bottom Sheet](https://ngstarter.com/components/bottom-sheet)
148
- - [Card](https://ngstarter.com/components/card)
149
- - [Card Overlay](https://ngstarter.com/components/card-overlay)
150
- - [Carousel](https://ngstarter.com/components/carousel)
151
- - [Chips](https://ngstarter.com/components/chips)
152
- - [Code Highlighter](https://ngstarter.com/components/code-highlighter)
153
- - [Color Picker](https://ngstarter.com/components/color-picker)
154
- - [Color Switcher](https://ngstarter.com/components/color-switcher)
155
- - [Command Bar](https://ngstarter.com/components/command-bar)
156
- - [Comment Editor](https://ngstarter.com/components/comment-editor)
157
- - [Comparison Slider](https://ngstarter.com/components/comparison-slider)
158
- - [Confirm](https://ngstarter.com/components/confirm)
159
- - [Content Fade](https://ngstarter.com/components/content-fade)
160
- - [Cookie Popup](https://ngstarter.com/components/cookie-popup)
161
- - [Crop](https://ngstarter.com/components/crop)
162
- - [Datepicker](https://ngstarter.com/components/datepicker)
163
- - [Dialog](https://ngstarter.com/components/dialog)
164
- - [Divider](https://ngstarter.com/components/divider)
165
- - [Drawer](https://ngstarter.com/components/drawer)
166
- - [Emoji Picker](https://ngstarter.com/components/emoji-picker)
167
- - [Empty State](https://ngstarter.com/components/empty-state)
168
- - [Expand](https://ngstarter.com/components/expand)
169
- - [Expansion Panel](https://ngstarter.com/components/expansion-panel)
170
- - [Filter Builder](https://ngstarter.com/components/filter-builder)
171
- - [Gauge](https://ngstarter.com/components/gauge)
172
- - [Grid](https://ngstarter.com/components/grid)
173
- - [Guided Tour](https://ngstarter.com/components/guided-tour)
174
- - [Icon](https://ngstarter.com/components/icon)
175
- - [Image Placeholder](https://ngstarter.com/components/image-placeholder)
176
- - [Image Resizer](https://ngstarter.com/components/image-resizer)
177
- - [Image Viewer](https://ngstarter.com/components/image-viewer)
178
- - [Image Zoom Viewer](https://ngstarter.com/components/image-zoom-viewer)
179
- - [Incidents](https://ngstarter.com/components/incidents)
180
- - [Kbd](https://ngstarter.com/components/kbd)
181
- - [Layout](https://ngstarter.com/components/layout)
182
- - [List](https://ngstarter.com/components/list)
183
- - [Marquee](https://ngstarter.com/components/marquee)
184
- - [Menu](https://ngstarter.com/components/menu)
185
- - [Notifications](https://ngstarter.com/components/notifications)
186
- - [Paginator](https://ngstarter.com/components/paginator)
187
- - [Panel](https://ngstarter.com/components/panel)
188
- - [Popover](https://ngstarter.com/components/popover)
189
- - [Progress Bar](https://ngstarter.com/components/progress-bar)
190
- - [Progress Spinner](https://ngstarter.com/components/progress-spinner)
191
- - [Resizable Container](https://ngstarter.com/components/resizable-container)
192
- - [Screen Loader](https://ngstarter.com/components/screen-loader)
193
- - [Sidenav](https://ngstarter.com/components/sidenav)
194
- - [Signature Pad](https://ngstarter.com/components/signature-pad)
195
- - [Skeleton](https://ngstarter.com/components/skeleton)
196
- - [Slider](https://ngstarter.com/components/slider)
197
- - [Snack Bar](https://ngstarter.com/components/snackbar)
198
- - [Split Pane](https://ngstarter.com/components/split-pane)
199
- - [Stepper](https://ngstarter.com/components/stepper)
200
- - [Suggestions](https://ngstarter.com/components/suggestions)
201
- - [Table](https://ngstarter.com/components/table)
202
- - [Tabs](https://ngstarter.com/components/tabs)
203
- - [Text Editor](https://ngstarter.com/components/text-editor)
204
- - [Thumbnail Maker](https://ngstarter.com/components/thumbnail-maker)
205
- - [Tiles](https://ngstarter.com/components/tiles)
206
- - [Timeline](https://ngstarter.com/components/timeline)
207
- - [Timepicker](https://ngstarter.com/components/timepicker)
208
- - [Toolbar](https://ngstarter.com/components/toolbar)
209
- - [Tooltip](https://ngstarter.com/components/tooltip)
210
- - [Tree](https://ngstarter.com/components/tree)
211
- - [Upload](https://ngstarter.com/components/upload)
212
- - [Video Viewer](https://ngstarter.com/components/video-viewer)
141
+ - [Action Required](https://docs.ngstarter.com/components/action-required)
142
+ - [Alert](https://docs.ngstarter.com/components/alert)
143
+ - [Announcement](https://docs.ngstarter.com/components/announcement)
144
+ - [Avatar](https://docs.ngstarter.com/components/avatar)
145
+ - [Badge](https://docs.ngstarter.com/components/badge)
146
+ - [Block Loader](https://docs.ngstarter.com/components/block-loader)
147
+ - [Bottom Sheet](https://docs.ngstarter.com/components/bottom-sheet)
148
+ - [Card](https://docs.ngstarter.com/components/card)
149
+ - [Card Overlay](https://docs.ngstarter.com/components/card-overlay)
150
+ - [Carousel](https://docs.ngstarter.com/components/carousel)
151
+ - [Chips](https://docs.ngstarter.com/components/chips)
152
+ - [Code Highlighter](https://docs.ngstarter.com/components/code-highlighter)
153
+ - [Color Picker](https://docs.ngstarter.com/components/color-picker)
154
+ - [Color Switcher](https://docs.ngstarter.com/components/color-switcher)
155
+ - [Command Bar](https://docs.ngstarter.com/components/command-bar)
156
+ - [Comment Editor](https://docs.ngstarter.com/components/comment-editor)
157
+ - [Comparison Slider](https://docs.ngstarter.com/components/comparison-slider)
158
+ - [Confirm](https://docs.ngstarter.com/components/confirm)
159
+ - [Content Fade](https://docs.ngstarter.com/components/content-fade)
160
+ - [Cookie Popup](https://docs.ngstarter.com/components/cookie-popup)
161
+ - [Crop](https://docs.ngstarter.com/components/crop)
162
+ - [Datepicker](https://docs.ngstarter.com/components/datepicker)
163
+ - [Dialog](https://docs.ngstarter.com/components/dialog)
164
+ - [Divider](https://docs.ngstarter.com/components/divider)
165
+ - [Drawer](https://docs.ngstarter.com/components/drawer)
166
+ - [Emoji Picker](https://docs.ngstarter.com/components/emoji-picker)
167
+ - [Empty State](https://docs.ngstarter.com/components/empty-state)
168
+ - [Expand](https://docs.ngstarter.com/components/expand)
169
+ - [Expansion Panel](https://docs.ngstarter.com/components/expansion-panel)
170
+ - [Filter Builder](https://docs.ngstarter.com/components/filter-builder)
171
+ - [Gauge](https://docs.ngstarter.com/components/gauge)
172
+ - [Grid](https://docs.ngstarter.com/components/grid)
173
+ - [Guided Tour](https://docs.ngstarter.com/components/guided-tour)
174
+ - [Icon](https://docs.ngstarter.com/components/icon)
175
+ - [Image Placeholder](https://docs.ngstarter.com/components/image-placeholder)
176
+ - [Image Resizer](https://docs.ngstarter.com/components/image-resizer)
177
+ - [Image Viewer](https://docs.ngstarter.com/components/image-viewer)
178
+ - [Image Zoom Viewer](https://docs.ngstarter.com/components/image-zoom-viewer)
179
+ - [Incidents](https://docs.ngstarter.com/components/incidents)
180
+ - [Kbd](https://docs.ngstarter.com/components/kbd)
181
+ - [Layout](https://docs.ngstarter.com/components/layout)
182
+ - [List](https://docs.ngstarter.com/components/list)
183
+ - [Marquee](https://docs.ngstarter.com/components/marquee)
184
+ - [Menu](https://docs.ngstarter.com/components/menu)
185
+ - [Notifications](https://docs.ngstarter.com/components/notifications)
186
+ - [Paginator](https://docs.ngstarter.com/components/paginator)
187
+ - [Panel](https://docs.ngstarter.com/components/panel)
188
+ - [Popover](https://docs.ngstarter.com/components/popover)
189
+ - [Progress Bar](https://docs.ngstarter.com/components/progress-bar)
190
+ - [Progress Spinner](https://docs.ngstarter.com/components/progress-spinner)
191
+ - [Resizable Container](https://docs.ngstarter.com/components/resizable-container)
192
+ - [Screen Loader](https://docs.ngstarter.com/components/screen-loader)
193
+ - [Sidenav](https://docs.ngstarter.com/components/sidenav)
194
+ - [Signature Pad](https://docs.ngstarter.com/components/signature-pad)
195
+ - [Skeleton](https://docs.ngstarter.com/components/skeleton)
196
+ - [Slider](https://docs.ngstarter.com/components/slider)
197
+ - [Snack Bar](https://docs.ngstarter.com/components/snackbar)
198
+ - [Split Pane](https://docs.ngstarter.com/components/split-pane)
199
+ - [Stepper](https://docs.ngstarter.com/components/stepper)
200
+ - [Suggestions](https://docs.ngstarter.com/components/suggestions)
201
+ - [Table](https://docs.ngstarter.com/components/table)
202
+ - [Tabs](https://docs.ngstarter.com/components/tabs)
203
+ - [Text Editor](https://docs.ngstarter.com/components/text-editor)
204
+ - [Thumbnail Maker](https://docs.ngstarter.com/components/thumbnail-maker)
205
+ - [Tiles](https://docs.ngstarter.com/components/tiles)
206
+ - [Timeline](https://docs.ngstarter.com/components/timeline)
207
+ - [Timepicker](https://docs.ngstarter.com/components/timepicker)
208
+ - [Toolbar](https://docs.ngstarter.com/components/toolbar)
209
+ - [Tooltip](https://docs.ngstarter.com/components/tooltip)
210
+ - [Tree](https://docs.ngstarter.com/components/tree)
211
+ - [Upload](https://docs.ngstarter.com/components/upload)
212
+ - [Video Viewer](https://docs.ngstarter.com/components/video-viewer)
package/fesm2022/ngstarter-ui-components-color-scheme.mjs CHANGED
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { inject, PLATFORM_ID, DOCUMENT, DestroyRef, effect, TemplateRef, Directive, ViewContainerRef, contentChild, computed, output, ChangeDetectionStrategy, Component } from '@angular/core';
3
3
  import { isPlatformBrowser } from '@angular/common';
4
4
  import { signalStore, withState, withMethods, patchState, withHooks } from '@ngrx/signals';
5
+ import { ThemeManagerService } from '@ngstarter-ui/components/core';
5
6
  import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
6
7
  import { Button } from '@ngstarter-ui/components/button';
7
8
 
@@ -11,9 +12,14 @@ const initialState = {
11
12
  theme: 'auto',
12
13
  resolvedTheme: 'light',
13
14
  };
15
+ const COLOR_SCHEMES = ['light', 'dark', 'auto'];
16
+ function isColorScheme(value) {
17
+ return value !== null && COLOR_SCHEMES.includes(value);
18
+ }
14
19
  const ColorSchemeStore = signalStore(withState(initialState), withMethods((store) => {
15
20
  const platformId = inject(PLATFORM_ID);
16
21
  const document = inject(DOCUMENT);
22
+ const themeManager = inject(ThemeManagerService);
17
23
  const resolveScheme = (scheme) => {
18
24
  if (scheme !== 'auto') {
19
25
  return scheme;
@@ -27,8 +33,14 @@ const ColorSchemeStore = signalStore(withState(initialState), withMethods((store
27
33
  theme: scheme,
28
34
  resolvedTheme: resolveScheme(scheme),
29
35
  });
36
+ themeManager.setColorScheme(scheme);
30
37
  if (isPlatformBrowser(platformId)) {
31
- localStorage.setItem(COLOR_SCHEME_LOCAL_KEY, scheme);
38
+ try {
39
+ localStorage.setItem(COLOR_SCHEME_LOCAL_KEY, scheme);
40
+ }
41
+ catch {
42
+ // Ignore unavailable storage so the switcher still works in memory.
43
+ }
32
44
  }
33
45
  },
34
46
  };
@@ -38,6 +50,17 @@ const ColorSchemeStore = signalStore(withState(initialState), withMethods((store
38
50
  const platformId = inject(PLATFORM_ID);
39
51
  const destroyRef = inject(DestroyRef);
40
52
  const media = document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');
53
+ if (isPlatformBrowser(platformId)) {
54
+ try {
55
+ const storedScheme = localStorage.getItem(COLOR_SCHEME_LOCAL_KEY);
56
+ if (isColorScheme(storedScheme)) {
57
+ store.setScheme(storedScheme);
58
+ }
59
+ }
60
+ catch {
61
+ // Ignore unavailable storage so the default auto scheme can be resolved below.
62
+ }
63
+ }
41
64
  if (isPlatformBrowser(platformId) && media) {
42
65
  const updateResolvedScheme = () => {
43
66
  if (store.theme() === 'auto') {
package/fesm2022/ngstarter-ui-components-color-scheme.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ngstarter-ui-components-color-scheme.mjs","sources":["../../../projects/components/color-scheme/src/color-scheme.model.ts","../../../projects/components/color-scheme/src/color-scheme.store.ts","../../../projects/components/color-scheme/src/color-scheme-light.directive.ts","../../../projects/components/color-scheme/src/color-scheme-dark.directive.ts","../../../projects/components/color-scheme/src/color-scheme-auto.directive.ts","../../../projects/components/color-scheme/src/color-scheme-switcher/color-scheme-switcher.ts","../../../projects/components/color-scheme/src/color-scheme-switcher/color-scheme-switcher.html","../../../projects/components/color-scheme/ngstarter-ui-components-color-scheme.ts"],"sourcesContent":["export const COLOR_SCHEME_LOCAL_KEY = 'ngstarter-color-scheme';\nexport type ColorScheme = 'light' | 'dark' | 'auto';\nexport type ResolvedColorScheme = Exclude<ColorScheme, 'auto'>;\n","import { DestroyRef, effect, inject, PLATFORM_ID, DOCUMENT } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { patchState, signalStore, withHooks, withMethods, withState } from '@ngrx/signals';\nimport { COLOR_SCHEME_LOCAL_KEY, ColorScheme, ResolvedColorScheme } from './color-scheme.model';\n\ntype ColorSchemeState = {\n theme: ColorScheme;\n resolvedTheme: ResolvedColorScheme;\n};\n\nconst initialState: ColorSchemeState = {\n theme: 'auto',\n resolvedTheme: 'light',\n};\n\nexport const ColorSchemeStore = signalStore(\n withState(initialState),\n withMethods((store) => {\n const platformId = inject(PLATFORM_ID);\n const document = inject(DOCUMENT);\n\n const resolveScheme = (scheme: ColorScheme): ResolvedColorScheme => {\n if (scheme !== 'auto') {\n return scheme;\n }\n\n const media = document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');\n return media?.matches ? 'dark' : 'light';\n };\n\n return {\n setScheme(scheme: ColorScheme): void {\n patchState(store, {\n theme: scheme,\n resolvedTheme: resolveScheme(scheme),\n });\n\n if (isPlatformBrowser(platformId)) {\n localStorage.setItem(COLOR_SCHEME_LOCAL_KEY, scheme);\n }\n },\n };\n }),\n withHooks({\n onInit(store) {\n const document = inject(DOCUMENT);\n const platformId = inject(PLATFORM_ID);\n const destroyRef = inject(DestroyRef);\n const media = document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');\n\n if (isPlatformBrowser(platformId) && media) {\n const updateResolvedScheme = () => {\n if (store.theme() === 'auto') {\n patchState(store, { resolvedTheme: media.matches ? 'dark' : 'light' });\n }\n };\n\n updateResolvedScheme();\n media.addEventListener('change', updateResolvedScheme);\n destroyRef.onDestroy(() => media.removeEventListener('change', updateResolvedScheme));\n }\n\n effect(() => {\n const scheme = store.theme();\n const resolvedScheme = scheme === 'auto' ? store.resolvedTheme() : scheme;\n\n if (resolvedScheme === 'dark') {\n document.documentElement.classList.add('dark');\n } else if (resolvedScheme === 'light') {\n document.documentElement.classList.remove('dark');\n }\n\n document.documentElement.setAttribute('data-ngs-color-scheme', scheme);\n document.documentElement.setAttribute('data-ngs-resolved-color-scheme', resolvedScheme);\n });\n },\n }),\n);\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[ngsColorSchemeLight]'\n})\nexport class ColorSchemeLightDirective {\n readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[ngsColorSchemeDark]'\n})\nexport class ColorSchemeDarkDirective {\n readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[ngsColorSchemeAuto]'\n})\nexport class ColorSchemeAutoDirective {\n readonly templateRef = inject(TemplateRef);\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n effect,\n inject,\n output,\n ViewContainerRef\n} from '@angular/core';\nimport { ColorSchemeStore } from '../color-scheme.store';\nimport { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';\nimport { ColorSchemeLightDirective } from '../color-scheme-light.directive';\nimport { ColorSchemeDarkDirective } from '../color-scheme-dark.directive';\nimport { ColorScheme } from '../color-scheme.model';\nimport { Button } from '@ngstarter-ui/components/button';\nimport { ColorSchemeAutoDirective } from '../color-scheme-auto.directive';\n\n@Component({\n selector: 'ngs-color-scheme-switcher',\n exportAs: 'ngsColorSchemeSwitcher',\n imports: [\n\n CdkPortalOutlet,\n Button,\n ],\n templateUrl: './color-scheme-switcher.html',\n styleUrl: './color-scheme-switcher.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-color-scheme-switcher',\n ngSkipHydration: 'true' // important! to prevent double render for icons\n }\n})\nexport class ColorSchemeSwitcher {\n private store = inject(ColorSchemeStore);\n private viewContainerRef = inject(ViewContainerRef);\n\n private lightRef = contentChild(ColorSchemeLightDirective);\n private darkRef = contentChild(ColorSchemeDarkDirective);\n private autoRef = contentChild(ColorSchemeAutoDirective);\n\n readonly colorScheme = computed(() => this.store.theme());\n readonly resolvedColorScheme = computed(() => this.store.resolvedTheme());\n readonly colorSchemeChanged = output<ColorScheme>();\n\n protected portal: TemplatePortal<any> | null = null;\n\n constructor() {\n effect(() => {\n this.colorScheme();\n this.resolvedColorScheme();\n this.lightRef();\n this.darkRef();\n this.autoRef();\n this.setPortal();\n });\n }\n\n protected toggleScheme() {\n const order: ColorScheme[] = ['light', 'dark', 'auto'];\n const currentIndex = order.indexOf(this.store.theme());\n const newScheme = order[(currentIndex + 1) % order.length];\n this.store.setScheme(newScheme);\n this.setPortal();\n this.colorSchemeChanged.emit(this.store.theme());\n }\n\n private setPortal() {\n const lightRef = this.lightRef();\n const darkRef = this.darkRef();\n const autoRef = this.autoRef();\n\n if (this.colorScheme() === 'auto' && autoRef) {\n this.portal = new TemplatePortal(autoRef.templateRef, this.viewContainerRef);\n } else if (this.resolvedColorScheme() === 'light' && lightRef) {\n this.portal = new TemplatePortal(lightRef.templateRef, this.viewContainerRef);\n } else if (this.resolvedColorScheme() === 'dark' && darkRef) {\n this.portal = new TemplatePortal(darkRef.templateRef, this.viewContainerRef);\n }\n }\n}\n","<button ngsIconButton (click)=\"toggleScheme()\">\n @if (portal) {\n <ng-container [cdkPortalOutlet]=\"portal\"/>\n }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ngstarter-ui-components-color-scheme.mjs","sources":["../../../projects/components/color-scheme/src/color-scheme.model.ts","../../../projects/components/color-scheme/src/color-scheme.store.ts","../../../projects/components/color-scheme/src/color-scheme-light.directive.ts","../../../projects/components/color-scheme/src/color-scheme-dark.directive.ts","../../../projects/components/color-scheme/src/color-scheme-auto.directive.ts","../../../projects/components/color-scheme/src/color-scheme-switcher/color-scheme-switcher.ts","../../../projects/components/color-scheme/src/color-scheme-switcher/color-scheme-switcher.html","../../../projects/components/color-scheme/ngstarter-ui-components-color-scheme.ts"],"sourcesContent":["export const COLOR_SCHEME_LOCAL_KEY = 'ngstarter-color-scheme';\nexport type ColorScheme = 'light' | 'dark' | 'auto';\nexport type ResolvedColorScheme = Exclude<ColorScheme, 'auto'>;\n","import { DestroyRef, effect, inject, PLATFORM_ID, DOCUMENT } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { patchState, signalStore, withHooks, withMethods, withState } from '@ngrx/signals';\nimport { ThemeManagerService } from '@ngstarter-ui/components/core';\nimport { COLOR_SCHEME_LOCAL_KEY, ColorScheme, ResolvedColorScheme } from './color-scheme.model';\n\ntype ColorSchemeState = {\n theme: ColorScheme;\n resolvedTheme: ResolvedColorScheme;\n};\n\nconst initialState: ColorSchemeState = {\n theme: 'auto',\n resolvedTheme: 'light',\n};\n\nconst COLOR_SCHEMES: readonly ColorScheme[] = ['light', 'dark', 'auto'];\n\nfunction isColorScheme(value: string | null): value is ColorScheme {\n return value !== null && COLOR_SCHEMES.includes(value as ColorScheme);\n}\n\nexport const ColorSchemeStore = signalStore(\n withState(initialState),\n withMethods((store) => {\n const platformId = inject(PLATFORM_ID);\n const document = inject(DOCUMENT);\n const themeManager = inject(ThemeManagerService);\n\n const resolveScheme = (scheme: ColorScheme): ResolvedColorScheme => {\n if (scheme !== 'auto') {\n return scheme;\n }\n\n const media = document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');\n return media?.matches ? 'dark' : 'light';\n };\n\n return {\n setScheme(scheme: ColorScheme): void {\n patchState(store, {\n theme: scheme,\n resolvedTheme: resolveScheme(scheme),\n });\n\n themeManager.setColorScheme(scheme);\n\n if (isPlatformBrowser(platformId)) {\n try {\n localStorage.setItem(COLOR_SCHEME_LOCAL_KEY, scheme);\n } catch {\n // Ignore unavailable storage so the switcher still works in memory.\n }\n }\n },\n };\n }),\n withHooks({\n onInit(store) {\n const document = inject(DOCUMENT);\n const platformId = inject(PLATFORM_ID);\n const destroyRef = inject(DestroyRef);\n const media = document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');\n\n if (isPlatformBrowser(platformId)) {\n try {\n const storedScheme = localStorage.getItem(COLOR_SCHEME_LOCAL_KEY);\n\n if (isColorScheme(storedScheme)) {\n store.setScheme(storedScheme);\n }\n } catch {\n // Ignore unavailable storage so the default auto scheme can be resolved below.\n }\n }\n\n if (isPlatformBrowser(platformId) && media) {\n const updateResolvedScheme = () => {\n if (store.theme() === 'auto') {\n patchState(store, { resolvedTheme: media.matches ? 'dark' : 'light' });\n }\n };\n\n updateResolvedScheme();\n media.addEventListener('change', updateResolvedScheme);\n destroyRef.onDestroy(() => media.removeEventListener('change', updateResolvedScheme));\n }\n\n effect(() => {\n const scheme = store.theme();\n const resolvedScheme = scheme === 'auto' ? store.resolvedTheme() : scheme;\n\n if (resolvedScheme === 'dark') {\n document.documentElement.classList.add('dark');\n } else if (resolvedScheme === 'light') {\n document.documentElement.classList.remove('dark');\n }\n\n document.documentElement.setAttribute('data-ngs-color-scheme', scheme);\n document.documentElement.setAttribute('data-ngs-resolved-color-scheme', resolvedScheme);\n });\n },\n }),\n);\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[ngsColorSchemeLight]'\n})\nexport class ColorSchemeLightDirective {\n readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[ngsColorSchemeDark]'\n})\nexport class ColorSchemeDarkDirective {\n readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[ngsColorSchemeAuto]'\n})\nexport class ColorSchemeAutoDirective {\n readonly templateRef = inject(TemplateRef);\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n effect,\n inject,\n output,\n ViewContainerRef\n} from '@angular/core';\nimport { ColorSchemeStore } from '../color-scheme.store';\nimport { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';\nimport { ColorSchemeLightDirective } from '../color-scheme-light.directive';\nimport { ColorSchemeDarkDirective } from '../color-scheme-dark.directive';\nimport { ColorScheme } from '../color-scheme.model';\nimport { Button } from '@ngstarter-ui/components/button';\nimport { ColorSchemeAutoDirective } from '../color-scheme-auto.directive';\n\n@Component({\n selector: 'ngs-color-scheme-switcher',\n exportAs: 'ngsColorSchemeSwitcher',\n imports: [\n\n CdkPortalOutlet,\n Button,\n ],\n templateUrl: './color-scheme-switcher.html',\n styleUrl: './color-scheme-switcher.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-color-scheme-switcher',\n ngSkipHydration: 'true' // important! to prevent double render for icons\n }\n})\nexport class ColorSchemeSwitcher {\n private store = inject(ColorSchemeStore);\n private viewContainerRef = inject(ViewContainerRef);\n\n private lightRef = contentChild(ColorSchemeLightDirective);\n private darkRef = contentChild(ColorSchemeDarkDirective);\n private autoRef = contentChild(ColorSchemeAutoDirective);\n\n readonly colorScheme = computed(() => this.store.theme());\n readonly resolvedColorScheme = computed(() => this.store.resolvedTheme());\n readonly colorSchemeChanged = output<ColorScheme>();\n\n protected portal: TemplatePortal<any> | null = null;\n\n constructor() {\n effect(() => {\n this.colorScheme();\n this.resolvedColorScheme();\n this.lightRef();\n this.darkRef();\n this.autoRef();\n this.setPortal();\n });\n }\n\n protected toggleScheme() {\n const order: ColorScheme[] = ['light', 'dark', 'auto'];\n const currentIndex = order.indexOf(this.store.theme());\n const newScheme = order[(currentIndex + 1) % order.length];\n this.store.setScheme(newScheme);\n this.setPortal();\n this.colorSchemeChanged.emit(this.store.theme());\n }\n\n private setPortal() {\n const lightRef = this.lightRef();\n const darkRef = this.darkRef();\n const autoRef = this.autoRef();\n\n if (this.colorScheme() === 'auto' && autoRef) {\n this.portal = new TemplatePortal(autoRef.templateRef, this.viewContainerRef);\n } else if (this.resolvedColorScheme() === 'light' && lightRef) {\n this.portal = new TemplatePortal(lightRef.templateRef, this.viewContainerRef);\n } else if (this.resolvedColorScheme() === 'dark' && darkRef) {\n this.portal = new TemplatePortal(darkRef.templateRef, this.viewContainerRef);\n }\n }\n}\n","<button ngsIconButton (click)=\"toggleScheme()\">\n @if (portal) {\n <ng-container [cdkPortalOutlet]=\"portal\"/>\n }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/ngstarter-ui-components-core.mjs CHANGED
@@ -1268,7 +1268,7 @@ function generateNgsThemeProperties(primaryColor, colorScheme = 'light') {
1268
1268
  return {
1269
1269
  '--ngs-color-primary-seed': primaryColor,
1270
1270
  '--ngs-color-primary': primaryColor,
1271
- '--ngs-color-on-primary': contrastColor('--ngs-color-primary'),
1271
+ '--ngs-color-on-primary': '#ffffff',
1272
1272
  };
1273
1273
  }
1274
1274
  return colorScheme === 'dark'
@@ -1298,27 +1298,27 @@ function generateLightThemeProperties(seed) {
1298
1298
  return withSharedGeneratedProperties({
1299
1299
  '--ngs-color-primary': primary,
1300
1300
  '--ngs-color-primary-seed': primary,
1301
- '--ngs-color-on-primary': contrastColor('--ngs-color-primary'),
1301
+ '--ngs-color-on-primary': contrastColor(primary),
1302
1302
  '--ngs-color-primary-container': primaryContainer,
1303
- '--ngs-color-on-primary-container': contrastColor('--ngs-color-primary-container'),
1303
+ '--ngs-color-on-primary-container': contrastColor(primaryContainer),
1304
1304
  '--ngs-color-secondary': secondary,
1305
- '--ngs-color-on-secondary': contrastColor('--ngs-color-secondary'),
1305
+ '--ngs-color-on-secondary': contrastColor(secondary),
1306
1306
  '--ngs-color-secondary-container': secondaryContainer,
1307
- '--ngs-color-on-secondary-container': contrastColor('--ngs-color-secondary-container'),
1307
+ '--ngs-color-on-secondary-container': contrastColor(secondaryContainer),
1308
1308
  '--ngs-color-tertiary': tertiary,
1309
- '--ngs-color-on-tertiary': contrastColor('--ngs-color-tertiary'),
1309
+ '--ngs-color-on-tertiary': contrastColor(tertiary),
1310
1310
  '--ngs-color-tertiary-container': tertiaryContainer,
1311
- '--ngs-color-on-tertiary-container': contrastColor('--ngs-color-tertiary-container'),
1311
+ '--ngs-color-on-tertiary-container': contrastColor(tertiaryContainer),
1312
1312
  '--ngs-color-info': info,
1313
- '--ngs-color-on-info': contrastColor('--ngs-color-info'),
1313
+ '--ngs-color-on-info': contrastColor(info),
1314
1314
  '--ngs-color-info-container': infoContainer,
1315
- '--ngs-color-on-info-container': contrastColor('--ngs-color-info-container'),
1315
+ '--ngs-color-on-info-container': contrastColor(infoContainer),
1316
1316
  ...status,
1317
1317
  '--ngs-color-background': neutral[0],
1318
- '--ngs-color-on-background': contrastColor('--ngs-color-background'),
1318
+ '--ngs-color-on-background': contrastColor(neutral[0]),
1319
1319
  '--ngs-color-surface': neutral[1],
1320
1320
  '--ngs-color-surface-bright': '#ffffff',
1321
- '--ngs-color-on-surface': contrastColor('--ngs-color-surface'),
1321
+ '--ngs-color-on-surface': contrastColor(neutral[1]),
1322
1322
  '--ngs-color-on-surface-variant': neutral[6],
1323
1323
  '--ngs-color-neutral-50': neutral[0],
1324
1324
  '--ngs-color-neutral-100': neutral[1],
@@ -1361,7 +1361,7 @@ function generateLightThemeProperties(seed) {
1361
1361
  }
1362
1362
  function generateDarkThemeProperties(seed) {
1363
1363
  const source = rgbToHsl(seed);
1364
- const primary = colorFromTone(source, 76, 0.82);
1364
+ const primary = colorFromTone(source, 82, 0.82);
1365
1365
  const primaryContainer = colorFromTone(source, 28, 0.78);
1366
1366
  const secondary = colorFromTone(source, 78, 0.36, -8);
1367
1367
  const secondaryContainer = colorFromTone(source, 28, 0.3, -8);
@@ -1377,27 +1377,27 @@ function generateDarkThemeProperties(seed) {
1377
1377
  return withSharedGeneratedProperties({
1378
1378
  '--ngs-color-primary': primary,
1379
1379
  '--ngs-color-primary-seed': toHex(seed),
1380
- '--ngs-color-on-primary': contrastColor('--ngs-color-primary'),
1380
+ '--ngs-color-on-primary': contrastColor(primary),
1381
1381
  '--ngs-color-primary-container': primaryContainer,
1382
- '--ngs-color-on-primary-container': contrastColor('--ngs-color-primary-container'),
1382
+ '--ngs-color-on-primary-container': contrastColor(primaryContainer),
1383
1383
  '--ngs-color-secondary': secondary,
1384
- '--ngs-color-on-secondary': contrastColor('--ngs-color-secondary'),
1384
+ '--ngs-color-on-secondary': contrastColor(secondary),
1385
1385
  '--ngs-color-secondary-container': secondaryContainer,
1386
- '--ngs-color-on-secondary-container': contrastColor('--ngs-color-secondary-container'),
1386
+ '--ngs-color-on-secondary-container': contrastColor(secondaryContainer),
1387
1387
  '--ngs-color-tertiary': tertiary,
1388
- '--ngs-color-on-tertiary': contrastColor('--ngs-color-tertiary'),
1388
+ '--ngs-color-on-tertiary': contrastColor(tertiary),
1389
1389
  '--ngs-color-tertiary-container': tertiaryContainer,
1390
- '--ngs-color-on-tertiary-container': contrastColor('--ngs-color-tertiary-container'),
1390
+ '--ngs-color-on-tertiary-container': contrastColor(tertiaryContainer),
1391
1391
  '--ngs-color-info': info,
1392
- '--ngs-color-on-info': contrastColor('--ngs-color-info'),
1392
+ '--ngs-color-on-info': contrastColor(info),
1393
1393
  '--ngs-color-info-container': infoContainer,
1394
- '--ngs-color-on-info-container': contrastColor('--ngs-color-info-container'),
1394
+ '--ngs-color-on-info-container': contrastColor(infoContainer),
1395
1395
  ...status,
1396
1396
  '--ngs-color-background': neutral[0],
1397
- '--ngs-color-on-background': contrastColor('--ngs-color-background'),
1397
+ '--ngs-color-on-background': contrastColor(neutral[0]),
1398
1398
  '--ngs-color-surface': neutral[1],
1399
1399
  '--ngs-color-surface-bright': neutral[2],
1400
- '--ngs-color-on-surface': contrastColor('--ngs-color-surface'),
1400
+ '--ngs-color-on-surface': contrastColor(neutral[1]),
1401
1401
  '--ngs-color-on-surface-variant': neutral[8],
1402
1402
  '--ngs-color-neutral-50': neutral[0],
1403
1403
  '--ngs-color-neutral-100': neutral[1],
@@ -1476,47 +1476,59 @@ function makeNeutralScale(source, colorScheme) {
1476
1476
  }
1477
1477
  function makeStatusColors(colorScheme) {
1478
1478
  if (colorScheme === 'dark') {
1479
+ const danger = '#f87171';
1480
+ const dangerContainer = '#7f1d1d';
1481
+ const success = '#4ade80';
1482
+ const successContainer = '#166534';
1483
+ const warning = '#fbbf24';
1484
+ const warningContainer = '#78350f';
1479
1485
  return {
1480
- '--ngs-color-danger': '#f87171',
1481
- '--ngs-color-on-danger': contrastColor('--ngs-color-danger'),
1482
- '--ngs-color-danger-container': '#7f1d1d',
1483
- '--ngs-color-on-danger-container': contrastColor('--ngs-color-danger-container'),
1486
+ '--ngs-color-danger': danger,
1487
+ '--ngs-color-on-danger': contrastColor(danger),
1488
+ '--ngs-color-danger-container': dangerContainer,
1489
+ '--ngs-color-on-danger-container': contrastColor(dangerContainer),
1484
1490
  '--ngs-color-danger-container-lowest': '#1f0707',
1485
1491
  '--ngs-color-danger-container-low': '#2f0b0b',
1486
1492
  '--ngs-color-danger-container-high': '#5f1717',
1487
1493
  '--ngs-color-danger-container-highest': '#7f1d1d',
1488
- '--ngs-color-success': '#4ade80',
1489
- '--ngs-color-on-success': contrastColor('--ngs-color-success'),
1490
- '--ngs-color-success-container': '#166534',
1491
- '--ngs-color-on-success-container': contrastColor('--ngs-color-success-container'),
1492
- '--ngs-color-warning': '#fbbf24',
1493
- '--ngs-color-on-warning': contrastColor('--ngs-color-warning'),
1494
- '--ngs-color-warning-container': '#78350f',
1495
- '--ngs-color-on-warning-container': contrastColor('--ngs-color-warning-container'),
1496
- '--ngs-color-orange-container': '#78350f',
1497
- '--ngs-color-on-orange-container': contrastColor('--ngs-color-orange-container'),
1494
+ '--ngs-color-success': success,
1495
+ '--ngs-color-on-success': contrastColor(success),
1496
+ '--ngs-color-success-container': successContainer,
1497
+ '--ngs-color-on-success-container': contrastColor(successContainer),
1498
+ '--ngs-color-warning': warning,
1499
+ '--ngs-color-on-warning': contrastColor(warning),
1500
+ '--ngs-color-warning-container': warningContainer,
1501
+ '--ngs-color-on-warning-container': contrastColor(warningContainer),
1502
+ '--ngs-color-orange-container': warningContainer,
1503
+ '--ngs-color-on-orange-container': contrastColor(warningContainer),
1498
1504
  '--ngs-color-green-500': '#4ade80',
1499
1505
  };
1500
1506
  }
1507
+ const danger = '#dc2626';
1508
+ const dangerContainer = '#fee2e2';
1509
+ const success = '#16a34a';
1510
+ const successContainer = '#dcfce7';
1511
+ const warning = '#d97706';
1512
+ const warningContainer = '#fef3c7';
1501
1513
  return {
1502
- '--ngs-color-danger': '#dc2626',
1503
- '--ngs-color-on-danger': contrastColor('--ngs-color-danger'),
1504
- '--ngs-color-danger-container': '#fee2e2',
1505
- '--ngs-color-on-danger-container': contrastColor('--ngs-color-danger-container'),
1514
+ '--ngs-color-danger': danger,
1515
+ '--ngs-color-on-danger': contrastColor(danger),
1516
+ '--ngs-color-danger-container': dangerContainer,
1517
+ '--ngs-color-on-danger-container': contrastColor(dangerContainer),
1506
1518
  '--ngs-color-danger-container-lowest': '#fffafa',
1507
1519
  '--ngs-color-danger-container-low': '#fef2f2',
1508
1520
  '--ngs-color-danger-container-high': '#fecaca',
1509
1521
  '--ngs-color-danger-container-highest': '#fca5a5',
1510
- '--ngs-color-success': '#16a34a',
1511
- '--ngs-color-on-success': contrastColor('--ngs-color-success'),
1512
- '--ngs-color-success-container': '#dcfce7',
1513
- '--ngs-color-on-success-container': contrastColor('--ngs-color-success-container'),
1514
- '--ngs-color-warning': '#d97706',
1515
- '--ngs-color-on-warning': contrastColor('--ngs-color-warning'),
1516
- '--ngs-color-warning-container': '#fef3c7',
1517
- '--ngs-color-on-warning-container': contrastColor('--ngs-color-warning-container'),
1518
- '--ngs-color-orange-container': '#fef3c7',
1519
- '--ngs-color-on-orange-container': contrastColor('--ngs-color-orange-container'),
1522
+ '--ngs-color-success': success,
1523
+ '--ngs-color-on-success': contrastColor(success),
1524
+ '--ngs-color-success-container': successContainer,
1525
+ '--ngs-color-on-success-container': contrastColor(successContainer),
1526
+ '--ngs-color-warning': warning,
1527
+ '--ngs-color-on-warning': contrastColor(warning),
1528
+ '--ngs-color-warning-container': warningContainer,
1529
+ '--ngs-color-on-warning-container': contrastColor(warningContainer),
1530
+ '--ngs-color-orange-container': warningContainer,
1531
+ '--ngs-color-on-orange-container': contrastColor(warningContainer),
1520
1532
  '--ngs-color-green-500': '#16a34a',
1521
1533
  };
1522
1534
  }
@@ -1527,8 +1539,15 @@ function colorFromTone(source, lightness, saturationMultiplier = 1, hueShift = 0
1527
1539
  l: lightness,
1528
1540
  });
1529
1541
  }
1530
- function contrastColor(propertyName) {
1531
- return `contrast-color(var(${propertyName}))`;
1542
+ function contrastColor(color) {
1543
+ const rgb = parseColor(color);
1544
+ if (!rgb) {
1545
+ return '#ffffff';
1546
+ }
1547
+ const luminance = relativeLuminance(rgb);
1548
+ const contrastWithBlack = (luminance + 0.05) / 0.05;
1549
+ const contrastWithWhite = 1.05 / (luminance + 0.05);
1550
+ return contrastWithBlack >= contrastWithWhite ? '#000000' : '#ffffff';
1532
1551
  }
1533
1552
  function parseColor(color) {
1534
1553
  const value = color.trim().toLowerCase();
@@ -1682,6 +1701,15 @@ function toHex({ r, g, b }) {
1682
1701
  function toHexChannel(value) {
1683
1702
  return clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0');
1684
1703
  }
1704
+ function relativeLuminance({ r, g, b }) {
1705
+ const [red, green, blue] = [r, g, b].map(channel => {
1706
+ const normalized = channel / 255;
1707
+ return normalized <= 0.03928
1708
+ ? normalized / 12.92
1709
+ : ((normalized + 0.055) / 1.055) ** 2.4;
1710
+ });
1711
+ return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
1712
+ }
1685
1713
  function normalizeHue(hue) {
1686
1714
  return ((hue % 360) + 360) % 360;
1687
1715
  }