@charcoal-ui/theme - npm Package Compare versions

Comparing version 3.15.0 to 3.16.0

package.json

 {
   "name": "@charcoal-ui/theme",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "license": "Apache-2.0",
@@ -32,4 +32,4 @@ "main": "./dist/index.cjs.js",
   "dependencies": {
-    "@charcoal-ui/foundation": "^3.15.0",
-    "@charcoal-ui/utils": "^3.15.0",
+    "@charcoal-ui/foundation": "^3.16.0",
+    "@charcoal-ui/utils": "^3.16.0",
     "polished": "^4.1.4"
@@ -50,3 +50,3 @@ },
   },
-  "gitHead": "86530afb8f352115d17821c8e873258fdb5a1a27"
+  "gitHead": "e28930956816f95325a648ec492d9f1f82e516c8"
 }

src/json/base.json

 {
+  "brand-color": {
+    "pixiv": { "value": "rgba(0, 150, 250, 1)" },
+    "premium": { "value": "rgba(253, 158, 22, 1)" },
+    "comic": { "value": "rgba(255, 196, 0, 1)" },
+    "booth": { "value": "rgba(252, 77, 80, 1)" },
+    "factory": { "value": "rgba(0, 184, 205, 1)" }
+  },
   "color": {
@@ -264,9 +271,2 @@ "light/neutral/0": { "value": "rgba(255, 255, 255, 1)" },
   },
-  "brand-color": {
-    "pixiv": { "value": "rgba(0, 150, 250, 1)" },
-    "premium": { "value": "rgba(253, 158, 22, 1)" },
-    "comic": { "value": "rgba(255, 196, 0, 1)" },
-    "booth": { "value": "rgba(252, 77, 80, 1)" },
-    "factory": { "value": "rgba(0, 184, 205, 1)" }
-  },
   "space": {
@@ -273,0 +273,0 @@ "0": { "value": "0" },

src/json/pixiv-dark.json

 {
-  "space": {
-    "target/xs": { "value": "24" },
-    "target/s": { "value": "32" },
-    "target/m": { "value": "40" },
-    "target/l": { "value": "48" },
-    "component/0": { "value": "{space.0}" },
-    "component/1": { "value": "{space.1}" },
-    "component/10": { "value": "{space.10}" },
-    "component/15": { "value": "{space.15}" },
-    "component/20": { "value": "{space.20}" },
-    "component/25": { "value": "{space.25}" },
-    "component/30": { "value": "{space.30}" },
-    "component/35": { "value": "{space.35}" },
-    "component/40": { "value": "{space.40}" },
-    "component/43": { "value": "{space.43}" },
-    "component/46": { "value": "{space.46}" },
-    "component/50": { "value": "{space.50}" },
-    "component/55": { "value": "{space.55}" },
-    "component/60": { "value": "{space.60}" },
-    "component/63": { "value": "{space.63}" },
-    "component/66": { "value": "{space.66}" },
-    "layout/0": { "value": "{space.0}" },
-    "layout/10": { "value": "{space.10}" },
-    "layout/20": { "value": "{space.20}" },
-    "layout/30": { "value": "{space.30}" },
-    "layout/40": { "value": "{space.40}" },
-    "layout/50": { "value": "{space.50}" },
-    "layout/60": { "value": "{space.60}" },
-    "layout/70": { "value": "{space.70}" },
-    "layout/80": { "value": "{space.80}" },
-    "layout/90": { "value": "{space.90}" },
-    "layout/100": { "value": "{space.100}" }
-  },
-  "radius": {
-    "none": { "value": "{space.component/0}" },
-    "xs": { "value": "{space.component/1}" },
-    "s": { "value": "{space.component/10}" },
-    "m": { "value": "{space.component/20}" },
-    "l": { "value": "{space.component/25}" },
-    "xl": { "value": "{space.component/30}" },
-    "xxl": { "value": "{space.component/40}" },
-    "oval": { "value": "999999" }
-  },
   "color": {
@@ -89,5 +46,5 @@ "background/default": { "value": "{color.dark/neutral/0}" },
     "container/neutral/press": { "value": "{color.dark/neutral/50}" },
-    "container/hud/default": { "value": "{color.light/neutral/10}" },
-    "container/hud/hover": { "value": "{color.light/neutral/20}" },
-    "container/hud/press": { "value": "{color.light/neutral/20}" },
+    "container/hud/default": { "value": "{color.dark/neutral/90}" },
+    "container/hud/hover": { "value": "{color.dark/neutral/80}" },
+    "container/hud/press": { "value": "{color.dark/neutral/70}" },
     "container/skeleton": { "value": "{color.dark/neutral-a/5}" },
@@ -121,4 +78,4 @@ "container/subtle": { "value": "rgba(228, 228, 228, 0.02)" },
     "text/placeholder/default": { "value": "{color.dark/neutral/30}" },
-    "text/placeholder/hover": { "value": "{color.dark/neutral/40}" },
-    "text/placeholder/press": { "value": "{color.dark/neutral/50}" },
+    "text/placeholder/hover": { "value": "{color.dark/neutral/30}" },
+    "text/placeholder/press": { "value": "{color.dark/neutral/30}" },
     "text/info/default": { "value": "{color.dark/blue/60}" },
@@ -176,8 +133,13 @@ "text/info/hover": { "value": "{color.dark/blue/80}" },
     "icon/on-neutral/press": { "value": "{color.dark/neutral/90}" },
-    "border/default": { "value": "{color.dark/neutral/30}" },
+    "border/default": { "value": "{color.dark/neutral-a/30}" },
+    "border/hover": { "value": "{color.dark/neutral-a/40}" },
+    "border/press": { "value": "{color.dark/neutral-a/50}" },
     "border/secondary": { "value": "{color.dark/neutral-a/10}" },
     "border/focus/1": { "value": "{color.dark/blue/60}" },
     "border/disable": { "value": "{color.dark/neutral-a/5}" },
+    "border/selected": { "value": "{color.container/primary/default}" },
     "border/focus/2": { "value": "{color.dark/blue/20}" },
+    "border/focus/legacy": { "value": "rgba(0, 150, 250, 0.32)" },
     "border/negative": { "value": "{color.dark/red/20}" },
+    "border/hud": { "value": "{color.background/default}" },
     "icon/on-negative/default": { "value": "{color.text/on-negative/default}" },
@@ -192,3 +154,80 @@ "icon/on-negative/hover": { "value": "{color.text/on-negative/hover}" },
     "icon/on-positive/press": { "value": "{color.text/on-positive/press}" }
+  },
+  "paragraph-width": {
+    "s": { "value": "320" },
+    "m": { "value": "448" },
+    "l": { "value": "672" },
+    "s-compact": { "value": "280" },
+    "m-compact": { "value": "392" },
+    "l-compact": { "value": "588" },
+    "s-cozy": { "value": "588" },
+    "m-cozy": { "value": "616" },
+    "l-cozy": { "value": "924" }
+  },
+  "space": {
+    "target/xs": { "value": "24" },
+    "target/s": { "value": "32" },
+    "target/m": { "value": "40" },
+    "target/l": { "value": "48" },
+    "layout/0": { "value": "{space.0}" },
+    "layout/10": { "value": "{space.10}" },
+    "layout/20": { "value": "{space.20}" },
+    "layout/25": { "value": "{space.25}" },
+    "layout/30": { "value": "{space.30}" },
+    "layout/40": { "value": "{space.40}" },
+    "layout/50": { "value": "{space.50}" },
+    "layout/60": { "value": "{space.60}" },
+    "layout/70": { "value": "{space.70}" },
+    "layout/80": { "value": "{space.80}" },
+    "layout/90": { "value": "{space.90}" },
+    "layout/100": { "value": "{space.100}" },
+    "between-checkboxes/vertical": { "value": "{space.layout/0}" },
+    "between-checkboxes/horizontal": { "value": "{space.layout/25}" }
+  },
+  "text": {
+    "font-size/paragraph": { "value": "{text.font-size/10}" },
+    "line-height/paragraph": { "value": "{text.line-height/20}" },
+    "line-height/body": { "value": "{text.line-height/10}" },
+    "line-height/heading/xxxl": { "value": "{text.line-height/70}" },
+    "line-height/heading/xxl": { "value": "{text.line-height/60}" },
+    "line-height/heading/xl": { "value": "{text.line-height/50}" },
+    "line-height/heading/l": { "value": "{text.line-height/40}" },
+    "line-height/heading/m": { "value": "{text.line-height/30}" },
+    "line-height/heading/s": { "value": "{text.line-height/20}" },
+    "line-height/heading/xs": { "value": "{text.line-height/20}" },
+    "line-height/heading/xxs": { "value": "{text.line-height/10}" },
+    "line-height/heading/xxxs": { "value": "{text.line-height/5}" },
+    "line-height/caption/m": { "value": "{text.line-height/5}" },
+    "line-height/caption/s": { "value": "{text.line-height/1}" },
+    "font-size/body": { "value": "{text.font-size/10}" },
+    "font-size/heading/xxxl": { "value": "{text.font-size/90}" },
+    "font-size/heading/xxl": { "value": "{text.font-size/80}" },
+    "font-size/heading/xl": { "value": "{text.font-size/70}" },
+    "font-size/heading/l": { "value": "{text.font-size/60}" },
+    "font-size/heading/m": { "value": "{text.font-size/50}" },
+    "font-size/heading/s": { "value": "{text.font-size/40}" },
+    "font-size/heading/xs": { "value": "{text.font-size/30}" },
+    "font-size/heading/xxs": { "value": "{text.font-size/20}" },
+    "font-size/heading/xxxs": { "value": "{text.font-size/5}" },
+    "font-size/caption/m": { "value": "{text.font-size/5}" },
+    "font-size/caption/s": { "value": "{text.font-size/1}" },
+    "font-weight/regular": { "value": "{text.font-weight/40}" },
+    "font-weight/bold": { "value": "{text.font-weight/70}" }
+  },
+  "border-width": {
+    "m": { "value": "1" },
+    "l": { "value": "2" },
+    "focus/1": { "value": "{border-width.m}" },
+    "focus/2": { "value": "{border-width.l}" }
+  },
+  "radius": {
+    "0": { "value": "{space.0}" },
+    "xs": { "value": "{space.1}" },
+    "s": { "value": "{space.10}" },
+    "m": { "value": "{space.20}" },
+    "l": { "value": "{space.25}" },
+    "xl": { "value": "{space.30}" },
+    "xxl": { "value": "{space.40}" },
+    "oval": { "value": "999999" }
   }
 }

src/json/pixiv-light.json

 {
-  "space": {
-    "target/xs": { "value": "24" },
-    "target/s": { "value": "32" },
-    "target/m": { "value": "40" },
-    "target/l": { "value": "48" },
-    "component/0": { "value": "{space.0}" },
-    "component/1": { "value": "{space.1}" },
-    "component/10": { "value": "{space.10}" },
-    "component/15": { "value": "{space.15}" },
-    "component/20": { "value": "{space.20}" },
-    "component/25": { "value": "{space.25}" },
-    "component/30": { "value": "{space.30}" },
-    "component/35": { "value": "{space.35}" },
-    "component/40": { "value": "{space.40}" },
-    "component/43": { "value": "{space.43}" },
-    "component/46": { "value": "{space.46}" },
-    "component/50": { "value": "{space.50}" },
-    "component/55": { "value": "{space.55}" },
-    "component/60": { "value": "{space.60}" },
-    "component/63": { "value": "{space.63}" },
-    "component/66": { "value": "{space.66}" },
-    "layout/0": { "value": "{space.0}" },
-    "layout/10": { "value": "{space.10}" },
-    "layout/20": { "value": "{space.20}" },
-    "layout/30": { "value": "{space.30}" },
-    "layout/40": { "value": "{space.40}" },
-    "layout/50": { "value": "{space.50}" },
-    "layout/60": { "value": "{space.60}" },
-    "layout/70": { "value": "{space.70}" },
-    "layout/80": { "value": "{space.80}" },
-    "layout/90": { "value": "{space.90}" },
-    "layout/100": { "value": "{space.100}" }
-  },
-  "radius": {
-    "none": { "value": "{space.component/0}" },
-    "xs": { "value": "{space.component/1}" },
-    "s": { "value": "{space.component/10}" },
-    "m": { "value": "{space.component/20}" },
-    "l": { "value": "{space.component/25}" },
-    "xl": { "value": "{space.component/30}" },
-    "xxl": { "value": "{space.component/40}" },
-    "oval": { "value": "999999" }
-  },
   "color": {
@@ -120,4 +77,4 @@ "background/default": { "value": "{color.light/neutral/0}" },
     "text/placeholder/default": { "value": "{color.light/neutral/50}" },
-    "text/placeholder/hover": { "value": "{color.light/neutral/60}" },
-    "text/placeholder/press": { "value": "{color.light/neutral/70}" },
+    "text/placeholder/hover": { "value": "{color.light/neutral/50}" },
+    "text/placeholder/press": { "value": "{color.light/neutral/50}" },
     "text/info/default": { "value": "{color.light/blue/60}" },
@@ -176,7 +133,12 @@ "text/info/hover": { "value": "{color.light/blue/70}" },
     "border/default": { "value": "{color.light/neutral-a/50}" },
+    "border/hover": { "value": "{color.light/neutral-a/60}" },
+    "border/press": { "value": "{color.light/neutral-a/70}" },
     "border/secondary": { "value": "{color.light/neutral-a/10}" },
     "border/focus/1": { "value": "{color.light/blue/60}" },
     "border/disable": { "value": "{color.light/neutral-a/10}" },
+    "border/selected": { "value": "{color.container/primary/default}" },
     "border/focus/2": { "value": "{color.light/blue/20}" },
+    "border/focus/legacy": { "value": "rgba(0, 150, 250, 0.32)" },
     "border/negative": { "value": "{color.light/red/20}" },
+    "border/hud": { "value": "{color.background/default}" },
     "icon/on-negative/default": { "value": "{color.text/on-negative/default}" },
@@ -191,3 +153,80 @@ "icon/on-negative/hover": { "value": "{color.text/on-negative/hover}" },
     "icon/on-positive/press": { "value": "{color.text/on-positive/press}" }
+  },
+  "paragraph-width": {
+    "s": { "value": "320" },
+    "m": { "value": "448" },
+    "l": { "value": "672" },
+    "s-compact": { "value": "280" },
+    "m-compact": { "value": "392" },
+    "l-compact": { "value": "588" },
+    "s-cozy": { "value": "588" },
+    "m-cozy": { "value": "616" },
+    "l-cozy": { "value": "924" }
+  },
+  "space": {
+    "target/xs": { "value": "24" },
+    "target/s": { "value": "32" },
+    "target/m": { "value": "40" },
+    "target/l": { "value": "48" },
+    "layout/0": { "value": "{space.0}" },
+    "layout/10": { "value": "{space.10}" },
+    "layout/20": { "value": "{space.20}" },
+    "layout/25": { "value": "{space.25}" },
+    "layout/30": { "value": "{space.30}" },
+    "layout/40": { "value": "{space.40}" },
+    "layout/50": { "value": "{space.50}" },
+    "layout/60": { "value": "{space.60}" },
+    "layout/70": { "value": "{space.70}" },
+    "layout/80": { "value": "{space.80}" },
+    "layout/90": { "value": "{space.90}" },
+    "layout/100": { "value": "{space.100}" },
+    "between-checkboxes/vertical": { "value": "{space.layout/0}" },
+    "between-checkboxes/horizontal": { "value": "{space.layout/25}" }
+  },
+  "text": {
+    "font-size/paragraph": { "value": "{text.font-size/10}" },
+    "line-height/paragraph": { "value": "{text.line-height/20}" },
+    "line-height/body": { "value": "{text.line-height/10}" },
+    "line-height/heading/xxxl": { "value": "{text.line-height/70}" },
+    "line-height/heading/xxl": { "value": "{text.line-height/60}" },
+    "line-height/heading/xl": { "value": "{text.line-height/50}" },
+    "line-height/heading/l": { "value": "{text.line-height/40}" },
+    "line-height/heading/m": { "value": "{text.line-height/30}" },
+    "line-height/heading/s": { "value": "{text.line-height/20}" },
+    "line-height/heading/xs": { "value": "{text.line-height/20}" },
+    "line-height/heading/xxs": { "value": "{text.line-height/10}" },
+    "line-height/heading/xxxs": { "value": "{text.line-height/5}" },
+    "line-height/caption/m": { "value": "{text.line-height/5}" },
+    "line-height/caption/s": { "value": "{text.line-height/1}" },
+    "font-size/body": { "value": "{text.font-size/10}" },
+    "font-size/heading/xxxl": { "value": "{text.font-size/90}" },
+    "font-size/heading/xxl": { "value": "{text.font-size/80}" },
+    "font-size/heading/xl": { "value": "{text.font-size/70}" },
+    "font-size/heading/l": { "value": "{text.font-size/60}" },
+    "font-size/heading/m": { "value": "{text.font-size/50}" },
+    "font-size/heading/s": { "value": "{text.font-size/40}" },
+    "font-size/heading/xs": { "value": "{text.font-size/30}" },
+    "font-size/heading/xxs": { "value": "{text.font-size/20}" },
+    "font-size/heading/xxxs": { "value": "{text.font-size/5}" },
+    "font-size/caption/m": { "value": "{text.font-size/5}" },
+    "font-size/caption/s": { "value": "{text.font-size/1}" },
+    "font-weight/regular": { "value": "{text.font-weight/40}" },
+    "font-weight/bold": { "value": "{text.font-weight/70}" }
+  },
+  "border-width": {
+    "m": { "value": "1" },
+    "l": { "value": "2" },
+    "focus/1": { "value": "{border-width.m}" },
+    "focus/2": { "value": "{border-width.l}" }
+  },
+  "radius": {
+    "0": { "value": "{space.0}" },
+    "xs": { "value": "{space.1}" },
+    "s": { "value": "{space.10}" },
+    "m": { "value": "{space.20}" },
+    "l": { "value": "{space.25}" },
+    "xl": { "value": "{space.30}" },
+    "xxl": { "value": "{space.40}" },
+    "oval": { "value": "999999" }
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

184589

4.9%

Lines of code

3550

4.23%

Dependency changes

• Updated

  @charcoal-ui/foundation@^3.16.0

• Updated

  @charcoal-ui/utils@^3.16.0