@unpunnyfuns/swatchbook-blocks 0.19.8 → 0.20.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/dist/index.d.mts +53 -1
- package/dist/index.mjs +92 -1
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +49 -0
- package/package.json +2 -2
package/dist/style.css
CHANGED
|
@@ -809,6 +809,55 @@
|
|
|
809
809
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
810
810
|
font-size: 11px;
|
|
811
811
|
}
|
|
812
|
+
.sb-opacity-scale__grid {
|
|
813
|
+
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
814
|
+
gap: 12px;
|
|
815
|
+
display: grid;
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
.sb-opacity-scale__card {
|
|
819
|
+
border: 1px solid var(--swatchbook-border-default, #80808033);
|
|
820
|
+
border-radius: 6px;
|
|
821
|
+
flex-direction: column;
|
|
822
|
+
display: flex;
|
|
823
|
+
overflow: hidden;
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
.sb-opacity-scale__swatch {
|
|
827
|
+
border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
|
|
828
|
+
background-color: #fff;
|
|
829
|
+
background-image: linear-gradient(45deg, #00000014 25%, #0000 25%), linear-gradient(-45deg, #00000014 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #00000014 75%), linear-gradient(-45deg, #0000 75%, #00000014 75%);
|
|
830
|
+
background-position: 0 0, 0 6px, 6px -6px, -6px 0;
|
|
831
|
+
background-size: 12px 12px;
|
|
832
|
+
height: 64px;
|
|
833
|
+
position: relative;
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
.sb-opacity-scale__swatch:after {
|
|
837
|
+
content: "";
|
|
838
|
+
background: var(--sb-opacity-scale-color);
|
|
839
|
+
opacity: var(--sb-opacity-scale-alpha);
|
|
840
|
+
position: absolute;
|
|
841
|
+
inset: 0;
|
|
842
|
+
}
|
|
843
|
+
|
|
844
|
+
.sb-opacity-scale__meta {
|
|
845
|
+
flex-direction: column;
|
|
846
|
+
gap: 2px;
|
|
847
|
+
padding: 8px 10px;
|
|
848
|
+
display: flex;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
.sb-opacity-scale__path {
|
|
852
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
853
|
+
font-size: 12px;
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
.sb-opacity-scale__value, .sb-opacity-scale__css-var {
|
|
857
|
+
opacity: .7;
|
|
858
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
859
|
+
font-size: 11px;
|
|
860
|
+
}
|
|
812
861
|
.sb-shadow-preview__row {
|
|
813
862
|
border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
|
|
814
863
|
grid-template-columns: minmax(160px, 220px) 140px 1fr;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unpunnyfuns/swatchbook-blocks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.20.0",
|
|
4
4
|
"description": "Storybook MDX doc blocks for DTCG design tokens — TokenTable, ColorPalette, TypographyScale, TokenDetail.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "unpunnyfuns <unpunnyfuns@gmail.com>",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@terrazzo/token-tools": "^2.0.3",
|
|
69
69
|
"clsx": "^2.1.1",
|
|
70
70
|
"colorjs.io": "0.6.1",
|
|
71
|
-
"@unpunnyfuns/swatchbook-core": "0.
|
|
71
|
+
"@unpunnyfuns/swatchbook-core": "0.20.0"
|
|
72
72
|
},
|
|
73
73
|
"scripts": {
|
|
74
74
|
"build": "tsdown",
|