@m11g/library 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.
Files changed (69) hide show
  1. package/dist/dist-C8cpIyO1.js +3039 -0
  2. package/dist/library.css +2 -0
  3. package/dist/library.js +4057 -0
  4. package/dist/library.umd.cjs +3 -0
  5. package/package.json +13 -1
  6. package/.editorconfig +0 -8
  7. package/.gitattributes +0 -1
  8. package/.oxfmtrc.json +0 -5
  9. package/.oxlintrc.json +0 -10
  10. package/.stylelintrc +0 -33
  11. package/.vscode/extensions.json +0 -8
  12. package/env.d.ts +0 -1
  13. package/eslint.config.ts +0 -35
  14. package/index.html +0 -13
  15. package/postcss.config.ts +0 -23
  16. package/src/App.vue +0 -28
  17. package/src/assets/css/base.css +0 -2
  18. package/src/assets/css/elements/_base.css +0 -5
  19. package/src/assets/css/elements/buttons.css +0 -23
  20. package/src/assets/css/elements/form.css +0 -75
  21. package/src/assets/css/elements/scaffolding.css +0 -62
  22. package/src/assets/css/elements/transition.css +0 -4
  23. package/src/assets/css/elements/typography.css +0 -80
  24. package/src/assets/css/media-queries/media-queries.css +0 -3
  25. package/src/assets/css/mixins/list-reset.css +0 -5
  26. package/src/assets/css/variables/_base.css +0 -7
  27. package/src/assets/css/variables/chakra.css +0 -160
  28. package/src/assets/css/variables/colors.css +0 -205
  29. package/src/assets/css/variables/grid.css +0 -6
  30. package/src/assets/css/variables/spacings.css +0 -10
  31. package/src/assets/css/variables/transitions.css +0 -10
  32. package/src/assets/css/variables/typography.css +0 -17
  33. package/src/components/AppBreadcrumb.vue +0 -63
  34. package/src/components/AppButton.vue +0 -105
  35. package/src/components/AppCarousel.vue +0 -145
  36. package/src/components/AppDialog.vue +0 -126
  37. package/src/components/AppNotification.vue +0 -68
  38. package/src/components/AppPagination.vue +0 -127
  39. package/src/components/AppPopover.vue +0 -57
  40. package/src/components/AppTabs.vue +0 -176
  41. package/src/components/CenterWrapper.vue +0 -50
  42. package/src/components/ClickableWrapper.vue +0 -48
  43. package/src/components/Forms/AppForm.vue +0 -61
  44. package/src/components/Forms/FormErrorMessage.vue +0 -17
  45. package/src/components/Forms/FormField.vue +0 -30
  46. package/src/components/Forms/FormFieldset.vue +0 -28
  47. package/src/components/Forms/RadioGroup.vue +0 -85
  48. package/src/components/Forms/SearchField.vue +0 -38
  49. package/src/components/Forms/SelectField.vue +0 -125
  50. package/src/components/Forms/TextField.vue +0 -41
  51. package/src/components/Forms/TextareaField.vue +0 -32
  52. package/src/components/ScrollSpy.vue +0 -111
  53. package/src/components/SummaryDetails.vue +0 -83
  54. package/src/composables/useTheme.ts +0 -20
  55. package/src/index.ts +0 -47
  56. package/src/main.ts +0 -10
  57. package/src/router/index.ts +0 -26
  58. package/src/types/Theme.ts +0 -11
  59. package/src/views/CarouselView.vue +0 -27
  60. package/src/views/FormView.vue +0 -111
  61. package/src/views/HomeView.vue +0 -100
  62. package/src/views/ScrollSpyView.vue +0 -58
  63. package/theme-dark +0 -117
  64. package/theme-light +0 -191
  65. package/tsconfig.app.json +0 -18
  66. package/tsconfig.json +0 -11
  67. package/tsconfig.node.json +0 -28
  68. package/vite.config.ts +0 -26
  69. /package/{public → dist}/favicon.ico +0 -0
@@ -1,23 +0,0 @@
1
- button {
2
- padding: 0;
3
- font-family: var(--font-family);
4
- font-size: 1em;
5
- color: currentcolor;
6
- cursor: pointer;
7
- background-color: transparent;
8
- border: 0;
9
-
10
- &:disabled {
11
- cursor: not-allowed;
12
- }
13
- }
14
-
15
- a {
16
- color: var(--color-fg);
17
- text-decoration-thickness: 1px;
18
- text-underline-offset: 0.2em;
19
-
20
- &:hover {
21
- text-decoration-thickness: 2px;
22
- }
23
- }
@@ -1,75 +0,0 @@
1
- form {
2
- margin-block-end: var(--spacing-4);
3
- }
4
-
5
- fieldset {
6
- padding: 0;
7
- margin: 0 0 var(--spacing-2);
8
- border: 0;
9
- }
10
-
11
- legend {
12
- display: block;
13
- padding: 0;
14
- margin-block-end: var(--spacing-2);
15
- font-family: var(--font-family-heading);
16
- font-size: var(--font-size-h2);
17
- font-weight: var(--font-weight-medium);
18
- line-height: var(--line-height-heading);
19
- }
20
-
21
- label {
22
- display: block;
23
- margin-block-end: var(--spacing-1);
24
- }
25
-
26
- textarea {
27
- line-height: var(--line-height);
28
- resize: vertical;
29
-
30
- @supports (field-sizing: content) {
31
- min-block-size: 7lh;
32
- resize: none;
33
- field-sizing: content;
34
- }
35
- }
36
-
37
- select,
38
- input[type="date"],
39
- input[type="email"],
40
- input[type="number"],
41
- input[type="password"],
42
- input[type="search"],
43
- input[type="tel"],
44
- input[type="text"],
45
- input[type="time"],
46
- input[type="url"],
47
- textarea {
48
- display: block;
49
- inline-size: 100%;
50
- padding: var(--spacing-3) var(--spacing-2);
51
- margin-block-end: var(--spacing-1);
52
- font-family: var(--font-family);
53
- font-size: var(--font-size-base);
54
- line-height: var(--line-height-heading);
55
- color: currentcolor;
56
- background: transparent;
57
- border: 2px solid var(--chakra-colors-gray-800);
58
- border-radius: 0;
59
- transition: border-color var(--transition);
60
-
61
- &:focus-visible {
62
- outline: none;
63
- border-color: var(--color-primary-solid);
64
- }
65
- }
66
-
67
- input[type="checkbox"],
68
- input[type="radio"],
69
- input[type="range"] {
70
- accent-color: var(--color-primary-solid);
71
- }
72
-
73
- ::placeholder {
74
- color: var(--chakra-colors-gray-400);
75
- }
@@ -1,62 +0,0 @@
1
- :root {
2
- color-scheme: light dark;
3
- interpolate-size: allow-keywords;
4
- }
5
-
6
- ::selection {
7
- color: var(--color-primary-fg);
8
- background: var(--color-primary-emphasized);
9
- }
10
-
11
- * {
12
- &,
13
- &::after,
14
- &::before {
15
- box-sizing: border-box;
16
- }
17
- }
18
-
19
- :focus-visible {
20
- outline: var(--color-primary-solid) solid 2px;
21
- outline-offset: 2px;
22
- }
23
-
24
- html {
25
- scroll-behavior: smooth;
26
- text-size-adjust: 100%;
27
- }
28
-
29
- body {
30
- margin: 0;
31
- color: var(--color-fg);
32
- background: var(--color-bg);
33
- }
34
-
35
- ul,
36
- ol {
37
- padding-inline-start: 0;
38
- margin: 0 0 var(--spacing-4);
39
- list-style-position: outside;
40
- }
41
-
42
- figure {
43
- display: block;
44
- margin: 0;
45
- }
46
-
47
- img {
48
- max-inline-size: 100%;
49
- block-size: auto;
50
- }
51
-
52
- dl {
53
- margin: 0 0 var(--spacing-4);
54
- }
55
-
56
- dt {
57
- font-weight: var(--font-weight-bold);
58
- }
59
-
60
- dd {
61
- margin: 0 0 var(--spacing-2);
62
- }
@@ -1,4 +0,0 @@
1
- :root {
2
- /* Prevent the default animation */
3
- view-transition-name: none;
4
- }
@@ -1,80 +0,0 @@
1
- html {
2
- font-size: var(--font-size-base);
3
- text-size-adjust: 100%;
4
- }
5
-
6
- body {
7
- scrollbar-gutter: stable;
8
- font-family: var(--font-family);
9
- font-weight: var(--font-weight-normal);
10
- line-height: var(--line-height);
11
- -webkit-font-smoothing: antialiased;
12
- -moz-osx-font-smoothing: grayscale;
13
- }
14
-
15
- p {
16
- margin: 0 0 var(--spacing-4);
17
- text-wrap: pretty;
18
- }
19
-
20
- h1,
21
- h2,
22
- h3 {
23
- font-family: var(--font-family-heading);
24
- font-weight: var(--font-weight-medium);
25
- line-height: var(--line-height-heading);
26
- text-wrap: balance;
27
- overflow-wrap: break-word;
28
- }
29
-
30
- h1 {
31
- margin: var(--spacing-1) 0 var(--spacing-4);
32
- font-size: var(--font-size-h1);
33
- font-weight: var(--font-weight-bold);
34
- }
35
-
36
- h2 {
37
- margin: var(--spacing-1) 0 var(--spacing-2);
38
- font-size: var(--font-size-h2);
39
- font-weight: var(--font-weight-bold);
40
- }
41
-
42
- h3 {
43
- margin: 0 0 var(--spacing-2);
44
- font-size: var(--font-size-h3);
45
- font-weight: var(--font-weight-bold);
46
- }
47
-
48
- pre,
49
- blockquote {
50
- font-family: var(--font-family-heading);
51
- font-weight: var(--font-weight-medium);
52
- line-height: var(--line-height-heading);
53
- }
54
-
55
- pre {
56
- padding: var(--spacing-4);
57
- font-family: "Courier New", Courier, monospace;
58
- line-height: var(--line-height-heading);
59
- white-space: pre-wrap;
60
- background-color: var(--color-panel-bg);
61
- box-shadow: var(--shadow);
62
- }
63
-
64
- blockquote {
65
- position: relative;
66
- padding-inline-start: var(--spacing-6);
67
- margin: var(--spacing-4) var(--spacing-4) var(--spacing-6);
68
-
69
- &::before {
70
- position: absolute;
71
- inset-inline-start: 0;
72
- display: inline-block;
73
- font-size: var(--font-size-h1);
74
- content: "“";
75
- }
76
- }
77
-
78
- strong {
79
- font-weight: var(--font-weight-bold);
80
- }
@@ -1,3 +0,0 @@
1
- @custom-media --sm (width >= 640px);
2
- @custom-media --md (width >= 768px);
3
- @custom-media --lg (width >= 1024px);
@@ -1,5 +0,0 @@
1
- @define-mixin list-reset {
2
- padding-inline-start: 0;
3
- margin-block-end: 0;
4
- list-style: none;
5
- }
@@ -1,7 +0,0 @@
1
- @import "./colors.css";
2
- @import "./grid.css";
3
- @import "./spacings.css";
4
- @import "./typography.css";
5
- @import "./transitions.css";
6
- @import "./z-index.css";
7
- @import "./chakra.css";
@@ -1,160 +0,0 @@
1
- :root {
2
- --chakra-aspect-ratios-square: 1 / 1;
3
- --chakra-aspect-ratios-landscape: 4 / 3;
4
- --chakra-aspect-ratios-portrait: 3 / 4;
5
- --chakra-aspect-ratios-wide: 16 / 9;
6
- --chakra-aspect-ratios-ultrawide: 18 / 5;
7
- --chakra-aspect-ratios-golden: 1.618 / 1;
8
- --chakra-animations-spin: spin 1s linear infinite;
9
- --chakra-animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
10
- --chakra-animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
11
- --chakra-animations-bounce: bounce 1s infinite;
12
- --chakra-blurs-sm: 4px;
13
- --chakra-blurs-md: 8px;
14
- --chakra-blurs-lg: 12px;
15
- --chakra-blurs-xl: 16px;
16
- --chakra-blurs-2xl: 24px;
17
- --chakra-blurs-3xl: 40px;
18
- --chakra-blurs-4xl: 64px;
19
- --chakra-borders-xs: 0.5px solid;
20
- --chakra-borders-sm: 1px solid;
21
- --chakra-borders-md: 2px solid;
22
- --chakra-borders-lg: 4px solid;
23
- --chakra-borders-xl: 8px solid;
24
- --chakra-colors-transparent: transparent;
25
- --chakra-colors-current: currentcolor;
26
- --chakra-colors-black: oklch(14.1% 0.004 285.8deg);
27
- --chakra-colors-white: oklch(100% 0 0deg);
28
- --chakra-colors-white-alpha-50: oklch(100% 0 0deg / 4%);
29
- --chakra-colors-white-alpha-100: oklch(100% 0 0deg / 6%);
30
- --chakra-colors-white-alpha-200: oklch(100% 0 0deg / 8%);
31
- --chakra-colors-white-alpha-300: oklch(100% 0 0deg / 16%);
32
- --chakra-colors-white-alpha-400: oklch(100% 0 0deg / 24%);
33
- --chakra-colors-white-alpha-500: oklch(100% 0 0deg / 36%);
34
- --chakra-colors-white-alpha-600: oklch(100% 0 0deg / 48%);
35
- --chakra-colors-white-alpha-700: oklch(100% 0 0deg / 64%);
36
- --chakra-colors-white-alpha-800: oklch(100% 0 0deg / 80%);
37
- --chakra-colors-white-alpha-900: oklch(100% 0 0deg / 92%);
38
- --chakra-colors-white-alpha-950: oklch(100% 0 0deg / 95%);
39
- --chakra-colors-black-alpha-50: oklch(0% 0 0deg / 4%);
40
- --chakra-colors-black-alpha-100: oklch(0% 0 0deg / 6%);
41
- --chakra-colors-black-alpha-200: oklch(0% 0 0deg / 8%);
42
- --chakra-colors-black-alpha-300: oklch(0% 0 0deg / 16%);
43
- --chakra-colors-black-alpha-400: oklch(0% 0 0deg / 24%);
44
- --chakra-colors-black-alpha-500: oklch(0% 0 0deg / 36%);
45
- --chakra-colors-black-alpha-600: oklch(0% 0 0deg / 48%);
46
- --chakra-colors-black-alpha-700: oklch(0% 0 0deg / 64%);
47
- --chakra-colors-black-alpha-800: oklch(0% 0 0deg / 80%);
48
- --chakra-colors-black-alpha-900: oklch(0% 0 0deg / 92%);
49
- --chakra-colors-black-alpha-950: oklch(0% 0 0deg / 95%);
50
- --chakra-colors-gray-50: oklch(98.5% 0 0deg);
51
- --chakra-colors-gray-100: oklch(96.7% 0.001 286.4deg);
52
- --chakra-colors-gray-200: oklch(92% 0.004 286.3deg);
53
- --chakra-colors-gray-300: oklch(87.1% 0.005 286.3deg);
54
- --chakra-colors-gray-400: oklch(71.2% 0.013 286.1deg);
55
- --chakra-colors-gray-500: oklch(55.2% 0.014 285.9deg);
56
- --chakra-colors-gray-600: oklch(44.2% 0.015 285.8deg);
57
- --chakra-colors-gray-700: oklch(37% 0.012 285.8deg);
58
- --chakra-colors-gray-800: oklch(27.4% 0.005 286deg);
59
- --chakra-colors-gray-900: oklch(21% 0.006 285.9deg);
60
- --chakra-colors-gray-950: oklch(17.8% 0 0deg);
61
- --chakra-colors-red-50: oklch(97.1% 0.013 17.4deg);
62
- --chakra-colors-red-100: oklch(93.6% 0.031 17.7deg);
63
- --chakra-colors-red-200: oklch(88.5% 0.059 18.3deg);
64
- --chakra-colors-red-300: oklch(80.8% 0.103 19.6deg);
65
- --chakra-colors-red-400: oklch(71.1% 0.166 22.2deg);
66
- --chakra-colors-red-500: oklch(63.7% 0.208 25.3deg);
67
- --chakra-colors-red-600: oklch(57.7% 0.215 27.3deg);
68
- --chakra-colors-red-700: oklch(44.2% 0.163 27.1deg);
69
- --chakra-colors-red-800: oklch(29.1% 0.095 25.3deg);
70
- --chakra-colors-red-900: oklch(21.6% 0.059 23.4deg);
71
- --chakra-colors-red-950: oklch(17.4% 0.04 22.2deg);
72
- --chakra-colors-orange-50: oklch(98% 0.016 73.7deg);
73
- --chakra-colors-orange-100: oklch(95.4% 0.037 75.2deg);
74
- --chakra-colors-orange-200: oklch(90.1% 0.073 70.7deg);
75
- --chakra-colors-orange-300: oklch(83.7% 0.117 66.3deg);
76
- --chakra-colors-orange-400: oklch(75.8% 0.159 55.9deg);
77
- --chakra-colors-orange-500: oklch(70.5% 0.187 47.6deg);
78
- --chakra-colors-orange-600: oklch(64.6% 0.194 41.1deg);
79
- --chakra-colors-orange-700: oklch(45.2% 0.138 38.8deg);
80
- --chakra-colors-orange-800: oklch(37.1% 0.104 38deg);
81
- --chakra-colors-orange-900: oklch(24.5% 0.07 36.1deg);
82
- --chakra-colors-orange-950: oklch(18.3% 0.044 38.1deg);
83
- --chakra-colors-yellow-50: oklch(98.7% 0.026 102.2deg);
84
- --chakra-colors-yellow-100: oklch(97.3% 0.069 103.2deg);
85
- --chakra-colors-yellow-200: oklch(94.5% 0.124 101.5deg);
86
- --chakra-colors-yellow-300: oklch(90.5% 0.166 98.1deg);
87
- --chakra-colors-yellow-400: oklch(86.1% 0.173 91.9deg);
88
- --chakra-colors-yellow-500: oklch(79.5% 0.162 86deg);
89
- --chakra-colors-yellow-600: oklch(68.1% 0.142 75.8deg);
90
- --chakra-colors-yellow-700: oklch(48.4% 0.102 68.2deg);
91
- --chakra-colors-yellow-800: oklch(42.1% 0.09 57.7deg);
92
- --chakra-colors-yellow-900: oklch(28.6% 0.064 53.8deg);
93
- --chakra-colors-yellow-950: oklch(21.3% 0.044 55.6deg);
94
- --chakra-colors-green-50: oklch(98.2% 0.018 155.8deg);
95
- --chakra-colors-green-100: oklch(96.2% 0.043 156.7deg);
96
- --chakra-colors-green-200: oklch(92.5% 0.081 156deg);
97
- --chakra-colors-green-300: oklch(87.1% 0.136 154.4deg);
98
- --chakra-colors-green-400: oklch(80% 0.182 151.7deg);
99
- --chakra-colors-green-500: oklch(72.3% 0.192 149.6deg);
100
- --chakra-colors-green-600: oklch(62.7% 0.17 149.2deg);
101
- --chakra-colors-green-700: oklch(45.8% 0.117 150.3deg);
102
- --chakra-colors-green-800: oklch(36.4% 0.082 152.6deg);
103
- --chakra-colors-green-900: oklch(24.2% 0.055 154.1deg);
104
- --chakra-colors-green-950: oklch(19% 0.04 155.8deg);
105
- --chakra-colors-teal-50: oklch(98.4% 0.014 180.7deg);
106
- --chakra-colors-teal-100: oklch(95.3% 0.05 180.8deg);
107
- --chakra-colors-teal-200: oklch(91% 0.093 180.4deg);
108
- --chakra-colors-teal-300: oklch(85.5% 0.125 181.1deg);
109
- --chakra-colors-teal-400: oklch(78.5% 0.133 181.9deg);
110
- --chakra-colors-teal-500: oklch(70.4% 0.123 182.5deg);
111
- --chakra-colors-teal-600: oklch(60% 0.104 184.7deg);
112
- --chakra-colors-teal-700: oklch(43.2% 0.072 185.7deg);
113
- --chakra-colors-teal-800: oklch(34.7% 0.051 191.2deg);
114
- --chakra-colors-teal-900: oklch(24.8% 0.04 192.2deg);
115
- --chakra-colors-teal-950: oklch(18.6% 0.029 190.9deg);
116
- --chakra-colors-blue-50: oklch(97% 0.014 254.6deg);
117
- --chakra-colors-blue-100: oklch(93.2% 0.032 255.6deg);
118
- --chakra-colors-blue-200: oklch(88.2% 0.057 254.1deg);
119
- --chakra-colors-blue-300: oklch(84% 0.082 251deg);
120
- --chakra-colors-blue-400: oklch(71.4% 0.143 254.6deg);
121
- --chakra-colors-blue-500: oklch(62.3% 0.188 259.8deg);
122
- --chakra-colors-blue-600: oklch(54.6% 0.215 262.9deg);
123
- --chakra-colors-blue-700: oklch(40.8% 0.174 264.4deg);
124
- --chakra-colors-blue-800: oklch(34.9% 0.121 264.9deg);
125
- --chakra-colors-blue-900: oklch(26% 0.08 268.4deg);
126
- --chakra-colors-blue-950: oklch(20% 0.053 268.4deg);
127
- --chakra-colors-cyan-50: oklch(98.4% 0.019 200.9deg);
128
- --chakra-colors-cyan-100: oklch(95.6% 0.044 203.4deg);
129
- --chakra-colors-cyan-200: oklch(91.7% 0.077 205deg);
130
- --chakra-colors-cyan-300: oklch(86.5% 0.115 207.1deg);
131
- --chakra-colors-cyan-400: oklch(79.7% 0.134 211.5deg);
132
- --chakra-colors-cyan-500: oklch(71.5% 0.126 215.2deg);
133
- --chakra-colors-cyan-600: oklch(60.9% 0.111 221.7deg);
134
- --chakra-colors-cyan-700: oklch(44.2% 0.078 222.6deg);
135
- --chakra-colors-cyan-800: oklch(35.3% 0.057 226.6deg);
136
- --chakra-colors-cyan-900: oklch(26.8% 0.046 229.2deg);
137
- --chakra-colors-cyan-950: oklch(20.9% 0.033 227.7deg);
138
- --chakra-colors-purple-50: oklch(97.7% 0.014 308.3deg);
139
- --chakra-colors-purple-100: oklch(94.6% 0.033 307.2deg);
140
- --chakra-colors-purple-200: oklch(90.2% 0.06 306.7deg);
141
- --chakra-colors-purple-300: oklch(82.7% 0.108 306.4deg);
142
- --chakra-colors-purple-400: oklch(72.2% 0.177 305.5deg);
143
- --chakra-colors-purple-500: oklch(62.7% 0.233 303.9deg);
144
- --chakra-colors-purple-600: oklch(55.8% 0.252 302.3deg);
145
- --chakra-colors-purple-700: oklch(42% 0.197 302.4deg);
146
- --chakra-colors-purple-800: oklch(33.9% 0.146 305.1deg);
147
- --chakra-colors-purple-900: oklch(25.4% 0.125 301.7deg);
148
- --chakra-colors-purple-950: oklch(18% 0.083 304.1deg);
149
- --chakra-colors-pink-50: oklch(97.1% 0.014 343.2deg);
150
- --chakra-colors-pink-100: oklch(94.8% 0.028 342.3deg);
151
- --chakra-colors-pink-200: oklch(89.9% 0.059 343.2deg);
152
- --chakra-colors-pink-300: oklch(82.3% 0.11 346deg);
153
- --chakra-colors-pink-400: oklch(72.5% 0.175 349.8deg);
154
- --chakra-colors-pink-500: oklch(65.6% 0.212 354.3deg);
155
- --chakra-colors-pink-600: oklch(59.2% 0.218 0.6deg);
156
- --chakra-colors-pink-700: oklch(47.3% 0.177 3deg);
157
- --chakra-colors-pink-800: oklch(35.4% 0.129 3.6deg);
158
- --chakra-colors-pink-900: oklch(25.9% 0.094 3.3deg);
159
- --chakra-colors-pink-950: oklch(19.9% 0.066 1.1deg);
160
- }
@@ -1,205 +0,0 @@
1
- :root {
2
- --color-black: var(--chakra-colors-black);
3
- --color-white: var(--chakra-colors-white);
4
-
5
- /* PANEL */
6
- --shadow:
7
- 0px 8px 16px color-mix(in srgb, black 64%, transparent),
8
- 0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent);
9
-
10
- /* PRIMARY */
11
- --color-primary-fg: var(--color-teal-fg);
12
- --color-primary-subtle: var(--color-teal-subtle);
13
- --color-primary-muted: var(--color-teal-muted);
14
- --color-primary-emphasized: var(--color-teal-emphasized);
15
- --color-primary-solid: var(--color-teal-solid);
16
- --color-primary-focusring: var(--color-teal-focusring);
17
- --color-primary-border: var(--color-teal-border);
18
-
19
- /* BODY */
20
- --color-body-background: var(--chakra-colors-black);
21
- --color-body-text: var(--chakra-colors-gray-50);
22
-
23
- /* CAKRA */
24
- --color-bg: light-dark(var(--chakra-colors-white), var(--chakra-colors-black));
25
- --color-bg-subtle: light-dark(var(--chakra-colors-gray-50), var(--chakra-colors-gray-950));
26
- --color-bg-muted: light-dark(var(--chakra-colors-gray-100), var(--chakra-colors-gray-900));
27
- --color-bg-emphasized: light-dark(var(--chakra-colors-gray-200), var(--chakra-colors-gray-800));
28
- --color-bg-inverted: light-dark(var(--chakra-colors-black), var(--chakra-colors-white));
29
- --color-bg-panel: light-dark(var(--chakra-colors-white), var(--chakra-colors-gray-950));
30
- --color-bg-error: light-dark(var(--chakra-colors-red-50), var(--chakra-colors-red-950));
31
- --color-bg-warning: light-dark(var(--chakra-colors-orange-50), var(--chakra-colors-orange-950));
32
- --color-bg-success: light-dark(var(--chakra-colors-green-50), var(--chakra-colors-green-950));
33
- --color-bg-info: light-dark(var(--chakra-colors-blue-50), var(--chakra-colors-blue-950));
34
- --color-fg: light-dark(var(--chakra-colors-black), var(--chakra-colors-gray-50));
35
- --color-fg-muted: light-dark(var(--chakra-colors-gray-600), var(--chakra-colors-gray-400));
36
- --color-fg-subtle: light-dark(var(--chakra-colors-gray-400), var(--chakra-colors-gray-500));
37
- --color-fg-inverted: light-dark(var(--chakra-colors-gray-50), var(--chakra-colors-black));
38
- --color-fg-error: light-dark(var(--chakra-colors-red-500), var(--chakra-colors-red-400));
39
- --color-fg-warning: light-dark(var(--chakra-colors-orange-600), var(--chakra-colors-orange-300));
40
- --color-fg-success: light-dark(var(--chakra-colors-green-600), var(--chakra-colors-green-300));
41
- --color-fg-info: light-dark(var(--chakra-colors-blue-600), var(--chakra-colors-blue-300));
42
- --color-border: light-dark(var(--chakra-colors-gray-200), var(--chakra-colors-gray-800));
43
- --color-border-muted: light-dark(var(--chakra-colors-gray-100), var(--chakra-colors-gray-900));
44
- --color-border-subtle: light-dark(var(--chakra-colors-gray-50), var(--chakra-colors-gray-950));
45
- --color-border-emphasized: light-dark(var(--chakra-colors-gray-300), var(--chakra-colors-gray-700));
46
- --color-border-inverted: light-dark(var(--chakra-colors-gray-800), var(--chakra-colors-gray-200));
47
- --color-border-error: light-dark(var(--chakra-colors-red-500), var(--chakra-colors-red-400));
48
- --color-border-warning: light-dark(var(--chakra-colors-orange-500), var(--chakra-colors-orange-400));
49
- --color-border-success: light-dark(var(--chakra-colors-green-500), var(--chakra-colors-green-400));
50
- --color-border-info: light-dark(var(--chakra-colors-blue-500), var(--chakra-colors-blue-400));
51
-
52
- /* gray */
53
- --color-gray-contrast: light-dark(var(--chakra-colors-white), var(--chakra-colors-black));
54
- --color-gray-fg: light-dark(var(--chakra-colors-gray-800), var(--chakra-colors-gray-200));
55
- --color-gray-subtle: light-dark(var(--chakra-colors-gray-100), var(--chakra-colors-gray-900));
56
- --color-gray-muted: light-dark(var(--chakra-colors-gray-200), var(--chakra-colors-gray-800));
57
- --color-gray-emphasized: light-dark(var(--chakra-colors-gray-300), var(--chakra-colors-gray-700));
58
- --color-gray-solid: light-dark(var(--chakra-colors-gray-900), var(--chakra-colors-white));
59
- --color-gray-focus-ring: light-dark(var(--chakra-colors-gray-400), var(--chakra-colors-gray-400));
60
- --color-gray-border: light-dark(var(--chakra-colors-gray-200), var(--chakra-colors-gray-800));
61
-
62
- /* red */
63
- --color-red-contrast: light-dark(white, white);
64
- --color-red-fg: light-dark(var(--chakra-colors-red-700), var(--chakra-colors-red-300));
65
- --color-red-subtle: light-dark(var(--chakra-colors-red-100), var(--chakra-colors-red-900));
66
- --color-red-muted: light-dark(var(--chakra-colors-red-200), var(--chakra-colors-red-800));
67
- --color-red-emphasized: light-dark(var(--chakra-colors-red-300), var(--chakra-colors-red-700));
68
- --color-red-solid: light-dark(var(--chakra-colors-red-600), var(--chakra-colors-red-600));
69
- --color-red-focus-ring: light-dark(var(--chakra-colors-red-500), var(--chakra-colors-red-500));
70
- --color-red-border: light-dark(var(--chakra-colors-red-500), var(--chakra-colors-red-400));
71
-
72
- /* orange */
73
- --color-orange-contrast: light-dark(white, black);
74
- --color-orange-fg: light-dark(var(--chakra-colors-orange-700), var(--chakra-colors-orange-300));
75
- --color-orange-subtle: light-dark(var(--chakra-colors-orange-100), var(--chakra-colors-orange-900));
76
- --color-orange-muted: light-dark(var(--chakra-colors-orange-200), var(--chakra-colors-orange-800));
77
- --color-orange-emphasized: light-dark(var(--chakra-colors-orange-300), var(--chakra-colors-orange-700));
78
- --color-orange-solid: light-dark(var(--chakra-colors-orange-600), var(--chakra-colors-orange-500));
79
- --color-orange-focus-ring: light-dark(var(--chakra-colors-orange-500), var(--chakra-colors-orange-500));
80
- --color-orange-border: light-dark(var(--chakra-colors-orange-500), var(--chakra-colors-orange-400));
81
-
82
- /* green */
83
- --color-green-contrast: light-dark(white, white);
84
- --color-green-fg: light-dark(var(--chakra-colors-green-700), var(--chakra-colors-green-300));
85
- --color-green-subtle: light-dark(var(--chakra-colors-green-100), var(--chakra-colors-green-900));
86
- --color-green-muted: light-dark(var(--chakra-colors-green-200), var(--chakra-colors-green-800));
87
- --color-green-emphasized: light-dark(var(--chakra-colors-green-300), var(--chakra-colors-green-700));
88
- --color-green-solid: light-dark(var(--chakra-colors-green-600), var(--chakra-colors-green-600));
89
- --color-green-focus-ring: light-dark(var(--chakra-colors-green-500), var(--chakra-colors-green-500));
90
- --color-green-border: light-dark(var(--chakra-colors-green-500), var(--chakra-colors-green-400));
91
-
92
- /* blue */
93
- --color-blue-contrast: light-dark(white, white);
94
- --color-blue-fg: light-dark(var(--chakra-colors-blue-700), var(--chakra-colors-blue-300));
95
- --color-blue-subtle: light-dark(var(--chakra-colors-blue-100), var(--chakra-colors-blue-900));
96
- --color-blue-muted: light-dark(var(--chakra-colors-blue-200), var(--chakra-colors-blue-800));
97
- --color-blue-emphasized: light-dark(var(--chakra-colors-blue-300), var(--chakra-colors-blue-700));
98
- --color-blue-solid: light-dark(var(--chakra-colors-blue-600), var(--chakra-colors-blue-600));
99
- --color-blue-focus-ring: light-dark(var(--chakra-colors-blue-500), var(--chakra-colors-blue-500));
100
- --color-blue-border: light-dark(var(--chakra-colors-blue-500), var(--chakra-colors-blue-400));
101
-
102
- /* yellow */
103
- --color-yellow-contrast: light-dark(black, black);
104
- --color-yellow-fg: light-dark(var(--chakra-colors-yellow-800), var(--chakra-colors-yellow-300));
105
- --color-yellow-subtle: light-dark(var(--chakra-colors-yellow-100), var(--chakra-colors-yellow-900));
106
- --color-yellow-muted: light-dark(var(--chakra-colors-yellow-200), var(--chakra-colors-yellow-800));
107
- --color-yellow-emphasized: light-dark(var(--chakra-colors-yellow-300), var(--chakra-colors-yellow-700));
108
- --color-yellow-solid: light-dark(var(--chakra-colors-yellow-300), var(--chakra-colors-yellow-300));
109
- --color-yellow-focus-ring: light-dark(var(--chakra-colors-yellow-500), var(--chakra-colors-yellow-500));
110
- --color-yellow-border: light-dark(var(--chakra-colors-yellow-500), var(--chakra-colors-yellow-500));
111
-
112
- /* teal */
113
- --color-teal-contrast: light-dark(white, white);
114
- --color-teal-fg: light-dark(var(--chakra-colors-teal-700), var(--chakra-colors-teal-300));
115
- --color-teal-subtle: light-dark(var(--chakra-colors-teal-100), var(--chakra-colors-teal-900));
116
- --color-teal-muted: light-dark(var(--chakra-colors-teal-200), var(--chakra-colors-teal-800));
117
- --color-teal-emphasized: light-dark(var(--chakra-colors-teal-300), var(--chakra-colors-teal-700));
118
- --color-teal-solid: light-dark(var(--chakra-colors-teal-600), var(--chakra-colors-teal-600));
119
- --color-teal-focus-ring: light-dark(var(--chakra-colors-teal-500), var(--chakra-colors-teal-500));
120
- --color-teal-border: light-dark(var(--chakra-colors-teal-500), var(--chakra-colors-teal-400));
121
-
122
- /* purple */
123
- --color-purple-contrast: light-dark(white, white);
124
- --color-purple-fg: light-dark(var(--chakra-colors-purple-700), var(--chakra-colors-purple-300));
125
- --color-purple-subtle: light-dark(var(--chakra-colors-purple-100), var(--chakra-colors-purple-900));
126
- --color-purple-muted: light-dark(var(--chakra-colors-purple-200), var(--chakra-colors-purple-800));
127
- --color-purple-emphasized: light-dark(var(--chakra-colors-purple-300), var(--chakra-colors-purple-700));
128
- --color-purple-solid: light-dark(var(--chakra-colors-purple-600), var(--chakra-colors-purple-600));
129
- --color-purple-focus-ring: light-dark(var(--chakra-colors-purple-500), var(--chakra-colors-purple-500));
130
- --color-purple-border: light-dark(var(--chakra-colors-purple-500), var(--chakra-colors-purple-400));
131
-
132
- /* pink */
133
- --color-pink-contrast: light-dark(white, white);
134
- --color-pink-fg: light-dark(var(--chakra-colors-pink-700), var(--chakra-colors-pink-300));
135
- --color-pink-subtle: light-dark(var(--chakra-colors-pink-100), var(--chakra-colors-pink-900));
136
- --color-pink-muted: light-dark(var(--chakra-colors-pink-200), var(--chakra-colors-pink-800));
137
- --color-pink-emphasized: light-dark(var(--chakra-colors-pink-300), var(--chakra-colors-pink-700));
138
- --color-pink-solid: light-dark(var(--chakra-colors-pink-600), var(--chakra-colors-pink-600));
139
- --color-pink-focus-ring: light-dark(var(--chakra-colors-pink-500), var(--chakra-colors-pink-500));
140
- --color-pink-border: light-dark(var(--chakra-colors-pink-500), var(--chakra-colors-pink-400));
141
-
142
- /* cyan */
143
- --color-cyan-contrast: light-dark(white, white);
144
- --color-cyan-fg: light-dark(var(--chakra-colors-cyan-700), var(--chakra-colors-cyan-300));
145
- --color-cyan-subtle: light-dark(var(--chakra-colors-cyan-100), var(--chakra-colors-cyan-900));
146
- --color-cyan-muted: light-dark(var(--chakra-colors-cyan-200), var(--chakra-colors-cyan-800));
147
- --color-cyan-emphasized: light-dark(var(--chakra-colors-cyan-300), var(--chakra-colors-cyan-700));
148
- --color-cyan-solid: light-dark(var(--chakra-colors-cyan-600), var(--chakra-colors-cyan-600));
149
- --color-cyan-focus-ring: light-dark(var(--chakra-colors-cyan-500), var(--chakra-colors-cyan-500));
150
- --color-cyan-border: light-dark(var(--chakra-colors-cyan-500), var(--chakra-colors-cyan-400));
151
-
152
- /* shadows */
153
- --shadows-xs:
154
- light-dark(
155
- 0px 1px 2px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
156
- 0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 20%, transparent),
157
- 0px 1px 1px color-mix(in srgb, black 64%, transparent),
158
- 0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 20%, transparent)
159
- );
160
- --shadows-sm:
161
- light-dark(
162
- 0px 2px 4px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
163
- 0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
164
- 0px 2px 4px color-mix(in srgb, black 64%, transparent),
165
- 0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
166
- );
167
- --shadows-md:
168
- light-dark(
169
- 0px 4px 8px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
170
- 0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
171
- 0px 4px 8px color-mix(in srgb, black 64%, transparent),
172
- 0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
173
- );
174
- --shadows-lg:
175
- light-dark(
176
- 0px 8px 16px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
177
- 0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
178
- 0px 8px 16px color-mix(in srgb, black 64%, transparent),
179
- 0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
180
- );
181
- --shadows-xl:
182
- light-dark(
183
- 0px 16px 24px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
184
- 0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
185
- 0px 16px 24px color-mix(in srgb, black 64%, transparent),
186
- 0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
187
- );
188
- --shadows-2xl:
189
- light-dark(
190
- 0px 24px 40px color-mix(in srgb, var(--chakra-colors-gray-900) 16%, transparent),
191
- 0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
192
- 0px 24px 40px color-mix(in srgb, black 64%, transparent),
193
- 0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
194
- );
195
- --shadows-inner:
196
- light-dark(
197
- inset 0 2px 4px 0 color-mix(in srgb, black 5%, transparent),
198
- inset 0 2px 4px 0 black
199
- );
200
- --shadows-inset:
201
- light-dark(
202
- inset 0 0 0 1px color-mix(in srgb, black 5%, transparent),
203
- inset 0 0 0 1px color-mix(in srgb, var(--chakra-colors-gray-300) 5%, transparent)
204
- );
205
- }
@@ -1,6 +0,0 @@
1
- :root {
2
- --container-size-sm: 26rem;
3
- --container-size-md: 48rem;
4
- --container-size-lg: 64rem;
5
- --gutter: var(--spacing-4);
6
- }
@@ -1,10 +0,0 @@
1
- :root {
2
- --spacing-1: 0.25rem;
3
- --spacing-2: 0.5rem;
4
- --spacing-3: 0.75rem;
5
- --spacing-4: 1rem;
6
- --spacing-6: 1.5rem;
7
- --spacing-8: 2rem;
8
- --spacing-12: 3rem;
9
- --spacing-16: 4rem;
10
- }
@@ -1,10 +0,0 @@
1
- :root {
2
- --transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
3
- --transition-duration: 0.01s;
4
-
5
- @media (prefers-reduced-motion: no-preference) {
6
- --transition-duration: 0.25s;
7
- }
8
-
9
- --transition: var(--transition-timing-function) var(--transition-duration);
10
- }