@moderneinc/neo-design 1.3.0 → 1.4.0

package/dist/border-radius.css

@@ -1,12 +1,22 @@
 :root {
+  /* Scopes: Corner Radius */
   --neo-border-radius-card: 12;
+  /* Scopes: Corner Radius */
   --neo-border-radius-button: 999;
+  /* Scopes: Corner Radius */
   --neo-border-radius-input: 8;
+  /* Scopes: Corner Radius */
   --neo-border-radius-xXS: 2;
+  /* Scopes: Corner Radius */
   --neo-border-radius-xS: 4;
+  /* Scopes: Corner Radius */
   --neo-border-radius-s: 8;
+  /* Scopes: Corner Radius */
   --neo-border-radius-m: 12;
+  /* Scopes: Corner Radius */
   --neo-border-radius-l: 20;
+  /* Scopes: Corner Radius */
   --neo-border-radius-xL: 30;
+  /* Scopes: Corner Radius */
   --neo-border-radius-full: 999;
 }

package/dist/border-radius.js

@@ -5,51 +5,61 @@
  */
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const card = 12;
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const button = 999;
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const input = 8;
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const xXS = 2;
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const xS = 4;
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const s = 8;
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const m = 12;
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const l = 20;
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const xL = 30;
 
 /**
+ * Scopes: Corner Radius
  * @type {number}
  */
 export const full = 999;

package/dist/index.d.ts

@@ -207,18 +207,35 @@ type Activity = {
 declare const activity: Activity;
 
 type Border = {
+  /**
+   * @scopes Stroke Color
+   */
   primary: '#d1d5db';
+  /**
+   * @scopes Stroke Color
+   */
   input: '#9ca3af';
+  /**
+   * @scopes Stroke Color
+   */
   tabActive: '#2f42ff';
+  /**
+   * @scopes Stroke Color
+   */
   codeDashed: '#9ca3af';
   card: '#d1d5db';
   cardHeader: '#d1d5db';
+  navTopContainers: '#f3f4f6';
 };
 
 declare const border: Border;
 
 type Buttons = {
+  /**
+   * @scopes All Fills, Effect Color
+   */
   destructive: '#cb3446';
+  navigationActive: '#ffffff';
   primary: {
   pressed: '#131e7a';
   default: '#2f42ff';
@@ -226,7 +243,6 @@ type Buttons = {
   disabled: '#b6bfff';
   focus: '#2f42ff';
 };
-  navigationActive: '#ffffff';
   secondary: {
   defaultBorder: '#b6bfff';
   hoverBackground: '#f2f3ff';
@@ -251,18 +267,58 @@ type Buttons = {
 
 declare const buttons: Buttons;
 
+type Data = {
+  green: '#4ca75a';
+  yellow: '#fdda04';
+  orange1: '#ffc008';
+  orange2: '#ff9800';
+  orange3: '#f9a91b';
+  red1: '#ff5c24';
+  red2: '#ed4134';
+  red3: '#cb3446';
+};
+
+declare const data: Data;
+
 type Icons = {
+  /**
+   * @scopes All Fills, Stroke Color, Effect Color
+   */
   default: '#1f2937';
+  /**
+   * @scopes All Fills, Stroke Color, Effect Color
+   */
   active: '#2f42ff';
+  /**
+   * @scopes All Fills, Stroke Color, Effect Color
+   */
   hover: '#131e7a';
+  /**
+   * @scopes All Fills, Stroke Color, Effect Color
+   */
   hoverBackground: '#e5e7eb';
+  /**
+   * @scopes All Fills, Stroke Color, Effect Color
+   */
   disabled: '#9ca3af';
+  /**
+   * @scopes All Fills, Stroke Color, Effect Color
+   */
   placeholder: '#4b5563';
+  /**
+   * @scopes All Fills, Stroke Color, Effect Color
+   */
   checkbox: '#4b5563';
 };
 
 declare const icons: Icons;
 
+type Input = {
+  inputField: '#ffffff';
+};
+
+declare const input: Input;
+
 type Status = {
   success: {
   dark: '#4ca75a';
@@ -281,18 +337,57 @@ type Status = {
 declare const status: Status;
 
 type Surfaces = {
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   black: '#000000';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   white: '#ffffff';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   page: '#f9fafb';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   card: '#ffffff';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   cardHeader: '#f3f4f6';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   tabActive: '#f3f4f6';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   listHover: '#f9fafb';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   inputHover: '#f3f4f6';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   tableDisabledRow: '#f3f4f6';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   tableBackground: '#ffffff';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   shadowNeutral: '#1f2937';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   scrim: '#1f2937';
+  /**
+   * @scopes Frame Fill, Shape Fill, Effect Color
+   */
   shadowPrimary: '#2f42ff';
   tooltip: '#4b5563';
 };
@@ -320,10 +415,20 @@ type Typography = {
   disabled: '#b6bfff';
   default: '#f9fafb';
 };
+  /**
+   * @scopes Text Fill
+   */
   error: '#cb3446';
+  /**
+   * @scopes Text Fill
+   */
   success: '#4ca75a';
+  /**
+   * @scopes Text Fill
+   */
   warning: '#1f2937';
   tooltip: '#ffffff';
+  legal: '#9ca3af';
   navigation: {
   default: '#374151';
 };
@@ -331,28 +436,16 @@ type Typography = {
 
 declare const typography: Typography;
 
-type Data = {
-  green: '#4ca75a';
-  yellow: '#fdda04';
-  orange1: '#ffc008';
-  orange2: '#ff9800';
-  orange3: '#f9a91b';
-  red1: '#ff5c24';
-  red2: '#ed4134';
-  red3: '#cb3446';
-};
-
-declare const data: Data;
-
 declare const _default$1: {
   activity: typeof activity,
   border: typeof border,
   buttons: typeof buttons,
+  data: typeof data,
   icons: typeof icons,
+  input: typeof input,
   status: typeof status,
   surfaces: typeof surfaces,
-  typography: typeof typography,
-  data: typeof data
+  typography: typeof typography
 };
 
 type semanticColors_d_Activity = Activity;
@@ -360,6 +453,7 @@ type semanticColors_d_Border = Border;
 type semanticColors_d_Buttons = Buttons;
 type semanticColors_d_Data = Data;
 type semanticColors_d_Icons = Icons;
+type semanticColors_d_Input = Input;
 type semanticColors_d_Status = Status;
 type semanticColors_d_Surfaces = Surfaces;
 type semanticColors_d_Typography = Typography;
@@ -368,12 +462,13 @@ declare const semanticColors_d_border: typeof border;
 declare const semanticColors_d_buttons: typeof buttons;
 declare const semanticColors_d_data: typeof data;
 declare const semanticColors_d_icons: typeof icons;
+declare const semanticColors_d_input: typeof input;
 declare const semanticColors_d_status: typeof status;
 declare const semanticColors_d_surfaces: typeof surfaces;
 declare const semanticColors_d_typography: typeof typography;
 declare namespace semanticColors_d {
-  export { semanticColors_d_activity as activity, semanticColors_d_border as border, semanticColors_d_buttons as buttons, semanticColors_d_data as data, _default$1 as default, semanticColors_d_icons as icons, semanticColors_d_status as status, semanticColors_d_surfaces as surfaces, semanticColors_d_typography as typography };
-  export type { semanticColors_d_Activity as Activity, semanticColors_d_Border as Border, semanticColors_d_Buttons as Buttons, semanticColors_d_Data as Data, semanticColors_d_Icons as Icons, semanticColors_d_Status as Status, semanticColors_d_Surfaces as Surfaces, semanticColors_d_Typography as Typography };
+  export { semanticColors_d_activity as activity, semanticColors_d_border as border, semanticColors_d_buttons as buttons, semanticColors_d_data as data, _default$1 as default, semanticColors_d_icons as icons, semanticColors_d_input as input, semanticColors_d_status as status, semanticColors_d_surfaces as surfaces, semanticColors_d_typography as typography };
+  export type { semanticColors_d_Activity as Activity, semanticColors_d_Border as Border, semanticColors_d_Buttons as Buttons, semanticColors_d_Data as Data, semanticColors_d_Icons as Icons, semanticColors_d_Input as Input, semanticColors_d_Status as Status, semanticColors_d_Surfaces as Surfaces, semanticColors_d_Typography as Typography };
 }
 
 /**
@@ -391,29 +486,86 @@ type FontFamily = {
 declare const fontFamily: FontFamily;
 
 type FontSize = {
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   xxs: 10;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   xs: 12;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   sm: 14;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   default: 16;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   h6: 16;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   caption: 13;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   code: 14;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   h5: 18;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   h4: 20;
-  h3: 24;
-  h2: 28;
-  h1: 36;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
+  h3: 21;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
+  h2: 24;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
+  h1: 28;
 };
 
 declare const fontSize: FontSize;
 
 type FontWeight = {
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   thin: 100;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   light: 300;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   regular: 400;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   medium: 500;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   semiBold: 600;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   bold: 700;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   extraBold: 800;
 };
 
@@ -422,11 +574,24 @@ declare const fontWeight: FontWeight;
 type LineHeight = {
   /**
    * value in pixels
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
    */
   xs: 16;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   s: 20;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   m: 24;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   l: 28;
+  /**
+   * @scopes Text Content, Font Style, Font Size, Line Height, Letter Spacing, Paragraph Spacing
+   */
   xl: 32;
 };
 

package/dist/semantic-colors.css

@@ -2,81 +2,142 @@
   --neo-activity-recipe-run: #992fb9;
   --neo-activity-commit-job: #2f42ff;
   --neo-activity-visualization: #27aa88;
+  /* Scopes: Stroke Color */
   --neo-border-primary: #d1d5db;
+  /* Scopes: Stroke Color */
   --neo-border-input: #9ca3af;
+  /* Scopes: Stroke Color */
   --neo-border-tab-active: #2f42ff;
+  /* Scopes: Stroke Color */
   --neo-border-code-dashed: #9ca3af;
   --neo-border-card: #d1d5db;
   --neo-border-card-header: #d1d5db;
+  --neo-border-nav-top-containers: #f3f4f6;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-destructive: #cb3446;
+  --neo-buttons-navigation-active: #ffffff;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-primary-pressed: #131e7a;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-primary-default: #2f42ff;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-primary-hover: #1e2ec2;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-primary-disabled: #b6bfff;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-primary-focus: #2f42ff;
-  --neo-buttons-navigation-active: #ffffff;
+  /* Scopes: Stroke Color, Effect Color */
   --neo-buttons-secondary-default-border: #b6bfff;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-secondary-hover-background: #f2f3ff;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-secondary-pressed-background: #dce0ff;
+  /* Scopes: Stroke Color, Effect Color */
   --neo-buttons-secondary-disabled: #626eff;
+  /* Scopes: Stroke Color, Effect Color */
   --neo-buttons-secondary-focus: #2f42ff;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-buttons-tertiary-default: #2f42ff;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-buttons-tertiary-hover: #1e2ec2;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-buttons-tertiary-pressed: #131e7a;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-buttons-tertiary-focus: #2f42ff;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-buttons-tertiary-disabled: #626eff;
+  /* Scopes: Stroke Color, Effect Color */
   --neo-buttons-navigation-default-border: #b6bfff;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-navigation-hover-background: #f3f4f6;
+  /* Scopes: All Fills, Effect Color */
   --neo-buttons-navigation-pressed-background: #e5e7eb;
+  /* Scopes: Stroke Color, Effect Color */
   --neo-buttons-navigation-active-border: #2f42ff;
+  --neo-data-green: #4ca75a;
+  --neo-data-yellow: #fdda04;
+  --neo-data-orange1: #ffc008;
+  --neo-data-orange2: #ff9800;
+  --neo-data-orange3: #f9a91b;
+  --neo-data-red1: #ff5c24;
+  --neo-data-red2: #ed4134;
+  --neo-data-red3: #cb3446;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-icons-default: #1f2937;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-icons-active: #2f42ff;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-icons-hover: #131e7a;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-icons-hover-background: #e5e7eb;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-icons-disabled: #9ca3af;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-icons-placeholder: #4b5563;
+  /* Scopes: All Fills, Stroke Color, Effect Color */
   --neo-icons-checkbox: #4b5563;
+  --neo-input-input-field: #ffffff;
   --neo-status-success-dark: #4ca75a;
   --neo-status-success-light: #f3fff5;
   --neo-status-warning-dark: #ffb800;
   --neo-status-warning-light: #fff8e5;
   --neo-status-error-dark: #cb3446;
   --neo-status-error-light: #ffedef;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-black: #000000;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-white: #ffffff;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-page: #f9fafb;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-card: #ffffff;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-card-header: #f3f4f6;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-tab-active: #f3f4f6;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-list-hover: #f9fafb;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-input-hover: #f3f4f6;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-table-disabled-row: #f3f4f6;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-table-background: #ffffff;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-shadow-neutral: #1f2937;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-scrim: #1f2937;
+  /* Scopes: Frame Fill, Shape Fill, Effect Color */
   --neo-surfaces-shadow-primary: #2f42ff;
   --neo-surfaces-tooltip: #4b5563;
+  /* Scopes: Text Fill */
   --neo-typography-button-disabled: #9ca3af;
+  /* Scopes: Text Fill */
   --neo-typography-input-placeholder: #6b7280;
+  /* Scopes: Text Fill */
   --neo-typography-input-default: #1f2937;
+  /* Scopes: Text Fill */
   --neo-typography-code-primary: #1f2937;
+  /* Scopes: Text Fill */
   --neo-typography-code-secondary: #6b7280;
+  /* Scopes: Text Fill */
   --neo-typography-tab-inactive: #4b5563;
+  /* Scopes: Text Fill */
   --neo-typography-tab-active: #626eff;
+  /* Scopes: Text Fill */
   --neo-typography-link-primary: #2f42ff;
+  /* Scopes: Text Fill */
   --neo-typography-link-disabled: #b6bfff;
+  /* Scopes: Text Fill */
   --neo-typography-link-default: #f9fafb;
+  /* Scopes: Text Fill */
   --neo-typography-error: #cb3446;
+  /* Scopes: Text Fill */
   --neo-typography-success: #4ca75a;
+  /* Scopes: Text Fill */
   --neo-typography-warning: #1f2937;
   --neo-typography-tooltip: #ffffff;
+  --neo-typography-legal: #9ca3af;
+  /* Scopes: Text Fill */
   --neo-typography-navigation-default: #374151;
-  --neo-data-green: #4ca75a;
-  --neo-data-yellow: #fdda04;
-  --neo-data-orange1: #ffc008;
-  --neo-data-orange2: #ff9800;
-  --neo-data-orange3: #f9a91b;
-  --neo-data-red1: #ff5c24;
-  --neo-data-red2: #ed4134;
-  --neo-data-red3: #cb3446;
 }