carriera-intern-components 1.1.14 → 1.1.151

package/src/styles/README.md

@@ -0,0 +1,57 @@
+# Global Styles
+
+This directory contains all global styles and variables for the Carriera Intern Components library.
+
+## Structure
+
+```
+styles/
+├── index.scss          # Main entry point - imports all styles
+├── _variables.scss     # Global color and design variables
+├── review_variables.scss # Review-specific variables
+└── README.md          # This file
+```
+
+## Usage
+
+### For Library Consumers
+
+The global styles are automatically included when you import the library. The styles are bundled with the library and available through the `styleIncludePaths` configuration.
+
+### For Component Development
+
+When creating new components, you can import the global variables:
+
+```scss
+@import '../../../styles/variables';
+@import '../../../styles/review_variables';
+```
+
+Or use the main index file:
+
+```scss
+@import '../../../styles/index';
+```
+
+## Variables
+
+### Color Variables
+
+All color variables follow the naming convention:
+- `$color-text-base-*` - Text colors
+- `$color-icon-base-*` - Icon colors  
+- `$color-surface-input-*` - Input surface colors
+- `$color-inverse-*` - Dark theme colors
+
+### Adding New Variables
+
+1. Add new variables to the appropriate `_variables.scss` file
+2. Import them in `index.scss` if they should be globally available
+3. Update this README with documentation
+
+## Build Configuration
+
+The styles are configured in:
+- `angular.json` - Storybook and build configurations
+- `ng-package.json` - Library build includes
+- `public-api.ts` - Exports for TypeScript access 

package/src/styles/_variables.scss

@@ -0,0 +1,57 @@
+$color-text-base-negative: #df3c3c;
+$color-text-base-heading: #424242;
+$color-text-base-content: #2f2f2f;
+$color-text-base-content-subtle: #919191;
+$color-text-base-inverse: #ffffff;
+
+$color-icon-base-neutral: #919191;
+$color-icon-base-negative: #e66767;
+$color-icon-base-positive: #6692f1;
+$color-icon-base-inverse: #ffffffb2;
+$color-icon-base-disable: #cccccc;
+
+$color-surface-input-neutral: #eeeeee;
+$color-surface-input-neutral-hover: #dadada;
+$color-surface-input-neutral-focus: #1d1d1d;
+
+$color-surface-input-positive: #e9effd;
+$color-surface-input-positive-hover: #bed0f9;
+$color-surface-input-positive-focus: #0b49d1;
+
+$color-surface-input-negative: #fbe9e9;
+$color-surface-input-negative-hover: #f4bebe;
+$color-surface-input-negative-focus: #c20c0c;
+
+$color-surface-input-disable: #f7f7f7;
+
+$color-inverse-text-base-negative: #ed9292;
+$color-inverse-icon-base-neutral: #aaaaaa;
+$color-inverse-icon-base-negative: #ed9292;
+$color-inverse-icon-base-positive: #92b1f5;
+$color-inverse-icon-base-disable: #6c6c6c;
+$color-inverse-surface-input-neutral: #424242;
+$color-inverse-surface-input-neutral-hover: #6c6c6c;
+$color-inverse-surface-input-neutral-focus: #dadada;
+$color-inverse-surface-input-positive-no-percent: #3b73ed;
+$color-inverse-surface-input-positive: #3b73ed33;
+$color-inverse-surface-input-positive-hover: #2f519a;
+$color-inverse-surface-input-negative: #df3c3c33;
+$color-inverse-surface-input-negative-hover: #923030;
+$color-inverse-surface-input-disable: #42424266;
+
+$color-pdf: #e66767;
+$color-image: #fab15c;
+$color-video: #b370f0;
+
+$color-pdf-opacity: #df3c3c66;
+$color-image-opacity: #f89b2e66;
+$color-video-opacity: #9e47ec66;
+
+$color-light-gray: #f9f9f9;
+
+// Font weights
+$font-regular: 400;
+$font-medium: 500;
+$font-semibold: 600;
+$font-bold: 700;
+$font-extrabold: 800;