@aristobyte-ui/card 1.0.68 → 1.0.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,5 +1,4 @@
1
1
  "use client";
2
- import "./index.css";
3
2
  "use strict";
4
3
  var __defProp = Object.defineProperty;
5
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../index.ts","../components/Card/index.tsx"],"sourcesContent":["export * from \"./components\";\n","import * as React from \"react\";\nimport { type IconPropsType } from \"@aristobyte-ui/utils\";\nimport { Label } from \"@aristobyte-ui/label\";\n\nimport \"./Card.scss\";\n\nexport interface ICard {\n title?: string;\n description?: string;\n label?: {\n text: string;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n };\n icon?: {\n component: (\n props: IconPropsType\n ) => React.JSX.Element | React.ReactNode | React.ReactElement;\n size?: number;\n color?: string;\n colors?: string[];\n };\n children?: React.ReactNode | React.ReactElement | string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const Card: React.FC<ICard> = ({\n title,\n description,\n label,\n icon,\n children,\n className = \"\",\n style = {},\n}) => (\n <div className={`card ${className}`} style={style}>\n {(title || icon || label) && (\n <h3 className=\"card__title\">\n {icon && (\n <div className=\"card__icon\">\n {icon.component({\n size: icon.size || 8,\n color: icon.color,\n colors: icon.colors,\n })}\n </div>\n )}\n {title && <span dangerouslySetInnerHTML={{ __html: title }} />}\n {label && (\n <Label\n text={label.text}\n backgroundColor={label.backgroundColor}\n borderColor={label.borderColor}\n color={label.color}\n />\n )}\n </h3>\n )}\n {description && (\n <p\n className=\"card__description\"\n dangerouslySetInnerHTML={{ __html: description }}\n />\n )}\n {children && <div className=\"card__content\">{children}</div>}\n </div>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAsB;AAqChB;AAXC,IAAM,OAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AACX,MACE,6CAAC,SAAI,WAAW,QAAQ,SAAS,IAAI,OACjC;AAAA,YAAS,QAAQ,UACjB,6CAAC,QAAG,WAAU,eACX;AAAA,YACC,4CAAC,SAAI,WAAU,cACZ,eAAK,UAAU;AAAA,MACd,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC,GACH;AAAA,IAED,SAAS,4CAAC,UAAK,yBAAyB,EAAE,QAAQ,MAAM,GAAG;AAAA,IAC3D,SACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,iBAAiB,MAAM;AAAA,QACvB,aAAa,MAAM;AAAA,QACnB,OAAO,MAAM;AAAA;AAAA,IACf;AAAA,KAEJ;AAAA,EAED,eACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,YAAY;AAAA;AAAA,EACjD;AAAA,EAED,YAAY,4CAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA,GACxD;","names":[]}
1
+ {"version":3,"sources":["../index.ts","../components/Card/index.tsx"],"sourcesContent":["export * from \"./components\";\n","import * as React from \"react\";\nimport { type IconPropsType } from \"@aristobyte-ui/utils\";\nimport { Label } from \"@aristobyte-ui/label\";\n\nexport interface ICard {\n title?: string;\n description?: string;\n label?: {\n text: string;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n };\n icon?: {\n component: (\n props: IconPropsType\n ) => React.JSX.Element | React.ReactNode | React.ReactElement;\n size?: number;\n color?: string;\n colors?: string[];\n };\n children?: React.ReactNode | React.ReactElement | string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const Card: React.FC<ICard> = ({\n title,\n description,\n label,\n icon,\n children,\n className = \"\",\n style = {},\n}) => (\n <div className={`card ${className}`} style={style}>\n {(title || icon || label) && (\n <h3 className=\"card__title\">\n {icon && (\n <div className=\"card__icon\">\n {icon.component({\n size: icon.size || 8,\n color: icon.color,\n colors: icon.colors,\n })}\n </div>\n )}\n {title && <span dangerouslySetInnerHTML={{ __html: title }} />}\n {label && (\n <Label\n text={label.text}\n backgroundColor={label.backgroundColor}\n borderColor={label.borderColor}\n color={label.color}\n />\n )}\n </h3>\n )}\n {description && (\n <p\n className=\"card__description\"\n dangerouslySetInnerHTML={{ __html: description }}\n />\n )}\n {children && <div className=\"card__content\">{children}</div>}\n </div>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAsB;AAmChB;AAXC,IAAM,OAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AACX,MACE,6CAAC,SAAI,WAAW,QAAQ,SAAS,IAAI,OACjC;AAAA,YAAS,QAAQ,UACjB,6CAAC,QAAG,WAAU,eACX;AAAA,YACC,4CAAC,SAAI,WAAU,cACZ,eAAK,UAAU;AAAA,MACd,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC,GACH;AAAA,IAED,SAAS,4CAAC,UAAK,yBAAyB,EAAE,QAAQ,MAAM,GAAG;AAAA,IAC3D,SACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,iBAAiB,MAAM;AAAA,QACvB,aAAa,MAAM;AAAA,QACnB,OAAO,MAAM;AAAA;AAAA,IACf;AAAA,KAEJ;AAAA,EAED,eACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,YAAY;AAAA;AAAA,EACjD;AAAA,EAED,YAAY,4CAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA,GACxD;","names":[]}
package/dist/index.mjs CHANGED
@@ -1,5 +1,4 @@
1
1
  "use client";
2
- import "./index.css";
3
2
 
4
3
  // components/Card/index.tsx
5
4
  import { Label } from "@aristobyte-ui/label";
@@ -1 +1 @@
1
- {"version":3,"sources":["../components/Card/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type IconPropsType } from \"@aristobyte-ui/utils\";\nimport { Label } from \"@aristobyte-ui/label\";\n\nimport \"./Card.scss\";\n\nexport interface ICard {\n title?: string;\n description?: string;\n label?: {\n text: string;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n };\n icon?: {\n component: (\n props: IconPropsType\n ) => React.JSX.Element | React.ReactNode | React.ReactElement;\n size?: number;\n color?: string;\n colors?: string[];\n };\n children?: React.ReactNode | React.ReactElement | string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const Card: React.FC<ICard> = ({\n title,\n description,\n label,\n icon,\n children,\n className = \"\",\n style = {},\n}) => (\n <div className={`card ${className}`} style={style}>\n {(title || icon || label) && (\n <h3 className=\"card__title\">\n {icon && (\n <div className=\"card__icon\">\n {icon.component({\n size: icon.size || 8,\n color: icon.color,\n colors: icon.colors,\n })}\n </div>\n )}\n {title && <span dangerouslySetInnerHTML={{ __html: title }} />}\n {label && (\n <Label\n text={label.text}\n backgroundColor={label.backgroundColor}\n borderColor={label.borderColor}\n color={label.color}\n />\n )}\n </h3>\n )}\n {description && (\n <p\n className=\"card__description\"\n dangerouslySetInnerHTML={{ __html: description }}\n />\n )}\n {children && <div className=\"card__content\">{children}</div>}\n </div>\n);\n"],"mappings":";;;;AAEA,SAAS,aAAa;AAqChB,SAEI,KAFJ;AAXC,IAAM,OAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AACX,MACE,qBAAC,SAAI,WAAW,QAAQ,SAAS,IAAI,OACjC;AAAA,YAAS,QAAQ,UACjB,qBAAC,QAAG,WAAU,eACX;AAAA,YACC,oBAAC,SAAI,WAAU,cACZ,eAAK,UAAU;AAAA,MACd,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC,GACH;AAAA,IAED,SAAS,oBAAC,UAAK,yBAAyB,EAAE,QAAQ,MAAM,GAAG;AAAA,IAC3D,SACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,iBAAiB,MAAM;AAAA,QACvB,aAAa,MAAM;AAAA,QACnB,OAAO,MAAM;AAAA;AAAA,IACf;AAAA,KAEJ;AAAA,EAED,eACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,YAAY;AAAA;AAAA,EACjD;AAAA,EAED,YAAY,oBAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA,GACxD;","names":[]}
1
+ {"version":3,"sources":["../components/Card/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type IconPropsType } from \"@aristobyte-ui/utils\";\nimport { Label } from \"@aristobyte-ui/label\";\n\nexport interface ICard {\n title?: string;\n description?: string;\n label?: {\n text: string;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n };\n icon?: {\n component: (\n props: IconPropsType\n ) => React.JSX.Element | React.ReactNode | React.ReactElement;\n size?: number;\n color?: string;\n colors?: string[];\n };\n children?: React.ReactNode | React.ReactElement | string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const Card: React.FC<ICard> = ({\n title,\n description,\n label,\n icon,\n children,\n className = \"\",\n style = {},\n}) => (\n <div className={`card ${className}`} style={style}>\n {(title || icon || label) && (\n <h3 className=\"card__title\">\n {icon && (\n <div className=\"card__icon\">\n {icon.component({\n size: icon.size || 8,\n color: icon.color,\n colors: icon.colors,\n })}\n </div>\n )}\n {title && <span dangerouslySetInnerHTML={{ __html: title }} />}\n {label && (\n <Label\n text={label.text}\n backgroundColor={label.backgroundColor}\n borderColor={label.borderColor}\n color={label.color}\n />\n )}\n </h3>\n )}\n {description && (\n <p\n className=\"card__description\"\n dangerouslySetInnerHTML={{ __html: description }}\n />\n )}\n {children && <div className=\"card__content\">{children}</div>}\n </div>\n);\n"],"mappings":";;;AAEA,SAAS,aAAa;AAmChB,SAEI,KAFJ;AAXC,IAAM,OAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AACX,MACE,qBAAC,SAAI,WAAW,QAAQ,SAAS,IAAI,OACjC;AAAA,YAAS,QAAQ,UACjB,qBAAC,QAAG,WAAU,eACX;AAAA,YACC,oBAAC,SAAI,WAAU,cACZ,eAAK,UAAU;AAAA,MACd,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC,GACH;AAAA,IAED,SAAS,oBAAC,UAAK,yBAAyB,EAAE,QAAQ,MAAM,GAAG;AAAA,IAC3D,SACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,iBAAiB,MAAM;AAAA,QACvB,aAAa,MAAM;AAAA,QACnB,OAAO,MAAM;AAAA;AAAA,IACf;AAAA,KAEJ;AAAA,EAED,eACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,YAAY;AAAA;AAAA,EACjD;AAAA,EAED,YAAY,oBAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA,GACxD;","names":[]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aristobyte-ui/card",
3
3
  "description": "AristoByteUI Card component: a versatile container for displaying content and UI elements.",
4
- "version": "1.0.68",
4
+ "version": "1.0.72",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "author": "AristoByte <info@aristobyte.com>",
@@ -27,7 +27,6 @@
27
27
  "button",
28
28
  "ripple",
29
29
  "typescript",
30
- "scss",
31
30
  "react",
32
31
  "ui-component",
33
32
  "component-library",
@@ -56,25 +55,19 @@
56
55
  "check-types": "tsc --noEmit"
57
56
  },
58
57
  "dependencies": {
59
- "@aristobyte-ui/label": "^1.0.68",
60
- "@aristobyte-ui/utils": "^1.0.68",
61
- "esbuild-sass-plugin": "^3.3.1",
58
+ "@aristobyte-ui/label": "^1.0.72",
59
+ "@aristobyte-ui/utils": "^1.0.72",
62
60
  "react": "^19.1.0",
63
- "react-dom": "^19.1.0",
64
- "sass": "^1.89.0",
65
- "tsup": "^8.5.0"
61
+ "react-dom": "^19.1.0"
66
62
  },
67
63
  "devDependencies": {
68
- "@aristobyte-ui/eslint-config": "^1.0.68",
69
- "@aristobyte-ui/typescript-config": "^1.0.68",
64
+ "@aristobyte-ui/eslint-config": "^1.0.72",
65
+ "@aristobyte-ui/typescript-config": "^1.0.72",
70
66
  "@turbo/gen": "^2.5.0",
71
67
  "@types/node": "^24.3.0",
72
68
  "@types/react": "19.1.0",
73
69
  "@types/react-dom": "19.1.1",
74
- "autoprefixer": "^10.4.21",
75
70
  "eslint": "^9.27.0",
76
- "postcss": "^8.5.3",
77
- "sass-embedded": "^1.91.0",
78
71
  "tsup": "^8.5.0",
79
72
  "typescript": "^5.8.3"
80
73
  }
package/dist/index.css DELETED
@@ -1,57 +0,0 @@
1
- /* components/Card/Card.scss */
2
- .card {
3
- align-self: stretch;
4
- align-items: flex-start;
5
- border-radius: 10px;
6
- border: 1px solid #314158;
7
- background-color: rgba(29, 41, 61, 0.3);
8
- display: flex;
9
- flex-direction: column;
10
- padding: 17px 17px 30px;
11
- transition: all 150ms ease-out;
12
- width: calc(100% - 34px);
13
- }
14
- .card__icon {
15
- align-items: center;
16
- display: flex;
17
- justify-content: center;
18
- }
19
- .card__title {
20
- align-items: center;
21
- color: #e2e8f0;
22
- display: flex;
23
- font-size: 20px;
24
- font-style: normal;
25
- font-weight: 500;
26
- line-height: 20px;
27
- gap: 12px;
28
- }
29
- .card__title b {
30
- border: solid rgba(69, 85, 108, 0.5);
31
- background-color: rgba(49, 65, 88, 0.4);
32
- border-radius: 10px;
33
- color: #ffffff;
34
- padding: 3px 6px;
35
- }
36
- .card__description {
37
- color: #90a1b9;
38
- font-size: 16px;
39
- font-style: normal;
40
- font-weight: 400;
41
- line-height: 22px;
42
- margin: 14px 0 0;
43
- }
44
- .card__description b {
45
- border: solid rgba(69, 85, 108, 0.5);
46
- background-color: rgba(49, 65, 88, 0.4);
47
- border-radius: 10px;
48
- color: #ffffff;
49
- padding: 3px 6px;
50
- }
51
- .card__content {
52
- display: flex;
53
- flex-direction: column;
54
- margin: 24px 0 0;
55
- width: 100%;
56
- }
57
- /*# sourceMappingURL=index.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../components/Card.scss","../../../../node_modules/@aristobyte-ui/utils/styles/_settings.scss"],"sourcesContent":["@use \"@aristobyte-ui/utils/styles/settings\" as *;\n\n.card {\n align-self: stretch;\n align-items: flex-start;\n border-radius: 10px;\n border: 1px solid #314158; //@TODO: @COLOR\n background-color: rgba(29, 41, 61, 0.3); //@TODO: @COLOR\n display: flex;\n flex-direction: column;\n padding: 17px 17px 30px;\n transition: all 150ms ease-out;\n width: calc(100% - 2 * 17px);\n\n &__icon {\n align-items: center;\n display: flex;\n justify-content: center;\n }\n\n &__title {\n align-items: center;\n color: #e2e8f0; //@TODO: @COLOR\n display: flex;\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n gap: 12px;\n\n b {\n border: solid rgba(69, 85, 108, 0.5); // @TODO: @COLOR\n background-color: rgba(49, 65, 88, 0.4); // @TODO: @COLOR\n border-radius: 10px;\n color: $white;\n padding: 3px 6px;\n }\n }\n\n &__description {\n color: #90a1b9; //@TODO: @COLOR\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 22px;\n margin: 14px 0 0;\n\n b {\n border: solid rgba(69, 85, 108, 0.5); // @TODO: @COLOR\n background-color: rgba(49, 65, 88, 0.4); // @TODO: @COLOR\n border-radius: 10px;\n color: $white;\n padding: 3px 6px;\n }\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n margin: 24px 0 0;\n width: 100%;\n }\n}\n","// =========================================== //\n// AristoByte UI - Style Settings //\n// =========================================== //\n\n// === Design Tokens — Color Palette === //\n// Logo\n$logo-color-1: #ffee27;\n$logo-color-2: #fec800;\n$logo-color-3: #f18e35;\n$logo-color-4: #e95f32;\n$logo-color-5: #e2312d;\n$logo-gradient: linear-gradient(\n 90deg,\n $logo-color-1,\n $logo-color-2,\n $logo-color-3,\n $logo-color-4,\n $logo-color-5\n);\n\n// Base\n$white: #ffffff;\n$white-hover: #dddddd;\n$black: #000000;\n$black-hover: #222222;\n$transparent: transparent;\n\n// === Black Transparent Scale === //\n$black-transparent-100: rgba(0, 0, 0, 0.1);\n$black-transparent-200: rgba(0, 0, 0, 0.2);\n$black-transparent-300: rgba(0, 0, 0, 0.3);\n$black-transparent-400: rgba(0, 0, 0, 0.4);\n$black-transparent-500: rgba(0, 0, 0, 0.5);\n$black-transparent-600: rgba(0, 0, 0, 0.6);\n$black-transparent-700: rgba(0, 0, 0, 0.7);\n$black-transparent-800: rgba(0, 0, 0, 0.8);\n$black-transparent-900: rgba(0, 0, 0, 0.9);\n\n// === Black Transparent Scale === //\n$white-transparent-100: rgba(255, 255, 255, 0.1);\n$white-transparent-200: rgba(255, 255, 255, 0.2);\n$white-transparent-300: rgba(255, 255, 255, 0.3);\n$white-transparent-400: rgba(255, 255, 255, 0.4);\n$white-transparent-500: rgba(255, 255, 255, 0.5);\n$white-transparent-600: rgba(255, 255, 255, 0.6);\n$white-transparent-700: rgba(255, 255, 255, 0.7);\n$white-transparent-800: rgba(255, 255, 255, 0.8);\n$white-transparent-900: rgba(255, 255, 255, 0.9);\n\n// === Neutral Scale (Grey) === //\n$grey-50: #f9fafb;\n$grey-100: #f3f4f6;\n$grey-200: #e5e7eb;\n$grey-300: #d1d5db;\n$grey-400: #9ca3af;\n$grey-500: #6b7280;\n$grey-600: #4b5563;\n$grey-700: #374151;\n$grey-800: #1f2937;\n$grey-900: #111827;\n\n// === Primary Scale (Blue) === //\n$blue-50: #eff6ff;\n$blue-100: #dbeafe;\n$blue-200: #bfdbfe;\n$blue-300: #93c5fd;\n$blue-400: #60a5fa;\n$blue-500: #3b82f6;\n$blue-600: #2563eb; // Main\n$blue-700: #1d4ed8; // Hover\n$blue-800: #1e40af;\n$blue-900: #1e3a8a;\n\n// === Secondary Scale (Indigo) === //\n$indigo-50: #eef2ff;\n$indigo-100: #e0e7ff;\n$indigo-200: #c7d2fe;\n$indigo-300: #a5b4fc;\n$indigo-400: #818cf8;\n$indigo-500: #6366f1;\n$indigo-600: #4f46e5; // Main\n$indigo-700: #4338ca; // Hover\n\n// === Error Scale (Red) === //\n$red-50: #fef2f2;\n$red-100: #fee2e2;\n$red-200: #fecaca;\n$red-300: #fca5a5;\n$red-400: #f87171;\n$red-500: #ef4444;\n$red-600: #dc2626; // Main\n$red-700: #b91c1c; // Hover\n\n// === Success Scale (Green) === //\n$green-50: #f0fdf4;\n$green-100: #dcfce7;\n$green-200: #bbf7d0;\n$green-300: #86efac;\n$green-400: #4ade80;\n$green-500: #22c55e;\n$green-600: #16a34a; // Main\n$green-700: #15803d; // Hover\n\n// === Warning Scale (Amber) === //\n$amber-50: #fffbeb;\n$amber-100: #fef3c7;\n$amber-200: #fde68a;\n$amber-300: #fcd34d;\n$amber-400: #fbbf24;\n$amber-500: #f59e0b;\n$amber-600: #d97706; // Main\n$amber-700: #b45309; // Hover\n\n// === Semantic Tokens === //\n$color-default: $grey-800;\n$color-default-hover: $grey-900;\n$color-default-disabled: rgba($color-default, 0.5);\n\n$color-primary: $blue-600;\n$color-primary-hover: $blue-700;\n$color-primary-disabled: rgba($color-primary, 0.5);\n\n$color-secondary: $indigo-600;\n$color-secondary-hover: $indigo-700;\n$color-secondary-disabled: rgba($color-secondary, 0.5);\n\n$color-error: $red-600;\n$color-error-hover: $red-700;\n$color-error-disabled: rgba($color-error, 0.5);\n\n$color-success: $green-600;\n$color-success-hover: $green-700;\n$color-success-disabled: rgba($color-success, 0.5);\n\n$color-warning: $amber-600;\n$color-warning-hover: $amber-700;\n$color-warning-disabled: rgba($color-warning, 0.5);\n\n$text-color-white: $white;\n$text-color-black: $black;\n$text-color-white-disabled: rgba($white, 0.5);\n$text-color-black-disabled: rgba($black, 0.5);\n\n$title-color-dark: $white;\n$subtitle-color-dark: #99a1af;\n$description-color-dark: #d1d5dc;\n$icon-color-dark: #99a1af;\n\n// === Shadows === //\n//@TODO: @SHADOW\n$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);\n$shadow-md:\n 0 4px 6px -1px rgba($black, 0.1),\n 0 2px 4px -1px rgba($black, 0.06);\n$shadow-lg:\n 0 10px 15px -3px rgba($black, 0.1),\n 0 4px 6px -2px rgba($black, 0.05);\n\n// === Font families === //\n$font-family-sans: \"Inter\", sans-serif;\n$font-family-serif: \"Georgia\", serif;\n$font-family-mono: \"Fira Code\", monospace;\n\n// === Font weights === //\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n// === Line heights === //\n$line-height-tight: 1.2;\n$line-height-snug: 1.375;\n$line-height-normal: 1.5;\n$line-height-loose: 1.625;\n\n// === Font Sizes — Semantic Tokens === //\n\n// === Titles === //\n$font-size-hero: 3rem; // 48px\n$font-size-title-1: 2.25rem; // 36px\n$font-size-title-2: 1.875rem; // 30px\n$font-size-title-3: 1.5rem; // 24px\n\n// === Subtitles === //\n$font-size-subtitle-1: 1.25rem; // 20px\n$font-size-subtitle-2: 1.125rem; // 18px\n\n// === Body text === //\n$font-size-body-lg: 1rem; // 16px\n$font-size-body-md: 0.9375rem; // 15px\n$font-size-body-sm: 0.875rem; // 14px\n\n// === Captions / Descriptions === //\n$font-size-caption: 0.75rem; // 12px\n$font-size-footnote: 0.6875rem; // 11px\n\n// === Buttons === //\n$font-size-button-lg: 1rem; // 16px\n$font-size-button-md: 0.875rem; // 14px\n$font-size-button-sm: 0.75rem; // 12px\n\n// === Animations === //\n\n$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);\n$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n"],"mappings":";AAEA,CAAA;AACE,cAAA;AACA,eAAA;AACA,iBAAA;AACA,UAAA,IAAA,MAAA;AACA,oBAAA,KAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AACA,WAAA;AACA,kBAAA;AACA,WAAA,KAAA,KAAA;AACA,cAAA,IAAA,MAAA;AACA,SAAA,KAAA,KAAA,EAAA;;AAEA,CAAA;AACE,eAAA;AACA,WAAA;AACA,mBAAA;;AAGF,CAAA;AACE,eAAA;AACA,SAAA;AACA,WAAA;AACA,aAAA;AACA,cAAA;AACA,eAAA;AACA,eAAA;AACA,OAAA;;AAEA,CAVF,YAUE;AACE,UAAA,MAAA,KAAA,EAAA,EAAA,EAAA,EAAA,GAAA,EAAA;AACA,oBAAA,KAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AACA,iBAAA;AACA,SCbE;ADcF,WAAA,IAAA;;AAIJ,CAAA;AACE,SAAA;AACA,aAAA;AACA,cAAA;AACA,eAAA;AACA,eAAA;AACA,UAAA,KAAA,EAAA;;AAEA,CARF,kBAQE;AACE,UAAA,MAAA,KAAA,EAAA,EAAA,EAAA,EAAA,GAAA,EAAA;AACA,oBAAA,KAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AACA,iBAAA;AACA,SC9BE;AD+BF,WAAA,IAAA;;AAIJ,CAAA;AACE,WAAA;AACA,kBAAA;AACA,UAAA,KAAA,EAAA;AACA,SAAA;;","names":[]}