@cosxai/ui 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/styles/base.css +16 -0
- package/src/styles/chrome-swiss.css +27 -2
package/package.json
CHANGED
package/src/styles/base.css
CHANGED
|
@@ -17,6 +17,22 @@ body {
|
|
|
17
17
|
transition: background-color 200ms var(--ck-ease), color 200ms var(--ck-ease);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
/* Anchor — defaults to the active chrome's accent + a clean
|
|
21
|
+
underline. Without this rule, the browser's visited-link
|
|
22
|
+
purple bleeds through any theme (most notably terminal /
|
|
23
|
+
editorial). Components that want different styling (NavItem,
|
|
24
|
+
TopBar nav, breadcrumbs, in-card secondary links) override
|
|
25
|
+
locally with a more-specific selector. */
|
|
26
|
+
a {
|
|
27
|
+
color: var(--ck-accent);
|
|
28
|
+
text-decoration: underline;
|
|
29
|
+
text-decoration-thickness: 1px;
|
|
30
|
+
text-underline-offset: 2px;
|
|
31
|
+
transition: color var(--ck-dur-fast) var(--ck-ease);
|
|
32
|
+
}
|
|
33
|
+
a:hover { color: var(--ck-accent-hover); }
|
|
34
|
+
a:visited { color: var(--ck-accent); }
|
|
35
|
+
|
|
20
36
|
/* ---------- Typography utilities ---------- */
|
|
21
37
|
.ck-h1 { font: 500 32px/1.2 var(--ck-font-sans); letter-spacing: -0.01em; color: var(--ck-text-primary); margin: 0; }
|
|
22
38
|
.ck-h2 { font: 500 24px/1.3 var(--ck-font-sans); letter-spacing: -0.005em; color: var(--ck-text-primary); margin: 0; }
|
|
@@ -75,7 +75,12 @@ html[data-ck-chrome="swiss"] .ck-btn--ghost:hover:not(:disabled) {
|
|
|
75
75
|
|
|
76
76
|
/* ===== Inputs — bottom-border-only (canonical Swiss form) === */
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
/* :not(.ck-input--with-addon) — when the input is inside a
|
|
79
|
+
prefix/suffix wrapper the wrapper carries the border + padding,
|
|
80
|
+
and stripping the input's own padding makes the placeholder
|
|
81
|
+
collide with the addon. The addon variant gets the swiss
|
|
82
|
+
underline only at the OUTER wrap level (rule further down). */
|
|
83
|
+
html[data-ck-chrome="swiss"] .ck-input:not(.ck-input--with-addon),
|
|
79
84
|
html[data-ck-chrome="swiss"] .ck-textarea {
|
|
80
85
|
background: transparent !important;
|
|
81
86
|
border: none !important;
|
|
@@ -86,7 +91,7 @@ html[data-ck-chrome="swiss"] .ck-textarea {
|
|
|
86
91
|
color: var(--ck-text-primary);
|
|
87
92
|
transition: border-bottom-color 120ms ease, border-bottom-width 120ms ease;
|
|
88
93
|
}
|
|
89
|
-
html[data-ck-chrome="swiss"] .ck-input:focus-visible,
|
|
94
|
+
html[data-ck-chrome="swiss"] .ck-input:not(.ck-input--with-addon):focus-visible,
|
|
90
95
|
html[data-ck-chrome="swiss"] .ck-textarea:focus-visible {
|
|
91
96
|
outline: none;
|
|
92
97
|
border-bottom-color: var(--ck-text-primary) !important;
|
|
@@ -94,6 +99,26 @@ html[data-ck-chrome="swiss"] .ck-textarea:focus-visible {
|
|
|
94
99
|
box-shadow: none !important;
|
|
95
100
|
}
|
|
96
101
|
|
|
102
|
+
/* Addon variant — flatten the wrapper to the swiss underline-only
|
|
103
|
+
form so the whole field (input + addons) reads as one bar. The
|
|
104
|
+
inner .ck-input keeps its default padding; the wrap loses its
|
|
105
|
+
side / top borders and its corner radius. */
|
|
106
|
+
html[data-ck-chrome="swiss"] .ck-input-addon-wrap {
|
|
107
|
+
border: none !important;
|
|
108
|
+
border-bottom: 1px solid var(--ck-border-subtle) !important;
|
|
109
|
+
border-radius: 0 !important;
|
|
110
|
+
background: transparent !important;
|
|
111
|
+
}
|
|
112
|
+
html[data-ck-chrome="swiss"] .ck-input-addon-wrap:focus-within {
|
|
113
|
+
border-bottom-color: var(--ck-text-primary) !important;
|
|
114
|
+
border-bottom-width: 2px !important;
|
|
115
|
+
}
|
|
116
|
+
/* Recess the addon further so the slab still reads against the
|
|
117
|
+
underlined input column. */
|
|
118
|
+
html[data-ck-chrome="swiss"] .ck-input-addon {
|
|
119
|
+
background: var(--ck-bg-muted) !important;
|
|
120
|
+
}
|
|
121
|
+
|
|
97
122
|
/* ===== Cards — rules-only sectioning ======================== */
|
|
98
123
|
|
|
99
124
|
html[data-ck-chrome="swiss"] .ck-card {
|