@ivds/core 0.1.1 → 1.1.0

package/lib/components/alert/alert.css

@@ -0,0 +1,84 @@
+.ivds-alert {
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --accent-color: var(--ivds-border-subtle, #e2e7ec);
+  --color: var(--ivds-text-secondary, #36414f);
+  --border-radius: var(--ivds-radius-s, 0.125rem);
+  --padding: var(--spacing-4, 1rem);
+  display: flex;
+  align-items: flex-start;
+  padding: var(--padding);
+  border: 1px solid var(--border-color);
+  border-left-width: 4px;
+  border-left-color: var(--accent-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--color);
+  position: relative;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+}
+.ivds-alert__icon {
+  flex-shrink: 0;
+  margin-right: var(--spacing-3, 0.75rem);
+  margin-top: calc(var(--lineHeight-relaxed, 1.625) * 0.1em);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ivds-alert__body {
+  flex: 1;
+}
+.ivds-alert__title {
+  font-weight: var(--fontWeight-bold, 700);
+  margin-bottom: var(--spacing-1, 0.25rem);
+  display: block;
+}
+.ivds-alert__content {
+  font-size: var(--fontSize-sm, 0.875rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-alert--info {
+  --background-color: var(--color-semantic-info-50, #edf4ff);
+  --border-color: var(--color-semantic-info-600, #0050c8);
+  --accent-color: var(--color-semantic-info-600, #0050c8);
+  --color: var(--color-semantic-info-700, #003d99);
+}
+.ivds-alert--info .ivds-alert__icon {
+  color: var(--accent-color);
+}
+.ivds-alert--success {
+  --background-color: var(--color-semantic-success-50, #edf9f4);
+  --border-color: var(--color-semantic-success-600, #0f6f4a);
+  --accent-color: var(--color-semantic-success-600, #0f6f4a);
+  --color: var(--color-semantic-success-700, #0a573a);
+}
+.ivds-alert--success .ivds-alert__icon {
+  color: var(--accent-color);
+}
+.ivds-alert--warning {
+  --background-color: var(--color-semantic-warning-50, #fff8eb);
+  --border-color: var(--color-semantic-warning-600, #a76009);
+  --accent-color: var(--color-semantic-warning-600, #a76009);
+  --color: var(--color-semantic-warning-700, #834b08);
+}
+.ivds-alert--warning .ivds-alert__icon {
+  color: var(--accent-color);
+}
+.ivds-alert--error {
+  --background-color: var(--color-semantic-error-50, #fff1f2);
+  --border-color: var(--color-semantic-error-600, #b72a41);
+  --accent-color: var(--color-semantic-error-600, #b72a41);
+  --color: var(--color-semantic-error-700, #922036);
+}
+.ivds-alert--error .ivds-alert__icon {
+  color: var(--accent-color);
+}
+.ivds-alert--orange {
+  --background-color: var(--color-brand-primary-50, #fef5ee);
+  --border-color: var(--color-brand-primary-600, #b34a00);
+  --accent-color: var(--color-brand-primary-600, #b34a00);
+  --color: var(--color-brand-primary-900, #562400);
+}
+.ivds-alert--orange .ivds-alert__icon {
+  color: var(--accent-color);
+}

package/lib/components/alert/alert.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alert/alert.scss%23sass","../../../src/components/alert/_alert-mixin.scss","../../../src/components/alert/alert.scss"],"names":[],"mappings":"AAEA;ECGE,kDAAA;ECHF,kDAAA;EDKE,kDAAA;EACA,4CAAA;EACA,+CAAA;EACA,iCAAA;EAEA,aAAA;EACA,uBAAA;EACA,uBAAA;EACA,qCAAA;EACA,sBAAA;EACA,sCAAA;EACA,mCAAA;EACA,yCAAA;EACA,mBAAA;EACA,kBAAA;EACA,6DAAA;ACJF;AFbE;EC2CA,cAAA;EACA,uCAAA;EACA,0DAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;AC3BF;AFjBE;EACE,OAAA;AEmBJ;AFhBE;ECwBA,wCAAA;EACA,wCAAA;EACA,cAAA;ACLF;AFjBE;EC0BA,uCAAA;EACA,6CAAA;ACNF;AFhBE;ECIA,0DAAA;EACA,uDAAA;EACA,uDAAA;EACA,gDAAA;ACeF;ADbE;EACE,0BAAA;ACeJ;AFjBE;ECJA,6DAAA;EACA,0DAAA;EACA,0DAAA;EACA,mDAAA;ACwBF;ADtBE;EACE,0BAAA;ACwBJ;AFlBE;ECZA,6DAAA;EACA,0DAAA;EACA,0DAAA;ECiCF,mDAAA;AACA;AD/BE;EACE,0BAAA;ACiCJ;AFnBE;ECpBA,2DAAA;EACA,wDAAA;EACA,wDAAA;EACA,iDAAA;AC0CF;ADxCE;EACE,0BAAA;AC0CJ;AFpBE;EC5BA,0DAAA;EACA,uDAAA;EACA,uDAAA;EACA,gDAAA;ACmDF;ADjDE;EACE,0BAAA;ACmDJ","file":"alert.css","sourcesContent":["@use 'alert-mixin' as alert;\n\n.ivds-alert {\n  @include alert.alert-base;\n  \n  &__icon {\n    @include alert.alert-icon;\n  }\n  \n  &__body {\n    flex: 1;\n  }\n  \n  &__title {\n    @include alert.alert-title;\n  }\n  \n  &__content {\n    @include alert.alert-content;\n  }\n  \n  // Variants\n  &--info {\n    @include alert.alert-variant(\n      var(--color-semantic-info-50, #edf4ff),\n      var(--color-semantic-info-600, #0050c8),\n      var(--color-semantic-info-700, #003d99)\n    );\n  }\n  \n  &--success {\n    @include alert.alert-variant(\n      var(--color-semantic-success-50, #edf9f4),\n      var(--color-semantic-success-600, #0f6f4a),\n      var(--color-semantic-success-700, #0a573a)\n    );\n  }\n  \n  &--warning {\n    @include alert.alert-variant(\n      var(--color-semantic-warning-50, #fff8eb),\n      var(--color-semantic-warning-600, #a76009),\n      var(--color-semantic-warning-700, #834b08)\n    );\n  }\n  \n  &--error {\n    @include alert.alert-variant(\n      var(--color-semantic-error-50, #fff1f2),\n      var(--color-semantic-error-600, #b72a41),\n      var(--color-semantic-error-700, #922036)\n    );\n  }\n  \n  &--orange {\n    @include alert.alert-variant(\n      var(--color-brand-primary-50, #fef5ee),\n      var(--color-brand-primary-600, #b34a00),\n      var(--color-brand-primary-900, #562400)\n    );\n  }\n}\n","// Alert component mixins and private styles\n// Clear institutional banners for contextual messages.\n\n@mixin alert-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --accent-color: var(--ivds-border-subtle, #e2e7ec);\n  --color: var(--ivds-text-secondary, #36414f);\n  --border-radius: var(--ivds-radius-s, 0.125rem);\n  --padding: var(--spacing-4, 1rem);\n\n  display: flex;\n  align-items: flex-start;\n  padding: var(--padding);\n  border: 1px solid var(--border-color);\n  border-left-width: 4px;\n  border-left-color: var(--accent-color);\n  border-radius: var(--border-radius);\n  background-color: var(--background-color);\n  color: var(--color);\n  position: relative;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n}\n\n@mixin alert-variant($bg-color, $accent-color, $text-color) {\n  --background-color: #{$bg-color};\n  --border-color: #{$accent-color};\n  --accent-color: #{$accent-color};\n  --color: #{$text-color};\n\n  .ivds-alert__icon {\n    color: var(--accent-color);\n  }\n}\n\n@mixin alert-title {\n  font-weight: var(--fontWeight-bold, 700);\n  margin-bottom: var(--spacing-1, 0.25rem);\n  display: block;\n}\n\n@mixin alert-content {\n  font-size: var(--fontSize-sm, 0.875rem);\n  line-height: var(--lineHeight-relaxed, 1.625);\n}\n\n@mixin alert-icon {\n  flex-shrink: 0;\n  margin-right: var(--spacing-3, 0.75rem);\n  margin-top: calc(var(--lineHeight-relaxed, 1.625) * 0.1em); \n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n","@use 'alert-mixin' as alert;\n\n.ivds-alert {\n  @include alert.alert-base;\n  \n  &__icon {\n    @include alert.alert-icon;\n  }\n  \n  &__body {\n    flex: 1;\n  }\n  \n  &__title {\n    @include alert.alert-title;\n  }\n  \n  &__content {\n    @include alert.alert-content;\n  }\n  \n  // Variants\n  &--info {\n    @include alert.alert-variant(\n      var(--color-semantic-info-50, #edf4ff),\n      var(--color-semantic-info-600, #0050c8),\n      var(--color-semantic-info-700, #003d99)\n    );\n  }\n  \n  &--success {\n    @include alert.alert-variant(\n      var(--color-semantic-success-50, #edf9f4),\n      var(--color-semantic-success-600, #0f6f4a),\n      var(--color-semantic-success-700, #0a573a)\n    );\n  }\n  \n  &--warning {\n    @include alert.alert-variant(\n      var(--color-semantic-warning-50, #fff8eb),\n      var(--color-semantic-warning-600, #a76009),\n      var(--color-semantic-warning-700, #834b08)\n    );\n  }\n  \n  &--error {\n    @include alert.alert-variant(\n      var(--color-semantic-error-50, #fff1f2),\n      var(--color-semantic-error-600, #b72a41),\n      var(--color-semantic-error-700, #922036)\n    );\n  }\n  \n  &--orange {\n    @include alert.alert-variant(\n      var(--color-brand-primary-50, #fef5ee),\n      var(--color-brand-primary-600, #b34a00),\n      var(--color-brand-primary-900, #562400)\n    );\n  }\n}\n"]}

package/lib/components/alert/alert.min.css

@@ -0,0 +1 @@
+.ivds-alert{--background-color:var(--ivds-surface-base,#fff);--border-color:var(--ivds-border-subtle,#e2e7ec);--accent-color:var(--ivds-border-subtle,#e2e7ec);--color:var(--ivds-text-secondary,#36414f);--border-radius:var(--ivds-radius-s,0.125rem);--padding:var(--spacing-4,1rem);align-items:flex-start;background-color:var(--background-color);border-left-color:var(--border-color);border-left-width:1px;border:1px solid var(--border-color);border-left:4px solid var(--accent-color);border-radius:var(--border-radius);color:var(--color);display:flex;font-family:var(--fontFamily-primary,system-ui,sans-serif);padding:var(--padding);position:relative}.ivds-alert__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-right:var(--spacing-3,.75rem);margin-top:calc(var(--lineHeight-relaxed, 1.625) * .1em)}.ivds-alert__body{flex:1}.ivds-alert__title{display:block;font-weight:var(--fontWeight-bold,700);margin-bottom:var(--spacing-1,.25rem)}.ivds-alert__content{font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625)}.ivds-alert--info{--background-color:var(--color-semantic-info-50,#edf4ff);--border-color:var(--color-semantic-info-600,#0050c8);--accent-color:var(--color-semantic-info-600,#0050c8);--color:var(--color-semantic-info-700,#003d99)}.ivds-alert--info .ivds-alert__icon{color:var(--accent-color)}.ivds-alert--success{--background-color:var(--color-semantic-success-50,#edf9f4);--border-color:var(--color-semantic-success-600,#0f6f4a);--accent-color:var(--color-semantic-success-600,#0f6f4a);--color:var(--color-semantic-success-700,#0a573a)}.ivds-alert--success .ivds-alert__icon{color:var(--accent-color)}.ivds-alert--warning{--background-color:var(--color-semantic-warning-50,#fff8eb);--border-color:var(--color-semantic-warning-600,#a76009);--accent-color:var(--color-semantic-warning-600,#a76009);--color:var(--color-semantic-warning-700,#834b08)}.ivds-alert--warning .ivds-alert__icon{color:var(--accent-color)}.ivds-alert--error{--background-color:var(--color-semantic-error-50,#fff1f2);--border-color:var(--color-semantic-error-600,#b72a41);--accent-color:var(--color-semantic-error-600,#b72a41);--color:var(--color-semantic-error-700,#922036)}.ivds-alert--error .ivds-alert__icon{color:var(--accent-color)}.ivds-alert--orange{--background-color:var(--color-brand-primary-50,#fef5ee);--border-color:var(--color-brand-primary-600,#b34a00);--accent-color:var(--color-brand-primary-600,#b34a00);--color:var(--color-brand-primary-900,#562400)}.ivds-alert--orange .ivds-alert__icon{color:var(--accent-color)}

package/lib/components/alert/alert.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alert/alert.scss%23sass","../../../src/components/alert/_alert-mixin.scss","../../../src/components/alert/alert.scss"],"names":[],"mappings":"AAEA,YCGE,gDAAA,CCHF,gDAAA,CDKE,gDAAA,CACA,0CAAA,CACA,6CAAA,CACA,+BAAA,CAGA,sBAAA,CAMA,wCAAA,CAJA,qCAAA,CAAA,qBAAA,CAEA,oCAAA,CAAA,yCAAA,CACA,kCAAA,CAEA,kBAAA,CARA,YAAA,CAUA,0DAAA,CARA,sBAAA,CAOA,iBCHF,CFbE,kBC+CA,kBAAA,CADA,mBAAA,CAHA,aAAA,CAKA,sBAAA,CAJA,oCAAA,CACA,wDCxBF,CFjBE,kBACE,MEmBJ,CFhBE,mBC0BA,aAAA,CAFA,sCAAA,CACA,qCCJF,CFjBE,qBC0BA,oCAAA,CACA,2CCNF,CFhBE,kBCIA,wDAAA,CACA,qDAAA,CACA,qDAAA,CACA,8CCeF,CDbE,oCACE,yBCeJ,CFjBE,qBCJA,2DAAA,CACA,wDAAA,CACA,wDAAA,CACA,iDCwBF,CDtBE,uCACE,yBCwBJ,CFlBE,qBCZA,2DAAA,CACA,wDAAA,CACA,wDAAA,CCiCF,iDACA,CD/BE,uCACE,yBCiCJ,CFnBE,mBCpBA,yDAAA,CACA,sDAAA,CACA,sDAAA,CACA,+CC0CF,CDxCE,qCACE,yBC0CJ,CFpBE,oBC5BA,wDAAA,CACA,qDAAA,CACA,qDAAA,CACA,8CCmDF,CDjDE,sCACE,yBCmDJ","file":"alert.min.css","sourcesContent":["@use 'alert-mixin' as alert;\n\n.ivds-alert {\n  @include alert.alert-base;\n  \n  &__icon {\n    @include alert.alert-icon;\n  }\n  \n  &__body {\n    flex: 1;\n  }\n  \n  &__title {\n    @include alert.alert-title;\n  }\n  \n  &__content {\n    @include alert.alert-content;\n  }\n  \n  // Variants\n  &--info {\n    @include alert.alert-variant(\n      var(--color-semantic-info-50, #edf4ff),\n      var(--color-semantic-info-600, #0050c8),\n      var(--color-semantic-info-700, #003d99)\n    );\n  }\n  \n  &--success {\n    @include alert.alert-variant(\n      var(--color-semantic-success-50, #edf9f4),\n      var(--color-semantic-success-600, #0f6f4a),\n      var(--color-semantic-success-700, #0a573a)\n    );\n  }\n  \n  &--warning {\n    @include alert.alert-variant(\n      var(--color-semantic-warning-50, #fff8eb),\n      var(--color-semantic-warning-600, #a76009),\n      var(--color-semantic-warning-700, #834b08)\n    );\n  }\n  \n  &--error {\n    @include alert.alert-variant(\n      var(--color-semantic-error-50, #fff1f2),\n      var(--color-semantic-error-600, #b72a41),\n      var(--color-semantic-error-700, #922036)\n    );\n  }\n  \n  &--orange {\n    @include alert.alert-variant(\n      var(--color-brand-primary-50, #fef5ee),\n      var(--color-brand-primary-600, #b34a00),\n      var(--color-brand-primary-900, #562400)\n    );\n  }\n}\n","// Alert component mixins and private styles\n// Clear institutional banners for contextual messages.\n\n@mixin alert-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --accent-color: var(--ivds-border-subtle, #e2e7ec);\n  --color: var(--ivds-text-secondary, #36414f);\n  --border-radius: var(--ivds-radius-s, 0.125rem);\n  --padding: var(--spacing-4, 1rem);\n\n  display: flex;\n  align-items: flex-start;\n  padding: var(--padding);\n  border: 1px solid var(--border-color);\n  border-left-width: 4px;\n  border-left-color: var(--accent-color);\n  border-radius: var(--border-radius);\n  background-color: var(--background-color);\n  color: var(--color);\n  position: relative;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n}\n\n@mixin alert-variant($bg-color, $accent-color, $text-color) {\n  --background-color: #{$bg-color};\n  --border-color: #{$accent-color};\n  --accent-color: #{$accent-color};\n  --color: #{$text-color};\n\n  .ivds-alert__icon {\n    color: var(--accent-color);\n  }\n}\n\n@mixin alert-title {\n  font-weight: var(--fontWeight-bold, 700);\n  margin-bottom: var(--spacing-1, 0.25rem);\n  display: block;\n}\n\n@mixin alert-content {\n  font-size: var(--fontSize-sm, 0.875rem);\n  line-height: var(--lineHeight-relaxed, 1.625);\n}\n\n@mixin alert-icon {\n  flex-shrink: 0;\n  margin-right: var(--spacing-3, 0.75rem);\n  margin-top: calc(var(--lineHeight-relaxed, 1.625) * 0.1em); \n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n","@use 'alert-mixin' as alert;\n\n.ivds-alert {\n  @include alert.alert-base;\n  \n  &__icon {\n    @include alert.alert-icon;\n  }\n  \n  &__body {\n    flex: 1;\n  }\n  \n  &__title {\n    @include alert.alert-title;\n  }\n  \n  &__content {\n    @include alert.alert-content;\n  }\n  \n  // Variants\n  &--info {\n    @include alert.alert-variant(\n      var(--color-semantic-info-50, #edf4ff),\n      var(--color-semantic-info-600, #0050c8),\n      var(--color-semantic-info-700, #003d99)\n    );\n  }\n  \n  &--success {\n    @include alert.alert-variant(\n      var(--color-semantic-success-50, #edf9f4),\n      var(--color-semantic-success-600, #0f6f4a),\n      var(--color-semantic-success-700, #0a573a)\n    );\n  }\n  \n  &--warning {\n    @include alert.alert-variant(\n      var(--color-semantic-warning-50, #fff8eb),\n      var(--color-semantic-warning-600, #a76009),\n      var(--color-semantic-warning-700, #834b08)\n    );\n  }\n  \n  &--error {\n    @include alert.alert-variant(\n      var(--color-semantic-error-50, #fff1f2),\n      var(--color-semantic-error-600, #b72a41),\n      var(--color-semantic-error-700, #922036)\n    );\n  }\n  \n  &--orange {\n    @include alert.alert-variant(\n      var(--color-brand-primary-50, #fef5ee),\n      var(--color-brand-primary-600, #b34a00),\n      var(--color-brand-primary-900, #562400)\n    );\n  }\n}\n"]}