@kosdev-code/kos-ddk-styles 3.0.5 → 3.0.7

package/index.cjs

@@ -352,6 +352,7 @@ const compactComponentStyles = react.css`
 
     // modal-container
     /* --ddk-component-modal-container-gap: 0px; */
+    --ddk-component-base-modal-container-gap: 0px;
 
     // modal-content
     --ddk-component-modal-content-justify-content: flex-start;
@@ -510,6 +511,22 @@ const compactComponentStyles = react.css`
     // view
     --ddk-component-view-padding: var(--ddk-generic-padding-large) var(--ddk-generic-padding-medium);
     --ddk-component-view-gap: var(--ddk-generic-padding-large);
+
+    // quit-confirmation
+    --ddk-component-quit-confirmation-border-radius: 0;
+    --ddk-component-quit-confirmation-list-gap: 0;
+    --ddk-component-quit-confirmation-list-margin: 0;
+    --ddk-component-quit-confirmation-list-padding: 0;
+
+    // step-title
+    --ddk-component-step-title-font-family: Manrope;
+    --ddk-component-step-title-font-size: 16px;
+    --ddk-component-step-title-font-weight: 500;
+    --ddk-component-step-title-color: #101223;
+    --ddk-component-step-title-line-height: 150%;
+
+    // setup-step
+    --ddk-component-setup-sidebar-step-item-padding: 12px 16px;
   }
 `;
 const compactSemanticStyles = react.css`
@@ -649,6 +666,15 @@ const baseComponentStyles = react.css`
     --ddk-component-typography-heading-large-letter-spacing: 1.5%;
     --ddk-component-typography-heading-large-line-height: 120%;
 
+    // typography-heading-x-large
+    --ddk-component-typography-heading-x-large-color: var(--ddk-generic-color-grey-100);
+    --ddk-component-typography-heading-x-large-font-family: var(--ddk-component-root-font-family-default);
+    --ddk-component-typography-heading-x-large-font-size: 48px;
+    --ddk-component-typography-heading-x-large-font-style: normal;
+    --ddk-component-typography-heading-x-large-font-weight: 600;
+    --ddk-component-typography-heading-x-large-letter-spacing: 0.72px;
+    --ddk-component-typography-heading-x-large-line-height: 120%;
+
     // typography-label
     --ddk-component-typography-label-color: var(--ddk-generic-color-grey-100);
     --ddk-component-typography-label-font-family: var(--ddk-component-root-font-family-default);
@@ -852,6 +878,13 @@ const baseComponentStyles = react.css`
     --ddk-component-input-enable-card-toggle-container-padding: 12px;
     --ddk-component-input-enable-card-toggle-container-width: initial;
 
+    // input-step
+    --ddk-component-input-step-font-size: 28px;
+    --ddk-component-input-step-font-weight: 28px;
+    --ddk-component-input-step-button-width: 80px;
+    --ddk-component-input-step-button-height: 80px;
+    --ddk-component-input-step-button-border-radius: 400px;
+
     // container
     --ddk-component-container-max-width-large: 960px;
     --ddk-component-container-max-width-medium: 640px;
@@ -970,6 +1003,11 @@ const baseComponentStyles = react.css`
     --ddk-component-info-container-font-weight: 600;
     --ddk-component-info-container-padding: 24px 32px;
 
+    // info-message
+    --ddk-component-info-message-icon-width: 40px;
+    --ddk-component-info-message-icon-height: 40px;
+    --ddk-component-info-message-icon-padding: 4px;
+
     // input-container
     --ddk-component-input-container-align-items: center;
     --ddk-component-input-container-flex-direction: column;
@@ -1102,6 +1140,7 @@ const baseComponentStyles = react.css`
 
     // modal-container
     --ddk-component-modal-container-gap: 32px;
+    --ddk-component-base-modal-container-gap: 32px;
 
     // modal-content
     --ddk-component-modal-content-gap: var(--ddk-generic-padding-medium);
@@ -1442,7 +1481,20 @@ const baseComponentStyles = react.css`
     --ddk-component-quit-confirmation-border-radius: var(--ddk-generic-border-radius-large);
     --ddk-component-quit-confirmation-color: var(--ddk-generic-color-grey-50);
     --ddk-component-quit-confirmation-font-size: var(--ddk-generic-font-size-large);
+    --ddk-component-quit-confirmation-gap: var(--ddk-semantic-control-container-padding-x-large);
     --ddk-component-quit-confirmation-padding: var(--ddk-semantic-control-container-padding-x-large);
+    --ddk-component-quit-confirmation-list-gap: var(--ddk-semantic-control-container-padding-x-large);
+    --ddk-component-quit-confirmation-list-margin: 0 auto;
+    --ddk-component-quit-confirmation-list-padding: var(--ddk-semantic-control-container-padding-x-large);
+
+    --ddk-component-step-title-font-family: initial;
+    --ddk-component-step-title-font-size: var(--ddk-component-sidebar-font-size-medium);
+    --ddk-component-step-title-font-style: normal;
+    --ddk-component-step-title-font-weight: var(--ddk-semantic-control-font-weight);
+    --ddk-component-step-title-color: var(--ddk-generic-color-grey-100);
+    --ddk-component-step-title-line-height: 135%;
+    --ddk-component-step-title-letter-spacing: 0.44px;
+    --ddk-component-step-title-white-space: nowrap;
 
     // style-sub-nav-button ?
     --ddk-style-sub-nav-button-color-active: var(--ddk-generic-color-grey-100);
@@ -1464,7 +1516,11 @@ const baseComponentStyles = react.css`
 
     // dashboard-card
     --ddk-component-dashboard-card-background-color-unassigned: var(--ddk-generic-color-grey-10);
+    --ddk-component-dashboard-card-background-color-removed: var(--ddk-generic-color-grey-10);
+    --ddk-component-dashboard-card-background-color-disabled: var(--ddk-generic-color-grey-50);
     --ddk-component-dashboard-card-flex-direction: column;
+    --ddk-component-dashboard-card-header-background-color: var(--ddk-generic-color-grey-20);
+    --ddk-component-dashboard-card-header-background-color-removed: var(--ddk-generic-color-grey-20);
     --ddk-component-dashboard-card-height: 115px; // validated
     --ddk-component-dashboard-card-small-height: 115px; // validated
     --ddk-component-dashboard-card-large-width: 316px; // validated
@@ -1590,6 +1646,12 @@ const baseComponentStyles = react.css`
     --ddk-component-utility-modal-heading-font-size: var(--ddk-generic-font-size-large);
     --ddk-component-utility-modal-heading-font-weight: var(--ddk-generic-font-weight-medium);
     --ddk-component-utility-modal-heading-letter-spacing: -0.48px;
+
+    // workflow-modal
+    --ddk-component-workflow-modal-min-height: 502px;
+
+    // setup-step
+    --ddk-component-setup-sidebar-step-item-padding: 0px;
   }
 
   /* Horizontal dashboard layout mode overrides */
@@ -1686,6 +1748,7 @@ const baseGenericStyles = react.css`
     --ddk-generic-color-grey-90-05: #1012230d;
     --ddk-generic-color-grey-100: #171717;
     --ddk-generic-color-grey-100-50: #17171780;
+    --ddk-generic-color-orange-50: #fff3dd;
     --ddk-generic-color-orange-100: #ff9e32;
     --ddk-generic-color-orange-200: #c87321;
     --ddk-generic-color-red-5: #ffe1e2;
@@ -1737,6 +1800,7 @@ const baseSemanticStyles = react.css`
     --ddk-semantic-color-system-blue: var(--ddk-generic-color-blue-80);
     --ddk-semantic-color-system-green: var(--ddk-generic-color-green-100);
     --ddk-semantic-color-system-orange: var(--ddk-generic-color-orange-100);
+    --ddk-semantic-color-system-orange-light: var(--ddk-generic-color-orange-50);
     --ddk-semantic-color-system-red: var(--ddk-generic-color-red-100);
     --ddk-semantic-color-system-grey-60: var(--ddk-generic-color-grey-60);
 
@@ -1984,7 +2048,6 @@ const flexEUComponentStyles = react.css`
     // dashboard card
     --ddk-component-dashboard-card-color-unassigned: var(--ddk-generic-color-grey-50);
     --ddk-component-dashboard-card-color: var(--ddk-generic-color-grey-90);
-    --ddk-component-dashboard-card-header-background-color: var(--ddk-generic-color-grey-20);
     --ddk-component-dashboard-card-height: 92px; // validated
     --ddk-component-dashboard-card-small-height: 92px; // validated
     --ddk-component-dashboard-card-large-width: 260px; // validated