killbill-assets-ui 1.0.2 → 1.1.1
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 +4 -4
- data/README.md +38 -0
- data/app/assets/stylesheets/assets/bootstrap_and_overrides.css +25 -0
- data/app/assets/stylesheets/assets/common.css +20 -4
- data/app/assets/stylesheets/assets/datatable.css +7 -9
- data/app/assets/stylesheets/assets/element.css +65 -66
- data/app/assets/stylesheets/assets/jquery_datatables.css +2 -1
- data/app/assets/stylesheets/assets/theme.css +19 -27
- data/app/assets/stylesheets/assets/tokens.css +245 -0
- data/lib/assets/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3fa184b9deeafc595ffcbe67c66074ba79430e885823bc881bf80763e1a15fa4
|
|
4
|
+
data.tar.gz: 72e62de52e5a4f853cb18e68eac8c13622ffc5392c8d471c051fe60f8ed69caa
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 396ed141c1a6e75032521a938db78ba916494cbc96e64b8504c08b23deb894ac39989ba0a94edaa4565d30ad09879a13b8bf96f5f837b0ef02d0bb988687296c
|
|
7
|
+
data.tar.gz: 4d8778570045b07c2eebb2bfd9a307d5cf613af8222c9a4d70661a7f47096c80065179644a66a93751e770498a1b2e791b2ab74dc8163316b7410a31149e4a4f
|
data/README.md
CHANGED
|
@@ -21,6 +21,44 @@ Or install it yourself as:
|
|
|
21
21
|
$ gem install killbill-assets-ui
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
+
## Theming / design tokens
|
|
25
|
+
|
|
26
|
+
This gem owns the **Kill Bill Design System 2026** tokens — the single source of truth for
|
|
27
|
+
color and typography across KAUI and all mountable engines. They live in
|
|
28
|
+
[`app/assets/stylesheets/assets/tokens.css`](app/assets/stylesheets/assets/tokens.css) as CSS
|
|
29
|
+
custom properties on `:root`, loaded first in the `assets/common` bundle (see
|
|
30
|
+
`app/assets/stylesheets/assets/common.css`, which requires files explicitly — add new
|
|
31
|
+
stylesheets there, in order, after `tokens`).
|
|
32
|
+
|
|
33
|
+
Token layers (prefix `--kb-`, mirroring the Figma file "Kill Bill | Design System 2026"):
|
|
34
|
+
|
|
35
|
+
- **Primitives** — raw palette scales: `--kb-neutral-{0..900}`, `--kb-primary-{25..800}`,
|
|
36
|
+
`--kb-error-*`, `--kb-warning-*`, `--kb-success-*`, `--kb-purple-*`.
|
|
37
|
+
- **Semantic** — alias the primitives; use these in app styles:
|
|
38
|
+
- actions: `--kb-primary`, `--kb-primary-hover`, `--kb-primary-pressed`, `--kb-on-primary`
|
|
39
|
+
- surfaces: `--kb-surface-container-lowest`, `--kb-surface-container-low`,
|
|
40
|
+
`--kb-surface-container`, `--kb-surface-container-high`
|
|
41
|
+
- text: `--kb-on-surface{-primary,-secondary,-tertiary,-quaternary}`
|
|
42
|
+
- borders: `--kb-outline{-primary,-secondary,-tertiary}`
|
|
43
|
+
- status: `--kb-{error,warning,success}` (+ `-hover`, `-pressed`, `--kb-on-{error,warning,success}`)
|
|
44
|
+
- disabled: `--kb-disable{-primary,-secondary,-tertiary}`
|
|
45
|
+
- tag containers: `--kb-{neutral,primary,error,warning,success,purple}-container` with matching `--kb-on-*-container`
|
|
46
|
+
- **Typography** — `--kb-font-family-base` (Inter) and composite text-style tokens usable as
|
|
47
|
+
`font: var(--kb-body-medium);`: `--kb-display-{large,medium,small}`,
|
|
48
|
+
`--kb-headline-{large,medium,small}`, `--kb-title-{large,medium,small}`,
|
|
49
|
+
`--kb-body-{large,medium,small}`, `--kb-label-{large-emphasis,large,medium,small}`.
|
|
50
|
+
- **Bootstrap bridge** — `--bs-primary` … `--bs-dark` are redefined on top of the semantic
|
|
51
|
+
tokens so Bootstrap components follow the design system.
|
|
52
|
+
- **Legacy** — `--kb-legacy-*` values preserve the old KAUI theme used by `element.css` /
|
|
53
|
+
`datatable.css`. They are not part of the design system; **do not use them in new styles**.
|
|
54
|
+
|
|
55
|
+
Rules of the road:
|
|
56
|
+
|
|
57
|
+
- New styles must reference tokens (`color: var(--kb-on-surface-secondary);`), never hex values.
|
|
58
|
+
- When the Figma design system changes, edit **only** `tokens.css` and cut a new gem version.
|
|
59
|
+
- Keep the two font `@import` lines at the very top of `tokens.css` — it is the first file in
|
|
60
|
+
the concatenated bundle, and browsers drop `@import`s that appear after other rules.
|
|
61
|
+
|
|
24
62
|
## Contributing
|
|
25
63
|
Contribution directions go here.
|
|
26
64
|
|
|
@@ -7,3 +7,28 @@
|
|
|
7
7
|
url('../assets/glyphicons-halflings-regular.ttf') format('truetype'),
|
|
8
8
|
url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
|
|
9
9
|
}
|
|
10
|
+
|
|
11
|
+
/*
|
|
12
|
+
* Bootstrap bridge — redefines Bootstrap's :root --bs-* variables on top of
|
|
13
|
+
* the design tokens. This file is required right after bootstrap.min.css
|
|
14
|
+
* (which defines its own --bs-* variables on :root), so these win the cascade.
|
|
15
|
+
* Note: the vendored Bootstrap 5.0.2 compiled its component rules
|
|
16
|
+
* (.btn-primary, .alert-*, .text-*, …) with raw hex values and never reads
|
|
17
|
+
* these variables, so they only affect code that references var(--bs-*)
|
|
18
|
+
* directly (custom or third-party). Stock component theming lives in
|
|
19
|
+
* theme.css's explicit overrides; upgrading Bootstrap (5.3+ consumes vars
|
|
20
|
+
* in component rules) would extend this bridge to stock components.
|
|
21
|
+
* Replaces the hardcoded block previously in theme.css.
|
|
22
|
+
* --bs-info has no design-system counterpart yet; mapped to primary-400
|
|
23
|
+
* until the Figma defines one.
|
|
24
|
+
*/
|
|
25
|
+
:root {
|
|
26
|
+
--bs-primary: var(--kb-primary);
|
|
27
|
+
--bs-secondary: var(--kb-neutral-400);
|
|
28
|
+
--bs-success: var(--kb-success);
|
|
29
|
+
--bs-danger: var(--kb-error);
|
|
30
|
+
--bs-warning: var(--kb-warning);
|
|
31
|
+
--bs-info: var(--kb-primary-400);
|
|
32
|
+
--bs-light: var(--kb-surface-container);
|
|
33
|
+
--bs-dark: var(--kb-neutral-800);
|
|
34
|
+
}
|
|
@@ -1,8 +1,24 @@
|
|
|
1
1
|
/*
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
*
|
|
2
|
+
* Manifest for the shared Kill Bill UI assets.
|
|
3
|
+
* Files are required explicitly (not require_tree) so the load order stays
|
|
4
|
+
* deterministic:
|
|
5
|
+
* 1. tokens must be first — its font @imports are only honored at the top
|
|
6
|
+
* of the concatenated bundle, and its custom properties carry no rules
|
|
7
|
+
* that could affect the cascade of the vendor files below;
|
|
8
|
+
* 2. bootstrap_and_overrides must stay immediately after bootstrap.min —
|
|
9
|
+
* it redefines Bootstrap's :root --bs-* variables;
|
|
10
|
+
* 3. theme stays last so its overrides win, as before.
|
|
11
|
+
* Add new stylesheets to this list explicitly.
|
|
12
|
+
*
|
|
13
|
+
*= require assets/tokens
|
|
5
14
|
*= require font-awesome
|
|
6
15
|
*= require bootstrap-datepicker3
|
|
7
|
-
*=
|
|
16
|
+
*= require assets/bootstrap.min
|
|
17
|
+
*= require assets/bootstrap_and_overrides
|
|
18
|
+
*= require assets/dataTables.colReorder.min
|
|
19
|
+
*= require assets/datatable
|
|
20
|
+
*= require assets/element
|
|
21
|
+
*= require assets/jquery-ui.min
|
|
22
|
+
*= require assets/jquery_datatables
|
|
23
|
+
*= require assets/theme
|
|
8
24
|
*/
|
|
@@ -10,15 +10,15 @@
|
|
|
10
10
|
.search table.table-small-padding th:first-of-type, .search table.table-small-padding td:first-of-type {
|
|
11
11
|
padding-left: 20px; }
|
|
12
12
|
.search table.table-colored-rows tr.insert {
|
|
13
|
-
background-color:
|
|
13
|
+
background-color: var(--kb-legacy-row-insert); }
|
|
14
14
|
.search table.table-colored-rows tr.update {
|
|
15
|
-
background-color:
|
|
15
|
+
background-color: var(--kb-legacy-row-update); }
|
|
16
16
|
.search table.table-colored-rows tr.delete {
|
|
17
|
-
background-color:
|
|
17
|
+
background-color: var(--kb-legacy-row-delete); }
|
|
18
18
|
.search table.table-colored-rows th:first-of-type, .search table.table-colored-rows td:first-of-type {
|
|
19
19
|
padding-left: 20px; }
|
|
20
20
|
.search tr.disabled {
|
|
21
|
-
background-color:
|
|
21
|
+
background-color: var(--kb-legacy-row-disabled); }
|
|
22
22
|
|
|
23
23
|
table.dataTable {
|
|
24
24
|
padding: 0; }
|
|
@@ -48,24 +48,22 @@ table.dataTable thead td {
|
|
|
48
48
|
border-bottom: 0; }
|
|
49
49
|
|
|
50
50
|
table.dataTable.no-footer {
|
|
51
|
-
border-bottom: 1px solid
|
|
51
|
+
border-bottom: 1px solid var(--kb-legacy-border-light); }
|
|
52
52
|
|
|
53
53
|
.info-wrapper table.dataTable.no-footer {
|
|
54
54
|
border-bottom: 0; }
|
|
55
55
|
|
|
56
56
|
#invoice-table tbody tr {
|
|
57
|
-
border-bottom: 1px solid
|
|
57
|
+
border-bottom: 1px solid var(--kb-legacy-border-light); }
|
|
58
58
|
|
|
59
59
|
@media (max-width: 768px) {
|
|
60
60
|
#accounts-table {
|
|
61
61
|
width: 100% !important; } }
|
|
62
62
|
|
|
63
63
|
table.dataTable.table-condensed thead > tr > th {
|
|
64
|
-
border-right: 1px solid
|
|
64
|
+
border-right: 1px solid var(--kb-legacy-border-dark); }
|
|
65
65
|
table.dataTable.table-condensed thead > tr > th:last-of-type {
|
|
66
66
|
border-right: 0; }
|
|
67
67
|
|
|
68
68
|
.dataTables_paginate.paging_full_numbers {
|
|
69
69
|
padding-top: 30px; }
|
|
70
|
-
|
|
71
|
-
/*# sourceMappingURL=datatable.css.map */
|
|
@@ -1,42 +1,43 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* Basic & Common
|
|
3
|
+
* Legacy KAUI theme. Colors use the --kb-legacy-* tokens from tokens.css,
|
|
4
|
+
* which preserve the original values exactly. Do not add new styles here.
|
|
3
5
|
*/
|
|
4
|
-
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
|
|
5
6
|
body {
|
|
6
|
-
background:
|
|
7
|
+
background: var(--kb-legacy-bg);
|
|
7
8
|
animation: all 0.5s;
|
|
8
|
-
font-family:
|
|
9
|
-
color:
|
|
9
|
+
font-family: var(--kb-font-family-legacy);
|
|
10
|
+
color: var(--kb-legacy-text);
|
|
10
11
|
padding-bottom: 50px; }
|
|
11
12
|
|
|
12
13
|
h1, h2, h3 {
|
|
13
14
|
margin: 0 0 20px;
|
|
14
|
-
font-family:
|
|
15
|
+
font-family: var(--kb-font-family-legacy); }
|
|
15
16
|
|
|
16
17
|
h1 {
|
|
17
18
|
font-size: 18px;
|
|
18
|
-
color:
|
|
19
|
+
color: var(--kb-legacy-accent);
|
|
19
20
|
text-transform: capitalize;
|
|
20
21
|
line-height: 1.333;
|
|
21
22
|
padding: 0 30px 10px;
|
|
22
|
-
border-bottom: 1px solid
|
|
23
|
+
border-bottom: 1px solid var(--kb-legacy-border);
|
|
23
24
|
font-weight: 700; }
|
|
24
25
|
|
|
25
26
|
h2 {
|
|
26
27
|
font-size: 20px;
|
|
27
|
-
color:
|
|
28
|
+
color: var(--kb-legacy-heading);
|
|
28
29
|
line-height: 1.5;
|
|
29
30
|
text-align: center; }
|
|
30
31
|
|
|
31
32
|
h3 {
|
|
32
33
|
font-size: 16px;
|
|
33
|
-
color:
|
|
34
|
+
color: var(--kb-legacy-heading);
|
|
34
35
|
line-height: 1.5;
|
|
35
36
|
text-align: center; }
|
|
36
37
|
|
|
37
38
|
p {
|
|
38
39
|
font-size: 14px;
|
|
39
|
-
color:
|
|
40
|
+
color: var(--kb-legacy-muted);
|
|
40
41
|
line-height: 20px;
|
|
41
42
|
text-align: left;
|
|
42
43
|
margin: 0 0 20px;
|
|
@@ -48,59 +49,59 @@ p {
|
|
|
48
49
|
padding-left: 30px; }
|
|
49
50
|
|
|
50
51
|
a {
|
|
51
|
-
color: blue;
|
|
52
|
+
color: var(--kb-legacy-blue);
|
|
52
53
|
transition: all 0.3s; }
|
|
53
54
|
a:hover {
|
|
54
55
|
text-decoration: none; }
|
|
55
56
|
a .fa-times {
|
|
56
|
-
color:
|
|
57
|
+
color: var(--kb-legacy-accent); }
|
|
57
58
|
a .fa-times:hover {
|
|
58
|
-
color:
|
|
59
|
+
color: var(--kb-legacy-accent-dark); }
|
|
59
60
|
|
|
60
61
|
span.success, span.fail {
|
|
61
62
|
display: inline-block;
|
|
62
63
|
font-size: 14px;
|
|
63
|
-
color:
|
|
64
|
+
color: var(--kb-neutral-0);
|
|
64
65
|
font-weight: 400;
|
|
65
66
|
padding: 0px 10px;
|
|
66
|
-
background-color:
|
|
67
|
+
background-color: var(--kb-legacy-danger); }
|
|
67
68
|
span.success {
|
|
68
|
-
background-color:
|
|
69
|
+
background-color: var(--kb-legacy-success); }
|
|
69
70
|
span.label {
|
|
70
71
|
font-size: 14px;
|
|
71
72
|
line-height: 20px;
|
|
72
73
|
padding: 0 5px;
|
|
73
74
|
display: inline-block;
|
|
74
75
|
font-weight: normal;
|
|
75
|
-
color:
|
|
76
|
+
color: var(--kb-legacy-text); }
|
|
76
77
|
span.label.label-default, span.label.label-success, span.label.label-warning, span.label.label-danger {
|
|
77
|
-
color:
|
|
78
|
+
color: var(--kb-neutral-0); }
|
|
78
79
|
|
|
79
80
|
input, textarea, select {
|
|
80
|
-
border: 1px solid
|
|
81
|
+
border: 1px solid var(--kb-legacy-border);
|
|
81
82
|
border-radius: 0;
|
|
82
|
-
background:
|
|
83
|
+
background: var(--kb-neutral-0);
|
|
83
84
|
line-height: 28px;
|
|
84
85
|
height: 30px;
|
|
85
86
|
font-size: 14px;
|
|
86
87
|
padding: 0 5px;
|
|
87
|
-
outline-color:
|
|
88
|
+
outline-color: var(--kb-legacy-input-outline); }
|
|
88
89
|
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {
|
|
89
|
-
color:
|
|
90
|
+
color: var(--kb-legacy-placeholder);
|
|
90
91
|
font-weight: strong;
|
|
91
92
|
font-style: italic; }
|
|
92
93
|
input:-moz-placeholder, textarea:-moz-placeholder, select:-moz-placeholder {
|
|
93
94
|
/* Firefox 18- */
|
|
94
|
-
color:
|
|
95
|
+
color: var(--kb-legacy-placeholder);
|
|
95
96
|
font-weight: strong;
|
|
96
97
|
font-style: italic; }
|
|
97
98
|
input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
|
|
98
99
|
/* Firefox 19+ */
|
|
99
|
-
color:
|
|
100
|
+
color: var(--kb-legacy-placeholder);
|
|
100
101
|
font-weight: strong;
|
|
101
102
|
font-style: italic; }
|
|
102
103
|
input:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {
|
|
103
|
-
color:
|
|
104
|
+
color: var(--kb-legacy-placeholder);
|
|
104
105
|
font-weight: strong;
|
|
105
106
|
font-style: italic; }
|
|
106
107
|
|
|
@@ -112,8 +113,8 @@ textarea {
|
|
|
112
113
|
line-height: 16px; }
|
|
113
114
|
|
|
114
115
|
button, input[type="submit"] {
|
|
115
|
-
background: blue;
|
|
116
|
-
color:
|
|
116
|
+
background: var(--kb-legacy-blue);
|
|
117
|
+
color: var(--kb-neutral-0);
|
|
117
118
|
text-transform: uppercase;
|
|
118
119
|
font-size: 12px;
|
|
119
120
|
padding: 10px 30px;
|
|
@@ -122,31 +123,31 @@ button, input[type="submit"] {
|
|
|
122
123
|
border: 0;
|
|
123
124
|
transition: all 0.5s; }
|
|
124
125
|
button:hover, input[type="submit"]:hover {
|
|
125
|
-
background:
|
|
126
|
-
color:
|
|
126
|
+
background: var(--kb-legacy-blue-hover);
|
|
127
|
+
color: var(--kb-neutral-0); }
|
|
127
128
|
|
|
128
129
|
label {
|
|
129
130
|
cursor: pointer;
|
|
130
131
|
font-size: 100%;
|
|
131
|
-
color:
|
|
132
|
+
color: var(--kb-legacy-label);
|
|
132
133
|
text-transform: none;
|
|
133
134
|
font-weight: normal; }
|
|
134
135
|
|
|
135
136
|
hr {
|
|
136
|
-
border-color:
|
|
137
|
+
border-color: var(--kb-legacy-border); }
|
|
137
138
|
|
|
138
139
|
table {
|
|
139
140
|
width: 100%;
|
|
140
141
|
font-size: 14px;
|
|
141
142
|
font-weight: 300;
|
|
142
|
-
border: 1px solid
|
|
143
|
+
border: 1px solid var(--kb-legacy-table-bg);
|
|
143
144
|
padding: 0 60px; }
|
|
144
145
|
@media (max-width: 768px) {
|
|
145
146
|
table {
|
|
146
147
|
padding: 0 5px; } }
|
|
147
148
|
table th {
|
|
148
|
-
background:
|
|
149
|
-
color:
|
|
149
|
+
background: var(--kb-legacy-table-bg);
|
|
150
|
+
color: var(--kb-legacy-table-header-text);
|
|
150
151
|
font-size: 14px;
|
|
151
152
|
font-weight: 700;
|
|
152
153
|
text-transform: uppercase;
|
|
@@ -156,7 +157,7 @@ table {
|
|
|
156
157
|
padding: 5px;
|
|
157
158
|
word-break: break-word; } }
|
|
158
159
|
table tr {
|
|
159
|
-
border-bottom: 1px solid
|
|
160
|
+
border-bottom: 1px solid var(--kb-legacy-table-bg); }
|
|
160
161
|
table tr:last-of-type {
|
|
161
162
|
border: 0; }
|
|
162
163
|
table td {
|
|
@@ -182,7 +183,7 @@ table {
|
|
|
182
183
|
right: 0;
|
|
183
184
|
bottom: -40px;
|
|
184
185
|
cursor: pointer;
|
|
185
|
-
color:
|
|
186
|
+
color: var(--kb-legacy-border);
|
|
186
187
|
z-index: 10; }
|
|
187
188
|
table.mobile-data > span.left {
|
|
188
189
|
right: auto;
|
|
@@ -223,7 +224,7 @@ table {
|
|
|
223
224
|
table.transparent th {
|
|
224
225
|
font-weight: 700;
|
|
225
226
|
text-transform: none;
|
|
226
|
-
color:
|
|
227
|
+
color: var(--kb-legacy-label); }
|
|
227
228
|
table.transparent th, table.transparent td {
|
|
228
229
|
padding: 5px; }
|
|
229
230
|
@media (max-width: 768px) {
|
|
@@ -232,7 +233,7 @@ table {
|
|
|
232
233
|
font-size: 10px; } }
|
|
233
234
|
table.transparent td {
|
|
234
235
|
font-weight: normal;
|
|
235
|
-
color:
|
|
236
|
+
color: var(--kb-legacy-text); }
|
|
236
237
|
|
|
237
238
|
table.transparent {
|
|
238
239
|
margin-bottom: 30px; }
|
|
@@ -263,8 +264,8 @@ table.subtitle {
|
|
|
263
264
|
.column-block {
|
|
264
265
|
padding: 30px 15px;
|
|
265
266
|
border-radius: 20px;
|
|
266
|
-
border: 1px solid
|
|
267
|
-
background:
|
|
267
|
+
border: 1px solid var(--kb-legacy-border);
|
|
268
|
+
background: var(--kb-neutral-0);
|
|
268
269
|
width: 100%;
|
|
269
270
|
margin-bottom: 50px; }
|
|
270
271
|
.column-block.square {
|
|
@@ -273,7 +274,7 @@ table.subtitle {
|
|
|
273
274
|
border: 0; }
|
|
274
275
|
|
|
275
276
|
.info-wrapper {
|
|
276
|
-
border: 1px solid
|
|
277
|
+
border: 1px solid var(--kb-legacy-border); }
|
|
277
278
|
|
|
278
279
|
.fix-position {
|
|
279
280
|
padding-left: 20px; }
|
|
@@ -284,7 +285,7 @@ table.subtitle {
|
|
|
284
285
|
|
|
285
286
|
|
|
286
287
|
.toggler {
|
|
287
|
-
border-bottom: 1px solid
|
|
288
|
+
border-bottom: 1px solid var(--kb-legacy-border-light);
|
|
288
289
|
padding: 0 25px;
|
|
289
290
|
font-size: 14px;
|
|
290
291
|
line-height: 50px;
|
|
@@ -297,9 +298,9 @@ table.subtitle {
|
|
|
297
298
|
.toggler:last-of-type {
|
|
298
299
|
border: 0; }
|
|
299
300
|
.toggler:hover {
|
|
300
|
-
background-color:
|
|
301
|
+
background-color: var(--kb-legacy-bg); }
|
|
301
302
|
.toggler.toggled {
|
|
302
|
-
background-color:
|
|
303
|
+
background-color: var(--kb-legacy-bg);
|
|
303
304
|
max-height: 1500px; }
|
|
304
305
|
.toggler.toggled .first-line {
|
|
305
306
|
font-weight: 900; }
|
|
@@ -308,7 +309,7 @@ table.subtitle {
|
|
|
308
309
|
.toggler.toggled .first-line > .fa-caret-up {
|
|
309
310
|
display: inline-block; }
|
|
310
311
|
.toggler .fa-star {
|
|
311
|
-
color: blue; }
|
|
312
|
+
color: var(--kb-legacy-blue); }
|
|
312
313
|
.toggler .first-line {
|
|
313
314
|
cursor: pointer; }
|
|
314
315
|
@media (max-width: 768px) {
|
|
@@ -319,13 +320,13 @@ table.subtitle {
|
|
|
319
320
|
margin-left: 30px;
|
|
320
321
|
display: inline-block;
|
|
321
322
|
line-height: 50px;
|
|
322
|
-
color:
|
|
323
|
+
color: var(--kb-legacy-muted); }
|
|
323
324
|
.toggler .first-line > .fa-caret-up {
|
|
324
325
|
float: right;
|
|
325
326
|
margin-left: 30px;
|
|
326
327
|
display: none;
|
|
327
328
|
line-height: 50px;
|
|
328
|
-
color:
|
|
329
|
+
color: var(--kb-legacy-muted); }
|
|
329
330
|
.toggler .first-line a {
|
|
330
331
|
float: right;
|
|
331
332
|
margin-left: 30px; }
|
|
@@ -342,7 +343,7 @@ table.subtitle {
|
|
|
342
343
|
margin: 0 -25px;
|
|
343
344
|
padding: 0 25px;
|
|
344
345
|
text-align: center;
|
|
345
|
-
border-bottom: 1px solid
|
|
346
|
+
border-bottom: 1px solid var(--kb-legacy-border);
|
|
346
347
|
margin-bottom: 30px; }
|
|
347
348
|
@media (max-width: 768px) {
|
|
348
349
|
.toggler .toggle .actions {
|
|
@@ -380,7 +381,7 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
380
381
|
padding-right: 0; }
|
|
381
382
|
form[id^="new_tag_definition"] #object_types div .tag-definition-select {
|
|
382
383
|
display: inline-block;
|
|
383
|
-
width: calc(
|
|
384
|
+
width: calc(100% - 25px); }
|
|
384
385
|
|
|
385
386
|
/* The switch - the box around the slider */
|
|
386
387
|
.switch-half-container {
|
|
@@ -403,7 +404,7 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
403
404
|
left: 0;
|
|
404
405
|
right: 0;
|
|
405
406
|
bottom: 0;
|
|
406
|
-
background-color:
|
|
407
|
+
background-color: var(--kb-legacy-border);
|
|
407
408
|
-webkit-transition: .4s;
|
|
408
409
|
transition: .4s; }
|
|
409
410
|
.switch-half .slider:before {
|
|
@@ -413,13 +414,13 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
413
414
|
width: 10px;
|
|
414
415
|
left: 1px;
|
|
415
416
|
bottom: 1px;
|
|
416
|
-
background-color:
|
|
417
|
+
background-color: var(--kb-neutral-0);
|
|
417
418
|
-webkit-transition: .4s;
|
|
418
419
|
transition: .4s; }
|
|
419
420
|
.switch-half input:checked + .slider {
|
|
420
|
-
background-color: blue; }
|
|
421
|
+
background-color: var(--kb-legacy-blue); }
|
|
421
422
|
.switch-half input:focus + .slider {
|
|
422
|
-
box-shadow: 0 0 1px
|
|
423
|
+
box-shadow: 0 0 1px var(--kb-legacy-focus); }
|
|
423
424
|
.switch-half input:checked + .slider:before {
|
|
424
425
|
-webkit-transform: translateX(8px);
|
|
425
426
|
-ms-transform: translateX(8px);
|
|
@@ -441,7 +442,7 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
441
442
|
left: 0;
|
|
442
443
|
right: 0;
|
|
443
444
|
bottom: 0;
|
|
444
|
-
background-color:
|
|
445
|
+
background-color: var(--kb-legacy-border);
|
|
445
446
|
-webkit-transition: .4s;
|
|
446
447
|
transition: .4s; }
|
|
447
448
|
.switch .slider:before {
|
|
@@ -451,13 +452,13 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
451
452
|
width: 16px;
|
|
452
453
|
left: 2px;
|
|
453
454
|
bottom: 2px;
|
|
454
|
-
background-color:
|
|
455
|
+
background-color: var(--kb-neutral-0);
|
|
455
456
|
-webkit-transition: .4s;
|
|
456
457
|
transition: .4s; }
|
|
457
458
|
.switch input:checked + .slider {
|
|
458
|
-
background-color: blue; }
|
|
459
|
+
background-color: var(--kb-legacy-blue); }
|
|
459
460
|
.switch input:focus + .slider {
|
|
460
|
-
box-shadow: 0 0 1px
|
|
461
|
+
box-shadow: 0 0 1px var(--kb-legacy-focus); }
|
|
461
462
|
.switch input:checked + .slider:before {
|
|
462
463
|
-webkit-transform: translateX(16px);
|
|
463
464
|
-ms-transform: translateX(16px);
|
|
@@ -490,7 +491,7 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
490
491
|
.spinner {
|
|
491
492
|
padding-top: 3.5px;
|
|
492
493
|
width: 40px;
|
|
493
|
-
color: blue;
|
|
494
|
+
color: var(--kb-legacy-blue);
|
|
494
495
|
display: none; }
|
|
495
496
|
|
|
496
497
|
.footer-notice .modal-footer {
|
|
@@ -499,13 +500,13 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
499
500
|
.footer-notice .modal-footer .alert {
|
|
500
501
|
margin-bottom: 0; }
|
|
501
502
|
.footer-notice .modal-footer .alert .label-default {
|
|
502
|
-
color:
|
|
503
|
+
color: var(--kb-neutral-0); }
|
|
503
504
|
|
|
504
505
|
.copy-icon {
|
|
505
506
|
cursor: pointer; }
|
|
506
507
|
|
|
507
508
|
.switch-tenant-active {
|
|
508
|
-
color: blue; }
|
|
509
|
+
color: var(--kb-legacy-blue); }
|
|
509
510
|
|
|
510
511
|
/* Required for https://github.com/killbill/killbill-admin-ui/issues/262 */
|
|
511
512
|
.ui-autocomplete {
|
|
@@ -517,7 +518,7 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
517
518
|
padding: 4px 0;
|
|
518
519
|
margin: 2px 0 0 0;
|
|
519
520
|
list-style: none;
|
|
520
|
-
background-color:
|
|
521
|
+
background-color: var(--kb-neutral-0);
|
|
521
522
|
border-color: rgba(0, 0, 0, 0.2);
|
|
522
523
|
border-style: solid;
|
|
523
524
|
border-width: 1px;
|
|
@@ -530,12 +531,12 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
530
531
|
clear: both;
|
|
531
532
|
font-weight: normal;
|
|
532
533
|
line-height: 18px;
|
|
533
|
-
color:
|
|
534
|
+
color: var(--kb-legacy-text-dark);
|
|
534
535
|
white-space: nowrap; }
|
|
535
536
|
.ui-autocomplete .ui-menu-item .ui-state-active, .ui-autocomplete .ui-menu-item .ui-state-hover {
|
|
536
|
-
color:
|
|
537
|
+
color: var(--kb-neutral-0);
|
|
537
538
|
text-decoration: none;
|
|
538
|
-
background-color:
|
|
539
|
+
background-color: var(--kb-legacy-autocomplete-active);
|
|
539
540
|
border-radius: 0px;
|
|
540
541
|
-webkit-border-radius: 0px;
|
|
541
542
|
-moz-border-radius: 0px;
|
|
@@ -543,5 +544,3 @@ form[id^="new_tag_definition"] #object_types div {
|
|
|
543
544
|
|
|
544
545
|
.ui-helper-hidden-accessible {
|
|
545
546
|
display: none; }
|
|
546
|
-
|
|
547
|
-
/*# sourceMappingURL=element.css.map */
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
:root {
|
|
3
|
-
--dt-row-selected
|
|
3
|
+
/* References the --kb-primary-500-rgb channel token; the triplet form is required by the rgba(var(--dt-row-selected), …) rules below */
|
|
4
|
+
--dt-row-selected: var(--kb-primary-500-rgb);
|
|
4
5
|
--dt-row-selected-text: 255, 255, 255;
|
|
5
6
|
--dt-row-selected-link: 9, 10, 11;
|
|
6
7
|
--dt-row-stripe: 0, 0, 0;
|
|
@@ -1,43 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
--bs-secondary: #777777;
|
|
6
|
-
--bs-success: #4caf50;
|
|
7
|
-
--bs-danger: #f44336;
|
|
8
|
-
--bs-warning: #ffc107;
|
|
9
|
-
--bs-info: #00bcd4;
|
|
10
|
-
--bs-light: #f1f1f1;
|
|
11
|
-
--bs-dark: #212121;
|
|
12
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* New KAUI theme. All colors come from the design tokens in tokens.css
|
|
3
|
+
* (Kill Bill Design System 2026) — do not hardcode color values here.
|
|
4
|
+
*/
|
|
13
5
|
|
|
14
6
|
.btn-primary {
|
|
15
|
-
background-color:
|
|
16
|
-
border-color:
|
|
7
|
+
background-color: var(--kb-primary) !important;
|
|
8
|
+
border-color: var(--kb-primary) !important;
|
|
17
9
|
}
|
|
18
10
|
|
|
19
11
|
.text-primary {
|
|
20
|
-
color:
|
|
12
|
+
color: var(--kb-primary) !important;
|
|
21
13
|
}
|
|
22
14
|
|
|
23
15
|
.bg-primary {
|
|
24
|
-
background-color:
|
|
16
|
+
background-color: var(--kb-primary) !important;
|
|
25
17
|
}
|
|
26
18
|
|
|
27
19
|
.text-black-900 {
|
|
28
|
-
color:
|
|
20
|
+
color: var(--kb-on-surface-primary) !important;
|
|
29
21
|
}
|
|
30
22
|
|
|
31
23
|
.text-black-700 {
|
|
32
|
-
color:
|
|
24
|
+
color: var(--kb-on-surface-secondary) !important;
|
|
33
25
|
}
|
|
34
26
|
|
|
35
27
|
.text-tertiary {
|
|
36
|
-
color:
|
|
28
|
+
color: var(--kb-on-surface-tertiary) !important;
|
|
37
29
|
}
|
|
38
30
|
|
|
39
31
|
.text-quaternary {
|
|
40
|
-
color:
|
|
32
|
+
color: var(--kb-on-surface-quaternary) !important;
|
|
41
33
|
}
|
|
42
34
|
|
|
43
35
|
.fw-500 {
|
|
@@ -105,7 +97,7 @@
|
|
|
105
97
|
}
|
|
106
98
|
|
|
107
99
|
.border-secondary {
|
|
108
|
-
border-color:
|
|
100
|
+
border-color: var(--kb-outline-primary) !important;
|
|
109
101
|
}
|
|
110
102
|
|
|
111
103
|
.kaui-button {
|
|
@@ -116,16 +108,16 @@
|
|
|
116
108
|
font-size: 14px;
|
|
117
109
|
font-weight: 500;
|
|
118
110
|
line-height: 20px;
|
|
119
|
-
color:
|
|
120
|
-
border: 1px solid
|
|
111
|
+
color: var(--kb-on-surface-secondary) !important;
|
|
112
|
+
border: 1px solid var(--kb-outline-secondary) !important;
|
|
121
113
|
}
|
|
122
114
|
|
|
123
115
|
.kaui-button:hover {
|
|
124
|
-
background-color:
|
|
116
|
+
background-color: var(--kb-surface-container-lowest) !important;
|
|
125
117
|
}
|
|
126
118
|
|
|
127
119
|
.kaui-dropdown {
|
|
128
|
-
background-color:
|
|
120
|
+
background-color: var(--kb-primary) !important;
|
|
129
121
|
padding: 6px 10px;
|
|
130
122
|
align-items: center;
|
|
131
123
|
display: flex;
|
|
@@ -133,10 +125,10 @@
|
|
|
133
125
|
font-size: 14px;
|
|
134
126
|
font-weight: 500;
|
|
135
127
|
line-height: 20px;
|
|
136
|
-
color:
|
|
128
|
+
color: var(--kb-on-primary) !important;
|
|
137
129
|
}
|
|
138
130
|
.kaui-dropdown:hover {
|
|
139
|
-
background-color:
|
|
131
|
+
background-color: var(--kb-primary) !important;
|
|
140
132
|
}
|
|
141
133
|
|
|
142
134
|
.kaui-button:focus,
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Kill Bill Design System 2026 — design tokens.
|
|
3
|
+
* Single source of truth for color and typography across KAUI and all
|
|
4
|
+
* mountable engines. Mirrors the Figma file "Kill Bill | Design System 2026";
|
|
5
|
+
* when the Figma changes, update this file only.
|
|
6
|
+
*
|
|
7
|
+
* The two @import rules below must stay at the very top of this file:
|
|
8
|
+
* tokens.css is the first file required in the assets/common bundle, and
|
|
9
|
+
* browsers ignore @import rules that appear after any other rule in the
|
|
10
|
+
* concatenated output.
|
|
11
|
+
*/
|
|
12
|
+
@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
|
|
13
|
+
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
|
|
14
|
+
|
|
15
|
+
:root {
|
|
16
|
+
/* ──────────────────────────────────────────────────────────────
|
|
17
|
+
Primitives — neutral
|
|
18
|
+
────────────────────────────────────────────────────────────── */
|
|
19
|
+
--kb-neutral-0: #ffffff;
|
|
20
|
+
--kb-neutral-25: #f9fafb;
|
|
21
|
+
--kb-neutral-50: #f2f4f7;
|
|
22
|
+
--kb-neutral-100: #e8e9eb;
|
|
23
|
+
--kb-neutral-200: #d0d5dd;
|
|
24
|
+
--kb-neutral-300: #98a2b3;
|
|
25
|
+
--kb-neutral-400: #667085;
|
|
26
|
+
--kb-neutral-500: #475467;
|
|
27
|
+
--kb-neutral-600: #344054;
|
|
28
|
+
--kb-neutral-700: #1d2939;
|
|
29
|
+
--kb-neutral-800: #101828;
|
|
30
|
+
--kb-neutral-900: #0b0d12;
|
|
31
|
+
|
|
32
|
+
/* ──────────────────────────────────────────────────────────────
|
|
33
|
+
Primitives — primary (blue)
|
|
34
|
+
────────────────────────────────────────────────────────────── */
|
|
35
|
+
--kb-primary-25: #eff4ff;
|
|
36
|
+
--kb-primary-50: #d1e0ff;
|
|
37
|
+
--kb-primary-100: #b2ccff;
|
|
38
|
+
--kb-primary-200: #84adff;
|
|
39
|
+
--kb-primary-300: #528bff;
|
|
40
|
+
--kb-primary-400: #2970ff;
|
|
41
|
+
--kb-primary-500: #155eef;
|
|
42
|
+
/* RGB channels of primary-500, for contexts that need the triplet form
|
|
43
|
+
(e.g. rgba(var(--kb-primary-500-rgb), 0.5) and --dt-* DataTables vars). */
|
|
44
|
+
--kb-primary-500-rgb: 21, 94, 239;
|
|
45
|
+
--kb-primary-600: #0040c1;
|
|
46
|
+
--kb-primary-700: #00359e;
|
|
47
|
+
--kb-primary-800: #0e2555;
|
|
48
|
+
|
|
49
|
+
/* ──────────────────────────────────────────────────────────────
|
|
50
|
+
Primitives — error (red)
|
|
51
|
+
────────────────────────────────────────────────────────────── */
|
|
52
|
+
--kb-error-25: #fef3f2;
|
|
53
|
+
--kb-error-50: #fee4e2;
|
|
54
|
+
--kb-error-100: #fecdca;
|
|
55
|
+
--kb-error-200: #fda29b;
|
|
56
|
+
--kb-error-300: #f97066;
|
|
57
|
+
--kb-error-400: #f04438;
|
|
58
|
+
--kb-error-500: #d92d20;
|
|
59
|
+
--kb-error-600: #b42318;
|
|
60
|
+
--kb-error-700: #912018;
|
|
61
|
+
--kb-error-800: #7a271a;
|
|
62
|
+
|
|
63
|
+
/* ──────────────────────────────────────────────────────────────
|
|
64
|
+
Primitives — warning (orange)
|
|
65
|
+
────────────────────────────────────────────────────────────── */
|
|
66
|
+
--kb-warning-25: #fffaeb;
|
|
67
|
+
--kb-warning-50: #fef0c7;
|
|
68
|
+
--kb-warning-100: #fedf89;
|
|
69
|
+
--kb-warning-200: #fec84b;
|
|
70
|
+
--kb-warning-300: #fdb022;
|
|
71
|
+
--kb-warning-400: #f79009;
|
|
72
|
+
--kb-warning-500: #dc6803;
|
|
73
|
+
--kb-warning-600: #b54708;
|
|
74
|
+
--kb-warning-700: #93370d;
|
|
75
|
+
--kb-warning-800: #7a2e0e;
|
|
76
|
+
|
|
77
|
+
/* ──────────────────────────────────────────────────────────────
|
|
78
|
+
Primitives — success (green)
|
|
79
|
+
────────────────────────────────────────────────────────────── */
|
|
80
|
+
--kb-success-25: #ecfdf3;
|
|
81
|
+
--kb-success-50: #d1fadf;
|
|
82
|
+
--kb-success-100: #a6f4c5;
|
|
83
|
+
--kb-success-200: #6ce9a6;
|
|
84
|
+
--kb-success-300: #32d583;
|
|
85
|
+
--kb-success-400: #12b76a;
|
|
86
|
+
--kb-success-500: #039855;
|
|
87
|
+
--kb-success-600: #027a48;
|
|
88
|
+
--kb-success-700: #05603a;
|
|
89
|
+
--kb-success-800: #054f31;
|
|
90
|
+
|
|
91
|
+
/* ──────────────────────────────────────────────────────────────
|
|
92
|
+
Primitives — purple
|
|
93
|
+
────────────────────────────────────────────────────────────── */
|
|
94
|
+
--kb-purple-25: #f4f3ff;
|
|
95
|
+
--kb-purple-50: #ebe9fe;
|
|
96
|
+
--kb-purple-100: #d9d6fe;
|
|
97
|
+
--kb-purple-200: #bdb4fe;
|
|
98
|
+
--kb-purple-300: #9b8afb;
|
|
99
|
+
--kb-purple-400: #7a5af8;
|
|
100
|
+
--kb-purple-500: #6938ef;
|
|
101
|
+
--kb-purple-600: #4a1fb8;
|
|
102
|
+
--kb-purple-700: #3e1c96;
|
|
103
|
+
--kb-purple-800: #181232;
|
|
104
|
+
|
|
105
|
+
/* ──────────────────────────────────────────────────────────────
|
|
106
|
+
Semantic — primary actions
|
|
107
|
+
────────────────────────────────────────────────────────────── */
|
|
108
|
+
--kb-primary: var(--kb-primary-500);
|
|
109
|
+
--kb-primary-hover: var(--kb-primary-600);
|
|
110
|
+
--kb-primary-pressed: var(--kb-primary-400);
|
|
111
|
+
/* Known issue: white on primary-400 (pressed) is ~4.3:1, below WCAG AA
|
|
112
|
+
4.5:1 for normal text. Value comes from the Figma; pending design review. */
|
|
113
|
+
--kb-on-primary: var(--kb-neutral-0);
|
|
114
|
+
|
|
115
|
+
/* ──────────────────────────────────────────────────────────────
|
|
116
|
+
Semantic — surfaces
|
|
117
|
+
────────────────────────────────────────────────────────────── */
|
|
118
|
+
--kb-surface-container-lowest: var(--kb-neutral-0);
|
|
119
|
+
--kb-surface-container-low: var(--kb-neutral-25);
|
|
120
|
+
--kb-surface-container: var(--kb-neutral-50);
|
|
121
|
+
--kb-surface-container-high: var(--kb-neutral-100);
|
|
122
|
+
|
|
123
|
+
/* ──────────────────────────────────────────────────────────────
|
|
124
|
+
Semantic — text (onSurface)
|
|
125
|
+
────────────────────────────────────────────────────────────── */
|
|
126
|
+
--kb-on-surface-primary: var(--kb-neutral-900);
|
|
127
|
+
--kb-on-surface-secondary: var(--kb-neutral-500);
|
|
128
|
+
--kb-on-surface-tertiary: var(--kb-neutral-400);
|
|
129
|
+
--kb-on-surface-quaternary: var(--kb-neutral-300);
|
|
130
|
+
|
|
131
|
+
/* ──────────────────────────────────────────────────────────────
|
|
132
|
+
Semantic — outlines / borders
|
|
133
|
+
────────────────────────────────────────────────────────────── */
|
|
134
|
+
--kb-outline-primary: var(--kb-neutral-100);
|
|
135
|
+
--kb-outline-secondary: var(--kb-neutral-200);
|
|
136
|
+
--kb-outline-tertiary: var(--kb-neutral-300);
|
|
137
|
+
|
|
138
|
+
/* ──────────────────────────────────────────────────────────────
|
|
139
|
+
Semantic — status colors
|
|
140
|
+
────────────────────────────────────────────────────────────── */
|
|
141
|
+
--kb-error: var(--kb-error-500);
|
|
142
|
+
--kb-error-hover: var(--kb-error-600);
|
|
143
|
+
--kb-error-pressed: var(--kb-error-400);
|
|
144
|
+
--kb-on-error: var(--kb-neutral-0);
|
|
145
|
+
|
|
146
|
+
--kb-warning: var(--kb-warning-500);
|
|
147
|
+
--kb-warning-hover: var(--kb-warning-600);
|
|
148
|
+
--kb-warning-pressed: var(--kb-warning-400);
|
|
149
|
+
/* Known issue: white on warning-500 is ~3.5:1, below WCAG AA 4.5:1 for
|
|
150
|
+
normal text. Value comes from the Figma; pending design review. */
|
|
151
|
+
--kb-on-warning: var(--kb-neutral-0);
|
|
152
|
+
|
|
153
|
+
--kb-success: var(--kb-success-500);
|
|
154
|
+
--kb-success-hover: var(--kb-success-600);
|
|
155
|
+
--kb-success-pressed: var(--kb-success-400);
|
|
156
|
+
--kb-on-success: var(--kb-neutral-0);
|
|
157
|
+
|
|
158
|
+
/* ──────────────────────────────────────────────────────────────
|
|
159
|
+
Semantic — disabled states
|
|
160
|
+
────────────────────────────────────────────────────────────── */
|
|
161
|
+
--kb-disable-primary: var(--kb-neutral-300);
|
|
162
|
+
--kb-disable-secondary: var(--kb-neutral-200);
|
|
163
|
+
--kb-disable-tertiary: var(--kb-neutral-100);
|
|
164
|
+
|
|
165
|
+
/* ──────────────────────────────────────────────────────────────
|
|
166
|
+
Semantic — tag containers (background / foreground pairs)
|
|
167
|
+
────────────────────────────────────────────────────────────── */
|
|
168
|
+
--kb-neutral-container: var(--kb-neutral-50);
|
|
169
|
+
--kb-on-neutral-container: var(--kb-neutral-700);
|
|
170
|
+
--kb-primary-container: var(--kb-primary-100);
|
|
171
|
+
--kb-on-primary-container: var(--kb-primary-700);
|
|
172
|
+
--kb-error-container: var(--kb-error-100);
|
|
173
|
+
--kb-on-error-container: var(--kb-error-700);
|
|
174
|
+
--kb-warning-container: var(--kb-warning-100);
|
|
175
|
+
--kb-on-warning-container: var(--kb-warning-700);
|
|
176
|
+
--kb-success-container: var(--kb-success-100);
|
|
177
|
+
--kb-on-success-container: var(--kb-success-700);
|
|
178
|
+
--kb-purple-container: var(--kb-purple-100);
|
|
179
|
+
--kb-on-purple-container: var(--kb-purple-700);
|
|
180
|
+
|
|
181
|
+
/* ──────────────────────────────────────────────────────────────
|
|
182
|
+
Typography — font families
|
|
183
|
+
────────────────────────────────────────────────────────────── */
|
|
184
|
+
--kb-font-family-base: "Inter", sans-serif;
|
|
185
|
+
/* Used only by the legacy element.css layer; remove with it. */
|
|
186
|
+
--kb-font-family-legacy: "Lato", sans-serif;
|
|
187
|
+
|
|
188
|
+
/* ──────────────────────────────────────────────────────────────
|
|
189
|
+
Typography — text styles (weight size/line-height family).
|
|
190
|
+
px values from Figma in comments; use as `font: var(--kb-…)`.
|
|
191
|
+
────────────────────────────────────────────────────────────── */
|
|
192
|
+
--kb-display-large: 600 3.5rem/4.375rem var(--kb-font-family-base); /* 56/70 */
|
|
193
|
+
--kb-display-medium: 600 3rem/3.75rem var(--kb-font-family-base); /* 48/60 */
|
|
194
|
+
--kb-display-small: 600 2.5rem/3.125rem var(--kb-font-family-base); /* 40/50 */
|
|
195
|
+
|
|
196
|
+
--kb-headline-large: 600 2rem/2.5rem var(--kb-font-family-base); /* 32/40 */
|
|
197
|
+
--kb-headline-medium: 600 1.75rem/2.25rem var(--kb-font-family-base); /* 28/36 */
|
|
198
|
+
--kb-headline-small: 600 1.5rem/1.875rem var(--kb-font-family-base); /* 24/30 */
|
|
199
|
+
|
|
200
|
+
--kb-title-large: 500 1.25rem/1.625rem var(--kb-font-family-base); /* 20/26 */
|
|
201
|
+
--kb-title-medium: 500 1rem/1.375rem var(--kb-font-family-base); /* 16/22 */
|
|
202
|
+
--kb-title-small: 500 0.875rem/1.25rem var(--kb-font-family-base); /* 14/20 */
|
|
203
|
+
|
|
204
|
+
--kb-body-large: 400 1rem/1.375rem var(--kb-font-family-base); /* 16/22 */
|
|
205
|
+
--kb-body-medium: 400 0.875rem/1.25rem var(--kb-font-family-base); /* 14/20 */
|
|
206
|
+
--kb-body-small: 400 0.75rem/1rem var(--kb-font-family-base); /* 12/16 */
|
|
207
|
+
|
|
208
|
+
--kb-label-large-emphasis: 600 0.875rem/1.25rem var(--kb-font-family-base); /* 14/20 */
|
|
209
|
+
--kb-label-large: 500 0.875rem/1.25rem var(--kb-font-family-base); /* 14/20 */
|
|
210
|
+
--kb-label-medium: 500 0.75rem/1rem var(--kb-font-family-base); /* 12/16 */
|
|
211
|
+
--kb-label-small: 500 0.625rem/0.75rem var(--kb-font-family-base); /* 10/12 */
|
|
212
|
+
|
|
213
|
+
/* ──────────────────────────────────────────────────────────────
|
|
214
|
+
Legacy palette — exact values used by the old KAUI theme
|
|
215
|
+
(element.css / datatable.css). These preserve the current
|
|
216
|
+
rendering; they are NOT part of the 2026 design system and
|
|
217
|
+
this section should shrink as screens migrate. New styles
|
|
218
|
+
must not use these.
|
|
219
|
+
────────────────────────────────────────────────────────────── */
|
|
220
|
+
--kb-legacy-accent: #e44c3a; /* old KAUI red accent (h1, close icons) */
|
|
221
|
+
--kb-legacy-accent-dark: #cf2f1c; /* accent hover */
|
|
222
|
+
--kb-legacy-blue: #0000ff; /* old `blue` keyword links/buttons/switches */
|
|
223
|
+
--kb-legacy-blue-hover: #165ff0; /* old button hover */
|
|
224
|
+
--kb-legacy-focus: #2196f3; /* old switch focus shadow */
|
|
225
|
+
--kb-legacy-text: #777777; /* old body text */
|
|
226
|
+
--kb-legacy-heading: #313131; /* old h2/h3 */
|
|
227
|
+
--kb-legacy-label: #585858; /* old form labels, transparent-table th */
|
|
228
|
+
--kb-legacy-muted: #999999; /* old paragraphs, toggler carets */
|
|
229
|
+
--kb-legacy-text-dark: #555555; /* old autocomplete items */
|
|
230
|
+
--kb-legacy-placeholder: #aaaaaa; /* old input placeholders */
|
|
231
|
+
--kb-legacy-bg: #f9f9f9; /* old body background, toggler hover */
|
|
232
|
+
--kb-legacy-border: #cccccc; /* old default borders */
|
|
233
|
+
--kb-legacy-border-light: #dddddd; /* old lighter borders */
|
|
234
|
+
--kb-legacy-border-dark: #c9c9c9; /* old condensed-table column separators */
|
|
235
|
+
--kb-legacy-table-bg: #f3f3f3; /* old table borders + header background */
|
|
236
|
+
--kb-legacy-table-header-text: #989898; /* old table header text */
|
|
237
|
+
--kb-legacy-input-outline: #7dc7cd; /* old input outline */
|
|
238
|
+
--kb-legacy-success: #5eca8f; /* old success badge */
|
|
239
|
+
--kb-legacy-danger: #df4232; /* old fail badge */
|
|
240
|
+
--kb-legacy-autocomplete-active: #0088cc; /* old autocomplete hover */
|
|
241
|
+
--kb-legacy-row-insert: #dff0d8; /* old audit-row: inserted */
|
|
242
|
+
--kb-legacy-row-update: #fcf8e3; /* old audit-row: updated */
|
|
243
|
+
--kb-legacy-row-delete: #f2dede; /* old audit-row: deleted */
|
|
244
|
+
--kb-legacy-row-disabled: #f5f5f5; /* old disabled row */
|
|
245
|
+
}
|
data/lib/assets/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: killbill-assets-ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.1.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Kill Bill core team
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2026-
|
|
11
|
+
date: 2026-10-05 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bootstrap-datepicker-rails
|
|
@@ -99,6 +99,7 @@ files:
|
|
|
99
99
|
- app/assets/stylesheets/assets/jquery-ui.min.css
|
|
100
100
|
- app/assets/stylesheets/assets/jquery_datatables.css
|
|
101
101
|
- app/assets/stylesheets/assets/theme.css
|
|
102
|
+
- app/assets/stylesheets/assets/tokens.css
|
|
102
103
|
- lib/assets/engine.rb
|
|
103
104
|
- lib/assets/version.rb
|
|
104
105
|
- lib/killbill_assets_ui.rb
|