@akad/design-system 1.0.0-alpha.1 → 1.0.0-alpha.3

package/react/src/components/molecules/InlineEditable/InlineEditable.stories.d.ts

@@ -1,17 +1,17 @@
-import { DsInlineEditableProps } from '.';
 import { Meta } from '@storybook/react';
+import { DsInlineEditableProps } from '.';
 
 declare const ComponentProps: Meta;
 export default ComponentProps;
 export declare const Default: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsInlineEditableProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsInlineEditableProps>;
     args: {
         name: string;
-        value?: string | undefined;
-        prefix?: string | undefined;
-        sufix?: string | undefined;
-        min?: string | undefined;
-        max?: string | undefined;
-        onChangeHandler?: ((event: import('react').FormEvent<HTMLInputElement>) => void) | undefined;
+        value?: string;
+        prefix?: string;
+        sufix?: string;
+        min?: string;
+        max?: string;
+        onChangeHandler?: (event: React.FormEvent<HTMLInputElement>) => void;
     };
 };

package/react/src/components/molecules/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import { default as PropTypes } from 'prop-types';
+import { ReactNode } from 'react';
 
 export interface DsModalProps {
     className?: string;

package/react/src/components/molecules/Modal/Modal.stories.d.ts

@@ -1,10 +1,10 @@
-import { DsModalProps } from '.';
 import { Meta } from '@storybook/react';
+import { DsModalProps } from '.';
 
 declare const componentProps: Meta;
 export default componentProps;
 export declare const Default: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsModalProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsModalProps>;
     args: {
         onClose: import('@storybook/addon-actions').HandlerFunction;
         isModalOpen: boolean;
@@ -12,7 +12,7 @@ export declare const Default: {
     };
 };
 export declare const ModalSquared: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsModalProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsModalProps>;
     args: {
         variant: string;
         onClose: import('@storybook/addon-actions').HandlerFunction;
@@ -20,7 +20,7 @@ export declare const ModalSquared: {
     };
 };
 export declare const ModalWithButtons: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsModalProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsModalProps>;
     args: {
         cancelBtnText: string;
         confirmBtnText: string;
@@ -32,7 +32,7 @@ export declare const ModalWithButtons: {
     };
 };
 export declare const ModalSquaredWithButtons: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsModalProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsModalProps>;
     args: {
         variant: string;
         cancelBtnText: string;

package/react/src/components/molecules/Notification/Notification.stories.d.ts

@@ -1,95 +1,95 @@
-import { DsNotificationProps } from './Notification';
 import { Meta } from '@storybook/react';
+import { DsNotificationProps } from './Notification';
 
 declare const ComponentProps: Meta;
 export default ComponentProps;
 export declare const Default: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
     args: {
-        className?: string | undefined;
-        type?: string | undefined;
-        variant?: string | undefined;
+        className?: string;
+        type?: string;
+        variant?: string;
         id: string;
         children?: import('react').ReactNode;
         message?: import('react').ReactNode;
-        autoClose?: boolean | undefined;
-        autoCloseTimer?: number | undefined;
-        dismissible?: boolean | undefined;
-        elevation?: number | undefined;
-        progressBar?: boolean | undefined;
-        testId?: string | undefined;
-        handleClose?: ((event: import('react').MouseEvent<Element, MouseEvent>) => void) | undefined;
+        autoClose?: boolean;
+        autoCloseTimer?: number;
+        dismissible?: boolean;
+        elevation?: number;
+        progressBar?: boolean;
+        testId?: string;
+        handleClose?: (event: React.MouseEvent) => void;
     };
 };
 export declare const NotificationSuccess: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
     args: {
         type: string;
-        className?: string | undefined;
-        variant?: string | undefined;
+        className?: string;
+        variant?: string;
         id: string;
         children?: import('react').ReactNode;
         message?: import('react').ReactNode;
-        autoClose?: boolean | undefined;
-        autoCloseTimer?: number | undefined;
-        dismissible?: boolean | undefined;
-        elevation?: number | undefined;
-        progressBar?: boolean | undefined;
-        testId?: string | undefined;
-        handleClose?: ((event: import('react').MouseEvent<Element, MouseEvent>) => void) | undefined;
+        autoClose?: boolean;
+        autoCloseTimer?: number;
+        dismissible?: boolean;
+        elevation?: number;
+        progressBar?: boolean;
+        testId?: string;
+        handleClose?: (event: React.MouseEvent) => void;
     };
 };
 export declare const NotificationDanger: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
     args: {
         type: string;
-        className?: string | undefined;
-        variant?: string | undefined;
+        className?: string;
+        variant?: string;
         id: string;
         children?: import('react').ReactNode;
         message?: import('react').ReactNode;
-        autoClose?: boolean | undefined;
-        autoCloseTimer?: number | undefined;
-        dismissible?: boolean | undefined;
-        elevation?: number | undefined;
-        progressBar?: boolean | undefined;
-        testId?: string | undefined;
-        handleClose?: ((event: import('react').MouseEvent<Element, MouseEvent>) => void) | undefined;
+        autoClose?: boolean;
+        autoCloseTimer?: number;
+        dismissible?: boolean;
+        elevation?: number;
+        progressBar?: boolean;
+        testId?: string;
+        handleClose?: (event: React.MouseEvent) => void;
     };
 };
 export declare const NotificationWarning: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
     args: {
         type: string;
-        className?: string | undefined;
-        variant?: string | undefined;
+        className?: string;
+        variant?: string;
         id: string;
         children?: import('react').ReactNode;
         message?: import('react').ReactNode;
-        autoClose?: boolean | undefined;
-        autoCloseTimer?: number | undefined;
-        dismissible?: boolean | undefined;
-        elevation?: number | undefined;
-        progressBar?: boolean | undefined;
-        testId?: string | undefined;
-        handleClose?: ((event: import('react').MouseEvent<Element, MouseEvent>) => void) | undefined;
+        autoClose?: boolean;
+        autoCloseTimer?: number;
+        dismissible?: boolean;
+        elevation?: number;
+        progressBar?: boolean;
+        testId?: string;
+        handleClose?: (event: React.MouseEvent) => void;
     };
 };
 export declare const NotificationInfo: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationProps>;
     args: {
         type: string;
-        className?: string | undefined;
-        variant?: string | undefined;
+        className?: string;
+        variant?: string;
         id: string;
         children?: import('react').ReactNode;
         message?: import('react').ReactNode;
-        autoClose?: boolean | undefined;
-        autoCloseTimer?: number | undefined;
-        dismissible?: boolean | undefined;
-        elevation?: number | undefined;
-        progressBar?: boolean | undefined;
-        testId?: string | undefined;
-        handleClose?: ((event: import('react').MouseEvent<Element, MouseEvent>) => void) | undefined;
+        autoClose?: boolean;
+        autoCloseTimer?: number;
+        dismissible?: boolean;
+        elevation?: number;
+        progressBar?: boolean;
+        testId?: string;
+        handleClose?: (event: React.MouseEvent) => void;
     };
 };

package/react/src/components/molecules/PasswordConfirmation/PasswordConfirmation.stories.d.ts

@@ -1,11 +1,11 @@
-import { ThemeProviderProps } from '../ThemeProvider';
-import { DsPasswordConfirmationProps } from '.';
 import { Meta } from '@storybook/react';
+import { DsPasswordConfirmationProps } from '.';
+import { ThemeProviderProps } from '../ThemeProvider';
 
 declare const ComponentProps: Meta;
 export default ComponentProps;
 export declare const Default: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ThemeProviderProps & DsPasswordConfirmationProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ThemeProviderProps & DsPasswordConfirmationProps>;
     args: {
         onChange: import('@storybook/addon-actions').HandlerFunction;
         validationList: import('./PasswordConfirmation.config').PasswordConfirmationValidationItem[];

package/react/src/components/molecules/Stepper/Stepper.stories.d.ts

@@ -1,10 +1,10 @@
-import { DsStepperProps } from './Stepper';
 import { Meta } from '@storybook/react';
+import { DsStepperProps } from './Stepper';
 
 declare const componentProps: Meta;
 export default componentProps;
 export declare const Default: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsStepperProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsStepperProps>;
     args: {
         selectedStep: number;
         steps: ({

package/react/src/components/molecules/Table/Table.stories.d.ts

@@ -1,10 +1,10 @@
-import { DsTableRowProps } from './Table.config';
 import { Meta } from '@storybook/react';
+import { DsTableRowProps } from './Table.config';
 
 declare const componentProps: Meta;
 export default componentProps;
 export declare const Default: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsTableRowProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsTableRowProps>;
     args: {
         columns: import('.').DsTableColumnsProps[];
         data: import('.').DsTableCoverageItem[];

package/react/src/components/molecules/Tabs/Tab.d.ts

@@ -1,5 +1,5 @@
-import { DsTabProps } from './Tabs';
 import { default as React } from 'react';
+import { DsTabProps } from './Tabs';
 
 declare const DsTab: React.FC<DsTabProps>;
 export default DsTab;

package/react/src/components/molecules/Tabs/Tabs.stories.d.ts

@@ -1,10 +1,10 @@
-import { DsTabsProps } from './Tabs';
 import { Meta } from '@storybook/react';
+import { DsTabsProps } from './Tabs';
 
 declare const componentProps: Meta;
 export default componentProps;
 export declare const Default: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsTabsProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsTabsProps>;
     args: {
         color: import('../../../main').TabsColor;
         selectedTab: number;

package/react/src/components/molecules/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import { default as PropTypes } from 'prop-types';
+import { ReactNode } from 'react';
 
 export interface ThemeProviderProps {
     library: string;

package/react/src/components/organisms/NotificationList/NotificationList.d.ts

@@ -1,5 +1,5 @@
-import { DsNotificationProps } from '../../molecules/Notification';
 import { default as PropTypes } from 'prop-types';
+import { DsNotificationProps } from '../../molecules/Notification';
 
 export interface DsNotificationListProps {
     className?: string;

package/react/src/components/organisms/NotificationList/NotificationList.stories.d.ts

@@ -1,10 +1,10 @@
-import { DsNotificationListProps } from '.';
 import { Meta } from '@storybook/react';
+import { DsNotificationListProps } from '.';
 
 declare const ComponentProps: Meta;
 export default ComponentProps;
 export declare const Default: {
-    render: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationListProps>;
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsNotificationListProps>;
     args: {
         notifications: ({
             id: `${string}-${string}-${string}-${string}-${string}`;

package/scss/core/base/reset.scss

@@ -9,7 +9,6 @@
 
 html {
   font-size: 16px;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 body {

package/scss/core/components/atoms/heading.scss

@@ -4,6 +4,7 @@ h1,
 .ds-heading--1 {
   font-family: var(--font__family--highlight);
   font-size: $font__size--huge;
+  font-weight: $font__weight--bold;
   line-height: 125%;
 
   @include mobile {

package/scss/core/components/molecules/accordion.scss

@@ -47,7 +47,7 @@
     width: 100%;
 
     &:focus {
-      outline-color: var(--button-background-color__primary--hover);
+      outline-color: var(--color__primary--light);
     }
 
     &:hover {

package/scss/core/components/molecules/notification.scss

@@ -17,7 +17,7 @@
 
   b,
   strong {
-    font-weight: var(--font__weight--bold);
+    font-weight: $font__weight--bold;
   }
 
   @keyframes enter {

package/scss/core/helpers/borders.scss

@@ -28,12 +28,24 @@ $neutral-scale: (
 // Generate primary/secondary border utilities
 @each $variant in $brand-color-shades {
   .border-color__primary--#{$variant} {
-    border-color: var(--color__primary--#{$variant});
+    // Use base variable for 'default', suffixed variable for others
+    @if $variant == 'default' {
+      border-color: var(--color__primary);
+    } @else {
+      border-color: var(--color__primary--#{$variant});
+    }
+
     border-left-style: solid;
     border-left-width: $spacing--quark;
   }
   .border-color__secondary--#{$variant} {
-    border-color: var(--color__secondary--#{$variant});
+    // Use base variable for 'default', suffixed variable for others
+    @if $variant == 'default' {
+      border-color: var(--color__secondary);
+    } @else {
+      border-color: var(--color__secondary--#{$variant});
+    }
+
     border-left-style: solid;
     border-left-width: $spacing--quark;
   }
@@ -72,7 +84,13 @@ $neutral-scale: (
 @each $semantic in ('success', 'warning', 'danger', 'info') {
   @each $variant in $semantic-color-shades {
     .border-color__#{$semantic}--#{$variant} {
-      border-color: var(--color__#{$semantic}--#{$variant});
+      // Use base variable for 'default', suffixed variable for others
+      @if $variant == 'default' {
+        border-color: var(--color__#{$semantic});
+      } @else {
+        border-color: var(--color__#{$semantic}--#{$variant});
+      }
+
       border-left-style: solid;
       border-left-width: $spacing--quark;
     }

package/scss/core/helpers/colors.scss

@@ -33,10 +33,19 @@ $neutral-scale: (
 // Generate primary utilities
 @each $variant in $brand-color-shades {
   .color__primary--#{$variant} {
-    color: var(--color__primary--#{$variant});
+    // Use base variable for 'default', suffixed variable for others
+    @if $variant == 'default' {
+      color: var(--color__primary);
+    } @else {
+      color: var(--color__primary--#{$variant});
+    }
   }
   .bg-color__primary--#{$variant} {
-    background-color: var(--color__primary--#{$variant});
+    @if $variant == 'default' {
+      background-color: var(--color__primary);
+    } @else {
+      background-color: var(--color__primary--#{$variant});
+    }
 
     // Automatic contrast color (maintains old-default behavior)
     @if index(('darker', 'dark', 'default'), $variant) {
@@ -60,10 +69,19 @@ $neutral-scale: (
 // Generate secondary utilities
 @each $variant in $brand-color-shades {
   .color__secondary--#{$variant} {
-    color: var(--color__secondary--#{$variant});
+    // Use base variable for 'default', suffixed variable for others
+    @if $variant == 'default' {
+      color: var(--color__secondary);
+    } @else {
+      color: var(--color__secondary--#{$variant});
+    }
   }
   .bg-color__secondary--#{$variant} {
-    background-color: var(--color__secondary--#{$variant});
+    @if $variant == 'default' {
+      background-color: var(--color__secondary);
+    } @else {
+      background-color: var(--color__secondary--#{$variant});
+    }
 
     // Automatic contrast color (maintains old-default behavior)
     @if index(('darker', 'dark', 'default'), $variant) {
@@ -124,10 +142,19 @@ $neutral-scale: (
 @each $semantic in ('success', 'warning', 'danger', 'info') {
   @each $variant in $semantic-color-shades {
     .color__#{$semantic}--#{$variant} {
-      color: var(--color__#{$semantic}--#{$variant});
+      // Use base variable for 'default', suffixed variable for others
+      @if $variant == 'default' {
+        color: var(--color__#{$semantic});
+      } @else {
+        color: var(--color__#{$semantic}--#{$variant});
+      }
     }
     .bg-color__#{$semantic}--#{$variant} {
-      background-color: var(--color__#{$semantic}--#{$variant});
+      @if $variant == 'default' {
+        background-color: var(--color__#{$semantic});
+      } @else {
+        background-color: var(--color__#{$semantic}--#{$variant});
+      }
 
       // Automatic contrast color (maintains old-default behavior)
       @if $semantic == 'success' or $semantic == 'danger' or $semantic == 'info'