feat(core)!: add ods- prefix to all tokens (#103)

closes #102

docs/_core/borders/intro.story.tsx

@@ -12,7 +12,7 @@ export const Intro = () => (
       language="css"
       code={`
         .box {
-          border-radius: var(--border-radius-medium);
+          border-radius: var(--ods-border-radius-medium);
         }
       `}
       format

docs/_core/colors/intro.story.tsx

@@ -20,7 +20,7 @@ export const Intro = () => (
       language="css"
       code={`
         .text {
-          color: var(--color-content-main);
+          color: var(--ods-color-content-main);
         }
       `}
       format

examples/custom-themes/src/tokens.scss

@@ -1,10 +1,10 @@
 @mixin tokens() {
-  --color-primary-700: 245, 124, 0;
-  --color-primary-600: 251, 140, 0;
-  --color-primary-500: 255, 152, 0;
-  --color-primary-400: 255, 167, 38;
-  --color-primary-300: 255, 183, 77;
-  --color-primary-200: 255, 204, 128;
-  --color-primary-100: 255, 224, 178;
-  --color-primary-050: 255, 243, 224;
+  --ods-color-primary-700: 245, 124, 0;
+  --ods-color-primary-600: 251, 140, 0;
+  --ods-color-primary-500: 255, 152, 0;
+  --ods-color-primary-400: 255, 167, 38;
+  --ods-color-primary-300: 255, 183, 77;
+  --ods-color-primary-200: 255, 204, 128;
+  --ods-color-primary-100: 255, 224, 178;
+  --ods-color-primary-050: 255, 243, 224;
 }

examples/html-css-js-parcel/src/app.css

@@ -7,11 +7,11 @@
 }
 
 .raised {
-  box-shadow: 0 2px 4px rgba(var(--color-neutral-900), 0.3);
+  box-shadow: 0 2px 4px rgba(var(--ods-color-neutral-900), 0.3);
 }
 
 .round {
-  border-radius: var(--border-radius-full);
+  border-radius: var(--ods-border-radius-full);
 }
 
 .icon {

examples/html-css-js/index.css

@@ -17,11 +17,11 @@ body {
 }
 
 .raised {
-  box-shadow: 0 2px 4px rgba(var(--color-neutral-900), 0.3);
+  box-shadow: 0 2px 4px rgba(var(--ods-color-neutral-900), 0.3);
 }
 
 .round {
-  border-radius: var(--border-radius-full);
+  border-radius: var(--ods-border-radius-full);
 }
 
 .icon {

examples/html-css/index.css

@@ -17,11 +17,11 @@ body {
 }
 
 .raised {
-  box-shadow: 0 2px 4px rgba(var(--color-neutral-900), 0.3);
+  box-shadow: 0 2px 4px rgba(var(--ods-color-neutral-900), 0.3);
 }
 
 .round {
-  border-radius: var(--border-radius-full);
+  border-radius: var(--ods-border-radius-full);
 }
 
 .icon {

packages/core/README.md

@@ -161,7 +161,7 @@ For example, if you'd like a round button, you can create a CSS modifier class u
 
 ```css
 .ods-button.round {
-  border-radius: var(--border-radius-full);
+  border-radius: var(--ods-border-radius-full);
 }
 ```
 

packages/core/src/helpers/border-radius/border-radius.scss

@@ -5,5 +5,5 @@ $allowed-sizes: ('small', 'medium', 'large', 'full');
     @error '$size must be one of (#{$allowed-sizes})';
   }
 
-  @return var(--border-radius-#{$size});
+  @return var(--ods-border-radius-#{$size});
 }

packages/core/src/helpers/border-radius/border-radius.spec.ts

@@ -5,6 +5,6 @@ describe('borderRadius', () => {
   it('should return the correct CSS variable', () => {
     const size = 'medium';
 
-    expect(borderRadius(size)).toBe(`var(--border-radius-${size})`);
+    expect(borderRadius(size)).toBe(`var(--ods-border-radius-${size})`);
   });
 });

packages/core/src/helpers/border-radius/border-radius.ts

@@ -3,10 +3,10 @@
  *
  * @example
  * borderRadius('medium');
- * // 'var(--border-radius-medium)'
+ * // 'var(--ods-border-radius-medium)'
  */
 export function borderRadius(size: BorderRadius) {
-  return `var(--border-radius-${size})`;
+  return `var(--ods-border-radius-${size})`;
 }
 
 export type BorderRadius = 'small' | 'medium' | 'large' | 'full';

packages/core/src/helpers/color/color.scss

@@ -141,10 +141,10 @@ $aliases: (
 
 @function color($name, $alpha: 1) {
   @if index($aliases, $name) {
-    @return rgba(var(--color-#{$name}));
+    @return rgba(var(--ods-color-#{$name}));
   }
   @if index($palette, $name) {
-    @return rgba(var(--color-#{$name}), #{$alpha});
+    @return rgba(var(--ods-color-#{$name}), #{$alpha});
   }
 
   @error 'Color token not supported: #{$name}';

packages/core/src/helpers/color/color.spec.ts

@@ -6,7 +6,7 @@ describe('color', () => {
     it('should return the correct rgba value', () => {
       const name = 'content-main';
 
-      expect(color(name)).toBe(`rgba(var(--color-${name}))`);
+      expect(color(name)).toBe(`rgba(var(--ods-color-${name}))`);
     });
   });
 
@@ -16,14 +16,14 @@ describe('color', () => {
       const opacity = 0.5;
 
       expect(color(name, opacity)).toBe(
-        `rgba(var(--color-${name}), ${opacity})`
+        `rgba(var(--ods-color-${name}), ${opacity})`
       );
     });
 
     it('should work without opacity', () => {
       const name = 'primary-500';
 
-      expect(color(name)).toBe(`rgba(var(--color-${name}))`);
+      expect(color(name)).toBe(`rgba(var(--ods-color-${name}))`);
     });
   });
 });

packages/core/src/helpers/color/color.ts

@@ -5,7 +5,7 @@
  *
  * @example
  * color('content-main');
- * // 'rgba(var(--color-content-main))'
+ * // 'rgba(var(--ods-color-content-main))'
  */
 export function color(name: Color): string;
 /**
@@ -17,14 +17,14 @@ export function color(name: Color): string;
  *
  * @example
  * color('primary-500', 0.5);
- * // 'rgba(var(--color-primary-500), 0.5)'
+ * // 'rgba(var(--ods-color-primary-500), 0.5)'
  */
 export function color(name: Palette, opacity?: number): string;
 
 export function color(name: Color, opacity?: number): string {
   return opacity
-    ? `rgba(var(--color-${name}), ${opacity})`
-    : `rgba(var(--color-${name}))`;
+    ? `rgba(var(--ods-color-${name}), ${opacity})`
+    : `rgba(var(--ods-color-${name}))`;
 }
 
 export type Color = ContentColor | BackgroundColor | BorderColor | Palette;

packages/core/src/theme/themes/day.scss

@@ -2,74 +2,75 @@
 
 // ...$types: 'class' | 'raw';
 @mixin day($types...) {
+  // prettier-ignore
   @include castor.theme('day', $types...) {
-    --color-content-main: var(--color-neutral-800), 1;
-    --color-content-secondary: var(--color-neutral-700), 1;
-    --color-content-action: var(--color-primary-500), 1;
-    --color-content-placeholder: var(--color-neutral-600), 1;
-    --color-content-disabled: var(--color-neutral-600), 1;
-    --color-content-link: var(--color-primary-500), 1;
-    --color-content-link-hover: var(--color-primary-600), 1;
-    --color-content-link-visited: var(--color-accent-3-600), 1;
-    --color-content-negative: var(--color-error-500), 1;
-    --color-content-warning: var(--color-warning-600), 1;
-    --color-content-positive: var(--color-success-500), 1;
-    --color-content-info: var(--color-info-500), 1;
-    --color-content-logo: var(--color-primary-500), 1;
-    --color-content-inverse-main: var(--color-neutral-200), 1;
-    --color-content-inverse-secondary: var(--color-neutral-400), 1;
-    --color-content-on-action: var(--color-neutral-200), 1;
-    --color-content-on-inverse-action: var(--color-primary-500), 1;
-    --color-content-always-light: var(--color-neutral-200), 1;
-    --color-content-always-dark: var(--color-neutral-800), 1;
+    --ods-color-content-main: var(--ods-color-neutral-800), 1;
+    --ods-color-content-secondary: var(--ods-color-neutral-700), 1;
+    --ods-color-content-action: var(--ods-color-primary-500), 1;
+    --ods-color-content-placeholder: var(--ods-color-neutral-600), 1;
+    --ods-color-content-disabled: var(--ods-color-neutral-600), 1;
+    --ods-color-content-link: var(--ods-color-primary-500), 1;
+    --ods-color-content-link-hover: var(--ods-color-primary-600), 1;
+    --ods-color-content-link-visited: var(--ods-color-accent-3-600), 1;
+    --ods-color-content-negative: var(--ods-color-error-500), 1;
+    --ods-color-content-warning: var(--ods-color-warning-600), 1;
+    --ods-color-content-positive: var(--ods-color-success-500), 1;
+    --ods-color-content-info: var(--ods-color-info-500), 1;
+    --ods-color-content-logo: var(--ods-color-primary-500), 1;
+    --ods-color-content-inverse-main: var(--ods-color-neutral-200), 1;
+    --ods-color-content-inverse-secondary: var(--ods-color-neutral-400), 1;
+    --ods-color-content-on-action: var(--ods-color-neutral-200), 1;
+    --ods-color-content-on-inverse-action: var(--ods-color-primary-500), 1;
+    --ods-color-content-always-light: var(--ods-color-neutral-200), 1;
+    --ods-color-content-always-dark: var(--ods-color-neutral-800), 1;
 
-    --color-background-main: var(--color-neutral-200), 1;
-    --color-background-surface: var(--color-neutral-050), 1;
-    --color-background-surface-alt: var(--color-neutral-300), 1;
-    --color-background-action: var(--color-primary-500), 1;
-    --color-background-action-hover: var(--color-primary-400), 1;
-    --color-background-action-active: var(--color-primary-600), 1;
-    --color-background-action-subtle: var(--color-primary-500), 0.1;
-    --color-background-action-subtle-hover: var(--color-primary-500), 0.05;
-    --color-background-disabled: var(--color-neutral-300), 1;
-    --color-background-negative: var(--color-error-500), 1;
-    --color-background-negative-hover: var(--color-error-400), 1;
-    --color-background-negative-active: var(--color-error-600), 1;
-    --color-background-negative-subtle: var(--color-error-500), 0.1;
-    --color-background-negative-subtle-hover: var(--color-error-500), 0.05;
-    --color-background-warning: var(--color-warning-400), 1;
-    --color-background-warning-subtle: var(--color-warning-400), 0.1;
-    --color-background-positive: var(--color-success-400), 1;
-    --color-background-positive-subtle: var(--color-success-400), 0.1;
-    --color-background-info: var(--color-info-500), 1;
-    --color-background-info-subtle: var(--color-info-500), 0.1;
-    --color-background-input: var(--color-neutral-050), 1;
-    --color-background-input-selected: var(--color-primary-500), 1;
-    --color-background-overlay: var(--color-neutral-black), 0.8;
-    --color-background-overlay-subtle: var(--color-neutral-black), 0.5;
-    --color-background-inverse-main: var(--color-neutral-900), 1;
-    --color-background-inverse-surface: var(--color-neutral-800), 1;
-    --color-background-inverse-action: var(--color-neutral-white), 1;
+    --ods-color-background-main: var(--ods-color-neutral-200), 1;
+    --ods-color-background-surface: var(--ods-color-neutral-050), 1;
+    --ods-color-background-surface-alt: var(--ods-color-neutral-300), 1;
+    --ods-color-background-action: var(--ods-color-primary-500), 1;
+    --ods-color-background-action-hover: var(--ods-color-primary-400), 1;
+    --ods-color-background-action-active: var(--ods-color-primary-600), 1;
+    --ods-color-background-action-subtle: var(--ods-color-primary-500), 0.1;
+    --ods-color-background-action-subtle-hover: var(--ods-color-primary-500), 0.05;
+    --ods-color-background-disabled: var(--ods-color-neutral-300), 1;
+    --ods-color-background-negative: var(--ods-color-error-500), 1;
+    --ods-color-background-negative-hover: var(--ods-color-error-400), 1;
+    --ods-color-background-negative-active: var(--ods-color-error-600), 1;
+    --ods-color-background-negative-subtle: var(--ods-color-error-500), 0.1;
+    --ods-color-background-negative-subtle-hover: var(--ods-color-error-500), 0.05;
+    --ods-color-background-warning: var(--ods-color-warning-400), 1;
+    --ods-color-background-warning-subtle: var(--ods-color-warning-400), 0.1;
+    --ods-color-background-positive: var(--ods-color-success-400), 1;
+    --ods-color-background-positive-subtle: var(--ods-color-success-400), 0.1;
+    --ods-color-background-info: var(--ods-color-info-500), 1;
+    --ods-color-background-info-subtle: var(--ods-color-info-500), 0.1;
+    --ods-color-background-input: var(--ods-color-neutral-050), 1;
+    --ods-color-background-input-selected: var(--ods-color-primary-500), 1;
+    --ods-color-background-overlay: var(--ods-color-neutral-black), 0.8;
+    --ods-color-background-overlay-subtle: var(--ods-color-neutral-black), 0.5;
+    --ods-color-background-inverse-main: var(--ods-color-neutral-900), 1;
+    --ods-color-background-inverse-surface: var(--ods-color-neutral-800), 1;
+    --ods-color-background-inverse-action: var(--ods-color-neutral-white), 1;
 
-    --color-border-separator: var(--color-neutral-300), 1;
-    --color-border-input: var(--color-neutral-600), 1;
-    --color-border-input-hover: var(--color-neutral-700), 1;
-    --color-border-action: var(--color-primary-500), 1;
-    --color-border-action-hover: var(--color-primary-400), 1;
-    --color-border-action-subtle: var(--color-primary-200), 1;
-    --color-border-disabled: var(--color-neutral-300), 1;
-    --color-border-negative: var(--color-error-500), 1;
-    --color-border-negative-subtle: var(--color-error-200), 1;
-    --color-border-warning: var(--color-warning-400), 1;
-    --color-border-warning-subtle: var(--color-warning-muted-300), 1;
-    --color-border-positive: var(--color-success-500), 1;
-    --color-border-positive-subtle: var(--color-success-muted-300), 1;
-    --color-border-info: var(--color-info-500), 1;
-    --color-border-info-subtle: var(--color-info-200), 1;
-    --color-border-input-selected: var(--color-primary-500), 1;
-    --color-border-focus-inner: var(--color-neutral-white), 1;
-    --color-border-action-focus: var(--color-primary-600), 1;
-    --color-border-negative-focus: var(--color-error-600), 1;
-    --color-border-inverse-action: var(--color-neutral-white), 1;
+    --ods-color-border-separator: var(--ods-color-neutral-300), 1;
+    --ods-color-border-input: var(--ods-color-neutral-600), 1;
+    --ods-color-border-input-hover: var(--ods-color-neutral-700), 1;
+    --ods-color-border-action: var(--ods-color-primary-500), 1;
+    --ods-color-border-action-hover: var(--ods-color-primary-400), 1;
+    --ods-color-border-action-subtle: var(--ods-color-primary-200), 1;
+    --ods-color-border-disabled: var(--ods-color-neutral-300), 1;
+    --ods-color-border-negative: var(--ods-color-error-500), 1;
+    --ods-color-border-negative-subtle: var(--ods-color-error-200), 1;
+    --ods-color-border-warning: var(--ods-color-warning-400), 1;
+    --ods-color-border-warning-subtle: var(--ods-color-warning-muted-300), 1;
+    --ods-color-border-positive: var(--ods-color-success-500), 1;
+    --ods-color-border-positive-subtle: var(--ods-color-success-muted-300), 1;
+    --ods-color-border-info: var(--ods-color-info-500), 1;
+    --ods-color-border-info-subtle: var(--ods-color-info-200), 1;
+    --ods-color-border-input-selected: var(--ods-color-primary-500), 1;
+    --ods-color-border-focus-inner: var(--ods-color-neutral-white), 1;
+    --ods-color-border-action-focus: var(--ods-color-primary-600), 1;
+    --ods-color-border-negative-focus: var(--ods-color-error-600), 1;
+    --ods-color-border-inverse-action: var(--ods-color-neutral-white), 1;
   }
 }