keystone_ui-styles 0.2.0 → 0.4.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.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 313dc2e29ebb30c8b62fcc732e29f8b22a1eac18864da55c47f953b0006537da
|
|
4
|
+
data.tar.gz: 41caf540753ab7495a116ed1e2ccfcd60ba40fd119d859740bbbd743fe70fddc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1400b6b290038f3b750c14ea37d9a4559c6ebd0e7d5182b03f1ef9e5e546a71f24364715a71cbe8332d4378beabc7d29493adfb94c4a8d65292c32a9e51b3f8e
|
|
7
|
+
data.tar.gz: '09fd3861e0b7f2077af23dd81c400e955a23066dd5de631a14e3a0dd7a575ff88da01773dddd11f4b48c168da266f7081bfdce5206308f9296d950c3e9076df9'
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@media (prefers-color-scheme: dark) {
|
|
7
|
-
&:where(:not([data-theme="light"], [data-theme="light"] *)) {
|
|
7
|
+
&:where(:not([data-theme="light"], [data-theme="light"] *, [data-theme="custom"], [data-theme="custom"] *)) {
|
|
8
8
|
@slot;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
@@ -34,35 +34,87 @@
|
|
|
34
34
|
--color-surface-800: #27272a;
|
|
35
35
|
--color-surface-900: #18181b;
|
|
36
36
|
--color-surface-950: #09090b;
|
|
37
|
+
|
|
38
|
+
--color-custom-background: #ffffff;
|
|
39
|
+
--color-custom-text: #18181b;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
[data-theme="custom"] {
|
|
43
|
+
--color-white: var(--color-custom-background);
|
|
44
|
+
--color-gray-50: color-mix(in oklab, var(--color-custom-text) 3%, var(--color-custom-background));
|
|
45
|
+
--color-gray-100: color-mix(in oklab, var(--color-custom-text) 6%, var(--color-custom-background));
|
|
46
|
+
--color-gray-200: color-mix(in oklab, var(--color-custom-text) 12%, var(--color-custom-background));
|
|
47
|
+
--color-gray-300: color-mix(in oklab, var(--color-custom-text) 20%, var(--color-custom-background));
|
|
48
|
+
--color-gray-400: color-mix(in oklab, var(--color-custom-text) 40%, var(--color-custom-background));
|
|
49
|
+
--color-gray-500: color-mix(in oklab, var(--color-custom-text) 55%, var(--color-custom-background));
|
|
50
|
+
--color-gray-600: color-mix(in oklab, var(--color-custom-text) 68%, var(--color-custom-background));
|
|
51
|
+
--color-gray-700: color-mix(in oklab, var(--color-custom-text) 78%, var(--color-custom-background));
|
|
52
|
+
--color-gray-800: color-mix(in oklab, var(--color-custom-text) 87%, var(--color-custom-background));
|
|
53
|
+
--color-gray-900: color-mix(in oklab, var(--color-custom-text) 94%, var(--color-custom-background));
|
|
54
|
+
--color-gray-950: color-mix(in oklab, var(--color-custom-text) 100%, var(--color-custom-background));
|
|
55
|
+
--color-zinc-50: color-mix(in oklab, var(--color-custom-text) 3%, var(--color-custom-background));
|
|
56
|
+
--color-zinc-100: color-mix(in oklab, var(--color-custom-text) 6%, var(--color-custom-background));
|
|
57
|
+
--color-zinc-200: color-mix(in oklab, var(--color-custom-text) 12%, var(--color-custom-background));
|
|
58
|
+
--color-zinc-300: color-mix(in oklab, var(--color-custom-text) 20%, var(--color-custom-background));
|
|
59
|
+
--color-zinc-400: color-mix(in oklab, var(--color-custom-text) 40%, var(--color-custom-background));
|
|
60
|
+
--color-zinc-500: color-mix(in oklab, var(--color-custom-text) 55%, var(--color-custom-background));
|
|
61
|
+
--color-zinc-600: color-mix(in oklab, var(--color-custom-text) 68%, var(--color-custom-background));
|
|
62
|
+
--color-zinc-700: color-mix(in oklab, var(--color-custom-text) 78%, var(--color-custom-background));
|
|
63
|
+
--color-zinc-800: color-mix(in oklab, var(--color-custom-text) 87%, var(--color-custom-background));
|
|
64
|
+
--color-zinc-900: color-mix(in oklab, var(--color-custom-text) 94%, var(--color-custom-background));
|
|
65
|
+
--color-zinc-950: color-mix(in oklab, var(--color-custom-text) 100%, var(--color-custom-background));
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@layer base {
|
|
69
|
+
:root {
|
|
70
|
+
--ks-radius-control: var(--radius-lg);
|
|
71
|
+
--ks-font-weight-strong: var(--font-weight-semibold);
|
|
72
|
+
--ks-border-width-control: 0px;
|
|
73
|
+
--ks-spacing: var(--spacing);
|
|
74
|
+
--ks-color-accent: var(--color-accent-600);
|
|
75
|
+
--ks-color-accent-hover: var(--color-accent-500);
|
|
76
|
+
--ks-color-on-fill: var(--color-white);
|
|
77
|
+
--ks-color-neutral: var(--color-gray-500);
|
|
78
|
+
--ks-color-neutral-hover: var(--color-gray-400);
|
|
79
|
+
--ks-color-danger: var(--color-red-600);
|
|
80
|
+
--ks-color-danger-hover: var(--color-red-500);
|
|
81
|
+
--ks-color-accent-dark: var(--color-accent-600);
|
|
82
|
+
--ks-color-accent-hover-dark: var(--color-accent-500);
|
|
83
|
+
--ks-color-neutral-dark: var(--color-gray-500);
|
|
84
|
+
--ks-color-neutral-hover-dark: var(--color-gray-400);
|
|
85
|
+
--ks-color-danger-dark: var(--color-red-600);
|
|
86
|
+
--ks-color-danger-hover-dark: var(--color-red-500);
|
|
87
|
+
--ks-color-on-fill-dark: var(--color-white);
|
|
88
|
+
}
|
|
37
89
|
}
|
|
38
90
|
|
|
39
91
|
@layer components {
|
|
40
92
|
.ks-button {
|
|
41
|
-
@apply inline-flex items-center justify-center font-
|
|
93
|
+
@apply inline-flex items-center justify-center font-(family-name:--ks-font-body) font-(weight:--ks-font-weight-strong) rounded-(--ks-radius-control) border-(length:--ks-border-width-control) cursor-pointer no-underline;
|
|
42
94
|
}
|
|
43
95
|
|
|
44
96
|
.ks-button-primary {
|
|
45
|
-
@apply bg-accent-
|
|
97
|
+
@apply bg-(color:--ks-color-accent) text-(color:--ks-color-on-fill) hover:bg-(color:--ks-color-accent-hover) dark:bg-(color:--ks-color-accent-dark) dark:text-(color:--ks-color-on-fill-dark) dark:hover:bg-(color:--ks-color-accent-hover-dark);
|
|
46
98
|
}
|
|
47
99
|
|
|
48
100
|
.ks-button-secondary {
|
|
49
|
-
@apply bg-
|
|
101
|
+
@apply bg-(color:--ks-color-neutral) text-(color:--ks-color-on-fill) hover:bg-(color:--ks-color-neutral-hover) dark:bg-(color:--ks-color-neutral-dark) dark:text-(color:--ks-color-on-fill-dark) dark:hover:bg-(color:--ks-color-neutral-hover-dark);
|
|
50
102
|
}
|
|
51
103
|
|
|
52
104
|
.ks-button-danger {
|
|
53
|
-
@apply bg-
|
|
105
|
+
@apply bg-(color:--ks-color-danger) text-(color:--ks-color-on-fill) hover:bg-(color:--ks-color-danger-hover) dark:bg-(color:--ks-color-danger-dark) dark:text-(color:--ks-color-on-fill-dark) dark:hover:bg-(color:--ks-color-danger-hover-dark);
|
|
54
106
|
}
|
|
55
107
|
|
|
56
108
|
.ks-button-sm {
|
|
57
|
-
@apply text-sm px-3 py-1.5;
|
|
109
|
+
@apply text-sm px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*1.5)];
|
|
58
110
|
}
|
|
59
111
|
|
|
60
112
|
.ks-button-md {
|
|
61
|
-
@apply text-base px-4 py-2;
|
|
113
|
+
@apply text-base px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*2)];
|
|
62
114
|
}
|
|
63
115
|
|
|
64
116
|
.ks-button-lg {
|
|
65
|
-
@apply text-lg px-5 py-3;
|
|
117
|
+
@apply text-lg px-[calc(var(--ks-spacing)*5)] py-[calc(var(--ks-spacing)*3)];
|
|
66
118
|
}
|
|
67
119
|
|
|
68
120
|
.ks-panel {
|
metadata
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: keystone_ui-styles
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.4.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Tyler Schneider
|
|
8
|
-
autorequire:
|
|
9
8
|
bindir: bin
|
|
10
9
|
cert_chain: []
|
|
11
|
-
date:
|
|
10
|
+
date: 1980-01-02 00:00:00.000000000 Z
|
|
12
11
|
dependencies:
|
|
13
12
|
- !ruby/object:Gem::Dependency
|
|
14
13
|
name: railties
|
|
@@ -48,7 +47,6 @@ metadata:
|
|
|
48
47
|
bug_tracker_uri: https://github.com/DYB-Development/keystone_ui-styles/issues
|
|
49
48
|
documentation_uri: https://github.com/DYB-Development/keystone_ui-styles#readme
|
|
50
49
|
rubygems_mfa_required: 'true'
|
|
51
|
-
post_install_message:
|
|
52
50
|
rdoc_options: []
|
|
53
51
|
require_paths:
|
|
54
52
|
- lib
|
|
@@ -63,8 +61,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
63
61
|
- !ruby/object:Gem::Version
|
|
64
62
|
version: '0'
|
|
65
63
|
requirements: []
|
|
66
|
-
rubygems_version:
|
|
67
|
-
signing_key:
|
|
64
|
+
rubygems_version: 4.0.20
|
|
68
65
|
specification_version: 4
|
|
69
66
|
summary: Shared CSS for keystone_ui and keystone_ui-react.
|
|
70
67
|
test_files: []
|