@stonecrop/themes 0.27.0 → 0.29.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.
- package/README.md +36 -14
- package/dist/default.css +1 -1
- package/dist/default.umd.cjs +2 -0
- package/package.json +2 -8
- package/dist/agritheory.cjs +0 -1
- package/dist/agritheory.css +0 -1
- package/dist/agritheory.js +0 -1
- package/dist/dark.cjs +0 -1
- package/dist/dark.css +0 -1
- package/dist/dark.js +0 -1
- package/dist/default.cjs +0 -1
- package/dist/excel.cjs +0 -1
- package/dist/excel.css +0 -1
- package/dist/excel.js +0 -1
- package/dist/legal.cjs +0 -1
- package/dist/legal.css +0 -1
- package/dist/legal.js +0 -1
- package/dist/verdant.cjs +0 -1
- package/dist/verdant.css +0 -1
- package/dist/verdant.js +0 -1
- package/dist/vue.cjs +0 -1
- package/dist/vue.css +0 -1
- package/dist/vue.js +0 -1
package/README.md
CHANGED
|
@@ -1,21 +1,43 @@
|
|
|
1
1
|
# Themes
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The Stonecrop token floor: one stylesheet defining every `--sc-*` CSS variable the component packages consume.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- `agritheory`
|
|
8
|
-
- `dark`
|
|
9
|
-
- `default`
|
|
10
|
-
- `excel`
|
|
11
|
-
- `legal`
|
|
12
|
-
- `verdant`
|
|
13
|
-
- `vue`
|
|
5
|
+
This is not a theme system with themes to pick between. There is a single sheet, and hosts restyle by overriding the variables in their own CSS.
|
|
14
6
|
|
|
15
7
|
## Usage
|
|
16
8
|
|
|
17
|
-
To use a theme, import the corresponding stylesheet into your application. For example, to use the `dark` theme:
|
|
18
|
-
|
|
19
9
|
```javascript
|
|
20
|
-
import '@stonecrop/themes/
|
|
21
|
-
```
|
|
10
|
+
import '@stonecrop/themes/default.css'
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Nuxt hosts get it automatically — `@stonecrop/nuxt` loads it into `nuxt.options.css`, so there is nothing to import and no option to set.
|
|
14
|
+
|
|
15
|
+
## Restyling
|
|
16
|
+
|
|
17
|
+
Override any `--sc-*` name in your own stylesheet. The floor wraps its declarations in the `stonecrop.tokens` cascade layer, and an unlayered declaration always beats a layered one regardless of specificity or source order — so a plain `:root` block wins, and it does not matter which stylesheet loads first.
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
:root {
|
|
21
|
+
--sc-primary-color: #6d28d9;
|
|
22
|
+
--sc-font-family: 'IBM Plex Sans', sans-serif;
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Keep overrides on `:root`. Scoping them to a container (`.my-app { --sc-primary-color: … }`) works for elements inside that container but changes how the variable resolves elsewhere, because an ancestor declaration beats `:root` by inheritance proximity.
|
|
27
|
+
|
|
28
|
+
Derived tokens follow their inputs: overriding `--sc-brand-success` moves `--sc-badge-success-bg`, which is a `color-mix()` of it.
|
|
29
|
+
|
|
30
|
+
## What the sheet contains
|
|
31
|
+
|
|
32
|
+
- The `--sc-*` variables, declared on `:root`.
|
|
33
|
+
- A font-inheritance reset, so form controls and code elements inherit the document font instead of their browser defaults.
|
|
34
|
+
- The document font rule, applied to `body` from `--sc-font-family`. It pairs with the reset above — without it, the reset would strip the controls' sensible defaults and leave them inheriting the browser's serif.
|
|
35
|
+
- A webfont `@import` for Arimo, the default `--sc-font-family`. It must stay the first rule in the file; CSS requires `@import` before all other rules.
|
|
36
|
+
|
|
37
|
+
## Adding a token
|
|
38
|
+
|
|
39
|
+
A component may only read a `--sc-*` name this sheet defines. A `var()` on an undefined name is invalid at computed-value time — it does not throw, it computes to `unset` and renders wrong silently.
|
|
40
|
+
|
|
41
|
+
`aform`, `atable` and `desktop` each carry a `tests/token-floor.spec.ts` that fails if they consume a name the floor does not define, so adding the `var()` without adding the declaration is caught in CI.
|
|
42
|
+
|
|
43
|
+
Do not add a `var()` fallback (`var(--sc-x, #fff)`) as a substitute. A fallback only renders when the floor is absent, which never happens in a working host, so a wrong value there stays invisible indefinitely — that is how several tokens drifted from the floor before being removed.
|
package/dist/default.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap"
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";@layer stonecrop.tokens{:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-70: #4d4d4d;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-badge-neutral-bg: var(--sc-gray-10);--sc-badge-neutral-text: var(--sc-gray-80);--sc-badge-neutral-accent: var(--sc-gray-50);--sc-badge-success-bg: color-mix(in srgb, var(--sc-brand-success) 14%, white);--sc-badge-success-text: var(--sc-brand-success);--sc-badge-success-accent: var(--sc-brand-success);--sc-badge-warning-bg: color-mix(in srgb, var(--sc-brand-warning) 18%, white);--sc-badge-warning-text: color-mix(in srgb, var(--sc-brand-warning) 70%, black);--sc-badge-warning-accent: var(--sc-brand-warning);--sc-badge-danger-bg: color-mix(in srgb, var(--sc-brand-danger) 12%, white);--sc-badge-danger-text: var(--sc-brand-danger);--sc-badge-danger-accent: var(--sc-brand-danger);--sc-badge-brand-bg: color-mix(in srgb, var(--sc-primary-color) 14%, white);--sc-badge-brand-text: var(--sc-brand-color);--sc-badge-brand-accent: var(--sc-primary-color);--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-hover-color: #f0f4f8;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: "Arimo", Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: var(--sc-font-family);--sc-border-radius: 0;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}button,input,select,textarea,optgroup,code,kbd,samp,pre{font-family:inherit}body{font-family:var(--sc-font-family)}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(c){typeof define=="function"&&define.amd?define(c):c()})((function(){"use strict";var c=document.createElement("style");c.textContent=`@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";@layer stonecrop.tokens{:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-70: #4d4d4d;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-badge-neutral-bg: var(--sc-gray-10);--sc-badge-neutral-text: var(--sc-gray-80);--sc-badge-neutral-accent: var(--sc-gray-50);--sc-badge-success-bg: color-mix(in srgb, var(--sc-brand-success) 14%, white);--sc-badge-success-text: var(--sc-brand-success);--sc-badge-success-accent: var(--sc-brand-success);--sc-badge-warning-bg: color-mix(in srgb, var(--sc-brand-warning) 18%, white);--sc-badge-warning-text: color-mix(in srgb, var(--sc-brand-warning) 70%, black);--sc-badge-warning-accent: var(--sc-brand-warning);--sc-badge-danger-bg: color-mix(in srgb, var(--sc-brand-danger) 12%, white);--sc-badge-danger-text: var(--sc-brand-danger);--sc-badge-danger-accent: var(--sc-brand-danger);--sc-badge-brand-bg: color-mix(in srgb, var(--sc-primary-color) 14%, white);--sc-badge-brand-text: var(--sc-brand-color);--sc-badge-brand-accent: var(--sc-primary-color);--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-hover-color: #f0f4f8;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: "Arimo", Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: var(--sc-font-family);--sc-border-radius: 0;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}button,input,select,textarea,optgroup,code,kbd,samp,pre{font-family:inherit}body{font-family:var(--sc-font-family)}}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(c)}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/themes",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.29.0",
|
|
4
4
|
"bugs": {
|
|
5
5
|
"url": "https://github.com/agritheory/stonecrop/issues"
|
|
6
6
|
},
|
|
@@ -15,13 +15,7 @@
|
|
|
15
15
|
},
|
|
16
16
|
"type": "module",
|
|
17
17
|
"exports": {
|
|
18
|
-
"./
|
|
19
|
-
"./dark.css": "./dist/default.css",
|
|
20
|
-
"./default.css": "./dist/default.css",
|
|
21
|
-
"./excel.css": "./dist/default.css",
|
|
22
|
-
"./legal.css": "./dist/default.css",
|
|
23
|
-
"./verdant.css": "./dist/default.css",
|
|
24
|
-
"./vue.css": "./dist/default.css"
|
|
18
|
+
"./default.css": "./dist/default.css"
|
|
25
19
|
},
|
|
26
20
|
"devDependencies": {
|
|
27
21
|
"vite": "^7.3.2"
|
package/dist/agritheory.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/agritheory.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--sc-active-cell-background: #f7f7e9;--sc-active-cell-outline: #a5460d;--sc-brand-color: #a5460d;--sc-cell-border-color: #f7f7e9;--sc-cell-text-color: #3a3c41;--sc-header-border-color: #f7f7e9;--sc-header-text-color: #f7f7e9;--sc-required-border: #e63c28;--sc-row-color-zebra-dark: #c3b9a0;--sc-row-color-zebra-light: #f7f7e9;--sc-table-font-size: 11pt}.atable{font-family:Muli,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size)}
|
package/dist/agritheory.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/dist/dark.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/dark.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css?family=Roboto+Condensed";:root{--sc-active-cell-background: #3a3c41;--sc-active-cell-outline: #dddddd;--sc-border-collapsed: collapse;--sc-brand-color: #3a3c41;--sc-cell-border-color: #666666;--sc-cell-text-color: #dddddd;--sc-focus-cell-background: #3a3c41;--sc-focus-cell-outline: #dddddd;--sc-header-border-color: #666666;--sc-header-text-color: #ffffff;--sc-required-border: #e63c28;--sc-row-color-zebra-dark: #3a3c41;--sc-row-color-zebra-light: #3a3c41;--sc-table-font-size: 12pt}.atable{font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size)}body{background-color:#3a3c41;font-family:Roboto,Arial,sans-serif;color:#ddd}
|
package/dist/dark.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/dist/default.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/excel.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/excel.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #227144;--sc-border-collapsed: collapse;--sc-brand-color: #227144;--sc-cell-border-color: #666666;--sc-cell-text-color: #222222;--sc-header-border-color: #227144;--sc-header-text-color: #ffffff;--sc-required-border: #e63c28;--sc-row-color-zebra-dark: #ffffff;--sc-row-color-zebra-light: #ffffff;--sc-table-font-size: 11pt}.atable{font-family:Calibri,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size)}
|
package/dist/excel.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/dist/legal.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/legal.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #687864;--sc-brand-color: #31708e;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #080604;--sc-header-border-color: #31708e;--sc-header-text-color: #f7f9fb;--sc-required-border: #e04e46;--sc-row-color-zebra-dark: #eeeeee;--sc-row-color-zebra-light: #f7f9fb;--sc-table-font-size: 11pt}.atable{font-family:Sabon,serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size)}
|
package/dist/legal.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/dist/verdant.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/verdant.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap";:root{--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-atable-font-family: "Arimo", sans-serif;--sc-brand-color: #3c5014;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #827553;--sc-font-size: 11pt;--sc-header-border-color: #ffffff;--sc-header-text-color: #ffffff;--sc-primary-color: #3c5014;--sc-primary-text-color: #f7f7e9;--sc-required-border: #e63c28;--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-table-font-size: 11pt}.aform-primary-action{font-size:100%;text-align:center;min-height:2em;padding:.25rem 1rem;border:1px solid var(--sc-primary-color);color:var(--sc-primary-text-color);background-color:var(--sc-primary-color);outline:2px solid var(--sc-primary-text-color);transition:outline-offset .2s ease;font-size:var(--sc-font-size);margin:.5ch}.aform-primary-action:hover,.aform-primary-action:active{outline:2px solid var(--sc-primary-text-color);outline-offset:-4px;transition:outline-offset .2s ease}.atable{font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size)}
|
package/dist/verdant.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/dist/vue.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/vue.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #41b883;--sc-border-collapsed: none;--sc-brand-color: #34495e;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #34495e;--sc-header-border-color: #34495e;--sc-header-text-color: #ffffff;--sc-required-border: #b84277;--sc-row-color-zebra-dark: #d9f1e6;--sc-row-color-zebra-light: #ecf8f3;--sc-table-font-size: 11pt}.atable{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size)}body{background:#fff}
|
package/dist/vue.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|