@central-design-system/components 3.0.0-beta.8 → 3.0.0-rc.1

package/dist/utils/propsFactory.d.ts

@@ -1,5 +1,5 @@
-import type { PropType } from 'vue';
 import type { Prop, ComponentObjectPropsOptions } from '../shims-vue';
+import type { PropType } from 'vue';
 /**
  * Creates a factory function for props definitions.
  * This is used to define props in a composable then override

package/dist/utils/use/flattenChildren.d.ts

@@ -0,0 +1,3 @@
+export declare function flattenChildren(children?: any[], filterEmpty?: boolean): any[];
+export declare function filterEmpty(children?: any[]): any[];
+export declare function isEmptyElement(c: Record<string, any>): boolean | undefined;

package/nuxt.js

@@ -1,6 +1,7 @@
-import { defineNuxtModule } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
 
+import { defineNuxtModule } from '@nuxt/kit';
+
 export default defineNuxtModule({
   hooks: {
     'components:dirs'(dirs) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-beta.8",
+  "version": "3.0.0-rc.1",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",
@@ -26,6 +26,7 @@
   "files": [
     "dist",
     "src/scss",
+    "src/themes",
     "nuxt.js"
   ],
   "types": "./dist/cds.d.ts",
@@ -52,5 +53,8 @@
     "vue": "3.2.47",
     "vue-router": "4.1.6",
     "vue-tsc": "1.0.9"
+  },
+  "dependencies": {
+    "resize-observer-polyfill": "1.5.1"
   }
 }

package/src/scss/index.scss

@@ -1,10 +1,8 @@
-@import 'modules/variables';
 @import 'modules/reset';
 @import 'modules/transition';
 @import 'modules/typography';
 @import 'modules/grid';
 @import 'utility';
 
-@include variables;
 @include reset;
 @include typography;

package/src/scss/mixins/layout/_shadow.scss

@@ -1,4 +1,45 @@
-@mixin cds-border-shadow($color) {
-  box-shadow: inset 0 0 0 1px $color;
+$default-shadow-color: rgb(var(--cds-alpha-silver-200));
+
+@mixin cds-shadow-top-100($color: $default-shadow-color) {
+  box-shadow: 0 var(--cds-shadow-y-minus-100) var(--cds-shadow-blur-200) 0 $color;
+}
+
+@mixin cds-shadow-left-100($color: $default-shadow-color) {
+  box-shadow: var(--cds-shadow-x-minus-100) 0 var(--cds-shadow-blur-200) 0 $color;
+}
+
+@mixin cds-shadow-right-100($color: $default-shadow-color) {
+  box-shadow: var(--cds-shadow-x-100) 0 var(--cds-shadow-blur-200) 0 $color;
+}
+
+@mixin cds-shadow-bottom-100($color: $default-shadow-color) {
+  box-shadow: 0 var(--cds-shadow-y-100) var(--cds-shadow-blur-200) 0 $color;
+}
+
+@mixin cds-shadow-bottom-200($color: $default-shadow-color) {
+  box-shadow: 0 var(--cds-shadow-y-200) var(--cds-shadow-blur-300) 0 $color;
+}
+
+@mixin cds-shadow-bottom-300($color: $default-shadow-color) {
+  box-shadow: 0 var(--cds-shadow-y-300) var(--cds-shadow-blur-400) 0 $color;
+}
+
+@mixin cds-shadow-border($color: $default-shadow-color, $size: 2px, $opacity: 0.2) {
+  box-shadow: 0 0 0 $size rgba-with-alpha($color, $opacity);
   border-color: $color;
 }
+
+@function rgba-with-alpha($color, $alpha) {
+  @if type-of($color) == 'string' {
+    @if str-index($color, 'rgb') {
+      $new-color: unquote("rgba(#{str-slice($color, 5, -2)}, #{$alpha})");
+      @return $new-color;
+    } @else {
+      @warn "Expected a string containing 'rgb', but got #{$color}";
+      @return null;
+    }
+  } @else {
+    @warn "Expected a string, but got #{$color}";
+    @return null;
+  }
+}

package/src/scss/mixins/layout/_spacing.scss

@@ -1,76 +1,77 @@
 @import 'mini-unit';
+@import 'convert';
 
 /// 0.125rem (2px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-3xs: cds-mini-units(0.25) !default;
+$cds-spacing-3xs: var(--cds-spacing-50) !default;
 
 /// 0.25rem (4px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-xxs: cds-mini-units(0.5) !default;
+$cds-spacing-xxs: var(--cds-spacing-100) !default;
 
 /// 0.5rem (8px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-xs: cds-mini-units(1) !default;
+$cds-spacing-xs: var(--cds-spacing-200) !default;
 
 /// 0.75rem (12px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-s: cds-mini-units(1.5) !default;
+$cds-spacing-s: var(--cds-spacing-300) !default;
 
 /// 1rem (16px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-m: cds-mini-units(2) !default;
+$cds-spacing-m: var(--cds-spacing-400) !default;
 
 /// 1.5rem (24px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-l: cds-mini-units(3) !default;
+$cds-spacing-l: var(--cds-spacing-500) !default;
 
 /// 2rem (32px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-xl: cds-mini-units(4) !default;
+$cds-spacing-xl: var(--cds-spacing-600) !default;
 
 /// 2.5rem (40px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-xxl: cds-mini-units(5) !default;
+$cds-spacing-xxl: var(--cds-spacing-700) !default;
 
 /// 3rem (48px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-3xl: cds-mini-units(6) !default;
+$cds-spacing-3xl: var(--cds-spacing-800) !default;
 
 /// 4rem (64px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-4xl: cds-mini-units(8) !default;
+$cds-spacing-4xl: var(--cds-spacing-900) !default;
 
 /// 5rem (80px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-5xl: cds-mini-units(10) !default;
+$cds-spacing-5xl: var(--cds-spacing-1000) !default;
 
 /// 6rem (96px) spacing with default mini unit
 /// @type Number
 /// @access public
 /// @group @cds/layout
-$cds-spacing-6xl: cds-mini-units(12) !default;
+$cds-spacing-6xl: var(--cds-spacing-1100) !default;
 
 /// All spacing increments in a map
 /// @type Map

package/src/scss/mixins/layout/index.scss

@@ -2,3 +2,4 @@
 @import 'mini-unit';
 @import 'spacing';
 @import 'shadow';
+@import 'layout';

package/src/scss/mixins/typo.scss

@@ -1,3 +1,220 @@
+/// ======================== Regular Text ========================
+/// @access public
+/// @group @cds/typo
+@mixin cds-text-regular-uppercase-50() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-50);
+  line-height: var(--cds-font-line-height-50);
+  letter-spacing: var(--cds-font-letter-spacing-500);
+  text-transform: uppercase;
+}
+
+@mixin cds-text-regular-50() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-50);
+  line-height: var(--cds-font-line-height-100);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-100() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-100);
+  line-height: var(--cds-font-line-height-200);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-200() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-200);
+  line-height: var(--cds-font-line-height-300);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-300() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-300);
+  line-height: var(--cds-font-line-height-400);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-400() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-400);
+  line-height: var(--cds-font-line-height-400);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-500() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-500);
+  line-height: var(--cds-font-line-height-500);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-600() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-600);
+  line-height: var(--cds-font-line-height-600);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-700() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-700);
+  line-height: var(--cds-font-line-height-700);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-800() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-800);
+  line-height: var(--cds-font-line-height-800);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-900() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-900);
+  line-height: var(--cds-font-line-height-900);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-1000() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-1000);
+  line-height: var(--cds-font-line-height-1000);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-regular-1100() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-regular);
+  font-size: var(--cds-font-size-1100);
+  line-height: var(--cds-font-line-height-1100);
+  letter-spacing: 0;
+}
+
+
+/// ======================== Bold Text ========================
+/// @access public
+/// @group @cds/typo
+@mixin cds-text-bold-50-uppercase() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-50);
+  line-height: var(--cds-font-line-height-50);
+  letter-spacing: var(--cds-font-letter-spacing-500);
+  text-transform: uppercase;
+}
+
+@mixin cds-text-bold-50() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-50);
+  line-height: var(--cds-font-line-height-100);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-100() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-100);
+  line-height: var(--cds-font-line-height-200);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-200() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-200);
+  line-height: var(--cds-font-line-height-300);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-300() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-300);
+  line-height: var(--cds-font-line-height-400);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-400() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-400);
+  line-height: var(--cds-font-line-height-400);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-500() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-500);
+  line-height: var(--cds-font-line-height-500);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-600() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-600);
+  line-height: var(--cds-font-line-height-600);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-700() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-700);
+  line-height: var(--cds-font-line-height-700);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-800() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-800);
+  line-height: var(--cds-font-line-height-800);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-900() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-900);
+  line-height: var(--cds-font-line-height-900);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-1000() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-1000);
+  line-height: var(--cds-font-line-height-1000);
+  letter-spacing: 0;
+}
+
+@mixin cds-text-bold-1100() {
+  font-family: var(--cds-font-family), serif;
+  font-weight: var(--cds-font-weight-bold);
+  font-size: var(--cds-font-size-1100);
+  line-height: var(--cds-font-line-height-1100);
+  letter-spacing: 0;
+}
+
 /// Placeholder
 /// @param {string} $color - The color of placeholder
 /// @access public
@@ -17,6 +234,48 @@
   }
 }
 
+/// ======================== Display Text ========================
+/// @access public
+/// @group @cds/typo
+@mixin cds-font-display-1() {
+  @include cds-text-bold-1100();
+  margin-bottom: var(--cds-spacing-300);
+}
+@mixin cds-font-display-2() {
+  @include cds-text-bold-900();
+  margin-bottom: var(--cds-spacing-300);
+}
+
+/// ======================== Heading Text ========================
+/// @access public
+/// @group @cds/typo
+@mixin cds-font-heading-1() {
+  @include cds-text-regular-800();
+  margin-bottom: var(--cds-spacing-200);
+}
+@mixin cds-font-heading-2() {
+  @include cds-text-regular-700();
+  margin-bottom: var(--cds-spacing-200);
+}
+@mixin cds-font-heading-3() {
+  @include cds-text-regular-600();
+  margin-bottom: var(--cds-spacing-200);
+}
+@mixin cds-font-heading-4() {
+  @include cds-text-bold-400();
+  margin-bottom: var(--cds-spacing-100);
+}
+@mixin cds-font-heading-5() {
+  @include cds-text-bold-300();
+  margin-bottom: var(--cds-spacing-100);
+}
+@mixin cds-font-heading-6() {
+  @include cds-text-bold-200();
+  margin-bottom: 0;
+}
+
+
+/// ======================== DEPRECATED ========================
 /// TEXT
 /// @access public
 /// @group @cds/typo
@@ -45,45 +304,7 @@
   font-weight: var(--cds-font-weight-normal);
 }
 
-/// HEADING
-/// @access public
-/// @group @cds/typo
-@mixin cds-font-heading-1() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-heading-1);
-  line-height: var(--cds-font-height-heading);
-  font-weight: var(--cds-font-weight-light);
-}
-@mixin cds-font-heading-2() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-heading-2);
-  line-height: var(--cds-font-height-heading);
-  font-weight: var(--cds-font-weight-light);
-}
-@mixin cds-font-heading-3() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-heading-3);
-  line-height: var(--cds-font-height-heading);
-  font-weight: var(--cds-font-weight-light);
-}
-@mixin cds-font-heading-4() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-heading-4);
-  line-height: var(--cds-font-height-heading);
-  font-weight: var(--cds-font-weight-bold);
-}
-@mixin cds-font-heading-5() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-heading-5);
-  line-height: var(--cds-font-height-heading);
-  font-weight: var(--cds-font-weight-bold);
-}
-@mixin cds-font-heading-6() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-heading-6);
-  line-height: var(--cds-font-height-heading);
-  font-weight: var(--cds-font-weight-bold);
-}
+
 @mixin cds-font-heading-eyebrow() {
   font-family: var(--cds-font-family-sans);
   font-size: var(--cds-font-heading-eyebrow);
@@ -93,22 +314,7 @@
   letter-spacing: 1px;
 }
 
-// DISPLAY
-/// @access public
-/// @group @cds/typo
-@mixin cds-font-display-1() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-display-1);
-  line-height: var(--cds-font-height-display);
-  font-weight: var(--cds-font-weight-bold);
-}
-@mixin cds-font-display-2() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-display-2);
-  line-height: var(--cds-font-height-display);
-  font-weight: var(--cds-font-weight-bold);
-}
-
+/// ======================== DEPRECATED ========================
 /// ELEMENTS
 /// @access public
 /// @group @cds/typo
@@ -117,7 +323,6 @@
   font-size: var(--cds-font-body-size-s);
   line-height: var(--cds-font-height-helper);
   font-weight: var(--cds-font-weight-normal);
-  max-width: $max-width;
 }
 @mixin cds-font-description($max-width: 32rem) {
   font-family: var(--cds-font-family-sans);
@@ -132,6 +337,4 @@
   font-size: var(--cds-font-body-size-xs);
   line-height: var(--cds-font-height-helper);
   font-weight: var(--cds-font-weight-normal);
-  max-width: $max-width;
-  width: 75%;
 }

package/src/scss/modules/_reset.scss

@@ -6,7 +6,7 @@
   }
 
   html {
-    font-size: var(--cds-font-base);
+    font-size: var(--cds-base-unit);
     box-sizing: border-box;
     overflow-y: scroll;
     -webkit-text-size-adjust: 100%;
@@ -15,9 +15,10 @@
   }
 
   body {
-    font-family: var(--cds-font-family-sans), Arial, sans-serif;
-    font-size: var(--cds-font-family-size);
-    line-height: var(--cds-font-height-body);
+    font-family: var(--cds-font-family), Arial, sans-serif;
+    font-size: var(--cds-font-size-200);
+    line-height: var(--cds-font-line-height-300);
+    letter-spacing: 0;
     scroll-behavior: smooth;
     text-rendering: optimizeSpeed;
   }

package/src/scss/modules/_transition.scss

@@ -10,6 +10,24 @@ $standard-duration: $cds-duration-fast + ms;
 $accent-duration: $cds-duration-normal + ms;
 
 @mixin transition-default() {
+  &-enter-active {
+    transition-duration: $standard-duration !important;
+    transition-timing-function: $standard-easing !important;
+  }
+
+  &-leave-active {
+    transition-duration: $standard-duration !important;
+    transition-timing-function: $standard-easing !important;
+  }
+
+  &-move {
+    transition-duration: 0.5s !important;
+    transition-property: transform !important;
+    transition-timing-function: $standard-easing !important;
+  }
+}
+
+@mixin transition-minimal() {
   &-enter-active {
     transition: $standard-duration $standard-easing;
   }
@@ -36,6 +54,19 @@ $accent-duration: $cds-duration-normal + ms;
 .fade-transition {
   @include transition-default();
 
+  &-enter-from, &-leave-to {
+    opacity: 0 !important;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition-property: opacity !important;
+  }
+}
+
+.fade-transition-minimal {
+  @include transition-minimal();
+
   &-leave-active {
     position: absolute;
   }

package/src/scss/modules/_typography.scss

@@ -27,10 +27,14 @@
   }
 
   p {
-    @include cds-body-text-s();
+    @include cds-text-regular-200();
   }
 
   small, .small {
-    @include cds-body-text-xs();
+    @include cds-text-regular-50();
+  }
+
+  strong {
+    @include cds-text-bold-200();
   }
 }