@swr-data-lab/components 2.12.1 → 2.13.0

package/dist/ChartHeader/ChartHeader.svelte

@@ -18,7 +18,7 @@ let { title, subtitle, align = 'left', children } = $props();
 
 <style>
 	.container {
-		color: var(--colour-copyPrimary);
+		color: var(--color-textPrimary);
 		font-family: var(--swr-sans);
 		display: flex;
 		flex-flow: column;

package/dist/DesignTokens/DesignTokens.svelte

@@ -34,19 +34,19 @@ const rules = [
   --br-large: 8px;
   --br-small: 4px;
   --input-height: 2.5rem;
-  --colour-copyPrimary: var(--copyPrimary-light);
-  --colour-copySecondary: var(--copySecondary-light);
-  --colour-copySecondaryHover: var(--copySecondaryHover-light);
-  --colour-logoFill: var(--logoFill-light);
-  --colour-surfaceFill: var(--surfaceFill-light);
+  --color-textPrimary: var(--textPrimary-light);
+  --color-textSecondary: var(--textSecondary-light);
+  --color-textSecondaryHover: var(--textSecondaryHover-light);
+  --color-logoFill: var(--logoFill-light);
+  --color-surfaceFill: var(--surfaceFill-light);
 }
 @media (prefers-color-scheme: dark) {
   .container {
-    --colour-logoFill: var(--logoFill-dark);
-    --colour-surfaceFill: var(--surfaceFill-dark);
-    --colour-copyPrimary: var(--copyPrimary-dark);
-    --colour-copySecondary: var(--copySecondary-dark);
-    --colour-copySecondaryHover: var(--copySecondaryHover-dark);
+    --color-logoFill: var(--logoFill-dark);
+    --color-surfaceFill: var(--surfaceFill-dark);
+    --color-textPrimary: var(--textPrimary-dark);
+    --color-textSecondary: var(--textSecondary-dark);
+    --color-textSecondaryHover: var(--textSecondaryHover-dark);
   }
 }
 .container {

package/dist/DesignTokens/Tokens.js

@@ -144,15 +144,15 @@ const shades = {
     }
 };
 const semantics = {
-    copyPrimary: {
+    textPrimary: {
         light: '#0c0c0c',
         dark: '#f8f7f5'
     },
-    copySecondary: {
+    textSecondary: {
         light: shades.gray.base,
         dark: '#a3a3a3'
     },
-    copySecondaryHover: {
+    textSecondaryHover: {
         light: shades.gray.dark1,
         dark: '#b4b4b4'
     },

package/dist/Logotype/Logotype.svelte

@@ -42,6 +42,6 @@
 		height: calc(var(--fs-small-2) * 0.8);
 	}
 	path {
-		fill: var(--colour-logoFill);
+		fill: var(--color-logoFill);
 	}
 </style>

package/dist/Middot/Middot.svelte

@@ -2,7 +2,7 @@
 
 <style>
 	.middot {
-		background: var(--colour-copySecondary);
+		background: var(--color-textSecondary);
 		width: 0.6em;
 		height: 0.6em;
 		display: inline-block;

package/dist/Note/Note.svelte

@@ -13,7 +13,7 @@ export {};
   font-size: calc(var(--fs-small-2) * 0.9);
   line-height: 1.4;
   letter-spacing: 0.0015em;
-  color: var(--colour-copySecondary);
+  color: var(--color-textSecondary);
 }
 .container :global(*) {
   color: inherit;
@@ -28,5 +28,5 @@ export {};
 .container :global(a):hover, .container :global(a):focus-visible,
 .container :global(summary):hover,
 .container :global(summary):focus-visible {
-  color: var(--colour-copySecondaryHover);
+  color: var(--color-textSecondaryHover);
 }</style>

package/dist/Switcher/Switcher.svelte

@@ -40,9 +40,9 @@ ul {
   overflow: hidden;
   padding: 0;
   margin: 0;
-  border: 1px solid var(--colour-copySecondary);
-  color: var(--colour-copyPrimary);
-  background: var(--colour-surfaceFill);
+  border: 1px solid var(--color-textSecondary);
+  color: var(--color-textPrimary);
+  background: var(--color-surfaceFill);
   border-radius: var(--br-small);
 }
 @media (min-width: 425px) {
@@ -106,6 +106,6 @@ label:hover, label:focus-visible {
   text-decoration: underline;
 }
 .is-selected label {
-  background: var(--colour-copySecondary);
+  background: var(--color-textSecondary);
   font-weight: 700;
 }</style>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "2.12.1",
+	"version": "2.13.0",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",