@ojiepermana/angular 0.1.0 → 21.0.0

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 (91) hide show
  1. package/README.md +41 -246
  2. package/chart/README.md +0 -0
  3. package/fesm2022/ojiepermana-angular-chart.mjs +3714 -0
  4. package/fesm2022/ojiepermana-angular-chart.mjs.map +1 -0
  5. package/fesm2022/ojiepermana-angular-component.mjs +3463 -0
  6. package/fesm2022/ojiepermana-angular-component.mjs.map +1 -0
  7. package/fesm2022/ojiepermana-angular-layout.mjs +272 -401
  8. package/fesm2022/ojiepermana-angular-layout.mjs.map +1 -1
  9. package/fesm2022/ojiepermana-angular-navigation.mjs +2225 -135
  10. package/fesm2022/ojiepermana-angular-navigation.mjs.map +1 -1
  11. package/fesm2022/ojiepermana-angular-theme.mjs +381 -1
  12. package/fesm2022/ojiepermana-angular-theme.mjs.map +1 -1
  13. package/fesm2022/ojiepermana-angular.mjs +15 -1
  14. package/fesm2022/ojiepermana-angular.mjs.map +1 -1
  15. package/package.json +49 -36
  16. package/theme/styles/etos.css +38 -0
  17. package/theme/styles/index.css +32 -8
  18. package/theme/styles/themes/brand/etos/color.css +21 -0
  19. package/theme/styles/themes/brand/etos/style.css +50 -0
  20. package/theme/styles/themes/library/_components.css +63 -0
  21. package/theme/styles/themes/library/_layers.css +15 -0
  22. package/theme/styles/themes/library/_material-overrides.css +254 -0
  23. package/theme/styles/themes/library/_tokens.css +54 -0
  24. package/theme/styles/themes/library/color/amber.css +18 -0
  25. package/theme/styles/themes/library/color/blue.css +23 -0
  26. package/theme/styles/themes/library/color/green.css +18 -0
  27. package/theme/styles/themes/library/color/index.css +9 -0
  28. package/theme/styles/themes/library/color/purple.css +18 -0
  29. package/theme/styles/themes/library/color/red.css +18 -0
  30. package/theme/styles/themes/library/style/brutal.css +47 -0
  31. package/theme/styles/themes/library/style/default.css +51 -0
  32. package/theme/styles/themes/library/style/index.css +8 -0
  33. package/theme/styles/themes/library/style/sharp.css +47 -0
  34. package/theme/styles/themes/library/style/soft.css +47 -0
  35. package/theme/styles/themes/mode/dark.css +20 -0
  36. package/theme/styles/themes/mode/index.css +6 -0
  37. package/theme/styles/themes/mode/light.css +24 -0
  38. package/theme/styles/themes/taildwind.css +109 -0
  39. package/types/ojiepermana-angular-chart.d.ts +1094 -0
  40. package/types/ojiepermana-angular-component.d.ts +1174 -0
  41. package/types/ojiepermana-angular-layout.d.ts +123 -76
  42. package/types/ojiepermana-angular-navigation.d.ts +257 -71
  43. package/types/ojiepermana-angular-theme.d.ts +170 -1
  44. package/types/ojiepermana-angular.d.ts +2 -1
  45. package/fesm2022/ojiepermana-angular-internal.mjs +0 -473
  46. package/fesm2022/ojiepermana-angular-internal.mjs.map +0 -1
  47. package/fesm2022/ojiepermana-angular-navigation-horizontal.mjs +0 -785
  48. package/fesm2022/ojiepermana-angular-navigation-horizontal.mjs.map +0 -1
  49. package/fesm2022/ojiepermana-angular-navigation-vertical.mjs +0 -1568
  50. package/fesm2022/ojiepermana-angular-navigation-vertical.mjs.map +0 -1
  51. package/fesm2022/ojiepermana-angular-shell.mjs +0 -14
  52. package/fesm2022/ojiepermana-angular-shell.mjs.map +0 -1
  53. package/fesm2022/ojiepermana-angular-theme-component.mjs +0 -235
  54. package/fesm2022/ojiepermana-angular-theme-component.mjs.map +0 -1
  55. package/fesm2022/ojiepermana-angular-theme-directive.mjs +0 -29
  56. package/fesm2022/ojiepermana-angular-theme-directive.mjs.map +0 -1
  57. package/fesm2022/ojiepermana-angular-theme-service.mjs +0 -241
  58. package/fesm2022/ojiepermana-angular-theme-service.mjs.map +0 -1
  59. package/layout/README.md +0 -144
  60. package/navigation/README.md +0 -215
  61. package/shell/README.md +0 -37
  62. package/styles/index.css +0 -2
  63. package/styles/resets.css +0 -22
  64. package/theme/README.md +0 -379
  65. package/theme/styles/adapters/material-ui/index.css +0 -205
  66. package/theme/styles/layout/horizontal.css +0 -109
  67. package/theme/styles/layout/index.css +0 -19
  68. package/theme/styles/layout/vertical.css +0 -75
  69. package/theme/styles/modes/dark.css +0 -84
  70. package/theme/styles/presets/colors/blue.css +0 -45
  71. package/theme/styles/presets/colors/brand.css +0 -52
  72. package/theme/styles/presets/colors/cyan.css +0 -45
  73. package/theme/styles/presets/colors/green.css +0 -45
  74. package/theme/styles/presets/colors/index.css +0 -7
  75. package/theme/styles/presets/colors/orange.css +0 -45
  76. package/theme/styles/presets/colors/purple.css +0 -45
  77. package/theme/styles/presets/colors/red.css +0 -45
  78. package/theme/styles/presets/styles/flat.css +0 -61
  79. package/theme/styles/presets/styles/glass.css +0 -28
  80. package/theme/styles/presets/styles/index.css +0 -2
  81. package/theme/styles/roles/index.css +0 -67
  82. package/theme/styles/tokens/foundation.css +0 -136
  83. package/theme/styles/tokens/semantic.css +0 -87
  84. package/theme/styles/utilities/index.css +0 -88
  85. package/types/ojiepermana-angular-internal.d.ts +0 -89
  86. package/types/ojiepermana-angular-navigation-horizontal.d.ts +0 -77
  87. package/types/ojiepermana-angular-navigation-vertical.d.ts +0 -260
  88. package/types/ojiepermana-angular-shell.d.ts +0 -12
  89. package/types/ojiepermana-angular-theme-component.d.ts +0 -46
  90. package/types/ojiepermana-angular-theme-directive.d.ts +0 -10
  91. package/types/ojiepermana-angular-theme-service.d.ts +0 -68
@@ -1,109 +0,0 @@
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(180deg, color-mix(in oklab, var(--background) 94%, white 6%), var(--background));
83
- color: var(--foreground);
84
- transition:
85
- background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
86
- color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
87
- }
88
-
89
- @media (max-width: 60rem) {
90
- horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header {
91
- grid-template-columns: minmax(0, 1fr) auto;
92
- align-items: flex-start;
93
- }
94
-
95
- horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > nav {
96
- grid-column: 1 / -1;
97
- justify-content: flex-start;
98
- }
99
- }
100
-
101
- @media (max-width: 40rem) {
102
- horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header {
103
- grid-template-columns: 1fr;
104
- }
105
-
106
- horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > panel {
107
- justify-content: flex-start;
108
- }
109
- }
@@ -1,19 +0,0 @@
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
- }
@@ -1,75 +0,0 @@
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(180deg, color-mix(in oklab, var(--background) 94%, white 6%), var(--background));
57
- color: var(--foreground);
58
- transition:
59
- background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
60
- color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
61
- }
62
-
63
- @media (min-width: 48rem) {
64
- vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) {
65
- flex-direction: row;
66
- }
67
-
68
- vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > aside {
69
- flex: 0 0 var(--layout-sidebar-width);
70
- inline-size: var(--layout-sidebar-width);
71
- min-inline-size: var(--layout-sidebar-width);
72
- border-bottom: 0;
73
- border-right: 1px solid var(--sidebar-chrome-border);
74
- }
75
- }
@@ -1,84 +0,0 @@
1
- .dark {
2
- color-scheme: dark;
3
- --background: oklch(0.19 0.014 286.1);
4
- --foreground: oklch(0.966 0.003 286.3);
5
- --card: oklch(0.236 0.013 286.3);
6
- --card-foreground: var(--foreground);
7
- --popover: oklch(0.245 0.013 286.2);
8
- --popover-foreground: var(--foreground);
9
- --primary-solid: color-mix(in oklab, var(--theme-primary) 86%, white 14%);
10
- --primary-solid-foreground: oklch(0.19 0.014 286.1);
11
- --primary-container: color-mix(in oklab, var(--primary-solid) 22%, var(--background));
12
- --primary-container-foreground: var(--foreground);
13
- --primary: var(--primary-solid);
14
- --primary-foreground: var(--primary-solid-foreground);
15
- --secondary-solid: color-mix(in oklab, var(--theme-secondary) 84%, white 16%);
16
- --secondary-solid-foreground: oklch(0.19 0.014 286.1);
17
- --secondary-container: color-mix(in oklab, var(--secondary-solid) 16%, var(--background));
18
- --secondary-container-foreground: var(--foreground);
19
- --secondary: var(--secondary-container);
20
- --secondary-foreground: var(--secondary-container-foreground);
21
- --tertiary-solid: color-mix(in oklab, var(--theme-tertiary) 84%, white 16%);
22
- --tertiary-solid-foreground: oklch(0.19 0.014 286.1);
23
- --tertiary-container: color-mix(in oklab, var(--tertiary-solid) 20%, var(--background));
24
- --tertiary-container-foreground: var(--foreground);
25
- --tertiary: var(--tertiary-container);
26
- --tertiary-foreground: var(--tertiary-container-foreground);
27
- --neutral-solid: color-mix(in oklab, var(--theme-neutral) 78%, white 22%);
28
- --neutral-solid-foreground: oklch(0.19 0.014 286.1);
29
- --neutral-container: color-mix(in oklab, var(--neutral-solid) 26%, var(--background));
30
- --neutral-container-foreground: var(--foreground);
31
- --neutral: var(--neutral-container);
32
- --neutral-foreground: var(--neutral-container-foreground);
33
- --muted: oklch(0.28 0.012 286.4);
34
- --muted-foreground: oklch(0.74 0.01 286.4);
35
- --accent: var(--tertiary-container);
36
- --accent-foreground: var(--tertiary-container-foreground);
37
- --destructive-solid: color-mix(in oklab, oklch(0.637 0.237 25.5) 86%, white 14%);
38
- --destructive-solid-foreground: oklch(0.19 0.014 286.1);
39
- --destructive-container: color-mix(in oklab, var(--destructive-solid) 18%, var(--background));
40
- --destructive-container-foreground: var(--foreground);
41
- --destructive: var(--destructive-solid);
42
- --destructive-foreground: var(--destructive-solid-foreground);
43
- --success-solid: color-mix(in oklab, oklch(0.673 0.152 151.5) 84%, white 16%);
44
- --success-solid-foreground: oklch(0.19 0.014 286.1);
45
- --success-container: color-mix(in oklab, var(--success-solid) 18%, var(--background));
46
- --success-container-foreground: var(--foreground);
47
- --success: var(--success-container);
48
- --success-foreground: var(--success-container-foreground);
49
- --warning-solid: color-mix(in oklab, oklch(0.796 0.136 82.4) 82%, white 18%);
50
- --warning-solid-foreground: oklch(0.19 0.014 286.1);
51
- --warning-container: color-mix(in oklab, var(--warning-solid) 20%, var(--background));
52
- --warning-container-foreground: var(--foreground);
53
- --warning: var(--warning-container);
54
- --warning-foreground: var(--warning-container-foreground);
55
- --info-solid: color-mix(in oklab, oklch(0.69 0.116 239.4) 84%, white 16%);
56
- --info-solid-foreground: oklch(0.19 0.014 286.1);
57
- --info-container: color-mix(in oklab, var(--info-solid) 18%, var(--background));
58
- --info-container-foreground: var(--foreground);
59
- --info: var(--info-container);
60
- --info-foreground: var(--info-container-foreground);
61
- --disabled: color-mix(in oklab, var(--neutral-solid) 18%, var(--background));
62
- --disabled-foreground: color-mix(in oklab, var(--foreground) 52%, var(--background));
63
- --disabled-border: color-mix(in oklab, var(--border) 84%, var(--background));
64
- --inverse: var(--foreground);
65
- --inverse-foreground: var(--background);
66
- --inverse-border: color-mix(in oklab, var(--inverse) 84%, var(--inverse-foreground));
67
- --border: oklch(1 0 0 / 0.12);
68
- --input: oklch(1 0 0 / 0.16);
69
- --ring: color-mix(in oklab, var(--primary-solid) 78%, white 22%);
70
- --sidebar: oklch(0.214 0.014 286.2);
71
- --sidebar-foreground: var(--foreground);
72
- --sidebar-primary: var(--primary);
73
- --sidebar-primary-foreground: var(--primary-foreground);
74
- --sidebar-accent: color-mix(in oklab, var(--tertiary-solid) 16%, var(--sidebar));
75
- --sidebar-accent-foreground: var(--sidebar-foreground);
76
- --sidebar-border: var(--border);
77
- --sidebar-ring: var(--ring);
78
- /* Shell surfaces continue to derive from the active style preset and semantic card tokens. */
79
- --shell-shadow: var(--shadow-sm);
80
- --surface-elevated: oklch(0.262 0.012 286.3);
81
- --surface-elevated-foreground: var(--foreground);
82
- --surface-elevated-border: var(--border);
83
- --surface-elevated-shadow: var(--shadow-md);
84
- }
@@ -1,45 +0,0 @@
1
- [data-theme-color='blue'] {
2
- --theme-primary: oklch(0.58 0.16 248.8);
3
- --theme-on-primary: oklch(0.985 0 0);
4
- --theme-secondary: oklch(0.647 0.122 251.04);
5
- --theme-on-secondary: oklch(0.205 0.012 285.9);
6
- --theme-tertiary: oklch(0.715 0.085 253.037);
7
- --theme-on-tertiary: oklch(0.205 0.012 285.9);
8
- --theme-neutral: oklch(0.735 0.031 260.347);
9
- --theme-on-neutral: oklch(0.205 0.012 285.9);
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
- }
@@ -1,52 +0,0 @@
1
- :root,
2
- [data-theme-color='brand'] {
3
- --theme-primary: oklch(0.59 0.18 257.5);
4
- --theme-on-primary: oklch(0.985 0 0);
5
- --theme-secondary: oklch(0.654 0.137 259.075);
6
- --theme-on-secondary: oklch(0.205 0.012 285.9);
7
- --theme-tertiary: oklch(0.72 0.096 260.483);
8
- --theme-on-tertiary: oklch(0.205 0.012 285.9);
9
- --theme-neutral: oklch(0.736 0.035 265.705);
10
- --theme-on-neutral: oklch(0.205 0.012 285.9);
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
- }
@@ -1,45 +0,0 @@
1
- [data-theme-color='cyan'] {
2
- --theme-primary: oklch(0.73 0.13 219.2);
3
- --theme-on-primary: oklch(0.181 0.01 220.8);
4
- --theme-secondary: oklch(0.755 0.097 223.466);
5
- --theme-on-secondary: oklch(0.205 0.012 285.9);
6
- --theme-tertiary: oklch(0.787 0.067 227.388);
7
- --theme-on-tertiary: oklch(0.205 0.012 285.9);
8
- --theme-neutral: oklch(0.756 0.024 242.306);
9
- --theme-on-neutral: oklch(0.205 0.012 285.9);
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
- }
@@ -1,45 +0,0 @@
1
- [data-theme-color='green'] {
2
- --theme-primary: oklch(0.68 0.18 153.4);
3
- --theme-on-primary: oklch(0.188 0.012 162.1);
4
- --theme-secondary: oklch(0.719 0.124 156.054);
5
- --theme-on-secondary: oklch(0.205 0.012 285.9);
6
- --theme-tertiary: oklch(0.763 0.08 158.902);
7
- --theme-on-tertiary: oklch(0.205 0.012 285.9);
8
- --theme-neutral: oklch(0.749 0.02 176.021);
9
- --theme-on-neutral: oklch(0.205 0.012 285.9);
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
- }
@@ -1,7 +0,0 @@
1
- @import './brand.css';
2
- @import './blue.css';
3
- @import './green.css';
4
- @import './red.css';
5
- @import './cyan.css';
6
- @import './purple.css';
7
- @import './orange.css';
@@ -1,45 +0,0 @@
1
- [data-theme-color='orange'] {
2
- --theme-primary: oklch(0.74 0.16 68.4);
3
- --theme-on-primary: oklch(0.188 0.012 73.2);
4
- --theme-secondary: oklch(0.762 0.109 65.881);
5
- --theme-on-secondary: oklch(0.205 0.012 285.9);
6
- --theme-tertiary: oklch(0.792 0.069 63.101);
7
- --theme-on-tertiary: oklch(0.205 0.012 285.9);
8
- --theme-neutral: oklch(0.757 0.016 44.49);
9
- --theme-on-neutral: oklch(0.205 0.012 285.9);
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
- }
@@ -1,45 +0,0 @@
1
- [data-theme-color='purple'] {
2
- --theme-primary: oklch(0.62 0.21 314.5);
3
- --theme-on-primary: oklch(0.985 0 0);
4
- --theme-secondary: oklch(0.676 0.158 313.149);
5
- --theme-on-secondary: oklch(0.205 0.012 285.9);
6
- --theme-tertiary: oklch(0.734 0.11 311.924);
7
- --theme-on-tertiary: oklch(0.205 0.012 285.9);
8
- --theme-neutral: oklch(0.74 0.039 307.23);
9
- --theme-on-neutral: oklch(0.205 0.012 285.9);
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
- }
@@ -1,45 +0,0 @@
1
- [data-theme-color='red'] {
2
- --theme-primary: oklch(0.63 0.23 27.2);
3
- --theme-on-primary: oklch(0.985 0 0);
4
- --theme-secondary: oklch(0.683 0.164 24.516);
5
- --theme-on-secondary: oklch(0.205 0.012 285.9);
6
- --theme-tertiary: oklch(0.739 0.109 21.822);
7
- --theme-on-tertiary: oklch(0.205 0.012 285.9);
8
- --theme-neutral: oklch(0.742 0.032 8.67);
9
- --theme-on-neutral: oklch(0.205 0.012 285.9);
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
- }